@jackuait/blok 0.10.11 → 0.11.0

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

@@ -1,123 +1,48 @@
-import { twMerge, twJoin } from '../tw';
+import { 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>`;
+import type { NotifierOptions, ConfirmNotifierOptions, PromptNotifierOptions, NotifierPosition } from './types';
+import { DEFAULT_NOTIFIER_POSITION } from './types';
 
 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]'
-  ),
+  /**
+   * The wrapper class is built dynamically per-position.
+   * See getPositionClasses().
+   */
+  wrapper: 'fixed z-[9999]',
   notification: twJoin(
-    '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'
+    'relative flex items-center justify-center mt-2 py-[10px] px-6',
+    'bg-[#1c1c1e] text-[#f5f5f5]',
+    'text-[15px] font-normal leading-[1.4] tracking-[-0.015em] wrap-break-word overflow-hidden',
+    'rounded-[14px]',
+    'shadow-[0_8px_32px_rgba(0,0,0,0.4),0_1px_4px_rgba(0,0,0,0.25)]',
+    'border border-white/[0.08]'
   ),
-  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-[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]',
-  btn: 'border-none rounded-[3px] text-[13px] py-[5px] px-2.5 cursor-pointer outline-hidden last:ml-2.5',
-  okBtn: 'bg-[#34c992] shadow-[0_1px_1px_0_rgba(18,49,35,0.05)] text-white hover:bg-[#2db583]',
-  cancelBtn: 'bg-[#f2f5f7] shadow-[0_2px_1px_0_rgba(16,19,29,0)] text-[#656b7c] hover:bg-[#e9ecee]',
+  btnsWrapper: 'flex flex-row flex-nowrap mt-[8px] gap-2',
+  btn: 'border-none rounded-[7px] text-[13px] py-[5px] px-3 cursor-pointer outline-hidden font-medium',
+  okBtn: 'bg-white/15 text-[#f5f5f5] hover:bg-white/25',
+  cancelBtn: 'bg-white/8 text-[#a1a1aa] hover:bg-white/12',
   input: twJoin(
-    'max-w-[130px] py-[5px] px-2.5 bg-[#f7f7f7] border-0 rounded-[3px]',
-    '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]!'
-  ),
-  errorNotification: twJoin(
-    'bg-[#fffbfb]!',
-    'before:bg-[#fb5d5d]!'
+    'max-w-[140px] py-[5px] px-3 bg-white/10 border border-white/10 rounded-[7px]',
+    'text-[13px] text-[#e4e4e7] outline-hidden',
+    'placeholder:text-white/30 focus:border-white/20'
   ),
-  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.
+ * Maps NotifierPosition to Tailwind positioning classes.
  */
-export const createProgressBar = (style?: string, time?: number): HTMLElement => {
-  const bar = document.createElement('div');
-
-  const progressColorMap: Record<string, string> = {
-    success: CSS.progressSuccess,
-    error: CSS.progressError,
+export const getPositionClasses = (position: NotifierPosition = DEFAULT_NOTIFIER_POSITION): string => {
+  const map: Record<NotifierPosition, string> = {
+    'bottom-left': 'bottom-5 left-5',
+    'bottom-right': 'bottom-5 right-5',
+    'bottom-center': 'bottom-5 left-1/2 -translate-x-1/2',
+    'top-left': 'top-5 left-5',
+    'top-right': 'top-5 right-5',
+    'top-center': 'top-5 left-1/2 -translate-x-1/2',
   };
 
-  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;
+  return map[position] ?? map['bottom-left'];
 };
 
 /**
@@ -128,19 +53,7 @@ export const alert = (options: NotifierOptions): HTMLElement => {
   const notify = document.createElement('DIV');
   const style = options.style;
 
-  const getStyleClasses = (): string => {
-    if (style === 'success') {
-      return CSS.successNotification;
-    }
-
-    if (style === 'error') {
-      return CSS.errorNotification;
-    }
-
-    return '';
-  };
-
-  notify.className = twMerge(CSS.notification, getStyleClasses());
+  notify.className = CSS.notification;
 
   if (style) {
     notify.setAttribute('data-blok-testid', `notification-${style}`);
@@ -148,12 +61,7 @@ export const alert = (options: NotifierOptions): HTMLElement => {
     notify.setAttribute('data-blok-testid', 'notification');
   }
 
-  // Icon
-  const icon = createIcon(style);
-
-  notify.appendChild(icon);
-
-  // Message wrapper (flex child that holds message + buttons)
+  // Message wrapper
   const messageWrapper = document.createElement('div');
 
   messageWrapper.className = CSS.messageWrapper;
@@ -161,12 +69,6 @@ export const alert = (options: NotifierOptions): HTMLElement => {
   messageWrapper.innerHTML = options.message;
   notify.appendChild(messageWrapper);
 
-  // Close button
-  const cross = createCloseButton();
-
-  cross.addEventListener('click', () => notify.remove());
-  notify.appendChild(cross);
-
   return notify;
 };
 
@@ -180,7 +82,6 @@ export const confirm = (options: ConfirmNotifierOptions): HTMLElement => {
   const btnsWrapper = document.createElement('div');
   const okBtn = document.createElement('button');
   const cancelBtn = document.createElement('button');
-  const crossBtn = notify.querySelector('[data-blok-testid="notification-cross"]');
   const cancelHandler = options.cancelHandler;
   const okHandler = options.okHandler;
 
@@ -200,10 +101,6 @@ export const confirm = (options: ConfirmNotifierOptions): HTMLElement => {
     cancelBtn.addEventListener('click', cancelHandler);
   }
 
-  if (cancelHandler && typeof cancelHandler === 'function' && crossBtn) {
-    crossBtn.addEventListener('click', cancelHandler);
-  }
-
   if (okHandler && typeof okHandler === 'function') {
     okBtn.addEventListener('click', okHandler);
   }
@@ -214,7 +111,6 @@ export const confirm = (options: ConfirmNotifierOptions): HTMLElement => {
   btnsWrapper.appendChild(okBtn);
   btnsWrapper.appendChild(cancelBtn);
 
-  // Append buttons to the message wrapper so they flow under the message text
   if (messageWrapper) {
     messageWrapper.appendChild(btnsWrapper);
   } else {
@@ -234,7 +130,6 @@ export const prompt = (options: PromptNotifierOptions): HTMLElement => {
   const btnsWrapper = document.createElement('div');
   const okBtn = document.createElement('button');
   const input = document.createElement('input');
-  const crossBtn = notify.querySelector('[data-blok-testid="notification-cross"]');
   const cancelHandler = options.cancelHandler;
   const okHandler = options.okHandler;
 
@@ -258,8 +153,12 @@ export const prompt = (options: PromptNotifierOptions): HTMLElement => {
     input.type = options.inputType;
   }
 
-  if (cancelHandler && typeof cancelHandler === 'function' && crossBtn) {
-    crossBtn.addEventListener('click', cancelHandler);
+  if (cancelHandler && typeof cancelHandler === 'function') {
+    const crossBtn = notify.querySelector('[data-blok-testid="notification-cross"]');
+
+    if (crossBtn) {
+      crossBtn.addEventListener('click', cancelHandler);
+    }
   }
 
   if (okHandler && typeof okHandler === 'function') {
@@ -273,7 +172,6 @@ export const prompt = (options: PromptNotifierOptions): HTMLElement => {
   btnsWrapper.appendChild(input);
   btnsWrapper.appendChild(okBtn);
 
-  // Append to message wrapper for proper flex layout
   if (messageWrapper) {
     messageWrapper.appendChild(btnsWrapper);
   } else {
@@ -283,11 +181,13 @@ export const prompt = (options: PromptNotifierOptions): HTMLElement => {
   return notify;
 };
 
-export const getWrapper = (): HTMLElement => {
+export const getWrapper = (position: NotifierPosition = DEFAULT_NOTIFIER_POSITION): HTMLElement => {
   const wrapper = document.createElement('DIV');
+  const positionClasses = getPositionClasses(position);
 
-  wrapper.className = CSS.wrapper;
+  wrapper.className = twJoin(CSS.wrapper, positionClasses);
   wrapper.setAttribute('data-blok-testid', 'notifier-container');
+  wrapper.setAttribute('data-blok-position', position);
 
   return wrapper;
 };

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

@@ -1,13 +1,29 @@
-import { alert, confirm, createProgressBar, getWrapper, prompt } from './draw';
-import type { NotifierOptions, ConfirmNotifierOptions, PromptNotifierOptions } from './types';
+import { alert, confirm, getWrapper, prompt } from './draw';
+import type { NotifierOptions, ConfirmNotifierOptions, PromptNotifierOptions, NotifierPosition } from './types';
+import { DEFAULT_NOTIFIER_POSITION } from './types';
 
 const DEFAULT_TIME = 8000;
 
+/**
+ * Returns the slide-in animation class based on position.
+ * Top positions slide down, bottom positions slide up.
+ */
+const getSlideInClass = (position: NotifierPosition): string => {
+  return position.startsWith('top') ? 'animate-notify-slide-in-top' : 'animate-notify-slide-in';
+};
+
+/**
+ * Returns the slide-out animation class based on position.
+ */
+const getSlideOutClass = (position: NotifierPosition): string => {
+  return position.startsWith('top') ? 'animate-notify-slide-out-top' : 'animate-notify-slide-out';
+};
+
 /**
  * Applies the exit animation and removes the element after it finishes.
  */
-const dismissWithAnimation = (element: HTMLElement): void => {
-  element.classList.add('animate-notify-slide-out');
+const dismissWithAnimation = (element: HTMLElement, position: NotifierPosition): void => {
+  element.classList.add(getSlideOutClass(position));
 
   element.addEventListener('animationend', () => {
     element.remove();
@@ -15,37 +31,72 @@ const dismissWithAnimation = (element: HTMLElement): void => {
 };
 
 /**
- * Prepare wrapper for notifications
+ * Fades and scales the element out quickly (replacement case), then calls onDone.
+ */
+const swapOut = (element: HTMLElement, onDone: () => void): void => {
+  element.classList.add('animate-notify-swap-out');
+
+  element.addEventListener('animationend', () => {
+    element.remove();
+    onDone();
+  }, { once: true });
+};
+
+/**
+ * Prepare wrapper for notifications.
+ * If position changes, removes the old wrapper and creates a fresh one.
+ * @param {NotifierPosition} position - desired position
  * @returns {HTMLElement}
  */
-const prepare_ = (): HTMLElement => {
+const prepare_ = (position: NotifierPosition = DEFAULT_NOTIFIER_POSITION): HTMLElement => {
   const existingWrapper = document.querySelector('[data-blok-testid="notifier-container"]') as HTMLElement;
 
   if (existingWrapper) {
-    return existingWrapper;
+    // If position has changed, recreate the wrapper at the new location
+    if (existingWrapper.getAttribute('data-blok-position') !== position) {
+      existingWrapper.remove();
+    } else {
+      return existingWrapper;
+    }
   }
 
-  const wrapper = getWrapper();
+  const wrapper = getWrapper(position);
 
   document.body.appendChild(wrapper);
 
   return wrapper;
 };
 
+/**
+ * Appends the notification to the wrapper and starts its auto-dismiss timer.
+ */
+const appendNotify = (wrapper: HTMLElement, notify: HTMLElement, position: NotifierPosition, time: number): void => {
+  wrapper.appendChild(notify);
+  notify.classList.add(getSlideInClass(position));
+  notify.setAttribute('data-blok-bounce-in', 'true');
+
+  window.setTimeout(() => {
+    // Guard: element may have already been replaced
+    if (notify.isConnected) {
+      dismissWithAnimation(notify, position);
+    }
+  }, time);
+};
+
 /**
  * Show new notification
  * @param {NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions} options - notification options
+ * @param {NotifierPosition} position - notification container position
  */
-export const show = (options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions): void => {
+export const show = (options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions, position: NotifierPosition = DEFAULT_NOTIFIER_POSITION): void => {
   if (!options.message) {
     return;
   }
 
-  const wrapper = prepare_();
-
+  const wrapper = prepare_(position);
   const time = options.time || DEFAULT_TIME;
 
-  const notify: HTMLElement = (() => {
+  const buildNotify = (): HTMLElement => {
     const type = options.type;
 
     if (type === 'confirm') {
@@ -56,36 +107,24 @@ export const show = (options: NotifierOptions | ConfirmNotifierOptions | PromptN
       return prompt(options as PromptNotifierOptions);
     }
 
-    // type is 'alert' or undefined
-    const alertElement = alert(options);
-
-    // Add progress bar for auto-dismissing alerts
-    const progressBar = createProgressBar(options.style, time);
+    return alert(options);
+  };
 
-    alertElement.appendChild(progressBar);
+  const existing = wrapper.querySelector<HTMLElement>('[data-blok-testid]');
 
-    // 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));
-    }
+  if (existing) {
+    // Cancel any in-progress swap-out on the existing element so we don't double-fire
+    existing.classList.remove('animate-notify-swap-out');
 
-    window.setTimeout(() => {
-      dismissWithAnimation(alertElement);
-    }, time);
+    swapOut(existing, () => {
+      const notify = buildNotify();
 
-    return alertElement;
-  })();
+      appendNotify(wrapper, notify, position, time);
+    });
+  } else {
+    const notify = buildNotify();
 
-  if (wrapper && notify) {
-    wrapper.appendChild(notify);
-    notify.className = `${notify.className} animate-notify-slide-in`;
-    notify.setAttribute('data-blok-bounce-in', 'true');
+    appendNotify(wrapper, notify, position, time);
   }
 };
 

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

@@ -1 +1,4 @@
 export type * from '@/types/configs/notifier';
+export type { NotifierPosition } from '@/types/configs/notifier';
+
+export const DEFAULT_NOTIFIER_POSITION = 'bottom-center' as const;

package/src/components/utils/notifier.ts

@@ -1,10 +1,11 @@
 /**
  * Use local module for notifications
  */
-import type { ConfirmNotifierOptions, NotifierOptions, PromptNotifierOptions } from './notifier/types';
+import type { ConfirmNotifierOptions, NotifierOptions, PromptNotifierOptions, NotifierPosition } from './notifier/types';
+import { DEFAULT_NOTIFIER_POSITION } from './notifier/types';
 
 type NotifierModule = {
-  show: (options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions) => void;
+  show: (options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions, position?: NotifierPosition) => void;
 };
 
 /**
@@ -21,6 +22,18 @@ export class Notifier {
    */
   private loadingPromise: Promise<NotifierModule> | null = null;
 
+  /**
+   * Default position for notifications
+   */
+  private position: NotifierPosition;
+
+  /**
+   * @param position - notification container position
+   */
+  constructor(position: NotifierPosition = DEFAULT_NOTIFIER_POSITION) {
+    this.position = position;
+  }
+
   /**
    * Lazily load notifier only when necessary.
    * @returns {Promise<NotifierModule>} loaded notifier module
@@ -60,7 +73,7 @@ export class Notifier {
   public show(options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions): void {
     void this.loadNotifierModule()
       .then((notifier) => {
-        notifier.show(options);
+        notifier.show(options, this.position);
       })
       .catch((error) => {
         console.error('[Blok] Failed to display notification. Reason:', error);
@@ -74,4 +87,4 @@ export class Notifier {
   private isNotifierModule(candidate: unknown): candidate is NotifierModule {
     return typeof candidate === 'object' && candidate !== null && 'show' in candidate && typeof (candidate as { show?: unknown }).show === 'function';
   }
-}
+}

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

@@ -321,12 +321,24 @@ export class PopoverDesktop extends PopoverAbstract {
    * Calculates position for the popover
    */
   private calculatePosition(): { top: number; left: number; openTop: boolean; openLeft: boolean } {
-    const rect = this.params.position ?? this.trigger?.getBoundingClientRect();
+    const explicitPosition = this.params.position;
+    const rect = explicitPosition ?? this.trigger?.getBoundingClientRect();
 
     if (!rect) {
       return { top: 0, left: 0, openTop: false, openLeft: false };
     }
 
+    // leftAlignElement forces horizontal alignment to a block-level content
+    // element (e.g. the whole table). When the caller supplies an explicit
+    // anchor rect via updatePosition(), that rect already reflects the
+    // intended position (a caret rect or a specific cell rect) and must NOT
+    // be overridden — otherwise the popover snaps to the block's left edge
+    // and drifts hundreds of pixels away from the caret in wide containers
+    // like multi-column tables.
+    const leftAlignRect = explicitPosition === undefined
+      ? this.leftAlignElement?.getBoundingClientRect()
+      : undefined;
+
     return resolvePosition({
       anchor: rect,
       popoverSize: this.size,
@@ -334,7 +346,7 @@ export class PopoverDesktop extends PopoverAbstract {
       viewportSize: { width: window.innerWidth, height: window.innerHeight },
       scrollOffset: { x: window.scrollX, y: window.scrollY },
       offset: 8,
-      leftAlignRect: this.leftAlignElement?.getBoundingClientRect(),
+      leftAlignRect,
     });
   }
 
@@ -350,6 +362,15 @@ export class PopoverDesktop extends PopoverAbstract {
     this.flipper?.deactivate();
 
     this.previouslyHoveredItem = null;
+
+    // Clear any externally-supplied anchor rect so the next show() falls back
+    // to the trigger element unless the caller explicitly sets a new one.
+    // Also clear inline position so a stale top/left from a previous open
+    // cannot render the popover at an unexpected location if it ever becomes
+    // visible before calculatePosition() runs again.
+    this.params.position = undefined;
+    this.nodes.popover.style.top = '';
+    this.nodes.popover.style.left = '';
   };
 
   /**

package/src/styles/main.css

@@ -528,6 +528,9 @@
   --animate-notify-bounce-in: notifyBounceIn 600ms 1;
   --animate-notify-slide-in: notifySlideIn 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
   --animate-notify-slide-out: notifySlideOut 250ms cubic-bezier(0.4, 0, 1, 1) both;
+  --animate-notify-slide-in-top: notifySlideInTop 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  --animate-notify-slide-out-top: notifySlideOutTop 250ms cubic-bezier(0.4, 0, 1, 1) both;
+  --animate-notify-swap-out: notifySwapOut 140ms cubic-bezier(0.4, 0, 1, 1) both;
   --animate-notify-progress: notifyProgress linear forwards;
 
   /* Keyframes */
@@ -587,6 +590,22 @@
     100% { opacity: 0; transform: translateY(8px); }
   }
 
+  @keyframes notifySlideInTop {
+    0% { opacity: 0; transform: translateY(-16px); }
+    70% { opacity: 1; transform: translateY(2px); }
+    100% { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes notifySlideOutTop {
+    0% { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0; transform: translateY(-8px); }
+  }
+
+  @keyframes notifySwapOut {
+    0% { opacity: 1; transform: scale(1); }
+    100% { opacity: 0; transform: scale(0.94); }
+  }
+
   @keyframes notifyProgress {
     0% { width: 100%; }
     100% { width: 0%; }
@@ -1458,6 +1477,11 @@
   @apply bg-search-input-bg rounded-[10px] transition-colors duration-150 w-fit max-w-[240px] px-2;
 }
 
+[data-blok-table-cell] [data-blok-slash-search],
+[data-blok-table-cell] [data-blok-slash-search]:focus-visible {
+  @apply rounded-[6px];
+}
+
 [data-blok-slash-search]::after {
   content: attr(data-blok-slash-search);
   @apply text-gray-text font-medium text-base pointer-events-none;