@connve/ui 0.0.0-stage → 0.1.0

package/dist/AppShell.svelte

@@ -0,0 +1,258 @@
+<script lang="ts" module>
+	import type { IconifyIcon } from '@iconify/svelte';
+
+	export interface NavItem {
+		href: string;
+		/** An Iconify name such as `tabler:home`, or icon data, which needs no request. */
+		icon: string | IconifyIcon;
+		label: string;
+		active: boolean;
+		/** A count shown on the item, such as unread conversations. */
+		badge?: number;
+		/** Names the item while it shows `badge`, e.g. "Agents, 2 unread"; `labels.navBadge` otherwise. */
+		badgeLabel?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import * as icons from './icons.js';
+	import { onMount, untrack, type Snippet } from 'svelte';
+	import { MediaQuery } from 'svelte/reactivity';
+	import { keepFocusWithin } from './focus.js';
+	import { labels } from './labels.svelte.js';
+	import { MOBILE_QUERY } from './mobile.js';
+	import { ShellState, setShell } from './shell.svelte.js';
+
+	interface Props {
+		/** The rail's links; each `href` must be unique. */
+		nav: NavItem[];
+		/** The logo at the top of the rail; it gives way to the expand button on hover while compact. */
+		brand?: Snippet;
+		/** The bottom of the rail, such as a version and a settings link. */
+		railFooter?: Snippet<[{ compact: boolean }]>;
+		/** The right side of the top bar. */
+		actions?: Snippet;
+		children: Snippet;
+	}
+
+	let { nav, brand, railFooter, actions, children }: Props = $props();
+
+	const shell = setShell(new ShellState());
+
+	const COLLAPSED_KEY = 'connve-nav-collapsed';
+
+	let collapsed = $state(true);
+	// On a phone the rail is a drawer, opened from the top bar and always full width. Open, it
+	// covers the page, so it acts as a dialog. Crossing the phone breakpoint closes it.
+	const phone = new MediaQuery(MOBILE_QUERY);
+	let menuOpen = $derived.by(() => {
+		void phone.current;
+		return false;
+	});
+	let compact = $derived(collapsed && !menuOpen);
+	let rail = $state<HTMLElement | null>(null);
+	let menuButton = $state<HTMLButtonElement | null>(null);
+
+	$effect(() => {
+		if (menuOpen) untrack(() => rail?.querySelector<HTMLElement>('nav a[href]')?.focus());
+	});
+
+	onMount(() => {
+		try {
+			const saved = localStorage.getItem(COLLAPSED_KEY);
+			if (saved !== null) collapsed = saved === '1';
+		} catch {
+			// The rail starts collapsed.
+		}
+	});
+
+	function toggle() {
+		collapsed = !collapsed;
+		try {
+			localStorage.setItem(COLLAPSED_KEY, collapsed ? '1' : '0');
+		} catch {
+			// Not remembered, but the rail still changes for this visit.
+		}
+	}
+
+	// Any link in the drawer navigates away from it, including the app's own in `brand` and `railFooter`.
+	function closeOnLink(event: MouseEvent) {
+		if (event.target instanceof Element && event.target.closest('a[href]')) menuOpen = false;
+	}
+
+	function closeMenu() {
+		menuOpen = false;
+		menuButton?.focus();
+	}
+
+	function onRailKeydown(event: KeyboardEvent) {
+		if (!menuOpen || !rail) return;
+		if (event.key === 'Escape') closeMenu();
+		else keepFocusWithin(event, rail);
+	}
+
+	const BUTTON =
+		'flex h-8 w-8 items-center justify-center rounded-md text-base-content/60 transition-colors hover:bg-base-200 hover:text-base-content';
+</script>
+
+<svelte:window onpopstate={() => (menuOpen = false)} />
+
+<div class="min-h-screen overflow-x-hidden bg-base-100 text-base-content">
+	<div class="flex min-h-screen w-full min-w-0">
+		{#if menuOpen}
+			<div
+				class="fixed inset-0 z-30 bg-black/30 md:hidden"
+				aria-hidden="true"
+				onclick={closeMenu}
+			></div>
+		{/if}
+		<div
+			bind:this={rail}
+			role={menuOpen ? 'dialog' : undefined}
+			aria-modal={menuOpen ? 'true' : undefined}
+			aria-label={menuOpen ? labels.menu : undefined}
+			onclick={closeOnLink}
+			onkeydown={onRailKeydown}
+			class={[
+				'flex shrink-0 flex-col border-r border-base-200 bg-base-100 transition-[width] duration-200 ease-out motion-reduce:transition-none',
+				menuOpen
+					? 'max-md:fixed max-md:inset-y-0 max-md:left-0 max-md:z-40 max-md:w-64 max-md:shadow-xl'
+					: 'max-md:hidden',
+				compact ? 'w-16' : 'w-56'
+			]}
+		>
+			<div
+				class={[
+					'group relative flex h-16 shrink-0 items-center',
+					compact ? 'justify-center' : 'justify-between pr-3 pl-6'
+				]}
+			>
+				{#if brand}
+					<div
+						class={[
+							'flex h-10 items-center transition-opacity',
+							compact && 'md:group-hover:opacity-0 md:group-has-[button:focus-visible]:opacity-0'
+						]}
+					>
+						{@render brand()}
+					</div>
+				{/if}
+				<div
+					class={[
+						'tooltip tooltip-right max-md:hidden',
+						compact &&
+							brand &&
+							'absolute inset-0 m-auto h-8 w-8 opacity-0 transition-opacity group-hover:opacity-100 has-[button:focus-visible]:opacity-100'
+					]}
+					data-tip={collapsed ? labels.navExpand : labels.navCollapse}
+				>
+					<button
+						type="button"
+						aria-label={collapsed ? labels.navExpand : labels.navCollapse}
+						aria-expanded={!collapsed}
+						class={BUTTON}
+						onclick={toggle}
+					>
+						<Icon
+							icon={collapsed ? icons.layoutSidebarLeftExpand : icons.layoutSidebarLeftCollapse}
+							class="h-5 w-5"
+						/>
+					</button>
+				</div>
+			</div>
+
+			<nav
+				aria-label={labels.navigation}
+				class={[
+					'flex-1 space-y-px pb-2 max-md:pt-2',
+					compact ? 'flex flex-col items-center' : 'px-3'
+				]}
+			>
+				{#each nav as item (item.href)}
+					{@const label = item.badge
+						? (item.badgeLabel ?? labels.navBadge(item.label, item.badge))
+						: item.label}
+					<!-- The tooltip wraps the link, so it shows on keyboard focus too. -->
+					<div class={[compact && 'tooltip tooltip-right']} data-tip={compact ? label : undefined}>
+						<a
+							href={item.href}
+							class={[
+								'relative flex h-9 items-center rounded-md text-sm transition-colors',
+								item.active
+									? 'bg-base-200 font-semibold text-base-content'
+									: 'font-medium text-base-content/70 hover:bg-base-200/60 hover:text-base-content',
+								compact ? 'w-9 justify-center' : 'gap-3 px-3'
+							]}
+							aria-label={label}
+							aria-current={item.active ? 'page' : undefined}
+						>
+							<Icon icon={item.icon} class="h-5 w-5 shrink-0" />
+							{#if !compact}
+								<span>{item.label}</span>
+							{/if}
+							{#if item.badge}
+								<span
+									class={[
+										'badge badge-primary',
+										compact ? 'absolute -top-1 -right-1 min-w-4 px-1 badge-xs' : 'ml-auto badge-sm'
+									]}
+								>
+									{item.badge}
+								</span>
+							{/if}
+						</a>
+					</div>
+				{/each}
+			</nav>
+
+			{#if railFooter}
+				<div class={['flex h-12 shrink-0 items-center', compact ? 'justify-center' : 'px-6']}>
+					{@render railFooter({ compact })}
+				</div>
+			{/if}
+		</div>
+
+		{#if shell.pane}
+			<div class="relative flex h-screen shrink-0">
+				{@render shell.pane()}
+			</div>
+		{/if}
+
+		<div class="flex min-w-0 flex-1 flex-col bg-base-100">
+			<header class="flex h-16 items-center justify-between gap-3 px-4 md:px-6">
+				<div class="flex items-center">
+					<button
+						bind:this={menuButton}
+						type="button"
+						class="{BUTTON} md:hidden"
+						aria-label={labels.menu}
+						aria-expanded={menuOpen}
+						onclick={() => (menuOpen = true)}
+					>
+						<Icon icon={icons.menu2} class="h-5 w-5" />
+					</button>
+					{#if shell.expand}
+						<button
+							bind:this={shell.expandButton}
+							type="button"
+							class="{BUTTON} md:hidden"
+							aria-label={shell.expand.label}
+							aria-expanded="false"
+							onclick={shell.expand.onclick}
+						>
+							<Icon icon={icons.layoutSidebarLeftExpand} class="h-5 w-5" />
+						</button>
+					{/if}
+				</div>
+				<div class="flex items-center justify-end gap-3">
+					{@render actions?.()}
+				</div>
+			</header>
+
+			<main class="min-w-0 flex-1 overflow-hidden bg-base-100">
+				{@render children()}
+			</main>
+		</div>
+	</div>
+</div>

package/dist/AppShell.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { IconifyIcon } from '@iconify/svelte';
+export interface NavItem {
+    href: string;
+    /** An Iconify name such as `tabler:home`, or icon data, which needs no request. */
+    icon: string | IconifyIcon;
+    label: string;
+    active: boolean;
+    /** A count shown on the item, such as unread conversations. */
+    badge?: number;
+    /** Names the item while it shows `badge`, e.g. "Agents, 2 unread"; `labels.navBadge` otherwise. */
+    badgeLabel?: string;
+}
+import { type Snippet } from 'svelte';
+interface Props {
+    /** The rail's links; each `href` must be unique. */
+    nav: NavItem[];
+    /** The logo at the top of the rail; it gives way to the expand button on hover while compact. */
+    brand?: Snippet;
+    /** The bottom of the rail, such as a version and a settings link. */
+    railFooter?: Snippet<[{
+        compact: boolean;
+    }]>;
+    /** The right side of the top bar. */
+    actions?: Snippet;
+    children: Snippet;
+}
+declare const AppShell: import("svelte").Component<Props, {}, "">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;

package/dist/Badge.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	// Single badge style for the whole UI: uppercase, small.
+	// - neutral: outlined, monochrome, faded (used for type tags: flow, sql, json).
+	// - success/error/warning: filled soft (bg-*/10 + text-*) — same look as the
+	//   Copied confirmation, reads strongly against row background.
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		variant?: 'neutral' | 'success' | 'error' | 'warning';
+		children: Snippet;
+	}
+
+	let { variant = 'neutral', class: className, children, ...rest }: Props = $props();
+
+	const VARIANT = {
+		neutral: 'border-current opacity-60',
+		success: 'border-transparent bg-primary/10 text-(--color-chip-success)',
+		error: 'border-transparent bg-error/10 text-(--color-chip-error)',
+		warning: 'border-transparent bg-warning/10 text-attention'
+	};
+</script>
+
+<span
+	{...rest}
+	class={[
+		'inline-block rounded border px-1.5 py-0.5 text-[10px] leading-none font-semibold tracking-wider whitespace-nowrap uppercase',
+		VARIANT[variant],
+		className
+	]}
+>
+	{@render children()}
+</span>

package/dist/Badge.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    variant?: 'neutral' | 'success' | 'error' | 'warning';
+    children: Snippet;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/ContextBridge.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	// Renders `children` with contexts from elsewhere in the tree: content a component
+	// hands to the shell renders in the shell, and would otherwise lose the page's contexts.
+	import { setContext, type Snippet } from 'svelte';
+
+	interface Props {
+		contexts: Map<unknown, unknown>;
+		children: Snippet;
+	}
+
+	let { contexts, children }: Props = $props();
+
+	// Contexts can only be set while the component starts, so the first `contexts` is the one used.
+	// svelte-ignore state_referenced_locally
+	for (const [key, value] of contexts) setContext(key, value);
+</script>
+
+{@render children()}

package/dist/ContextBridge.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Snippet } from 'svelte';
+interface Props {
+    contexts: Map<unknown, unknown>;
+    children: Snippet;
+}
+declare const ContextBridge: import("svelte").Component<Props, {}, "">;
+type ContextBridge = ReturnType<typeof ContextBridge>;
+export default ContextBridge;

package/dist/CopyButton.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import * as icons from './icons.js';
+	import { onDestroy } from 'svelte';
+	import { labels } from './labels.svelte.js';
+	import { TOOLTIP_SIDE, type TooltipSide } from './tooltip.js';
+
+	interface Props {
+		text: string | null | undefined;
+		/** Names the button, and shows as its tooltip; `labels.copy` when unset. */
+		label?: string;
+		size?: 'xs' | 'sm';
+		tooltip?: TooltipSide;
+	}
+
+	let { text, label, size = 'sm', tooltip = 'left' }: Props = $props();
+
+	let copied = $state(false);
+	let timeout: ReturnType<typeof setTimeout> | undefined;
+
+	onDestroy(() => clearTimeout(timeout));
+
+	async function onclick() {
+		if (!text) return;
+		try {
+			await navigator.clipboard.writeText(text);
+			copied = true;
+			clearTimeout(timeout);
+			timeout = setTimeout(() => (copied = false), 1500);
+		} catch {
+			// Clipboard refused — silent no-op.
+		}
+	}
+</script>
+
+<div
+	class={['tooltip', TOOLTIP_SIDE[tooltip]]}
+	data-tip={copied ? labels.copied : (label ?? labels.copy)}
+>
+	<button
+		type="button"
+		class={[
+			'flex items-center justify-center rounded-md text-base-content/60 transition-colors hover:bg-base-200 hover:text-base-content disabled:opacity-40',
+			size === 'xs' ? 'h-6 w-6' : 'h-8 w-8'
+		]}
+		aria-label={label ?? labels.copy}
+		{onclick}
+		disabled={!text}
+	>
+		<Icon
+			icon={copied ? icons.check : icons.copy}
+			class="{size === 'xs' ? 'h-4 w-4' : 'h-5 w-5'} {copied ? 'text-primary' : ''}"
+		/>
+	</button>
+	<!-- Always present, so screen readers announce the confirmation when it appears. -->
+	<span class="sr-only" role="status">{copied ? labels.copied : ''}</span>
+</div>

package/dist/CopyButton.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type TooltipSide } from './tooltip.js';
+interface Props {
+    text: string | null | undefined;
+    /** Names the button, and shows as its tooltip; `labels.copy` when unset. */
+    label?: string;
+    size?: 'xs' | 'sm';
+    tooltip?: TooltipSide;
+}
+declare const CopyButton: import("svelte").Component<Props, {}, "">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;

package/dist/EditButton.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import * as icons from './icons.js';
+	import { labels } from './labels.svelte.js';
+	import { TOOLTIP_SIDE, type TooltipSide } from './tooltip.js';
+
+	interface Props {
+		/** Editor link; without one the button is read-only and says why. */
+		href: string | null;
+		tooltip?: TooltipSide;
+	}
+
+	let { href, tooltip = 'bottom' }: Props = $props();
+
+	const reasonId = $props.id();
+</script>
+
+{#if href}
+	<a {href} class="btn gap-1.5 btn-ghost btn-sm">
+		<Icon icon={icons.pencil} class="h-4 w-4" />
+		{labels.edit}
+	</a>
+{:else}
+	<!-- `aria-disabled` rather than `disabled`, so keyboard users can reach the button and its reason. -->
+	<div class={['tooltip', TOOLTIP_SIDE[tooltip]]} data-tip={labels.editReadOnly}>
+		<button
+			type="button"
+			class="btn gap-1.5 btn-ghost btn-sm"
+			aria-disabled="true"
+			aria-describedby={reasonId}
+		>
+			<Icon icon={icons.pencil} class="h-4 w-4" />
+			{labels.edit}
+		</button>
+		<span id={reasonId} class="sr-only">{labels.editReadOnly}</span>
+	</div>
+{/if}

package/dist/EditButton.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type TooltipSide } from './tooltip.js';
+interface Props {
+    /** Editor link; without one the button is read-only and says why. */
+    href: string | null;
+    tooltip?: TooltipSide;
+}
+declare const EditButton: import("svelte").Component<Props, {}, "">;
+type EditButton = ReturnType<typeof EditButton>;
+export default EditButton;

package/dist/FolderTree.svelte

@@ -0,0 +1,116 @@
+<script lang="ts" generics="T">
+	import Icon, { type IconifyIcon } from '@iconify/svelte';
+	import * as icons from './icons.js';
+	import type { Snippet } from 'svelte';
+	import type { TreeNode } from './tree.js';
+
+	interface Props {
+		tree: TreeNode<T>[];
+		/** The selected folder, `null` for all. */
+		selected: string | null;
+		expanded: ReadonlySet<string>;
+		allLabel: string;
+		allIcon: string | IconifyIcon;
+		/** Shown after the "all" row's label. */
+		allCount?: number;
+		expandLabel: (folder: string) => string;
+		collapseLabel: (folder: string) => string;
+		onselect: (folder: string | null) => void;
+		ontoggle: (folder: string) => void;
+		/** Shown after a folder's name; its item count when unset. */
+		trailing?: Snippet<[TreeNode<T>]>;
+	}
+
+	let {
+		tree,
+		selected,
+		expanded,
+		allLabel,
+		allIcon,
+		allCount,
+		expandLabel,
+		collapseLabel,
+		onselect,
+		ontoggle,
+		trailing
+	}: Props = $props();
+
+	function row(isSelected: boolean) {
+		return [
+			'flex h-9 w-full min-w-0 items-center gap-2 rounded-md pr-2 text-left text-sm transition-colors',
+			isSelected ? 'bg-base-200 font-medium' : 'hover:bg-base-200/60'
+		];
+	}
+</script>
+
+<ul class="space-y-px">
+	<li>
+		<button
+			type="button"
+			class={row(selected === null)}
+			style="padding-left: 1.75rem"
+			aria-current={selected === null ? 'true' : undefined}
+			onclick={() => onselect(null)}
+		>
+			<Icon icon={allIcon} class="h-4 w-4 shrink-0 opacity-60" />
+			<span class="min-w-0 flex-1 truncate">{allLabel}</span>
+			{#if allCount !== undefined}
+				<span class="shrink-0 text-xs text-base-content/60 tabular-nums">{allCount}</span>
+			{/if}
+		</button>
+	</li>
+	{#snippet folders(nodes: TreeNode<T>[])}
+		{#each nodes.filter((node) => node.isFolder) as node (node.fullPath)}
+			{@const isOpen = expanded.has(node.fullPath)}
+			{@const canExpand = (node.children ?? []).some((child) => child.isFolder)}
+			{@const indent = node.depth * 0.75}
+			<li>
+				<div class="relative">
+					<button
+						type="button"
+						class={row(selected === node.fullPath)}
+						style="padding-left: {indent + 1.75}rem"
+						aria-current={selected === node.fullPath ? 'true' : undefined}
+						onclick={() => onselect(node.fullPath)}
+					>
+						<Icon
+							icon={isOpen && canExpand ? icons.folderOpen : icons.folder}
+							class="h-4 w-4 shrink-0 opacity-60"
+						/>
+						<span class="min-w-0 flex-1 truncate">{node.name}</span>
+						{#if trailing}
+							{@render trailing(node)}
+						{:else if node.fileCount !== undefined}
+							<span class="shrink-0 text-xs text-base-content/60 tabular-nums"
+								>{node.fileCount}</span
+							>
+						{/if}
+					</button>
+					{#if canExpand}
+						<button
+							type="button"
+							class="absolute top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded text-base-content/60 hover:bg-base-300/50 hover:text-base-content"
+							style="left: {indent + 0.25}rem"
+							aria-label={isOpen ? collapseLabel(node.name) : expandLabel(node.name)}
+							aria-expanded={isOpen}
+							onclick={() => ontoggle(node.fullPath)}
+						>
+							<Icon
+								icon={icons.chevronRight}
+								class="h-3.5 w-3.5 transition-transform motion-reduce:transition-none {isOpen
+									? 'rotate-90'
+									: ''}"
+							/>
+						</button>
+					{/if}
+				</div>
+				{#if isOpen && canExpand && node.children}
+					<ul class="space-y-px">
+						{@render folders(node.children)}
+					</ul>
+				{/if}
+			</li>
+		{/each}
+	{/snippet}
+	{@render folders(tree)}
+</ul>

package/dist/FolderTree.svelte.d.ts

@@ -0,0 +1,42 @@
+import { type IconifyIcon } from '@iconify/svelte';
+import type { Snippet } from 'svelte';
+import type { TreeNode } from './tree.js';
+declare function $$render<T>(): {
+    props: {
+        tree: TreeNode<T>[];
+        /** The selected folder, `null` for all. */
+        selected: string | null;
+        expanded: ReadonlySet<string>;
+        allLabel: string;
+        allIcon: string | IconifyIcon;
+        /** Shown after the "all" row's label. */
+        allCount?: number;
+        expandLabel: (folder: string) => string;
+        collapseLabel: (folder: string) => string;
+        onselect: (folder: string | null) => void;
+        ontoggle: (folder: string) => void;
+        /** Shown after a folder's name; its item count when unset. */
+        trailing?: Snippet<[TreeNode<T>]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const FolderTree: $$IsomorphicComponent;
+type FolderTree<T> = InstanceType<typeof FolderTree<T>>;
+export default FolderTree;

package/dist/IconButton.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import Icon, { type IconifyIcon } from '@iconify/svelte';
+	import { TOOLTIP_SIDE, type TooltipSide } from './tooltip.js';
+
+	interface Props {
+		/** An Iconify name, or icon data, which needs no request. */
+		icon: string | IconifyIcon;
+		/** Names the button, and shows as its tooltip. */
+		label: string;
+		/** A link when set, otherwise a button. */
+		href?: string;
+		onclick?: (event: MouseEvent) => void;
+		tooltip?: TooltipSide;
+		ref?: HTMLAnchorElement | HTMLButtonElement | null;
+	}
+
+	let { icon, label, href, onclick, tooltip = 'bottom', ref = $bindable(null) }: Props = $props();
+
+	const CLASS =
+		'flex h-8 w-8 items-center justify-center rounded-md text-base-content/60 transition-colors hover:bg-base-200 hover:text-base-content';
+</script>
+
+<div class={['tooltip', TOOLTIP_SIDE[tooltip]]} data-tip={label}>
+	{#if href}
+		<a bind:this={ref} {href} class={CLASS} aria-label={label} {onclick}>
+			<Icon {icon} class="h-5 w-5" />
+		</a>
+	{:else}
+		<button bind:this={ref} type="button" class={CLASS} aria-label={label} {onclick}>
+			<Icon {icon} class="h-5 w-5" />
+		</button>
+	{/if}
+</div>