@lapismd/design-core 0.1.0

package/src/shared/shadcn/tooltip/tooltip-content.svelte

@@ -0,0 +1,369 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from "bits-ui";
+  import TooltipPortal from "./tooltip-portal.svelte";
+  import { getContext, type ComponentProps } from "svelte";
+  import type { WithoutChildrenOrChild } from "../../../lib/utils.js";
+  import { omitDataUiIdentity } from "../../../lib/data-ui-host.js";
+  import {
+    disableOverlayPortalContextKey,
+    resolveOverlayPortalProps,
+    tooltipPortalContextKey,
+    type OverlayPortalContext,
+  } from "../../../lib/overlay-portal-context.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 0,
+    side = "top",
+    children,
+    arrowClasses,
+    portalProps,
+    ...restProps
+  }: TooltipPrimitive.ContentProps & {
+    arrowClasses?: string;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+  } = $props();
+
+  const portalContext = getContext<OverlayPortalContext | undefined>(
+    tooltipPortalContextKey,
+  );
+  const disablePortals =
+    getContext<boolean | undefined>(disableOverlayPortalContextKey) ?? false;
+</script>
+
+<TooltipPortal
+  {...resolveOverlayPortalProps(portalContext, portalProps, disablePortals)}
+>
+  <TooltipPrimitive.Content
+    bind:ref
+    {...omitDataUiIdentity(restProps)}
+    data-ui-component="tooltip"
+    data-ui-part="tooltip-content"
+    data-slot="tooltip-content"
+    {sideOffset}
+    {side}
+    class={className}
+  >
+    {@render children?.()}
+    <TooltipPrimitive.Arrow>
+      {#snippet child({ props })}
+        <div
+          data-ui-component="tooltip"
+          data-ui-part="tooltip-content-anon-0"
+          data-slot="tooltip-content-anon-0"
+          class={arrowClasses}
+          {...props}
+        ></div>
+      {/snippet}
+    </TooltipPrimitive.Arrow>
+  </TooltipPrimitive.Content>
+</TooltipPortal>
+
+<style>
+  /* Semantic selectors must be global: they target data attributes and descendants. */
+  :global {
+    /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+    @layer properties {
+    }
+    @layer base {
+      @supports (not ((-webkit-appearance: -apple-pay-button))) or
+        (contain-intrinsic-size: 1px) {
+      }
+    }
+    @layer utilities {
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"],
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content-anon-0"] {
+        z-index: 50;
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
+        display: inline-flex;
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content-anon-0"] {
+        width: calc(var(--spacing) * 2.5);
+        height: calc(var(--spacing) * 2.5);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
+        width: fit-content;
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
+        max-width: var(--container-xs);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
+        transform-origin: var(--bits-tooltip-content-transform-origin);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content-anon-0"] {
+        --tw-translate-y: calc(-50% - 2px);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content-anon-0"] {
+        rotate: 45deg;
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
+        align-items: center;
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
+        gap: calc(var(--spacing) * 1.5);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content-anon-0"] {
+        border-radius: 2px;
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
+        border-radius: calc(var(--radius) * 0.8);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"],
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content-anon-0"] {
+        background-color: var(--ui-tooltip-background, var(--foreground));
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content-anon-0"] {
+        fill: var(--foreground);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
+        padding-inline: calc(var(--spacing) * 3);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
+        padding-block: calc(var(--spacing) * 1.5);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
+        font-size: var(--text-xs);
+        line-height: var(--tw-leading, var(--text-xs--line-height));
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
+        color: var(--ui-tooltip-foreground, var(--background));
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"]:has(
+          [data-slot="kbd"]
+        ) {
+        padding-right: calc(var(--spacing) * 1.5);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content-anon-0"][data-side="bottom"] {
+        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content-anon-0"][data-side="bottom"] {
+        --tw-translate-y: calc(calc(-50% + 1px) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"][data-side="bottom"] {
+        --tw-enter-translate-y: calc(2 * var(--spacing) * -1);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content-anon-0"][data-side="left"] {
+        --tw-translate-y: calc(calc(50% - 3px) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"][data-side="left"] {
+        --tw-enter-translate-x: calc(2 * var(--spacing));
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content-anon-0"][data-side="right"] {
+        --tw-translate-x: calc(50% + 2px);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content-anon-0"][data-side="right"] {
+        --tw-translate-y: calc(1 / 2 * 100%);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"][data-side="right"] {
+        --tw-enter-translate-x: calc(2 * var(--spacing) * -1);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content-anon-0"][data-side="top"] {
+        --tw-translate-x: calc(1 / 2 * 100%);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content-anon-0"][data-side="top"] {
+        --tw-translate-y: calc(-50% + 2px);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"][data-side="top"] {
+        --tw-enter-translate-y: calc(2 * var(--spacing));
+      }
+      :is(
+          [data-ui-component="tooltip"][data-ui-part="tooltip-content"] *
+        )[data-slot="kbd"] {
+        position: relative;
+      }
+      :is(
+          [data-ui-component="tooltip"][data-ui-part="tooltip-content"] *
+        )[data-slot="kbd"] {
+        isolation: isolate;
+      }
+      :is(
+          [data-ui-component="tooltip"][data-ui-part="tooltip-content"] *
+        )[data-slot="kbd"] {
+        z-index: 50;
+      }
+      :is(
+          [data-ui-component="tooltip"][data-ui-part="tooltip-content"] *
+        )[data-slot="kbd"] {
+        border-radius: calc(var(--radius) * 0.6);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"][data-state="delayed-open"] {
+        animation: enter var(--tw-animation-duration, var(--tw-duration, 0.15s))
+          var(--tw-ease, ease) var(--tw-animation-delay, 0s)
+          var(--tw-animation-iteration-count, 1)
+          var(--tw-animation-direction, normal)
+          var(--tw-animation-fill-mode, none);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"][data-state="delayed-open"] {
+        --tw-enter-opacity: 0;
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"][data-state="delayed-open"] {
+        --tw-enter-scale: 0.95;
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"]:where(
+          [data-state="open"]
+        ),
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"]:where(
+          [data-open]:not([data-open="false"])
+        ) {
+        animation: enter var(--tw-animation-duration, var(--tw-duration, 0.15s))
+          var(--tw-ease, ease) var(--tw-animation-delay, 0s)
+          var(--tw-animation-iteration-count, 1)
+          var(--tw-animation-direction, normal)
+          var(--tw-animation-fill-mode, none);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"]:where(
+          [data-state="open"]
+        ),
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"]:where(
+          [data-open]:not([data-open="false"])
+        ) {
+        --tw-enter-opacity: 0;
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"]:where(
+          [data-state="open"]
+        ),
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"]:where(
+          [data-open]:not([data-open="false"])
+        ) {
+        --tw-enter-scale: 0.95;
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"]:where(
+          [data-state="closed"]
+        ),
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"]:where(
+          [data-closed]:not([data-closed="false"])
+        ) {
+        animation: exit var(--tw-animation-duration, var(--tw-duration, 0.15s))
+          var(--tw-ease, ease) var(--tw-animation-delay, 0s)
+          var(--tw-animation-iteration-count, 1)
+          var(--tw-animation-direction, normal)
+          var(--tw-animation-fill-mode, none);
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"]:where(
+          [data-state="closed"]
+        ),
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"]:where(
+          [data-closed]:not([data-closed="false"])
+        ) {
+        --tw-exit-opacity: 0;
+      }
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"]:where(
+          [data-state="closed"]
+        ),
+      [data-ui-component="tooltip"][data-ui-part="tooltip-content"]:where(
+          [data-closed]:not([data-closed="false"])
+        ) {
+        --tw-exit-scale: 0.95;
+      }
+    }
+    @property --tw-animation-delay {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0s;
+    }
+    @property --tw-animation-direction {
+      syntax: "*";
+      inherits: false;
+      initial-value: normal;
+    }
+    @property --tw-animation-duration {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-animation-fill-mode {
+      syntax: "*";
+      inherits: false;
+      initial-value: none;
+    }
+    @property --tw-animation-iteration-count {
+      syntax: "*";
+      inherits: false;
+      initial-value: 1;
+    }
+    @property --tw-enter-blur {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-enter-opacity {
+      syntax: "*";
+      inherits: false;
+      initial-value: 1;
+    }
+    @property --tw-enter-rotate {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-enter-scale {
+      syntax: "*";
+      inherits: false;
+      initial-value: 1;
+    }
+    @property --tw-enter-translate-x {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-enter-translate-y {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-exit-blur {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-exit-opacity {
+      syntax: "*";
+      inherits: false;
+      initial-value: 1;
+    }
+    @property --tw-exit-rotate {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-exit-scale {
+      syntax: "*";
+      inherits: false;
+      initial-value: 1;
+    }
+    @property --tw-exit-translate-x {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-exit-translate-y {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-translate-x {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-translate-y {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-translate-z {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+  }
+</style>

package/src/shared/shadcn/tooltip/tooltip-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+  let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />

package/src/shared/shadcn/tooltip/tooltip-provider.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+  let { delayDuration = 0, ...restProps }: TooltipPrimitive.ProviderProps =
+    $props();
+</script>
+
+<TooltipPrimitive.Provider {delayDuration} {...restProps} />

package/src/shared/shadcn/tooltip/tooltip-trigger.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" generics="T = never">
+  import { Tooltip as TooltipPrimitive } from "bits-ui";
+  import { getContext } from "svelte";
+  import {
+    tooltipPortalContextKey,
+    type OverlayPortalContext,
+  } from "../../../lib/overlay-portal-context.js";
+
+  let {
+    ref = $bindable(null),
+    ...restProps
+  }: TooltipPrimitive.TriggerProps<T> = $props();
+
+  const portalContext = getContext<OverlayPortalContext | undefined>(
+    tooltipPortalContextKey,
+  );
+
+  $effect(() => {
+    if (portalContext)
+      portalContext.portalTarget = ref?.ownerDocument.body ?? null;
+  });
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />

package/src/shared/shadcn/tooltip/tooltip.docs-body.md

@@ -0,0 +1,56 @@
+## Installation
+
+```bash
+pnpm ui:add tooltip
+```
+
+## Usage
+
+The `Tooltip.Provider` component should be placed once in your root layout, wrapping all content that will contain tooltips. This ensures that only one tooltip within the provider can be open at a time.
+
+```html
+<script lang="ts">
+  import * as Tooltip from "@lapismd/design-core/shadcn/tooltip";
+
+  let { children } = $props();
+</script>
+```
+
+```html
+<Tooltip.Provider> {@render children()} </Tooltip.Provider>
+```
+
+Then use tooltips anywhere in your app:
+
+```html
+<script lang="ts">
+  import * as Tooltip from "@lapismd/design-core/shadcn/tooltip";
+</script>
+
+<Tooltip.Root>
+  <Tooltip.Trigger>Hover</Tooltip.Trigger>
+  <Tooltip.Content>
+    <p>Add to library</p>
+  </Tooltip.Content>
+</Tooltip.Root>
+```
+
+### Nested Providers
+
+You can nest providers to create groups with different settings. Tooltips use the closest ancestor provider. This is useful when you want instant tooltips in specific areas:
+
+```html
+<Tooltip.Provider delayDuration="{0}">
+  <!-- Tooltips here will open instantly -->
+</Tooltip.Provider>
+```
+
+---
+
+## Changelog
+
+### 2025-12 Update tooltip colors
+
+We've updated the tooltip colors to use the foreground color for the background and the background color for the foreground.
+
+Replace `bg-primary text-primary-foreground` with `bg-foreground text-background` for `<Tooltip.Content />`.

package/src/shared/shadcn/tooltip/tooltip.docs.md

@@ -0,0 +1,62 @@
+<!-- Adapted from https://github.com/huntabyte/shadcn-svelte/blob/bf4f461d88526359d0e96e1950f637912bbeebe7/docs/content/components/tooltip.md for the @lapismd/design-core native-CSS catalog. -->
+
+# Tooltip
+
+A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
+
+## Installation
+
+```bash
+pnpm ui:add tooltip
+```
+
+## Usage
+
+The `Tooltip.Provider` component should be placed once in your root layout, wrapping all content that will contain tooltips. This ensures that only one tooltip within the provider can be open at a time.
+
+```html
+<script lang="ts">
+  import * as Tooltip from "@lapismd/design-core/shadcn/tooltip";
+
+  let { children } = $props();
+</script>
+```
+
+```html
+<Tooltip.Provider> {@render children()} </Tooltip.Provider>
+```
+
+Then use tooltips anywhere in your app:
+
+```html
+<script lang="ts">
+  import * as Tooltip from "@lapismd/design-core/shadcn/tooltip";
+</script>
+
+<Tooltip.Root>
+  <Tooltip.Trigger>Hover</Tooltip.Trigger>
+  <Tooltip.Content>
+    <p>Add to library</p>
+  </Tooltip.Content>
+</Tooltip.Root>
+```
+
+### Nested Providers
+
+You can nest providers to create groups with different settings. Tooltips use the closest ancestor provider. This is useful when you want instant tooltips in specific areas:
+
+```html
+<Tooltip.Provider delayDuration="{0}">
+  <!-- Tooltips here will open instantly -->
+</Tooltip.Provider>
+```
+
+---
+
+## Changelog
+
+### 2025-12 Update tooltip colors
+
+We've updated the tooltip colors to use the foreground color for the background and the background color for the foreground.
+
+Replace `bg-primary text-primary-foreground` with `bg-foreground text-background` for `<Tooltip.Content />`.

package/src/shared/shadcn/tooltip/tooltip.provenance.json

@@ -0,0 +1,56 @@
+{
+  "schemaVersion": 1,
+  "component": "tooltip",
+  "scope": "shared",
+  "upstream": {
+    "project": "shadcn-svelte",
+    "registry": "https://shadcn-svelte.com/registry",
+    "cliVersion": "1.4.2",
+    "item": "tooltip",
+    "fetchedAt": "2026-07-19T18:50:23.025Z",
+    "sourceFiles": [
+      {
+        "path": "src/lib/components/ui/tooltip/index.ts",
+        "sha256": "509107c659c77010d0d64bb0af50fda1214164e4fd66280757c5f1496a0be5ec"
+      },
+      {
+        "path": "src/lib/components/ui/tooltip/tooltip-content.svelte",
+        "sha256": "c23991f352bdce7d71366341bcc7ffebeca99ca1bb60a11731d9afc4de15f8a8"
+      },
+      {
+        "path": "src/lib/components/ui/tooltip/tooltip-portal.svelte",
+        "sha256": "d38e62fa30732ba5ea79df440badb59331d22c13a19fdc1ad777857f6039b648"
+      },
+      {
+        "path": "src/lib/components/ui/tooltip/tooltip-provider.svelte",
+        "sha256": "3599daffb73460dc3377582b99fb04503cc1f3facd660f99db5e9c785c48367e"
+      },
+      {
+        "path": "src/lib/components/ui/tooltip/tooltip-trigger.svelte",
+        "sha256": "139ecd079c457f1318a8cfee9495143859a84fda92b0b811e893a738b46dddbd"
+      },
+      {
+        "path": "src/lib/components/ui/tooltip/tooltip.svelte",
+        "sha256": "a33d843a5e4e6e5fe426654f6742a453f44f4ff928e94a21d188d9035e4d02f8"
+      }
+    ],
+    "docsUrl": "https://github.com/huntabyte/shadcn-svelte/blob/bf4f461d88526359d0e96e1950f637912bbeebe7/docs/content/components/tooltip.md",
+    "docsFetchedAt": "2026-07-22T09:57:18.320Z",
+    "docsSha256": "cf81b479e1b9a0c17a94c0af71ddbb8facce552802fb8ba3374537227e95f851",
+    "examplesIncluded": ["Preview"],
+    "examplesSkipped": [],
+    "docsCommit": "bf4f461d88526359d0e96e1950f637912bbeebe7",
+    "docsRef": "shadcn-svelte@1.4.2",
+    "docsVendorPath": "vendor/shadcn-svelte-docs"
+  },
+  "converter": {
+    "version": "2.0.0",
+    "irSchemaVersion": 1,
+    "tokenSchemaVersion": 2
+  },
+  "recipe": {
+    "name": "tooltip",
+    "version": 1,
+    "tier": "portal"
+  }
+}

package/src/shared/shadcn/tooltip/tooltip.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" generics="T = never">
+  import { Tooltip as TooltipPrimitive } from "bits-ui";
+  import { setContext } from "svelte";
+  import {
+    createOverlayPortalContext,
+    tooltipPortalContextKey,
+  } from "../../../lib/overlay-portal-context.js";
+
+  let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps<T> =
+    $props();
+
+  setContext(tooltipPortalContextKey, createOverlayPortalContext());
+</script>
+
+<TooltipPrimitive.Root bind:open {...restProps} />

package/src/shared/shadcn/tooltip/tooltip.tokens.css

@@ -0,0 +1,13 @@
+/**
+ * Default tooltip token bindings → theme tokens.
+ * Override --ui-tooltip-* on :root or any ancestor (forms pattern).
+ * Do not rebind these names on [data-ui-component="tooltip"] hosts — that
+ * blocks ancestor customization.
+ */
+:root {
+  --ui-tooltip-background: var(--foreground);
+  --ui-tooltip-foreground: var(--background);
+  --ui-tooltip-border-color: transparent;
+  --ui-tooltip-radius: var(--radius-md, calc(var(--radius) * 0.8));
+  --ui-tooltip-focus-ring-color: var(--ring);
+}

package/src/shared/shadcn/tooltip/tooltip.tokens.ts

@@ -0,0 +1,10 @@
+export const tooltipTokenNames = {
+  background: "--ui-tooltip-background",
+  foreground: "--ui-tooltip-foreground",
+  borderColor: "--ui-tooltip-border-color",
+  radius: "--ui-tooltip-radius",
+  focusRingColor: "--ui-tooltip-focus-ring-color",
+} as const;
+
+export type TooltipToken =
+  (typeof tooltipTokenNames)[keyof typeof tooltipTokenNames];