@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/toggle/cmp.toggle.svelte

@@ -1,107 +1,199 @@
-<script lang="ts">const { isOn, label = '', disabled = false, on } = $props();
-const toggleState = () => {
+<script lang="ts">const { checked, size = 'md', disabled = false, layout = 'spread', label, sublabel, title, name, on } = $props();
+const hasLabel = $derived(label !== undefined || sublabel !== undefined);
+const ariaLabel = $derived(typeof label === 'string' ? label : name);
+const handleClick = (event) => {
+    event.stopPropagation();
     if (disabled) {
         return;
     }
-    on?.change(!isOn);
+    on?.change?.(!checked);
 };
+export {};
 </script>
 
-<div class="toggle" class:toggle--disabled={disabled} onclick={toggleState} onkeydown={() => {}} role="none">
-  <button type="button" aria-label="Toggle" class="toggle-switch">
-    <input type="checkbox" class="toggle-switch__checkbox" checked={isOn} disabled={disabled} />
-    <span class="toggle-switch__slider"></span>
+{#snippet switchControl()}
+  <button
+    type="button"
+    class="toggle toggle--{size}"
+    class:toggle--on={checked}
+    class:toggle--disabled={disabled}
+    role="switch"
+    aria-checked={checked}
+    aria-label={ariaLabel}
+    title={hasLabel ? undefined : title}
+    disabled={disabled}
+    onclick={handleClick}>
+    <span class="toggle__thumb" aria-hidden="true"></span>
   </button>
-  {#if label}
-    <span class="toggle__label">{label}</span>
-  {/if}
-</div>
+{/snippet}
+
+{#if hasLabel}
+  <label class="toggle-row toggle-row--{layout}" class:toggle-row--disabled={disabled} title={title}>
+    <span class="toggle-row__text">
+      {#if typeof label === 'string'}
+        <span class="toggle-row__label">{label}</span>
+      {:else if label}
+        <span class="toggle-row__label">{@render label()}</span>
+      {/if}
+      {#if typeof sublabel === 'string'}
+        <span class="toggle-row__sub">{sublabel}</span>
+      {:else if sublabel}
+        <span class="toggle-row__sub">{@render sublabel()}</span>
+      {/if}
+    </span>
+    {@render switchControl()}
+  </label>
+{:else}
+  {@render switchControl()}
+{/if}
 
 <!--
 @component
-A toggle switch for boolean on/off states with optional label.
+Toggle (switch) — boolean on/off control. Renders a bare `<button role="switch">` by default;
+when `label` or `sublabel` is supplied, wraps in a clickable `<label>` row with two layouts:
+`spread` (settings-row, label left + switch right, fills container) or `inline` (compact,
+switch left + label right, intrinsic width).
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--toggle--color` | Active track color | `primary-500` / `primary-400` |
-| `--sc-kit--toggle--root--font-size` | Root font size | `1rem` |
-| `--sc-kit--toggle--label--font-size` | Label font size | `1em` |
-| `--sc-kit--toggle--switch--font-size` | Switch font size | `1em` |
-| `--sc-kit--toggle--switch--width` | Switch track width | `2.5em` |
-| `--sc-kit--toggle--switch--height` | Switch track height | `1.375em` |
-| `--sc-kit--toggle--switch--border-radius` | Track border radius | `(height)` |
+| `--sc-kit--toggle--track-width` | Track width | per size |
+| `--sc-kit--toggle--track-height` | Track height | per size |
+| `--sc-kit--toggle--thumb-size` | Thumb width/height | per size |
+| `--sc-kit--toggle--thumb-travel` | Distance the thumb slides when toggled | per size |
+| `--sc-kit--toggle--thumb-offset` | Inset of the thumb inside the track | `2px` |
+| `--sc-kit--toggle--background` | Track background (off) | `var(--sc-kit--color--border--strong)` |
+| `--sc-kit--toggle--background--on` | Track background (on) | `var(--sc-kit--color--accent)` |
+| `--sc-kit--toggle--thumb-color` | Thumb color | `#fff` |
+| `--sc-kit--toggle--thumb-shadow` | Thumb shadow | `0 1px 2px rgba(0, 0, 0, 0.2)` |
+| `--sc-kit--toggle--focus-ring-color` | Focus outline color | `var(--sc-kit--color--border--focus)` |
+| `--sc-kit--toggle-row--gap` | Gap between label and switch | `var(--sc-kit--space--3)` |
+| `--sc-kit--toggle-row--label--font-size` | Label font size | `var(--sc-kit--font-size--md)` |
+| `--sc-kit--toggle-row--label--color` | Label color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--toggle-row--sub--font-size` | Sublabel font size | `var(--sc-kit--font-size--sm)` |
+| `--sc-kit--toggle-row--sub--color` | Sublabel color | `var(--sc-kit--color--text--muted)` |
 -->
 
-<style>.toggle {
-  --_toggle--color: var(--sc-kit--toggle--color, light-dark(#144ab0, #5a8dec));
-  --_toggle--root--font-size: var(--sc-kit--toggle--root--font-size, 1rem);
-  --_toggle--label--font-size: var(--sc-kit--toggle--label--font-size, 1em);
-  --_toggle--switch--font-size: var(--sc-kit--toggle--switch--font-size, 1em);
-  --_toggle--switch--width: var(--sc-kit--toggle--switch--width, 2.5em);
-  --_toggle--switch--height: var(--sc-kit--toggle--switch--height, 1.375em);
-  --_toggle--switch--border-radius: var(--sc-kit--toggle--switch--border-radius, var(--_toggle--switch--height));
-  display: flex;
+<style>.toggle-row {
+  --_row--gap: var(--sc-kit--toggle-row--gap, var(--sc-kit--space--3));
+  --_row--label-font-size: var(--sc-kit--toggle-row--label--font-size, var(--sc-kit--font-size--md));
+  --_row--label-color: var(--sc-kit--toggle-row--label--color, var(--sc-kit--color--text--primary));
+  --_row--sub-font-size: var(--sc-kit--toggle-row--sub--font-size, var(--sc-kit--font-size--sm));
+  --_row--sub-color: var(--sc-kit--toggle-row--sub--color, var(--sc-kit--color--text--muted));
+  display: inline-flex;
   align-items: center;
+  gap: var(--_row--gap);
+  max-width: 100%;
   cursor: pointer;
-  font-size: var(--_toggle--root--font-size);
 }
-.toggle--disabled {
-  opacity: 0.6;
-  pointer-events: none;
+.toggle-row--spread {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 }
-.toggle .toggle-switch {
-  font-size: var(--_toggle--switch--font-size);
-  position: relative;
-  display: inline-block;
-  width: var(--_toggle--switch--width);
-  min-width: var(--_toggle--switch--width);
-  height: var(--_toggle--switch--height);
+.toggle-row--inline {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
 }
-.toggle .toggle-switch .toggle-switch__checkbox {
-  opacity: 0;
-  width: 0;
-  height: 0;
+.toggle-row--disabled {
+  cursor: default;
+  opacity: 0.5;
 }
-.toggle .toggle-switch .toggle-switch__checkbox:checked + .toggle-switch__slider {
-  background-color: var(--_toggle--color);
+.toggle-row__text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
 }
-.toggle .toggle-switch .toggle-switch__checkbox:checked + .toggle-switch__slider:before {
-  transform: translateX(calc(var(--_toggle--switch--width) - var(--_toggle--switch--height)));
+.toggle-row__label {
+  font-size: var(--_row--label-font-size);
+  color: var(--_row--label-color);
+  -webkit-user-drag: none;
+  user-select: none;
 }
-.toggle .toggle-switch .toggle-switch__checkbox:focus + .toggle-switch__slider {
-  box-shadow: 0 0 1px var(--_toggle--color);
+.toggle-row__label :global([contenteditable]) {
+  user-select: text;
 }
-.toggle .toggle-switch .toggle-switch__slider {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: light-dark(#d1d5db, #4b5563);
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  border-radius: var(--_toggle--switch--border-radius);
-  margin: 0;
-}
-.toggle .toggle-switch .toggle-switch__slider:before {
-  position: absolute;
-  content: "";
-  background-color: #ffffff;
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  border-radius: 50%;
-  height: calc(var(--_toggle--switch--height) - 2 * 0.125em);
-  width: calc(var(--_toggle--switch--height) - 2 * 0.125em);
-  left: 0.125em;
-  bottom: 0.125em;
-}
-.toggle .toggle__label {
-  margin-left: 0.875em;
-  font-size: var(--_toggle--label--font-size);
-  min-width: 0;
-  cursor: inherit;
-  user-select: none;
+.toggle-row__label {
   text-overflow: ellipsis;
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
+}
+.toggle-row__sub {
+  font-size: var(--_row--sub-font-size);
+  color: var(--_row--sub-color);
+  line-height: var(--sc-kit--line-height--sm);
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.toggle-row__sub :global([contenteditable]) {
+  user-select: text;
+}
+.toggle-row__sub {
+  white-space: pre-line;
+  word-break: break-word;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.toggle {
+  --_toggle--track-width: var(--sc-kit--toggle--track-width, 2rem);
+  --_toggle--track-height: var(--sc-kit--toggle--track-height, 1.125rem);
+  --_toggle--thumb-size: var(--sc-kit--toggle--thumb-size, 0.875rem);
+  --_toggle--thumb-travel: var(--sc-kit--toggle--thumb-travel, 0.875rem);
+  --_toggle--thumb-offset: var(--sc-kit--toggle--thumb-offset, 0.125rem);
+  --_toggle--thumb-translate: 0;
+  --_toggle--background: var(--sc-kit--toggle--background, var(--sc-kit--color--border--strong));
+  --_toggle--thumb-color: var(--sc-kit--toggle--thumb-color, #fff);
+  --_toggle--thumb-shadow: var(--sc-kit--toggle--thumb-shadow, 0 1px 2px rgba(0, 0, 0, 0.2));
+  --_toggle--focus-ring-color: var(--sc-kit--toggle--focus-ring-color, var(--sc-kit--color--border--focus));
+  position: relative;
+  flex-shrink: 0;
+  width: var(--_toggle--track-width);
+  height: var(--_toggle--track-height);
+  padding: 0;
+  background: var(--_toggle--background);
+  border: none;
+  border-radius: var(--sc-kit--radius--pill);
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.toggle:focus-visible {
+  outline: 2px solid var(--_toggle--focus-ring-color);
+  outline-offset: 2px;
+}
+.toggle--sm {
+  --sc-kit--toggle--track-width: 1.625rem;
+  --sc-kit--toggle--track-height: 0.875rem;
+  --sc-kit--toggle--thumb-size: 0.625rem;
+  --sc-kit--toggle--thumb-travel: 0.75rem;
+}
+.toggle--md {
+  --sc-kit--toggle--track-width: 2rem;
+  --sc-kit--toggle--track-height: 1.125rem;
+  --sc-kit--toggle--thumb-size: 0.875rem;
+  --sc-kit--toggle--thumb-travel: 0.875rem;
+}
+.toggle--on {
+  --sc-kit--toggle--background: var(--sc-kit--toggle--background--on, var(--sc-kit--color--accent));
+  --_toggle--thumb-translate: var(--_toggle--thumb-travel);
+}
+.toggle--disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.toggle__thumb {
+  position: absolute;
+  top: var(--_toggle--thumb-offset);
+  left: var(--_toggle--thumb-offset);
+  width: var(--_toggle--thumb-size);
+  height: var(--_toggle--thumb-size);
+  background: var(--_toggle--thumb-color);
+  border-radius: var(--sc-kit--radius--circle);
+  box-shadow: var(--_toggle--thumb-shadow);
+  transform: translateX(var(--_toggle--thumb-translate));
+  transition: transform var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }</style>

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

@@ -1,24 +1,46 @@
+import type { Snippet } from 'svelte';
 type Props = {
-    isOn: boolean;
-    label?: string;
+    checked: boolean;
+    /** @default 'md' */
+    size?: 'sm' | 'md';
     disabled?: boolean;
+    /** Label position relative to the switch. `spread` = label left, switch right (settings-row). `inline` = switch left, label right (compact). @default 'spread' */
+    layout?: 'spread' | 'inline';
+    /** Label: plain text or a snippet for rich content. */
+    label?: string | Snippet;
+    /** Secondary text under the main label. */
+    sublabel?: string | Snippet;
+    title?: string;
+    /** Accessible name fallback when `label` is a snippet (forwarded to `aria-label`). */
+    name?: string;
     on?: {
-        change: (value: boolean) => void;
+        change?: (value: boolean) => void;
     };
 };
 /**
- * A toggle switch for boolean on/off states with optional label.
+ * Toggle (switch) — boolean on/off control. Renders a bare `<button role="switch">` by default;
+ * when `label` or `sublabel` is supplied, wraps in a clickable `<label>` row with two layouts:
+ * `spread` (settings-row, label left + switch right, fills container) or `inline` (compact,
+ * switch left + label right, intrinsic width).
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--toggle--color` | Active track color | `primary-500` / `primary-400` |
- * | `--sc-kit--toggle--root--font-size` | Root font size | `1rem` |
- * | `--sc-kit--toggle--label--font-size` | Label font size | `1em` |
- * | `--sc-kit--toggle--switch--font-size` | Switch font size | `1em` |
- * | `--sc-kit--toggle--switch--width` | Switch track width | `2.5em` |
- * | `--sc-kit--toggle--switch--height` | Switch track height | `1.375em` |
- * | `--sc-kit--toggle--switch--border-radius` | Track border radius | `(height)` |
+ * | `--sc-kit--toggle--track-width` | Track width | per size |
+ * | `--sc-kit--toggle--track-height` | Track height | per size |
+ * | `--sc-kit--toggle--thumb-size` | Thumb width/height | per size |
+ * | `--sc-kit--toggle--thumb-travel` | Distance the thumb slides when toggled | per size |
+ * | `--sc-kit--toggle--thumb-offset` | Inset of the thumb inside the track | `2px` |
+ * | `--sc-kit--toggle--background` | Track background (off) | `var(--sc-kit--color--border--strong)` |
+ * | `--sc-kit--toggle--background--on` | Track background (on) | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--toggle--thumb-color` | Thumb color | `#fff` |
+ * | `--sc-kit--toggle--thumb-shadow` | Thumb shadow | `0 1px 2px rgba(0, 0, 0, 0.2)` |
+ * | `--sc-kit--toggle--focus-ring-color` | Focus outline color | `var(--sc-kit--color--border--focus)` |
+ * | `--sc-kit--toggle-row--gap` | Gap between label and switch | `var(--sc-kit--space--3)` |
+ * | `--sc-kit--toggle-row--label--font-size` | Label font size | `var(--sc-kit--font-size--md)` |
+ * | `--sc-kit--toggle-row--label--color` | Label color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--toggle-row--sub--font-size` | Sublabel font size | `var(--sc-kit--font-size--sm)` |
+ * | `--sc-kit--toggle-row--sub--color` | Sublabel color | `var(--sc-kit--color--text--muted)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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>