@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/tooltip/cmp.tooltip.svelte

@@ -1,192 +1,162 @@
-<script lang="ts">import { Icon } from '../icon';
-import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
-import { createPopper } from '@popperjs/core';
-let { position = 'bottom-start', ignoreClick = false, disabled = false, fixedPosition = false, offset = 8, boundaryMargin = 8, children, trigger } = $props();
-let open = $state(false);
-let hidden = $state(false);
-let triggerRef = $state(null);
-let openedByHover = false;
-let popper;
-let _blocked = false;
-const toggleHandler = (ev) => {
-    if (ignoreClick) {
+<script lang="ts">import { arrow as arrowMiddleware, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
+import { tick } from 'svelte';
+const { text, placement = 'top', delay = 250, children } = $props();
+let triggerEl = $state.raw(undefined);
+let bubbleEl = $state.raw(undefined);
+let arrowEl = $state.raw(undefined);
+let visible = $state(false);
+// Initial seed only — Floating UI updates this in `position()` after each compute.
+// svelte-ignore state_referenced_locally
+let resolvedPlacement = $state(placement);
+let showTimer;
+let stopAutoUpdate;
+const id = `tt-${Math.random().toString(36).slice(2, 9)}`;
+const position = async () => {
+    if (!triggerEl || !bubbleEl) {
         return;
     }
-    const wasOpenedByHover = openedByHover;
-    openedByHover = false;
-    if (open && wasOpenedByHover) {
-        return;
-    }
-    if (ev.type === 'focusin' && !open) {
-        _blocked = true;
-        setTimeout(() => (_blocked = false), 250);
-    }
-    open = ev.type === 'click' && !_blocked ? !open : true;
-};
-const showHandlerOnHover = (ev) => {
-    if (open && !openedByHover) {
-        return;
+    const middleware = [offset(6), flip(), shift({ padding: 8 })];
+    if (arrowEl) {
+        middleware.push(arrowMiddleware({ element: arrowEl }));
     }
-    if (ev.type === 'mouseenter') {
-        openedByHover = true;
-        open = true;
+    const result = await computePosition(triggerEl, bubbleEl, { placement, middleware });
+    Object.assign(bubbleEl.style, {
+        left: `${result.x}px`,
+        top: `${result.y}px`
+    });
+    resolvedPlacement = result.placement;
+    if (arrowEl && result.middlewareData.arrow) {
+        const { x: ax, y: ay } = result.middlewareData.arrow;
+        arrowEl.style.left = ax === undefined ? '' : `${ax}px`;
+        arrowEl.style.top = ay === undefined ? '' : `${ay}px`;
     }
 };
-const hideHandler = (ev) => {
-    if (ignoreClick) {
+const show = () => {
+    if (showTimer) {
         return;
     }
-    setTimeout(() => {
-        if (ev.type === 'focusout' && shouldBeHidden(ev)) {
-            hidden = true;
+    showTimer = setTimeout(async () => {
+        visible = true;
+        showTimer = undefined;
+        await tick();
+        if (triggerEl && bubbleEl) {
+            stopAutoUpdate = autoUpdate(triggerEl, bubbleEl, position);
         }
-        setTimeout(() => {
-            if (shouldBeHidden(ev)) {
-                open = false;
-            }
-        }, 100);
-    }, 50);
+    }, delay);
 };
-const hideHandlerOnHover = (ev) => {
-    if (!openedByHover) {
-        return;
-    }
-    if (ev.type === 'mouseleave' && openedByHover) {
-        open = false;
-    }
-    openedByHover = false;
-};
-const shouldBeHidden = (ev) => {
-    const hasFocus = (el) => !!el?.contains && el.contains(document.activeElement);
-    if (ev.type === 'focusout') {
-        if (hasFocus(ev.target)) {
-            return false;
-        }
+const hide = () => {
+    if (showTimer) {
+        clearTimeout(showTimer);
+        showTimer = undefined;
     }
-    return true;
-};
-$effect(() => {
-    popper?.setOptions({ placement: position });
-});
-$effect(() => {
-    if (open) {
-        hidden = false;
-    }
-});
-const init = (node, _triggerEl) => {
-    popper = createPopper(_triggerEl, node, {
-        placement: position,
-        strategy: fixedPosition ? 'fixed' : 'absolute',
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset: () => [0, offset]
-                }
-            },
-            { name: 'eventListeners', enabled: open },
-            { name: 'flip' },
-            {
-                name: 'preventOverflow',
-                options: {
-                    boundary: document.body,
-                    padding: boundaryMargin
-                }
-            }
-        ]
-    });
-    return {
-        update(_triggerEl) {
-            popper.state.elements.reference = _triggerEl;
-            popper.update();
-        },
-        destroy() {
-            popper.destroy();
-        }
-    };
+    stopAutoUpdate?.();
+    stopAutoUpdate = undefined;
+    visible = false;
 };
 </script>
 
-<div
+<span
+  bind:this={triggerEl}
   class="tooltip"
-  class:tooltip--disabled={disabled}
-  onclick={(e) => e.stopPropagation()}
-  onkeydown={() => {}}
-  onfocusout={hideHandler}
-  onmouseenter={showHandlerOnHover}
-  onmouseleave={hideHandlerOnHover}
-  role="none">
-  <button type="button" class="tooltip__trigger" bind:this={triggerRef} onclick={toggleHandler} data-role="tooltip-trigger">
-    {#if trigger}
-      {@render trigger()}
-    {:else}
-      <Icon src={IconChevronDown} />
-    {/if}
-  </button>
-  {#if open}
-    <div use:init={triggerRef} class="tooltip__content" class:tooltip__content--hidden={hidden} role="tooltip" tabindex="-1">
-      {@render children()}
-    </div>
-  {/if}
-</div>
+  aria-describedby={visible ? id : undefined}
+  onmouseenter={show}
+  onmouseleave={hide}
+  onfocusin={show}
+  onfocusout={hide}
+  role="presentation">
+  {@render children()}
+</span>
+
+{#if visible}
+  <span bind:this={bubbleEl} id={id} class="tooltip__bubble" role="tooltip" data-placement={resolvedPlacement}>
+    {text}
+    <span bind:this={arrowEl} class="tooltip__arrow" aria-hidden="true"></span>
+  </span>
+{/if}
 
 <!--
 @component
-A tooltip/popover that positions content relative to a trigger element using Popper.js.
-Supports hover-only mode, click toggle, and configurable placement.
+Tooltip — hover/focus help text positioned with Floating UI. Wraps a single child element
+(passed via `children`) which becomes the trigger; can be an icon, button, link, LineClamp,
+or plain text. Bubble flips and shifts on viewport collision; an arrow points to the trigger.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--tooltip--background-color` | Tooltip background | light-dark white/gray-900 |
-| `--sc-kit--tooltip--border-radius` | Corner radius | `0` |
-| `--sc-kit--tooltip--box-shadow` | Drop shadow | `0 2px 10px` light-dark |
+| `--sc-kit--tooltip--background` | Bubble background | `var(--sc-kit--color--bg--tooltip)` |
+| `--sc-kit--tooltip--color` | Bubble text color | `var(--sc-kit--color--text--tooltip)` |
+| `--sc-kit--tooltip--font-size` | Bubble font size | `var(--sc-kit--font-size--sm)` |
+| `--sc-kit--tooltip--line-height` | Bubble line-height | `var(--sc-kit--leading--tight)` |
+| `--sc-kit--tooltip--padding-block` | Bubble vertical padding | `var(--sc-kit--space--2)` |
+| `--sc-kit--tooltip--padding-inline` | Bubble horizontal padding | `var(--sc-kit--space--3)` |
+| `--sc-kit--tooltip--border-radius` | Bubble corner radius | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--tooltip--shadow` | Bubble drop shadow | `var(--sc-kit--shadow--md)` |
+| `--sc-kit--tooltip--max-width` | Bubble max width | `15rem` |
+| `--sc-kit--tooltip--arrow-size` | Arrow square size | `0.5rem` |
+| `--sc-kit--tooltip--z-index` | Bubble z-index | `var(--sc-kit--z-index--tooltip)` |
 -->
 
 <style>.tooltip {
-  --_tooltip--background-color: var(--sc-kit--tooltip--background-color, light-dark(#ffffff, #1c1c1c));
-  --_tooltip--border-radius: var(--sc-kit--tooltip--border-radius, 0);
-  --_tooltip--box-shadow: var(--sc-kit--tooltip--box-shadow, 0 2px 10px light-dark(rgb(0 0 0 / 15%), rgb(255 255 255 / 20%)));
-  height: 100%;
-  display: inline-block;
-  -webkit-user-drag: none;
-  user-select: none;
+  display: inline-flex;
 }
-.tooltip :global([contenteditable]) {
-  user-select: text;
+.tooltip__bubble {
+  --_tt--background: var(--sc-kit--tooltip--background, var(--sc-kit--color--bg--tooltip));
+  --_tt--color: var(--sc-kit--tooltip--color, var(--sc-kit--color--text--tooltip));
+  --_tt--font-size: var(--sc-kit--tooltip--font-size, var(--sc-kit--font-size--sm));
+  --_tt--line-height: var(--sc-kit--tooltip--line-height, var(--sc-kit--leading--tight));
+  --_tt--padding-block: var(--sc-kit--tooltip--padding-block, var(--sc-kit--space--2));
+  --_tt--padding-inline: var(--sc-kit--tooltip--padding-inline, var(--sc-kit--space--3));
+  --_tt--border-radius: var(--sc-kit--tooltip--border-radius, var(--sc-kit--radius--sm));
+  --_tt--shadow: var(--sc-kit--tooltip--shadow, var(--sc-kit--shadow--md));
+  --_tt--max-width: var(--sc-kit--tooltip--max-width, 15rem);
+  --_tt--arrow-size: var(--sc-kit--tooltip--arrow-size, 0.5rem);
+  --_tt--z-index: var(--sc-kit--tooltip--z-index, var(--sc-kit--z-index--tooltip));
+  --_tt--arrow-top: auto;
+  --_tt--arrow-bottom: auto;
+  --_tt--arrow-left: auto;
+  --_tt--arrow-right: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--_tt--z-index);
+  width: max-content;
+  max-width: var(--_tt--max-width);
+  padding: var(--_tt--padding-block) var(--_tt--padding-inline);
+  background: var(--_tt--background);
+  color: var(--_tt--color);
+  font-size: var(--_tt--font-size);
+  line-height: var(--_tt--line-height);
+  border-radius: var(--_tt--border-radius);
+  box-shadow: var(--_tt--shadow);
+  pointer-events: none;
+  animation: tooltip-appear var(--sc-kit--duration--fast) var(--sc-kit--ease--default);
 }
-.tooltip__trigger {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  line-height: 1;
+.tooltip__bubble[data-placement^=top] {
+  --_tt--arrow-bottom: calc(var(--_tt--arrow-size) / -2);
 }
-.tooltip--disabled {
-  opacity: 0.5;
-  pointer-events: none;
+.tooltip__bubble[data-placement^=bottom] {
+  --_tt--arrow-top: calc(var(--_tt--arrow-size) / -2);
 }
-.tooltip__content {
-  box-shadow: var(--_tooltip--box-shadow);
-  background: var(--_tooltip--background-color);
-  width: max-content;
-  z-index: 999;
-  border-radius: var(--_tooltip--border-radius);
-  animation: tooltip-appear 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+.tooltip__bubble[data-placement^=left] {
+  --_tt--arrow-right: calc(var(--_tt--arrow-size) / -2);
 }
-.tooltip__content--hidden {
-  opacity: 0;
+.tooltip__bubble[data-placement^=right] {
+  --_tt--arrow-left: calc(var(--_tt--arrow-size) / -2);
 }
-.tooltip :global([data-popper-escaped]) {
-  visibility: hidden !important;
+.tooltip__arrow {
+  position: absolute;
+  width: var(--_tt--arrow-size);
+  height: var(--_tt--arrow-size);
+  background: var(--_tt--background);
+  transform: rotate(45deg);
+  top: var(--_tt--arrow-top);
+  bottom: var(--_tt--arrow-bottom);
+  left: var(--_tt--arrow-left);
+  right: var(--_tt--arrow-right);
 }
 
 @keyframes tooltip-appear {
   from {
     opacity: 0;
   }
-  to {
-    opacity: 1;
-  }
 }</style>

package/dist/ui/tooltip/cmp.tooltip.svelte.d.ts

@@ -1,30 +1,34 @@
-import type { TooltipPosition } from './types';
-import type { Snippet } from 'svelte';
+import { type Placement } from '@floating-ui/dom';
+import { type Snippet } from 'svelte';
 type Props = {
-    /** @default 'bottom-start' */
-    position?: TooltipPosition;
-    /** Tooltip will be activated on hover only */
-    ignoreClick?: boolean;
-    disabled?: boolean;
-    /** Use when tooltip appears in a fixed container to prevent unnecessary calculations */
-    fixedPosition?: boolean;
-    /** Offset from tooltip trigger @default 8 */
-    offset?: number;
-    /** Additional margin from document.body to prevent sticking to screen edges @default 8 */
-    boundaryMargin?: number;
+    /** Help text shown in the bubble. */
+    text: string;
+    /** @default 'top' */
+    placement?: Placement;
+    /** Delay before show in ms. @default 250 */
+    delay?: number;
+    /** Wrapped element — anything passed becomes the tooltip trigger (icon, button, link, plain text). */
     children: Snippet;
-    trigger: Snippet;
 };
 /**
- * A tooltip/popover that positions content relative to a trigger element using Popper.js.
- * Supports hover-only mode, click toggle, and configurable placement.
+ * Tooltip — hover/focus help text positioned with Floating UI. Wraps a single child element
+ * (passed via `children`) which becomes the trigger; can be an icon, button, link, LineClamp,
+ * or plain text. Bubble flips and shifts on viewport collision; an arrow points to the trigger.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--tooltip--background-color` | Tooltip background | light-dark white/gray-900 |
- * | `--sc-kit--tooltip--border-radius` | Corner radius | `0` |
- * | `--sc-kit--tooltip--box-shadow` | Drop shadow | `0 2px 10px` light-dark |
+ * | `--sc-kit--tooltip--background` | Bubble background | `var(--sc-kit--color--bg--tooltip)` |
+ * | `--sc-kit--tooltip--color` | Bubble text color | `var(--sc-kit--color--text--tooltip)` |
+ * | `--sc-kit--tooltip--font-size` | Bubble font size | `var(--sc-kit--font-size--sm)` |
+ * | `--sc-kit--tooltip--line-height` | Bubble line-height | `var(--sc-kit--leading--tight)` |
+ * | `--sc-kit--tooltip--padding-block` | Bubble vertical padding | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--tooltip--padding-inline` | Bubble horizontal padding | `var(--sc-kit--space--3)` |
+ * | `--sc-kit--tooltip--border-radius` | Bubble corner radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--tooltip--shadow` | Bubble drop shadow | `var(--sc-kit--shadow--md)` |
+ * | `--sc-kit--tooltip--max-width` | Bubble max width | `15rem` |
+ * | `--sc-kit--tooltip--arrow-size` | Arrow square size | `0.5rem` |
+ * | `--sc-kit--tooltip--z-index` | Bubble z-index | `var(--sc-kit--z-index--tooltip)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/tooltip/index.d.ts

@@ -1,2 +1 @@
 export { default as Tooltip } from './cmp.tooltip.svelte';
-export type { TooltipPosition } from './types';