@lyeve-labs/ui-kit 0.22.2 → 0.23.1

package/dist/components/Button.svelte

@@ -2,6 +2,7 @@
   import type { Snippet } from 'svelte';
   import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
   import Spinner from './Spinner.svelte';
+  import Tooltip from './Tooltip.svelte';
   import { safeHref } from '../internal/href.js';
 
   type Variant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'violet';
@@ -25,6 +26,18 @@
     type?: 'button' | 'submit' | 'reset';
     href?: string;
     full?: boolean;
+    /**
+     * The words shown on hover and focus. Defaults to the button's own
+     * aria-label, so an icon-only button names itself to a sighted reader the
+     * way it already does to a screen reader; a string replaces those words,
+     * and `false` keeps the button silent.
+     *
+     * Thirty-five icon-only actions across one console had a name and no
+     * hint, so a pointer user learned what the trash can did by pressing it.
+     * The hint lives here rather than on each caller because the rule that
+     * makes a row action icon-only is the kit's, and so is the fix.
+     */
+    hint?: string | false;
     class?: string;
     onclick?: (e: MouseEvent) => void;
     children: Snippet;
@@ -38,12 +51,18 @@
     type = 'button',
     href = undefined,
     full = false,
+    hint = undefined,
     class: klass = '',
     onclick,
     children,
     ...rest
   }: Props = $props();
 
+  /** The hint text, or nothing: an explicit string, else the aria-label, unless switched off. */
+  const hintText = $derived(
+    hint === false ? undefined : (hint ?? (rest['aria-label'] || undefined)),
+  );
+
   /**
    * Colour per variant, in three states: at rest, under a pointer, and held.
    *
@@ -104,27 +123,40 @@
   const inert = $derived(disabled || loading);
 </script>
 
-{#if href}
-  <a
-    href={inert ? undefined : resolvedHref}
-    class="{cls} {inert ? 'pointer-events-none opacity-50' : ''}"
-    aria-disabled={inert ? 'true' : undefined}
-    tabindex={inert ? -1 : undefined}
-    {...rest}
-  >
-    {#if loading}<Spinner size={spinnerSize} />{/if}
-    {@render children()}
-  </a>
+{#snippet control()}
+  {#if href}
+    <a
+      href={inert ? undefined : resolvedHref}
+      class="{cls} {inert ? 'pointer-events-none opacity-50' : ''}"
+      aria-disabled={inert ? 'true' : undefined}
+      tabindex={inert ? -1 : undefined}
+      {...rest}
+    >
+      {#if loading}<Spinner size={spinnerSize} />{/if}
+      {@render children()}
+    </a>
+  {:else}
+    <button
+      {type}
+      disabled={disabled || loading}
+      aria-busy={loading ? 'true' : undefined}
+      {onclick}
+      class={cls}
+      {...rest}
+    >
+      {#if loading}<Spinner size={spinnerSize} />{/if}
+      {@render children()}
+    </button>
+  {/if}
+{/snippet}
+
+<!-- The hint repeats the name, so it does not describe the control a second
+     time; the aria-label already announces it. The wrapper takes the full
+     width along with the button, or a full button would shrink to its text. -->
+{#if hintText}
+  <Tooltip text={hintText} describe={false} class={full ? 'w-full' : ''}>
+    {@render control()}
+  </Tooltip>
 {:else}
-  <button
-    {type}
-    disabled={disabled || loading}
-    aria-busy={loading ? 'true' : undefined}
-    {onclick}
-    class={cls}
-    {...rest}
-  >
-    {#if loading}<Spinner size={spinnerSize} />{/if}
-    {@render children()}
-  </button>
+  {@render control()}
 {/if}

package/dist/components/Button.svelte.d.ts

@@ -16,6 +16,18 @@ interface Props extends Forwarded {
     type?: 'button' | 'submit' | 'reset';
     href?: string;
     full?: boolean;
+    /**
+     * The words shown on hover and focus. Defaults to the button's own
+     * aria-label, so an icon-only button names itself to a sighted reader the
+     * way it already does to a screen reader; a string replaces those words,
+     * and `false` keeps the button silent.
+     *
+     * Thirty-five icon-only actions across one console had a name and no
+     * hint, so a pointer user learned what the trash can did by pressing it.
+     * The hint lives here rather than on each caller because the rule that
+     * makes a row action icon-only is the kit's, and so is the fix.
+     */
+    hint?: string | false;
     class?: string;
     onclick?: (e: MouseEvent) => void;
     children: Snippet;

package/dist/components/Tooltip.svelte

@@ -6,24 +6,84 @@
   interface Props {
     text: string;
     position?: Position;
+    /**
+     * Whether the text is the trigger's accessible description.
+     *
+     * On by default, because a tooltip that nothing points at is read by
+     * nobody. Off for a trigger that already carries the same words as its
+     * name: an icon-only button named by aria-label would otherwise be
+     * announced as "Delete, Delete", so the hint stays visual there and the
+     * name does the announcing.
+     */
+    describe?: boolean;
     class?: string;
     children: Snippet;
   }
 
