seblify 0.2.0 → 0.3.0

package/dist/components/framework/overlay/tooltip/Tooltip.svelte

@@ -0,0 +1,1012 @@
+<script module lang="ts">
+  type TooltipRegistryItem = {
+    dismiss: () => void;
+  };
+
+  const uncontrolledTooltips = new Set<TooltipRegistryItem>();
+
+  function dismissOtherUncontrolledTooltips(activeItem: TooltipRegistryItem) {
+    for (const item of uncontrolledTooltips) {
+      if (item !== activeItem) {
+        item.dismiss();
+      }
+    }
+  }
+</script>
+
+<script lang="ts">
+  import type { CustomCssSize, SeblifyProps } from 'seblify';
+  import { onDestroy, onMount, tick } from 'svelte';
+  import type { Snippet } from 'svelte';
+
+  type TooltipAlignment = 'start' | 'center' | 'end' | 'top' | 'bottom';
+  type TooltipPlacement =
+    | 'top-start'
+    | 'top'
+    | 'top-end'
+    | 'end-top'
+    | 'end'
+    | 'end-bottom'
+    | 'bottom-start'
+    | 'bottom'
+    | 'bottom-end'
+    | 'start-top'
+    | 'start'
+    | 'start-bottom';
+  type TooltipSide = 'top' | 'end' | 'bottom' | 'start';
+  type TooltipTone =
+    | 'neutral'
+    | 'strong'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'info'
+    | 'inverse';
+  type TooltipInteractionSource = 'pointer' | 'focus';
+  type TooltipInteractionEvent = {
+    trigger: TooltipInteractionSource;
+    originalEvent: Event;
+  };
+  type TooltipAnimation =
+    | 'fade'
+    | 'rise'
+    | 'settle'
+    | 'pop'
+    | 'scale'
+    | 'bounce'
+    | 'none';
+  const TOOLTIP_HIDE_DELAY = 120;
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    animation?: TooltipAnimation;
+    children?: Snippet;
+    class?: string;
+    content?: string;
+    defaultVisible?: boolean;
+    gap?: number | CustomCssSize;
+    offset?: number | CustomCssSize;
+    onTooltipEnter?: (event: TooltipInteractionEvent) => void;
+    onTooltipLeave?: (event: TooltipInteractionEvent) => void;
+    onTriggerEnter?: (event: TooltipInteractionEvent) => void;
+    onTriggerLeave?: (event: TooltipInteractionEvent) => void;
+    onVisibleChange?: (visible: boolean) => void;
+    placement?: TooltipPlacement;
+    showArrow?: boolean;
+    tone?: TooltipTone;
+    tooltip?: Snippet;
+    visible?: boolean;
+  }>;
+
+  let {
+    animation = 'fade',
+    children,
+    class: className,
+    content,
+    defaultVisible = false,
+    gap,
+    offset,
+    onTooltipEnter,
+    onTooltipLeave,
+    onTriggerEnter,
+    onTriggerLeave,
+    onVisibleChange,
+    placement = 'top',
+    showArrow = true,
+    tone = 'inverse',
+    tooltip,
+    visible,
+    ...restProps
+  }: Props = $props();
+
+  function initialVisible(): boolean {
+    return defaultVisible;
+  }
+
+  let anchorElement = $state<HTMLSpanElement>();
+  let bubbleElement = $state<HTMLSpanElement>();
+  let internalVisible = $state(initialVisible());
+  let tooltipX = $state(0);
+  let tooltipY = $state(0);
+  let arrowX = $state(0);
+  let arrowY = $state(0);
+  let tooltipDirection = $state<'ltr' | 'rtl'>('ltr');
+  let instantHide = $state(false);
+  let hideTimer: ReturnType<typeof window.setTimeout> | undefined;
+  let instantHideFrame = 0;
+  let triggerHasPointer = false;
+  let triggerHasFocus = false;
+  let tooltipHasPointer = false;
+  let tooltipHasFocus = false;
+
+  const tooltipId = $props.id();
+  const configuredGap = $derived(gap ?? offset ?? 8);
+  const gapValue = $derived(cssLength(configuredGap));
+  const placementSide = $derived(getPlacementSide(placement));
+  const hasTooltip = $derived(
+    tooltip !== undefined || (content ?? '').trim().length > 0,
+  );
+  const isControlled = $derived(visible !== undefined);
+  const tooltipVisible = $derived(visible ?? internalVisible);
+
+  function cssLength(value: number | CustomCssSize): string {
+    return typeof value === 'number' ? `${Math.max(0, value)}px` : value;
+  }
+
+  function getPlacementSide(value: TooltipPlacement): TooltipSide {
+    if (value.startsWith('top')) {
+      return 'top';
+    }
+
+    if (value.startsWith('bottom')) {
+      return 'bottom';
+    }
+
+    if (value.startsWith('end')) {
+      return 'end';
+    }
+
+    return 'start';
+  }
+
+  function getPlacementAlignment(value: TooltipPlacement): TooltipAlignment {
+    if (value.endsWith('-start')) {
+      return 'start';
+    }
+
+    if (value.endsWith('-end')) {
+      return 'end';
+    }
+
+    if (value.endsWith('-top')) {
+      return 'top';
+    }
+
+    if (value.endsWith('-bottom')) {
+      return 'bottom';
+    }
+
+    return 'center';
+  }
+
+  function numericGap(): number {
+    if (typeof configuredGap === 'number') {
+      return Math.max(0, configuredGap);
+    }
+
+    if (!anchorElement) {
+      return 0;
+    }
+
+    return numericCssLength(configuredGap, anchorElement);
+  }
+
+  function numericCssLength(value: string, container: HTMLElement): number {
+    const probe = document.createElement('div');
+
+    probe.style.position = 'absolute';
+    probe.style.visibility = 'hidden';
+    probe.style.width = value;
+    container.append(probe);
+
+    const measuredLength = probe.getBoundingClientRect().width;
+
+    probe.remove();
+
+    return Math.max(0, measuredLength);
+  }
+
+  function numericArrowSize(): number {
+    if (!showArrow || !bubbleElement) {
+      return 0;
+    }
+
+    return numericCssLength('var(--tooltip-arrow-size)', bubbleElement);
+  }
+
+  function clamp(value: number, minimum: number, maximum: number): number {
+    return Math.min(Math.max(value, minimum), maximum);
+  }
+
+  function applyTooltipPosition(
+    nextTooltipX: number,
+    nextTooltipY: number,
+    nextArrowX: number,
+    nextArrowY: number,
+  ): void {
+    tooltipX = nextTooltipX;
+    tooltipY = nextTooltipY;
+    arrowX = nextArrowX;
+    arrowY = nextArrowY;
+
+    if (!bubbleElement) {
+      return;
+    }
+
+    bubbleElement.style.setProperty('--tooltip-x', `${nextTooltipX}px`);
+    bubbleElement.style.setProperty('--tooltip-y', `${nextTooltipY}px`);
+    bubbleElement.style.setProperty('--tooltip-arrow-x', `${nextArrowX}px`);
+    bubbleElement.style.setProperty('--tooltip-arrow-y', `${nextArrowY}px`);
+  }
+
+  function updateTooltipPosition(): void {
+    if (!anchorElement || !bubbleElement) {
+      return;
+    }
+
+    const anchorRect = anchorElement.getBoundingClientRect();
+    const bubbleWidth = bubbleElement.offsetWidth;
+    const bubbleHeight = bubbleElement.offsetHeight;
+    const side = getPlacementSide(placement);
+    const alignment = getPlacementAlignment(placement);
+    const distance = numericGap() + numericArrowSize();
+    const isRtl = getComputedStyle(anchorElement).direction === 'rtl';
+
+    tooltipDirection = isRtl ? 'rtl' : 'ltr';
+
+    let x = anchorRect.left + anchorRect.width / 2 - bubbleWidth / 2;
+    let y = anchorRect.top + anchorRect.height / 2 - bubbleHeight / 2;
+
+    if (side === 'top') {
+      y = anchorRect.top - distance - bubbleHeight;
+    } else if (side === 'bottom') {
+      y = anchorRect.bottom + distance;
+    } else if (side === 'start') {
+      x = isRtl
+        ? anchorRect.right + distance
+        : anchorRect.left - distance - bubbleWidth;
+    } else {
+      x = isRtl
+        ? anchorRect.left - distance - bubbleWidth
+        : anchorRect.right + distance;
+    }
+
+    if (side === 'top' || side === 'bottom') {
+      if (alignment === 'start') {
+        x = isRtl ? anchorRect.right - bubbleWidth : anchorRect.left;
+      } else if (alignment === 'end') {
+        x = isRtl ? anchorRect.left : anchorRect.right - bubbleWidth;
+      }
+    } else if (alignment === 'top') {
+      y = anchorRect.top;
+    } else if (alignment === 'bottom') {
+      y = anchorRect.bottom - bubbleHeight;
+    }
+
+    applyTooltipPosition(
+      Math.round(x),
+      Math.round(y),
+      Math.round(
+        clamp(
+          anchorRect.left + anchorRect.width / 2 - x,
+          10,
+          bubbleWidth - 10,
+        ),
+      ),
+      Math.round(
+        clamp(
+          anchorRect.top + anchorRect.height / 2 - y,
+          10,
+          bubbleHeight - 10,
+        ),
+      ),
+    );
+  }
+
+  function createPositionObserver(
+    callback: () => void,
+  ): ResizeObserver | undefined {
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+
+    const observer = new ResizeObserver(callback);
+
+    if (anchorElement) {
+      observer.observe(anchorElement);
+    }
+
+    if (bubbleElement) {
+      observer.observe(bubbleElement);
+    }
+
+    observer.observe(document.documentElement);
+
+    return observer;
+  }
+
+  function whenFontsReady(callback: () => void): void {
+    void document.fonts?.ready.then(callback);
+  }
+
+  function setInternalVisible(nextVisible: boolean): void {
+    if (isControlled || internalVisible === nextVisible) {
+      return;
+    }
+
+    internalVisible = nextVisible;
+    onVisibleChange?.(nextVisible);
+  }
+
+  function hideImmediately(): void {
+    if (isControlled || !internalVisible) {
+      return;
+    }
+
+    clearScheduledHide();
+    instantHide = true;
+    setInternalVisible(false);
+
+    cancelAnimationFrame(instantHideFrame);
+    instantHideFrame = requestAnimationFrame(() => {
+      instantHide = false;
+    });
+  }
+
+  const registryItem: TooltipRegistryItem = {
+    dismiss: hideImmediately,
+  };
+
+  function clearScheduledHide(): void {
+    if (hideTimer === undefined) {
+      return;
+    }
+
+    window.clearTimeout(hideTimer);
+    hideTimer = undefined;
+  }
+
+  function hasActiveInteraction(): boolean {
+    return (
+      triggerHasPointer ||
+      triggerHasFocus ||
+      tooltipHasPointer ||
+      tooltipHasFocus
+    );
+  }
+
+  function showTooltip(): void {
+    clearScheduledHide();
+
+    if (!isControlled) {
+      dismissOtherUncontrolledTooltips(registryItem);
+    }
+
+    setInternalVisible(true);
+  }
+
+  function scheduleHide(): void {
+    clearScheduledHide();
+
+    if (isControlled || hasActiveInteraction()) {
+      return;
+    }
+
+    hideTimer = window.setTimeout(() => {
+      hideTimer = undefined;
+
+      if (!hasActiveInteraction()) {
+        setInternalVisible(false);
+      }
+    }, TOOLTIP_HIDE_DELAY);
+  }
+
+  function markInteraction(
+    area: 'trigger' | 'tooltip',
+    trigger: TooltipInteractionSource,
+    active: boolean,
+  ): void {
+    if (area === 'trigger' && trigger === 'pointer') {
+      triggerHasPointer = active;
+    } else if (area === 'trigger') {
+      triggerHasFocus = active;
+    } else if (trigger === 'pointer') {
+      tooltipHasPointer = active;
+    } else {
+      tooltipHasFocus = active;
+    }
+  }
+
+  function handleTriggerEnter(
+    trigger: TooltipInteractionSource,
+    originalEvent: Event,
+  ): void {
+    markInteraction('trigger', trigger, true);
+    onTriggerEnter?.({ trigger, originalEvent });
+    showTooltip();
+  }
+
+  function handleTriggerLeave(
+    trigger: TooltipInteractionSource,
+    originalEvent: Event,
+  ): void {
+    markInteraction('trigger', trigger, false);
+    onTriggerLeave?.({ trigger, originalEvent });
+    scheduleHide();
+  }
+
+  function handleTooltipEnter(
+    trigger: TooltipInteractionSource,
+    originalEvent: Event,
+  ): void {
+    markInteraction('tooltip', trigger, true);
+    onTooltipEnter?.({ trigger, originalEvent });
+    showTooltip();
+  }
+
+  function handleTooltipLeave(
+    trigger: TooltipInteractionSource,
+    originalEvent: Event,
+  ): void {
+    markInteraction('tooltip', trigger, false);
+    onTooltipLeave?.({ trigger, originalEvent });
+    scheduleHide();
+  }
+
+  onMount(() => {
+    uncontrolledTooltips.add(registryItem);
+
+    return () => {
+      uncontrolledTooltips.delete(registryItem);
+    };
+  });
+
+  onDestroy(() => {
+    clearScheduledHide();
+    cancelAnimationFrame(instantHideFrame);
+  });
+
+  $effect(() => {
+    if (!bubbleElement) {
+      return;
+    }
+
+    document.body.append(bubbleElement);
+
+    return () => {
+      bubbleElement?.remove();
+    };
+  });
+
+  $effect(() => {
+    if (
+      !tooltipVisible ||
+      !hasTooltip ||
+      !anchorElement ||
+      !bubbleElement
+    ) {
+      return;
+    }
+
+    const placementUpdateKey = `${placement}:${showArrow}:${gapValue}:${content ?? ''}:${tooltip === undefined}`;
+    const scrollListenerOptions = {
+      capture: true,
+      passive: true,
+    };
+    let scheduledFrame = 0;
+    let settlingFrame = 0;
+    let cancelled = false;
+
+    // Keep positioning reactive to geometry-affecting prop changes.
+    void placementUpdateKey;
+
+    function schedulePositionUpdate(): void {
+      if (scheduledFrame !== 0) {
+        return;
+      }
+
+      scheduledFrame = requestAnimationFrame(() => {
+        scheduledFrame = 0;
+
+        if (!cancelled) {
+          updateTooltipPosition();
+        }
+      });
+    }
+
+    function runSettlingPositionUpdates(remainingFrames: number): void {
+      if (cancelled) {
+        return;
+      }
+
+      updateTooltipPosition();
+
+      if (remainingFrames <= 0) {
+        return;
+      }
+
+      settlingFrame = requestAnimationFrame(() => {
+        runSettlingPositionUpdates(remainingFrames - 1);
+      });
+    }
+
+    const positionObserver = createPositionObserver(schedulePositionUpdate);
+    const viewport = window.visualViewport;
+
+    void tick().then(() => {
+      if (cancelled) {
+        return;
+      }
+
+      runSettlingPositionUpdates(8);
+    });
+
+    whenFontsReady(schedulePositionUpdate);
+
+    window.addEventListener('load', schedulePositionUpdate);
+    window.addEventListener('resize', schedulePositionUpdate);
+    window.addEventListener('scroll', updateTooltipPosition, scrollListenerOptions);
+    viewport?.addEventListener('resize', schedulePositionUpdate);
+    viewport?.addEventListener('scroll', updateTooltipPosition);
+
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(scheduledFrame);
+      cancelAnimationFrame(settlingFrame);
+      positionObserver?.disconnect();
+      window.removeEventListener('load', schedulePositionUpdate);
+      window.removeEventListener('resize', schedulePositionUpdate);
+      window.removeEventListener(
+        'scroll',
+        updateTooltipPosition,
+        scrollListenerOptions,
+      );
+      viewport?.removeEventListener('resize', schedulePositionUpdate);
+      viewport?.removeEventListener('scroll', updateTooltipPosition);
+    };
+  });
+</script>
+
+<span
+  {...restProps}
+  aria-describedby={hasTooltip ? tooltipId : undefined}
+  bind:this={anchorElement}
+  class={`tooltip${className ? ` ${className}` : ''}`}
+  data-placement={placement}
+  data-seblify-tone={tone}
+  data-side={placementSide}
+  data-state={tooltipVisible ? 'visible' : 'hidden'}
+  onfocusin={(event) => {
+    handleTriggerEnter('focus', event);
+  }}
+  onfocusout={(event) => {
+    handleTriggerLeave('focus', event);
+  }}
+  onmouseenter={(event) => {
+    handleTriggerEnter('pointer', event);
+  }}
+  onmouseleave={(event) => {
+    handleTriggerLeave('pointer', event);
+  }}
+  style:--tooltip-gap={gapValue}
+  style:--tooltip-offset={gapValue}
+>
+  {@render children?.()}
+
+  {#if hasTooltip}
+    <span
+      aria-hidden={!tooltipVisible}
+      bind:this={bubbleElement}
+      class="tooltip__bubble seblify-tone-context"
+      data-animation={animation}
+      data-arrow={showArrow ? 'visible' : 'hidden'}
+      data-instant-hide={instantHide}
+      data-placement={placement}
+      data-seblify-tone={tone}
+      data-side={placementSide}
+      data-state={tooltipVisible ? 'visible' : 'hidden'}
+      dir={tooltipDirection}
+      id={tooltipId}
+      onfocusin={(event) => {
+        handleTooltipEnter('focus', event);
+      }}
+      onfocusout={(event) => {
+        handleTooltipLeave('focus', event);
+      }}
+      onmouseenter={(event) => {
+        handleTooltipEnter('pointer', event);
+      }}
+      onmouseleave={(event) => {
+        handleTooltipLeave('pointer', event);
+      }}
+      role="tooltip"
+      style:--tooltip-arrow-x={`${arrowX}px`}
+      style:--tooltip-arrow-y={`${arrowY}px`}
+      style:--tooltip-x={`${tooltipX}px`}
+      style:--tooltip-y={`${tooltipY}px`}
+    >
+      {#if tooltip}
+        {@render tooltip()}
+      {:else}
+        {content}
+      {/if}
+      {#if showArrow}
+        <span class="tooltip__arrow" aria-hidden="true"></span>
+      {/if}
+    </span>
+  {/if}
+</span>
+
+<style>
+  .tooltip {
+    position: relative;
+    display: inline-flex;
+    width: fit-content;
+    max-width: 100%;
+  }
+
+  .tooltip__bubble {
+    --tooltip-background: var(--seblify-tone-fill, #172033);
+    --tooltip-color: var(--seblify-tone-fill-text, #ffffff);
+    --tooltip-shadow: var(
+      --seblify-shadow-raised,
+      0 12px 28px rgb(23 32 51 / 22%)
+    );
+    --tooltip-arrow-size: 0.5rem;
+    --tooltip-arrow-overlap: 1px;
+    --tooltip-enter-distance: 0;
+    --tooltip-enter-duration: 180ms;
+    --tooltip-enter-easing: ease;
+    --tooltip-enter-x: 0;
+    --tooltip-enter-y: 0;
+    --tooltip-bounce-start-x: 0;
+    --tooltip-bounce-start-y: 0;
+    --tooltip-bounce-overshoot-x: 0;
+    --tooltip-bounce-overshoot-y: 0;
+    --tooltip-bounce-rebound-x: 0;
+    --tooltip-bounce-rebound-y: 0;
+    --tooltip-radius: 0.375rem;
+    --tooltip-enter-scale: 1;
+
+    position: fixed;
+    left: var(--tooltip-x, 0);
+    top: var(--tooltip-y, 0);
+    z-index: var(--seblify-z-index-tooltip, 30);
+    display: block;
+    width: max-content;
+    max-width: min(18rem, calc(100vw - 2rem));
+    border-radius: var(--tooltip-radius);
+    padding: 0.375rem 0.5rem;
+    background: var(--tooltip-background);
+    box-shadow: var(--tooltip-shadow);
+    box-sizing: border-box;
+    color: var(--tooltip-color);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    isolation: isolate;
+    line-height: 1.35;
+    opacity: 0;
+    pointer-events: none;
+    text-align: start;
+    transform: translate(var(--tooltip-enter-x), var(--tooltip-enter-y))
+      scale(var(--tooltip-enter-scale));
+    transform-origin: center;
+    transition:
+      opacity var(--tooltip-enter-duration) var(--tooltip-enter-easing),
+      transform var(--tooltip-enter-duration) var(--tooltip-enter-easing),
+      visibility 120ms ease;
+    visibility: hidden;
+    white-space: normal;
+  }
+
+  .tooltip__bubble[data-instant-hide='true'] {
+    animation-duration: 0ms;
+    transition-duration: 0ms;
+  }
+
+  .tooltip__bubble[data-animation='none'] {
+    transition-duration: 0ms;
+  }
+
+  .tooltip__bubble[data-animation='rise'] {
+    --tooltip-enter-distance: 0.375rem;
+    --tooltip-enter-duration: 260ms;
+    --tooltip-enter-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .tooltip__bubble[data-animation='settle'] {
+    --tooltip-enter-distance: 1rem;
+    --tooltip-enter-duration: 240ms;
+    --tooltip-enter-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .tooltip__bubble[data-animation='pop'] {
+    --tooltip-enter-duration: 280ms;
+    --tooltip-enter-scale: 0.82;
+  }
+
+  .tooltip__bubble[data-animation='scale'] {
+    --tooltip-enter-duration: 260ms;
+    --tooltip-enter-scale: 0.72;
+  }
+
+  .tooltip__bubble[data-animation='bounce'] {
+    --tooltip-bounce-start-distance: 2rem;
+    --tooltip-bounce-rebound-distance: 0.1875rem;
+    --tooltip-enter-duration: 420ms;
+    --tooltip-enter-scale: 0.9;
+  }
+
+  .tooltip__bubble[data-animation='settle'][data-side='bottom'] {
+    --tooltip-enter-y: var(--tooltip-enter-distance);
+  }
+
+  .tooltip__bubble[data-animation='settle'][data-side='top'] {
+    --tooltip-enter-y: calc(0px - var(--tooltip-enter-distance));
+  }
+
+  .tooltip__bubble[data-animation='settle'][data-side='end'] {
+    --tooltip-enter-x: var(--tooltip-enter-distance);
+  }
+
+  .tooltip__bubble[data-animation='settle'][data-side='start'] {
+    --tooltip-enter-x: calc(0px - var(--tooltip-enter-distance));
+  }
+
+  .tooltip__bubble:dir(rtl)[data-animation='settle'][data-side='end'] {
+    --tooltip-enter-x: calc(0px - var(--tooltip-enter-distance));
+  }
+
+  .tooltip__bubble:dir(rtl)[data-animation='settle'][data-side='start'] {
+    --tooltip-enter-x: var(--tooltip-enter-distance);
+  }
+
+  .tooltip__bubble[data-animation='rise'][data-side='bottom'] {
+    --tooltip-enter-y: calc(0px - var(--tooltip-enter-distance));
+  }
+
+  .tooltip__bubble[data-animation='rise'][data-side='top'] {
+    --tooltip-enter-y: var(--tooltip-enter-distance);
+  }
+
+  .tooltip__bubble[data-animation='rise'][data-side='end'] {
+    --tooltip-enter-x: calc(0px - var(--tooltip-enter-distance));
+  }
+
+  .tooltip__bubble[data-animation='rise'][data-side='start'] {
+    --tooltip-enter-x: var(--tooltip-enter-distance);
+  }
+
+  .tooltip__bubble:dir(rtl)[data-animation='rise'][data-side='end'] {
+    --tooltip-enter-x: var(--tooltip-enter-distance);
+  }
+
+  .tooltip__bubble:dir(rtl)[data-animation='rise'][data-side='start'] {
+    --tooltip-enter-x: calc(0px - var(--tooltip-enter-distance));
+  }
+
+  .tooltip__bubble[data-animation='bounce'][data-side='top'] {
+    --tooltip-bounce-start-y: calc(
+      0px - var(--tooltip-bounce-start-distance)
+    );
+    --tooltip-bounce-overshoot-y: 0;
+    --tooltip-bounce-rebound-y: calc(
+      0px - var(--tooltip-bounce-rebound-distance)
+    );
+  }
+
+  .tooltip__bubble[data-animation='bounce'][data-side='bottom'] {
+    --tooltip-bounce-start-y: var(--tooltip-bounce-start-distance);
+    --tooltip-bounce-overshoot-y: 0;
+    --tooltip-bounce-rebound-y: var(--tooltip-bounce-rebound-distance);
+  }
+
+  .tooltip__bubble[data-animation='bounce'][data-side='start'] {
+    --tooltip-bounce-start-x: calc(
+      0px - var(--tooltip-bounce-start-distance)
+    );
+    --tooltip-bounce-overshoot-x: 0;
+    --tooltip-bounce-rebound-x: calc(
+      0px - var(--tooltip-bounce-rebound-distance)
+    );
+  }
+
+  .tooltip__bubble[data-animation='bounce'][data-side='end'] {
+    --tooltip-bounce-start-x: var(--tooltip-bounce-start-distance);
+    --tooltip-bounce-overshoot-x: 0;
+    --tooltip-bounce-rebound-x: var(--tooltip-bounce-rebound-distance);
+  }
+
+  .tooltip__bubble:dir(rtl)[data-animation='bounce'][data-side='start'] {
+    --tooltip-bounce-start-x: var(--tooltip-bounce-start-distance);
+    --tooltip-bounce-overshoot-x: 0;
+    --tooltip-bounce-rebound-x: var(--tooltip-bounce-rebound-distance);
+  }
+
+  .tooltip__bubble:dir(rtl)[data-animation='bounce'][data-side='end'] {
+    --tooltip-bounce-start-x: calc(
+      0px - var(--tooltip-bounce-start-distance)
+    );
+    --tooltip-bounce-overshoot-x: 0;
+    --tooltip-bounce-rebound-x: calc(
+      0px - var(--tooltip-bounce-rebound-distance)
+    );
+  }
+
+  .tooltip__bubble[data-side='top'] {
+    transform-origin: center bottom;
+  }
+
+  .tooltip__bubble[data-side='bottom'] {
+    transform-origin: center top;
+  }
+
+  .tooltip__bubble[data-side='start'] {
+    transform-origin: right center;
+  }
+
+  .tooltip__bubble[data-side='end'] {
+    transform-origin: left center;
+  }
+
+  .tooltip__bubble:dir(rtl)[data-side='start'] {
+    transform-origin: left center;
+  }
+
+  .tooltip__bubble:dir(rtl)[data-side='end'] {
+    transform-origin: right center;
+  }
+
+  .tooltip__bubble[data-state='visible'] {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translate(0, 0) scale(1);
+    visibility: visible;
+  }
+
+  .tooltip__bubble[data-animation='bounce'][data-state='visible'] {
+    animation: tooltip-bounce-in var(--tooltip-enter-duration)
+      cubic-bezier(0.2, 0.9, 0.2, 1.1);
+    transition-property: visibility;
+  }
+
+  .tooltip__bubble[data-animation='pop'][data-state='visible'] {
+    animation: tooltip-pop-in var(--tooltip-enter-duration)
+      linear;
+    transition-property: visibility;
+  }
+
+  .tooltip__bubble[data-animation='scale'][data-state='visible'] {
+    animation: tooltip-scale-in var(--tooltip-enter-duration)
+      cubic-bezier(0.16, 1, 0.3, 1);
+    transition-property: visibility;
+  }
+
+  .tooltip__bubble[data-animation='none'][data-state='visible'],
+  .tooltip__bubble[data-instant-hide='true'][data-state='visible'] {
+    animation-name: none;
+  }
+
+  .tooltip__arrow {
+    position: absolute;
+    z-index: -1;
+    display: block;
+    width: var(--tooltip-arrow-size);
+    height: var(--tooltip-arrow-size);
+    background: var(--tooltip-background);
+  }
+
+  .tooltip__bubble[data-side='top'] .tooltip__arrow {
+    width: var(--tooltip-arrow-size);
+    height: calc(var(--tooltip-arrow-size) + var(--tooltip-arrow-overlap));
+    left: var(--tooltip-arrow-x, 50%);
+    top: calc(100% - var(--tooltip-arrow-overlap));
+    clip-path: polygon(0 0, 100% 0, 50% 100%);
+    transform: translateX(-50%);
+  }
+
+  .tooltip__bubble[data-side='bottom'] .tooltip__arrow {
+    width: var(--tooltip-arrow-size);
+    height: calc(var(--tooltip-arrow-size) + var(--tooltip-arrow-overlap));
+    bottom: calc(100% - var(--tooltip-arrow-overlap));
+    left: var(--tooltip-arrow-x, 50%);
+    clip-path: polygon(50% 0, 0 100%, 100% 100%);
+    transform: translateX(-50%);
+  }
+
+  .tooltip__bubble[data-side='start'] .tooltip__arrow {
+    width: calc(var(--tooltip-arrow-size) + var(--tooltip-arrow-overlap));
+    height: var(--tooltip-arrow-size);
+    inset-inline-start: calc(100% - var(--tooltip-arrow-overlap));
+    top: var(--tooltip-arrow-y, 50%);
+    clip-path: polygon(0 0, 100% 50%, 0 100%);
+    transform: translateY(-50%);
+  }
+
+  .tooltip__bubble[data-side='end'] .tooltip__arrow {
+    width: calc(var(--tooltip-arrow-size) + var(--tooltip-arrow-overlap));
+    height: var(--tooltip-arrow-size);
+    inset-inline-end: calc(100% - var(--tooltip-arrow-overlap));
+    top: var(--tooltip-arrow-y, 50%);
+    clip-path: polygon(0 50%, 100% 0, 100% 100%);
+    transform: translateY(-50%);
+  }
+
+  .tooltip__bubble:dir(rtl)[data-side='start'] .tooltip__arrow {
+    clip-path: polygon(0 50%, 100% 0, 100% 100%);
+  }
+
+  .tooltip__bubble:dir(rtl)[data-side='end'] .tooltip__arrow {
+    clip-path: polygon(0 0, 100% 50%, 0 100%);
+  }
+
+  @keyframes tooltip-bounce-in {
+    0% {
+      opacity: 0;
+      transform: translate(
+          var(--tooltip-bounce-start-x),
+          var(--tooltip-bounce-start-y)
+        )
+        scale(var(--tooltip-enter-scale));
+    }
+
+    48% {
+      opacity: 1;
+      transform: translate(
+          var(--tooltip-bounce-overshoot-x),
+          var(--tooltip-bounce-overshoot-y)
+        )
+        scale(1.06);
+    }
+
+    72% {
+      opacity: 1;
+      transform: translate(
+          var(--tooltip-bounce-rebound-x),
+          var(--tooltip-bounce-rebound-y)
+        )
+        scale(0.995);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translate(0, 0) scale(1);
+    }
+  }
+
+  @keyframes tooltip-pop-in {
+    0% {
+      opacity: 0;
+      transform: translate(0, 0) scale(var(--tooltip-enter-scale));
+      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    52% {
+      opacity: 1;
+      transform: translate(0, 0) scale(1.055);
+      animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
+    }
+
+    76% {
+      opacity: 1;
+      transform: translate(0, 0) scale(0.992);
+      animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translate(0, 0) scale(1);
+    }
+  }
+
+  @keyframes tooltip-scale-in {
+    0% {
+      opacity: 0;
+      transform: translate(0, 0) scale(var(--tooltip-enter-scale));
+    }
+
+    100% {
+      opacity: 1;
+      transform: translate(0, 0) scale(1);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tooltip__bubble {
+      animation-duration: 0ms;
+      transition-duration: 0ms;
+    }
+  }
+</style>