@ibobbyts/svelte-ui-utils 0.3.9 → 0.4.1

package/dist/style.css

@@ -12,7 +12,13 @@
   --suu-color-warning: #d97706;
   --suu-color-info: #2563eb;
   --suu-shadow: 0 12px 30px rgb(15 23 42 / 0.14);
-  --suu-radius: 8px;
+  --suu-radius-xs: 4px;
+  --suu-radius-sm: 6px;
+  --suu-radius-md: 8px;
+  --suu-radius-pill: 999px;
+  --suu-radius: var(--suu-radius-md);
+  --suu-radius-lg: calc(var(--suu-radius) + 2px);
+  --suu-radius-inner: max(0px, calc(var(--suu-radius) - 1px));
   --suu-font: inherit;
 }
 
@@ -35,6 +41,7 @@
 
 .suu-visually-hidden {
   position: absolute;
+  pointer-events: none;
   overflow: hidden;
   width: 1px;
   height: 1px;
@@ -170,7 +177,7 @@
   width: 28px;
   height: 28px;
   border: 0;
-  border-radius: 999px;
+  border-radius: var(--suu-radius-pill);
   background: transparent;
   color: var(--suu-color-muted);
   cursor: pointer;
@@ -236,7 +243,7 @@
   gap: 6px;
   padding: 4px 6px 4px 10px;
   border: 1px solid color-mix(in srgb, var(--suu-color-accent) 34%, var(--suu-color-border));
-  border-radius: 999px;
+  border-radius: var(--suu-radius-pill);
   background: color-mix(in srgb, var(--suu-color-accent) 9%, var(--suu-color-bg));
   color: var(--suu-color-text);
   font-size: 0.875rem;
@@ -257,7 +264,7 @@
   height: 1.25rem;
   padding: 0;
   border: 0;
-  border-radius: 999px;
+  border-radius: var(--suu-radius-pill);
   background: transparent;
   color: var(--suu-color-muted);
   cursor: pointer;
@@ -349,7 +356,7 @@
   height: 1.5rem;
   padding: 0;
   border: 0;
-  border-radius: 999px;
+  border-radius: var(--suu-radius-pill);
   background: transparent;
   color: var(--suu-color-muted);
   cursor: pointer;
@@ -451,7 +458,7 @@
   width: 1rem;
   height: 1rem;
   border: 1px solid var(--suu-color-border-strong);
-  border-radius: 4px;
+  border-radius: var(--suu-radius-xs);
   color: transparent;
 }
 
@@ -496,7 +503,7 @@
   height: 0.875rem;
   border: 2px solid color-mix(in srgb, var(--suu-color-muted) 28%, transparent);
   border-top-color: var(--suu-color-accent);
-  border-radius: 999px;
+  border-radius: var(--suu-radius-pill);
   animation: suu-dropdown-spinner 700ms linear infinite;
 }
 
@@ -690,6 +697,22 @@
   background: var(--suu-color-border);
 }
 
+.suu-filter-table__filters:not(.suu-filter-table__filters--borderless) tr:first-child th {
+  border-top-left-radius: var(--suu-radius-inner);
+}
+
+.suu-filter-table__filters:not(.suu-filter-table__filters--borderless) tr:first-child td {
+  border-top-right-radius: var(--suu-radius-inner);
+}
+
+.suu-filter-table__filters:not(.suu-filter-table__filters--borderless) tr:last-child th {
+  border-bottom-left-radius: var(--suu-radius-inner);
+}
+
+.suu-filter-table__filters:not(.suu-filter-table__filters--borderless) tr:last-child td {
+  border-bottom-right-radius: var(--suu-radius-inner);
+}
+
 .suu-filter-table__filters td {
   min-width: 0;
 }
@@ -712,6 +735,20 @@
   align-items: center;
 }
 
+.suu-filter-table__option--group-end::after {
+  position: absolute;
+  top: 5%;
+  left: calc(100% + 12px);
+  bottom: 5%;
+  width: 1px;
+  background: var(--suu-color-border);
+  content: '';
+}
+
+.suu-filter-table__option--group-end {
+  margin-right: 10px;
+}
+
 .suu-filter-table__option {
   position: relative;
   display: inline-flex;
@@ -772,7 +809,7 @@
   height: 1em;
   place-items: center;
   border: 1px solid var(--suu-color-border-strong);
-  border-radius: 999px;
+  border-radius: var(--suu-radius-pill);
   color: transparent;
   transform: translateY(0.06em);
 }