-  let { text, position = 'top', class: cls = '', children }: Props = $props();
+  let { text, position = 'top', describe = true, class: cls = '', children }: Props = $props();
 
   let visible = $state(false);
   let wrapper = $state<HTMLElement>();
 
   const id = $props.id();
 
+  /**
+   * The box is positioned from the trigger's bounding box, fixed to the
+   * viewport, rather than absolutely inside the wrapper.
+   *
+   * Inside the wrapper it took the wrapper's width, so a hint on an icon
+   * button broke one character per line, and any ancestor that scrolls cut
+   * it off: a Table's scroller is overflow-x auto, which makes its vertical
+   * overflow auto as well, so a hint on a row action was clipped at the
+   * header. Nothing between a fixed box and the viewport can clip it. The
+   * translate carries the half of the geometry that depends on the box's own
+   * size, which is not known until it renders.
+   */
   const pos: Record<Position, string> = {
-    top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
-    bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
-    left: 'right-full top-1/2 -translate-y-1/2 mr-2',
-    right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+    top: '-translate-x-1/2 -translate-y-full',
+    bottom: '-translate-x-1/2',
+    left: '-translate-x-full -translate-y-1/2',
+    right: '-translate-y-1/2',
   };
 
+  /** The distance between the trigger's edge and the box. */
+  const GAP = 8;
+
+  let anchor = $state({ top: 0, left: 0 });
+
+  function place() {
+    const r = wrapper?.getBoundingClientRect();
+    if (!r) return;
+    switch (position) {
+      case 'top':
+        anchor = { top: r.top - GAP, left: r.left + r.width / 2 };
+        break;
+      case 'bottom':
+        anchor = { top: r.bottom + GAP, left: r.left + r.width / 2 };
+        break;
+      case 'left':
+        anchor = { top: r.top + r.height / 2, left: r.left - GAP };
+        break;
+      case 'right':
+        anchor = { top: r.top + r.height / 2, left: r.right + GAP };
+        break;
+    }
+  }
+
+  function show() {
+    place();
+    visible = true;
+  }
+
+  // A fixed box does not follow a trigger that scrolls away from under it,
+  // so a scroll anywhere closes the hint rather than leaving it stranded.
+  $effect(() => {
+    if (!visible) return;
+    const close = () => (visible = false);
+    window.addEventListener('scroll', close, { capture: true, passive: true });
+    return () => window.removeEventListener('scroll', close, { capture: true });
+  });
+
   /**
    * `role="tooltip"` on its own is inert: assistive technology reads a tooltip
    * only because the element it describes points at it. The trigger arrives as
@@ -32,6 +92,7 @@
    * text was visible to a sighted mouse user and to nobody else.
    */
   $effect(() => {
+    if (!describe) return;
     const trigger = wrapper?.querySelector<HTMLElement>(
       'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])',
     );
@@ -57,9 +118,9 @@
 <span
   bind:this={wrapper}
   class="relative inline-flex {cls}"
-  onmouseenter={() => (visible = true)}
+  onmouseenter={show}
   onmouseleave={() => (visible = false)}
-  onfocusin={() => (visible = true)}
+  onfocusin={show}
   onfocusout={() => (visible = false)}
   {onkeydown}
 >
@@ -70,9 +131,11 @@
        moving onto it does not dismiss it, which SC 1.4.13 also requires. -->
   <span
     {id}
-    role="tooltip"
+    role={describe ? 'tooltip' : undefined}
+    aria-hidden={describe ? undefined : 'true'}
     hidden={!visible}
-    class="absolute {pos[position]} z-tooltip max-w-[min(16rem,calc(100vw-2rem))]
+    style="top: {anchor.top}px; left: {anchor.left}px"
+    class="fixed {pos[position]} z-tooltip w-max max-w-[min(16rem,calc(100vw-2rem))]
       rounded-lg border border-line bg-surface-2 px-2.5 py-1.5 text-xs text-fg shadow-xl"
   >
     {text}

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

@@ -3,6 +3,16 @@ type Position = 'top' | 'bottom' | 'left' | 'right';
 interface Props {
     text: string;
     position?: Position;
+    /**
+     * Whether the text is the trigger's accessible description.
+     *
+     * On by default, because a tooltip that nothing points at is read by
+     * nobody. Off for a trigger that already carries the same words as its
+     * name: an icon-only button named by aria-label would otherwise be
+     * announced as "Delete, Delete", so the hint stays visual there and the
+     * name does the announcing.
+     */
+    describe?: boolean;
     class?: string;
     children: Snippet;
 }

package/dist/index.d.ts

@@ -89,4 +89,4 @@ export type { ConfirmOptions } from './components/dialog/dialog-manager.svelte.j
 export type { DialogOptions, DialogEntry, DialogSize } from './components/dialog/types.js';
 export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
-export declare const VERSION = "0.22.2";
+export declare const VERSION = "0.23.1";

package/dist/index.js

@@ -96,4 +96,4 @@ export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setThe
 // ── Version ────────────────────────────────────────────────────────────────
 // Generated from package.json by `pnpm version:sync`. Bump package.json, never
 // this line; the build and the test suite fail when the two disagree.
-export const VERSION = '0.22.2';
+export const VERSION = '0.23.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.22.2",
+  "version": "0.23.1",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",