@immich/ui 0.50.1 → 0.52.0

package/dist/components/Alert/Alert.svelte

@@ -83,7 +83,7 @@
 {#if open}
   <Card {color} class={cleanClass(className)}>
     <CardBody>
-      <div class="flex items-center justify-between">
+      <div class={cleanClass((closable || onClose) && 'flex items-center justify-between')}>
         <div class={cleanClass('flex gap-2')}>
           {#if icon}
             <div>

package/dist/components/Badge/Badge.svelte

@@ -24,7 +24,7 @@
   }: Props = $props();
 
   const styles = tv({
-    base: 'text-light inline-flex items-center border font-medium antialiased',
+    base: 'text-light inline-flex items-center font-medium antialiased',
     variants: {
       shape: styleVariants.shape,
       color: {

package/dist/components/Card/Card.svelte

@@ -52,8 +52,8 @@
         primary: 'bg-primary-50 dark:bg-primary-100',
         secondary: 'text-dark bg-light-50 dark:bg-light-100 dark:text-white',
         success: 'bg-success-50 dark:bg-success-100',
-        danger: 'bg-danger-50 dark:bg-danger-100',
-        warning: 'bg-warning-50 dark:bg-warning-100',
+        danger: 'bg-danger-100',
+        warning: 'bg-warning-100',
         info: 'bg-info-50 dark:bg-info-100',
       },
     },

package/dist/components/CommandPalette/CommandPaletteDefaultProvider.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import CommandPaletteProvider from './CommandPaletteProvider.svelte';
+  import { defaultProvider } from '../../services/command-palette-manager.svelte.js';
+  import type { ActionItem } from '../../types.js';
+
+  type Props = {
+    name: string;
+    actions?: ActionItem[];
+  };
+
+  const { name, actions = [] }: Props = $props();
+</script>
+
+<CommandPaletteProvider providers={[defaultProvider({ name, actions })]} />

package/dist/components/CommandPalette/CommandPaletteDefaultProvider.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ActionItem } from '../../types.js';
+type Props = {
+    name: string;
+    actions?: ActionItem[];
+};
+declare const CommandPaletteDefaultProvider: import("svelte").Component<Props, {}, "">;
+type CommandPaletteDefaultProvider = ReturnType<typeof CommandPaletteDefaultProvider>;
+export default CommandPaletteDefaultProvider;

package/dist/components/CommandPalette/CommandPaletteItem.svelte

@@ -3,26 +3,18 @@
   import Badge from '../Badge/Badge.svelte';
   import Button from '../Button/Button.svelte';
   import Icon from '../Icon/Icon.svelte';
-  import IconButton from '../IconButton/IconButton.svelte';
   import Kbd from '../Kbd/Kbd.svelte';
   import Text from '../Text/Text.svelte';
   import type { ActionItem } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
-  import { mdiClose } from '@mdi/js';
 
   type Props = {
     item: ActionItem;
     selected: boolean;
     onSelect: () => void;
-    onRemove?: () => void;
   };
 
-  const { item, selected, onRemove, onSelect }: Props = $props();
-
-  const handleRemove = (event: MouseEvent) => {
-    event.stopPropagation();
-    onRemove?.();
-  };
+  const { item, selected, onSelect }: Props = $props();
 
   const shortcuts =
     item.shortcuts === undefined ? [] : Array.isArray(item.shortcuts) ? item.shortcuts : [item.shortcuts];
@@ -60,24 +52,13 @@
         >
       {/if}
       <div class="mt-2">
-        <Badge color="primary" size="small">{item.type}</Badge>
+        <Badge color="primary" size="small" shape="round">{item.type}</Badge>
         {#if item.isGlobal}
-          <Badge color="warning" size="small">Global</Badge>
+          <Badge color="warning" size="small" shape="round">Global</Badge>
         {/if}
       </div>
     </div>
-    {#if onRemove}
-      <IconButton
-        size="small"
-        onclick={handleRemove}
-        class="shrink-0"
-        icon={mdiClose}
-        shape="round"
-        variant="ghost"
-        color="secondary"
-        aria-label="Remove"
-      />
-    {:else if renderedShortcuts.length > 0}
+    {#if renderedShortcuts.length > 0}
       <div class="flex shrink-0 flex-col justify-end gap-1">
         {#each renderedShortcuts as shortcut (shortcut.join('-'))}
           <div class="flex justify-end">

package/dist/components/CommandPalette/CommandPaletteItem.svelte.d.ts

@@ -3,7 +3,6 @@ type Props = {
     item: ActionItem;
     selected: boolean;
     onSelect: () => void;
-    onRemove?: () => void;
 };
 declare const CommandPaletteItem: import("svelte").Component<Props, {}, "">;
 type CommandPaletteItem = ReturnType<typeof CommandPaletteItem>;

package/dist/components/CommandPalette/CommandPaletteProvider.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { commandPaletteManager, type ActionProvider } from '../../services/command-palette-manager.svelte.js';
+
+  type Props = {
+    providers: ActionProvider[];
+  };
+
+  const { providers }: Props = $props();
+
+  $effect(() => {
+    const callbacks: Array<() => void> = [];
+    for (const provider of providers) {
+      callbacks.push(commandPaletteManager.addProvider(provider));
+    }
+
+    return () => callbacks.forEach((callback) => callback());
+  });
+</script>

package/dist/components/CommandPalette/CommandPaletteProvider.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type ActionProvider } from '../../services/command-palette-manager.svelte.js';
+type Props = {
+    providers: ActionProvider[];
+};
+declare const CommandPaletteProvider: import("svelte").Component<Props, {}, "">;
+type CommandPaletteProvider = ReturnType<typeof CommandPaletteProvider>;
+export default CommandPaletteProvider;

package/dist/components/Heading/Heading.svelte

@@ -20,25 +20,18 @@
     children: Snippet;
   } & HTMLAttributes<HTMLElement>;
 
-  const {
-    tag = 'p',
-    size = 'medium',
-    fontWeight = 'semi-bold',
-    class: className,
-    children,
-    ...restProps
-  }: Props = $props();
+  const { tag = 'p', size = 'medium', fontWeight = 'bold', class: className, children, ...restProps }: Props = $props();
 
   const styles = tv({
     base: 'leading-none tracking-tight',
     variants: {
       size: {
-        tiny: 'text-lg',
-        small: 'text-xl',
-        medium: 'text-2xl',
+        tiny: 'text-base',
+        small: 'text-lg',
+        medium: 'text-xl',
         large: 'text-3xl',
-        giant: 'text-4xl',
-        title: 'text-5xl',
+        giant: 'text-5xl',
+        title: 'text-7xl',
       },
     },
   });

package/dist/components/IconButton/IconButton.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import Button from '../../internal/Button.svelte';
   import Icon from '../Icon/Icon.svelte';
+  import Button from '../../internal/Button.svelte';
   import type { IconButtonProps } from '../../types.js';
 
   const { icon, flipped, flopped, title, 'aria-label': ariaLabel, ...buttonProps }: IconButtonProps = $props();
 
-  const buttonTitle = $derived(title || ariaLabel);
+  const buttonTitle = $derived(title ?? ariaLabel);
 </script>
 
 <Button icon {...buttonProps} title={buttonTitle} aria-label={ariaLabel}>

package/dist/components/Markdown/Heading.svelte

@@ -11,33 +11,30 @@
 
   const { children, id, level }: Props = $props();
 
-  const getSizeAndTag = (level?: number): { size: Size; tag: HeadingTag } => {
+  const getSizeAndTag = (level?: number): { size: Size; tag: HeadingTag; padding: string } => {
     switch (level) {
       case 1: {
-        return { size: 'giant', tag: 'h1' };
+        return { size: 'giant', tag: 'h1', padding: 'mb-6' };
       }
       case 2: {
-        return { size: 'large', tag: 'h2' };
+        return { size: 'large', tag: 'h2', padding: 'my-4' };
       }
       case 3: {
-        return { size: 'medium', tag: 'h3' };
+        return { size: 'medium', tag: 'h3', padding: 'my-3' };
       }
       case 4: {
-        return { size: 'small', tag: 'h4' };
+        return { size: 'small', tag: 'h4', padding: 'my-1' };
       }
       case 5: {
-        return { size: 'tiny', tag: 'h5' };
-      }
-      case 6: {
-        return { size: 'tiny', tag: 'h6' };
+        return { size: 'tiny', tag: 'h5', padding: 'my-0.5' };
       }
       default: {
-        return { size: 'tiny', tag: 'p' };
+        return { size: 'tiny', tag: 'p', padding: '' };
       }
     }
   };
 
-  let { size, tag } = $derived(getSizeAndTag(level));
+  let { size, tag, padding } = $derived(getSizeAndTag(level));
 </script>
 
-<Heading {size} {tag} class="mt-4 mb-1" {id} {children} />
+<Heading {size} {tag} class={padding} {id} {children} />

package/dist/components/Modal/Modal.svelte

@@ -8,12 +8,12 @@
   import CloseButton from '../CloseButton/CloseButton.svelte';
   import Icon from '../Icon/Icon.svelte';
   import Logo from '../Logo/Logo.svelte';
+  import TooltipProvider from '../Tooltip/TooltipProvider.svelte';
   import { ChildKey, zIndex } from '../../constants.js';
-  import { commandPaletteManager } from '../../services/command-palette-manager.svelte.js';
   import type { ModalSize } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import { Dialog } from 'bits-ui';
-  import { onMount, tick, type Snippet } from 'svelte';
+  import { tick, type Snippet } from 'svelte';
   import { tv } from 'tailwind-variants';
 
   type Props = {
@@ -86,8 +86,6 @@
 
   const interactOutsideBehavior = $derived(closeOnBackdropClick ? 'close' : 'ignore');
   const escapeKeydownBehavior = $derived(closeOnEsc ? 'close' : 'ignore');
-
-  onMount(() => commandPaletteManager.pushContextLayer());
 </script>
 
 <Dialog.Root open={true} onOpenChange={(isOpen: boolean) => !isOpen && handleClose()}>
@@ -99,35 +97,37 @@
       {interactOutsideBehavior}
       class={cleanClass(modalContentStyles({ size }))}
     >
-      <div class={cleanClass('flex w-full grow flex-col justify-center')}>
-        <Card bind:ref={cardRef} class={cleanClass(modalStyles({ size }), className)}>
-          <CardHeader class="border-b border-gray-200 px-5 py-3 dark:border-white/10">
-            {#if headerChildren}
-              {@render headerChildren.snippet()}
-            {:else if title}
-              <div class="flex items-center justify-between gap-2">
-                {#if typeof icon === 'string'}
-                  <Icon {icon} size="1.5rem" aria-hidden />
-                {:else if icon}
-                  <Logo variant="icon" size="tiny" />
-                {/if}
-                <CardTitle tag="p" class="text-dark/90 grow text-lg font-semibold">{title}</CardTitle>
-                <CloseButton class="-me-2" onclick={() => handleClose()} />
-              </div>
-            {/if}
-          </CardHeader>
+      <TooltipProvider>
+        <div class={cleanClass('flex w-full grow flex-col justify-center')}>
+          <Card bind:ref={cardRef} class={cleanClass(modalStyles({ size }), className)}>
+            <CardHeader class="border-b border-gray-200 px-5 py-3 dark:border-white/10">
+              {#if headerChildren}
+                {@render headerChildren.snippet()}
+              {:else if title}
+                <div class="flex items-center justify-between gap-2">
+                  {#if typeof icon === 'string'}
+                    <Icon {icon} size="1.5rem" aria-hidden />
+                  {:else if icon}
+                    <Logo variant="icon" size="tiny" />
+                  {/if}
+                  <CardTitle tag="p" class="text-dark/90 grow text-lg font-semibold">{title}</CardTitle>
+                  <CloseButton class="-me-2" onclick={() => handleClose()} />
+                </div>
+              {/if}
+            </CardHeader>
 
-          <CardBody class="grow px-5">
-            {@render bodyChildren?.snippet()}
-          </CardBody>
+            <CardBody class="grow px-5">
+              {@render bodyChildren?.snippet()}
+            </CardBody>
 
-          {#if footerChildren}
-            <CardFooter class="border-t border-gray-200 dark:border-white/10">
-              {@render footerChildren.snippet()}
-            </CardFooter>
-          {/if}
-        </Card>
-      </div>
+            {#if footerChildren}
+              <CardFooter class="border-t border-gray-200 dark:border-white/10">
+                {@render footerChildren.snippet()}
+              </CardFooter>
+            {/if}
+          </Card>
+        </div>
+      </TooltipProvider>
     </Dialog.Content>
   </Dialog.Portal>
 </Dialog.Root>

package/dist/components/Textarea/Textarea.svelte

@@ -5,6 +5,7 @@
   import { styleVariants } from '../../styles.js';
   import type { TextareaProps } from '../../types.js';
   import { cleanClass, generateId } from '../../utilities/internal.js';
+  import { onMount } from 'svelte';
   import type { FormEventHandler } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
@@ -53,15 +54,20 @@
   const labelId = `label-${id}`;
   const descriptionId = $derived(description ? `description-${id}` : undefined);
 
-  const onInput: FormEventHandler<HTMLTextAreaElement> = (event) => {
-    const element = event.target as HTMLTextAreaElement;
+  const autogrow = (element: HTMLTextAreaElement | null) => {
     if (element && grow) {
+      element.style.minHeight = '0';
       element.style.height = 'auto';
       element.style.height = `${element.scrollHeight}px`;
     }
+  };
 
+  const onInput: FormEventHandler<HTMLTextAreaElement> = (event) => {
+    autogrow(event.target as HTMLTextAreaElement);
     restProps?.oninput?.(event);
   };
+
+  onMount(() => autogrow(ref));
 </script>
 
 <div class="flex w-full flex-col gap-1" bind:this={containerRef}>

package/dist/components/Toast/ToastPanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Toast from './Toast.svelte';
+  import TooltipProvider from '../Tooltip/TooltipProvider.svelte';
   import { zIndex } from '../../constants.js';
   import { isCustomToast } from '../../services/toast-manager.svelte.js';
   import type { ToastPanelProps } from '../../types.js';
@@ -10,19 +11,21 @@
   const isEmpty = $derived(items.length === 0);
 </script>
 
-<div
-  class={cleanClass(
-    isEmpty ? 'hidden' : 'absolute top-0 right-0 flex flex-col items-end justify-end gap-2 p-4',
-    zIndex.ToastPanel,
-    className,
-  )}
-  {...props}
->
-  {#each items as item (item.id)}
-    {#if isCustomToast(item)}
-      <item.component {...item.props} />
-    {:else}
-      <Toast {...item} />
-    {/if}
-  {/each}
-</div>
+<TooltipProvider>
+  <div
+    class={cleanClass(
+      isEmpty ? 'hidden' : 'absolute top-0 right-0 flex flex-col items-end justify-end gap-2 p-4',
+      zIndex.ToastPanel,
+      className,
+    )}
+    {...props}
+  >
+    {#each items as item (item.id)}
+      {#if isCustomToast(item)}
+        <item.component {...item.props} />
+      {:else}
+        <Toast {...item} />
+      {/if}
+    {/each}
+  </div>
+</TooltipProvider>

package/dist/components/Tooltip/Tooltip.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { zIndex } from '../../constants.js';
+  import { Tooltip } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { fly } from 'svelte/transition';
+
+  type Props = Tooltip.RootProps & {
+    text?: string | null;
+    child: Snippet<[{ props: Record<string, unknown> }]>;
+  };
+
+  let { open = $bindable(false), child, text, ...restProps }: Props = $props();
+</script>
+
+{#if text}
+  <Tooltip.Root bind:open {...restProps}>
+    <Tooltip.Trigger {child} />
+    <Tooltip.Portal>
+      <Tooltip.Content
+        sideOffset={8}
+        forceMount
+        class="bg-light-800 text-light {zIndex.Tooltip} rounded-lg px-3.5 py-2 text-xs shadow-lg"
+      >
+        {#snippet child({ wrapperProps, props, open })}
+          {#if open}
+            <div {...wrapperProps}>
+              <div {...props} transition:fly={{ y: 4, duration: 150 }}>
+                {text}
+              </div>
+            </div>
+          {/if}
+        {/snippet}
+      </Tooltip.Content>
+    </Tooltip.Portal>
+  </Tooltip.Root>
+{:else}
+  {@render child({ props: {} })}
+{/if}

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

@@ -0,0 +1,11 @@
+import { Tooltip } from 'bits-ui';
+import type { Snippet } from 'svelte';
+type Props = Tooltip.RootProps & {
+    text?: string | null;
+    child: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const Tooltip: import("svelte").Component<Props, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/Tooltip/TooltipProvider.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Tooltip } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    delayDuration?: number;
+    children?: Snippet;
+  };
+
+  const { children, delayDuration }: Props = $props();
+</script>
+
+<Tooltip.Provider disableCloseOnTriggerClick ignoreNonKeyboardFocus {delayDuration}>
+  {@render children?.()}
+</Tooltip.Provider>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    delayDuration?: number;
+    children?: Snippet;
+};
+declare const TooltipProvider: import("svelte").Component<Props, {}, "">;
+type TooltipProvider = ReturnType<typeof TooltipProvider>;
+export default TooltipProvider;

package/dist/constants.d.ts

@@ -20,4 +20,5 @@ export declare const zIndex: {
     SelectDropdown: string;
     ToastPanel: string;
     ContextMenu: string;
+    Tooltip: string;
 };

package/dist/constants.js

@@ -21,4 +21,5 @@ export const zIndex = {
     SelectDropdown: 'z-55',
     ToastPanel: 'z-60',
     ContextMenu: 'z-70!',
+    Tooltip: 'z-90',
 };

package/dist/index.d.ts

@@ -29,7 +29,8 @@ export { default as Checkbox } from './components/Checkbox/Checkbox.svelte';
 export { default as CloseButton } from './components/CloseButton/CloseButton.svelte';
 export { default as Code } from './components/Code/Code.svelte';
 export { default as CodeBlock } from './components/CodeBlock/CodeBlock.svelte';
-export { default as CommandPaletteContext } from './components/CommandPalette/CommandPaletteContext.svelte';
+export { default as CommandPaletteDefaultProvider } from './components/CommandPalette/CommandPaletteDefaultProvider.svelte';
+export { default as CommandPaletteProvider } from './components/CommandPalette/CommandPaletteProvider.svelte';
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';
 export { default as ContextMenuButton } from './components/ContextMenu/ContextMenuButton.svelte';
@@ -73,6 +74,8 @@ export { default as Toast } from './components/Toast/Toast.svelte';
 export { default as ToastContainer } from './components/Toast/ToastContainer.svelte';
 export { default as ToastContent } from './components/Toast/ToastContent.svelte';
 export { default as ToastPanel } from './components/Toast/ToastPanel.svelte';
+export { default as Tooltip } from './components/Tooltip/Tooltip.svelte';
+export { default as TooltipProvider } from './components/Tooltip/TooltipProvider.svelte';
 export * from './services/command-palette-manager.svelte.js';
 export * from './services/menu-manager.svelte.js';
 export * from './services/modal-manager.svelte.js';

package/dist/index.js

@@ -31,7 +31,8 @@ export { default as Checkbox } from './components/Checkbox/Checkbox.svelte';
 export { default as CloseButton } from './components/CloseButton/CloseButton.svelte';
 export { default as Code } from './components/Code/Code.svelte';
 export { default as CodeBlock } from './components/CodeBlock/CodeBlock.svelte';
-export { default as CommandPaletteContext } from './components/CommandPalette/CommandPaletteContext.svelte';
+export { default as CommandPaletteDefaultProvider } from './components/CommandPalette/CommandPaletteDefaultProvider.svelte';
+export { default as CommandPaletteProvider } from './components/CommandPalette/CommandPaletteProvider.svelte';
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';
 export { default as ContextMenuButton } from './components/ContextMenu/ContextMenuButton.svelte';
@@ -75,6 +76,8 @@ export { default as Toast } from './components/Toast/Toast.svelte';
 export { default as ToastContainer } from './components/Toast/ToastContainer.svelte';
 export { default as ToastContent } from './components/Toast/ToastContent.svelte';
 export { default as ToastPanel } from './components/Toast/ToastPanel.svelte';
+export { default as Tooltip } from './components/Tooltip/Tooltip.svelte';
+export { default as TooltipProvider } from './components/Tooltip/TooltipProvider.svelte';
 // helpers
 export * from './services/command-palette-manager.svelte.js';
 export * from './services/menu-manager.svelte.js';

package/dist/internal/Button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Icon from '../components/Icon/Icon.svelte';
   import LoadingSpinner from '../components/LoadingSpinner/LoadingSpinner.svelte';
+  import Tooltip from '../components/Tooltip/Tooltip.svelte';
   import { styleVariants } from '../styles.js';
   import type { ButtonProps, Size } from '../types.js';
   import { isExternalLink, resolveUrl } from '../utilities/common.js';
@@ -27,6 +28,7 @@
     leadingIcon,
     trailingIcon,
     icon = false,
+    title,
     class: className = '',
     children,
     ...restProps
@@ -35,7 +37,7 @@
   const disabled = $derived((restProps as HTMLButtonAttributes).disabled || loading);
 
   const buttonVariants = tv({
-    base: 'ring-offset-background focus-visible:ring-ring flex items-center justify-center gap-1 rounded-md text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+    base: 'flex items-center justify-center gap-1 rounded-md text-sm font-medium outline-offset-2 transition-colors focus-visible:outline-2',
     variants: {
       disabled: {
         true: 'disabled:pointer-events-none disabled:opacity-50 aria-disabled:opacity-50',
@@ -67,6 +69,14 @@
         large: 'rounded-xl',
         giant: 'rounded-2xl',
       },
+      focusOutlineColor: {
+        primary: 'outline-primary',
+        secondary: 'outline-dark',
+        success: 'outline-success',
+        danger: 'outline-danger',
+        warning: 'outline-warning',
+        info: 'outline-info',
+      },
       filledColor: styleVariants.filledColor,
       filledColorHover: styleVariants.filledColorHover,
       outlineColor: {
@@ -110,6 +120,7 @@
         filledColorHover: variant === 'filled' ? color : undefined,
         outlineColor: variant === 'outline' ? color : undefined,
         ghostColor: variant === 'ghost' ? color : undefined,
+        focusOutlineColor: color,
       }),
       className,
     ),
@@ -149,29 +160,35 @@
   {/if}
 {/snippet}
 
-{#if href}
-  {@const resolved = resolveUrl(href)}
-  {@const external = isExternalLink(resolved)}
-  <a
-    bind:this={ref}
-    href={resolved}
-    class={classList}
-    aria-disabled={disabled}
-    target={external ? '_blank' : undefined}
-    rel={external ? 'noopener noreferrer' : undefined}
-    {...restProps as HTMLAnchorAttributes}
-  >
-    {@render wrapper()}
-  </a>
-{:else}
-  <ButtonPrimitive.Root
-    bind:ref
-    class={classList}
-    type={type as HTMLButtonAttributes['type']}
-    {...restProps as HTMLButtonAttributes}
-    {disabled}
-    aria-disabled={disabled}
-  >
-    {@render wrapper()}
-  </ButtonPrimitive.Root>
-{/if}
+<Tooltip text={title}>
+  {#snippet child({ props })}
+    {#if href}
+      {@const resolved = resolveUrl(href)}
+      {@const external = isExternalLink(resolved)}
+      <a
+        bind:this={ref}
+        {...props}
+        href={resolved}
+        class={classList}
+        aria-disabled={disabled}
+        target={external ? '_blank' : undefined}
+        rel={external ? 'noopener noreferrer' : undefined}
+        {...restProps as HTMLAnchorAttributes}
+      >
+        {@render wrapper()}
+      </a>
+    {:else}
+      <ButtonPrimitive.Root
+        bind:ref
+        {...props}
+        class={classList}
+        type={type as HTMLButtonAttributes['type']}
+        {...restProps as HTMLButtonAttributes}
+        {disabled}
+        aria-disabled={disabled}
+      >
+        {@render wrapper()}
+      </ButtonPrimitive.Root>
+    {/if}
+  {/snippet}
+</Tooltip>