@@ -1288,7 +1325,7 @@
   width: 1em;
   height: 1em;
   border: 1px solid var(--suu-color-border);
-  border-radius: 0.2em;
+  border-radius: var(--suu-radius-xs);
   background: var(--suu-color-bg);
 }
 
@@ -1359,7 +1396,7 @@
   max-height: min(720px, calc(100vh - 48px));
   overflow: hidden;
   border: 1px solid var(--suu-color-border);
-  border-radius: calc(var(--suu-radius) + 2px);
+  border-radius: var(--suu-radius-lg);
   background: var(--suu-color-bg);
   box-shadow: var(--suu-shadow);
 }
@@ -1431,7 +1468,7 @@
   height: 2rem;
   padding: 0;
   border: 0;
-  border-radius: 999px;
+  border-radius: var(--suu-radius-pill);
   background: transparent;
   color: var(--suu-color-muted);
   cursor: pointer;
@@ -1465,6 +1502,54 @@
   background: color-mix(in srgb, var(--suu-color-surface) 64%, var(--suu-color-bg));
 }
 
+.suu-tooltip {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.suu-tooltip__panel {
+  position: fixed;
+  box-sizing: border-box;
+  top: var(--suu-tooltip-top, 0px);
+  left: var(--suu-tooltip-left, 0px);
+  z-index: 1300;
+  max-width: min(320px, calc(100vw - 16px));
+  max-height: calc(100vh - 16px);
+  padding: 8px 10px;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  background: var(--suu-color-surface);
+  color: var(--suu-color-text);
+  box-shadow: var(--suu-shadow);
+  font-size: 0.875rem;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+  overflow-y: auto;
+  pointer-events: none;
+}
+
+.suu-tooltip__panel img {
+  display: block;
+  width: auto;
+  max-width: calc(100vw - 36px);
+  max-height: calc(100vh - 36px);
+  height: auto;
+  object-fit: contain;
+}
+
+.suu-tooltip__panel:has(img) {
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100vw - 16px);
+  overflow: hidden;
+}
+
+.suu-tooltip__panel:has(img) img {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
 .suu-dialog__button {
   min-height: 38px;
   padding: 7px 14px;
@@ -1626,7 +1711,7 @@
   height: 1rem;
   border: 2px solid color-mix(in srgb, var(--suu-color-muted) 28%, transparent);
   border-top-color: var(--suu-color-accent);
-  border-radius: 999px;
+  border-radius: var(--suu-radius-pill);
   animation: suu-dropdown-spinner 700ms linear infinite;
 }
 

package/dist/tooltip/Tooltip.svelte

@@ -0,0 +1,149 @@
+<svelte:options runes={false} />
+
+<script lang="ts">
+  import { afterUpdate, onDestroy } from 'svelte';
+
+  let rootElement: HTMLSpanElement | undefined;
+  let panelElement: HTMLDivElement | undefined;
+  let hovered = false;
+  let focused = false;
+  let visible = false;
+  let panelId = `suu-tooltip-${Math.random().toString(36).slice(2)}`;
+  let frame = 0;
+  let triggerElement: HTMLElement | undefined;
+  let panelObserver: ResizeObserver | undefined;
+
+  $: visible = hovered || focused;
+
+  function updatePosition() {
+    if (!visible || !rootElement || !panelElement || typeof window === 'undefined') {
+      return;
+    }
+
+    const trigger = rootElement.getBoundingClientRect();
+    const panel = panelElement.getBoundingClientRect();
+    const gap = 8;
+    const canPlaceAbove = trigger.top >= panel.height + gap;
+    const preferredTop = canPlaceAbove ? trigger.top - panel.height - gap : trigger.bottom + gap;
+    const maxTop = Math.max(gap, window.innerHeight - panel.height - gap);
+    const top = Math.min(maxTop, Math.max(gap, preferredTop));
+    const maxLeft = Math.max(gap, window.innerWidth - panel.width - gap);
+    const left = Math.min(
+      Math.max(gap, trigger.left + (trigger.width - panel.width) / 2),
+      maxLeft,
+    );
+
+    panelElement.style.setProperty('--suu-tooltip-top', `${top}px`);
+    panelElement.style.setProperty('--suu-tooltip-left', `${left}px`);
+  }
+
+  function schedulePosition() {
+    if (typeof window === 'undefined') return;
+    cancelAnimationFrame(frame);
+    frame = requestAnimationFrame(updatePosition);
+  }
+
+  function showFromHover() {
+    hovered = true;
+    triggerElement = findTrigger();
+    schedulePosition();
+  }
+
+  function hideFromHover() {
+    hovered = false;
+  }
+
+  function focusIn(event: FocusEvent) {
+    focused = true;
+    triggerElement = event.target instanceof HTMLElement ? event.target : findTrigger();
+    schedulePosition();
+  }
+
+  function focusOut(event: FocusEvent) {
+    const next = event.relatedTarget;
+    if (next instanceof Node && rootElement?.contains(next)) return;
+    focused = false;
+  }
+
+  function handleViewportChange() {
+    schedulePosition();
+  }
+
+  function findTrigger() {
+    return rootElement?.querySelector<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    ) ?? undefined;
+  }
+
+  function syncDescription() {
+    if (!rootElement || !$$slots.content) return;
+    const nextTrigger = triggerElement ?? findTrigger();
+    if (triggerElement && triggerElement !== nextTrigger) {
+      removePanelDescription(triggerElement);
+    }
+    triggerElement = nextTrigger;
+    if (triggerElement) {
+      if (visible) addPanelDescription(triggerElement);
+      else removePanelDescription(triggerElement);
+    }
+  }
+
+  function addPanelDescription(element: HTMLElement) {
+    const ids = new Set((element.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean));
+    ids.add(panelId);
+    element.setAttribute('aria-describedby', [...ids].join(' '));
+  }
+
+  function removePanelDescription(element: HTMLElement) {
+    const ids = (element.getAttribute('aria-describedby') ?? '')
+      .split(/\s+/)
+      .filter((id) => id && id !== panelId);
+    if (ids.length > 0) element.setAttribute('aria-describedby', ids.join(' '));
+    else element.removeAttribute('aria-describedby');
+  }
+
+  function syncPanelObserver() {
+    panelObserver?.disconnect();
+    panelObserver = undefined;
+    if (visible && panelElement && typeof ResizeObserver !== 'undefined') {
+      panelObserver = new ResizeObserver(() => schedulePosition());
+      panelObserver.observe(panelElement);
+    }
+    syncDescription();
+  }
+
+  if (typeof window !== 'undefined') {
+    window.addEventListener('resize', handleViewportChange);
+    window.addEventListener('scroll', handleViewportChange, true);
+  }
+
+  afterUpdate(syncPanelObserver);
+
+  onDestroy(() => {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('resize', handleViewportChange);
+      window.removeEventListener('scroll', handleViewportChange, true);
+      cancelAnimationFrame(frame);
+    }
+    panelObserver?.disconnect();
+    if (triggerElement) removePanelDescription(triggerElement);
+  });
+</script>
+
+<span
+  bind:this={rootElement}
+  class="suu-tooltip"
+  role="group"
+  on:mouseenter={showFromHover}
+  on:mouseleave={hideFromHover}
+  on:focusin={focusIn}
+  on:focusout={focusOut}
+>
+  <slot />
+
+  {#if visible && $$slots.content}
+    <div bind:this={panelElement} class="suu-tooltip__panel" id={panelId} role="tooltip">
+      <slot name="content" />
+    </div>
+  {/if}
+</span>

package/dist/tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,22 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Tooltip: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    content: {};
+}, {}, string>;
+type Tooltip = InstanceType<typeof Tooltip>;
+export default Tooltip;
+//# sourceMappingURL=Tooltip.svelte.d.ts.map

package/dist/tooltip/Tooltip.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAqJA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,OAAO;;;;;cAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip.svelte';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/tooltip/index.js

@@ -0,0 +1 @@
+export { default as Tooltip } from './Tooltip.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibobbyts/svelte-ui-utils",
-  "version": "0.3.9",
+  "version": "0.4.1",
   "description": "Reusable Svelte 5 UI utilities for dialogs, toast notifications, dropdown search, and data tables.",
   "type": "module",
   "license": "MIT",