@lapismd/design-core 0.1.0

package/src/shared/shadcn/scroll-area/scroll-area-overlay-scrollbar.svelte

@@ -0,0 +1,362 @@
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import {
+    calculateOverlayScrollbarMetrics,
+    scrollOffsetForThumbDrag,
+    scrollOffsetForTrackPress,
+    shouldShowOverlayScrollbar,
+    type OverlayScrollbarMetrics,
+    type ScrollAreaType,
+  } from "./scroll-area-model.js";
+
+  let {
+    root,
+    viewport,
+    orientation,
+    type,
+    scrollHideDelay,
+    class: className = "",
+  }: {
+    root: HTMLElement | null;
+    viewport: HTMLElement | null;
+    orientation: "vertical" | "horizontal";
+    type: ScrollAreaType;
+    scrollHideDelay: number;
+    class?: string;
+  } = $props();
+
+  const emptyMetrics: OverlayScrollbarMetrics = {
+    overflowing: false,
+    maxScroll: 0,
+    maxThumbTravel: 0,
+    thumbOffset: 0,
+    thumbSize: 0,
+  };
+  let track = $state<HTMLDivElement | null>(null);
+  let metrics = $state(emptyMetrics);
+  let hovered = $state(false);
+  let scrollbarHovered = $state(false);
+  let scrolling = $state(false);
+  let interacting = $state(false);
+  let dragPointerId = $state<number | null>(null);
+  let dragPointerStart = 0;
+  let dragScrollStart = 0;
+  let hideTimer: ReturnType<typeof setTimeout> | undefined;
+  let measurementFrame: number | undefined;
+
+  const visible = $derived(
+    shouldShowOverlayScrollbar({
+      overflowing: metrics.overflowing,
+      type,
+      hovered,
+      scrollbarHovered,
+      scrolling,
+      interacting,
+    }),
+  );
+  const thumbStyle = $derived(
+    orientation === "vertical"
+      ? `height: ${metrics.thumbSize}px; transform: translateY(${metrics.thumbOffset}px)`
+      : `width: ${metrics.thumbSize}px; transform: translateX(${metrics.thumbOffset}px)`,
+  );
+
+  function measure(): void {
+    measurementFrame = undefined;
+    if (!viewport || !track) {
+      metrics = emptyMetrics;
+      return;
+    }
+    const vertical = orientation === "vertical";
+    metrics = calculateOverlayScrollbarMetrics({
+      viewportSize: vertical ? viewport.clientHeight : viewport.clientWidth,
+      contentSize: vertical ? viewport.scrollHeight : viewport.scrollWidth,
+      scrollOffset: vertical ? viewport.scrollTop : viewport.scrollLeft,
+      trackSize: Math.max(0, vertical ? track.clientHeight : track.clientWidth),
+    });
+  }
+
+  function scheduleMeasurement(): void {
+    if (
+      measurementFrame !== undefined ||
+      typeof requestAnimationFrame === "undefined"
+    ) {
+      return;
+    }
+    measurementFrame = requestAnimationFrame(measure);
+  }
+
+  function scheduleScrollHide(): void {
+    if (hideTimer !== undefined) clearTimeout(hideTimer);
+    scrolling = true;
+    hideTimer = setTimeout(
+      () => {
+        scrolling = false;
+        hideTimer = undefined;
+      },
+      Math.max(0, scrollHideDelay),
+    );
+  }
+
+  function handleTrackPointerDown(event: PointerEvent): void {
+    if (!viewport || !track || event.button !== 0) return;
+    event.preventDefault();
+    interacting = true;
+    const bounds = track.getBoundingClientRect();
+    const pointerOffset =
+      orientation === "vertical"
+        ? event.clientY - bounds.top - 1
+        : event.clientX - bounds.left - 1;
+    const viewportSize =
+      orientation === "vertical" ? viewport.clientHeight : viewport.clientWidth;
+    const currentScrollOffset =
+      orientation === "vertical" ? viewport.scrollTop : viewport.scrollLeft;
+    const next = scrollOffsetForTrackPress({
+      pointerOffset,
+      metrics,
+      viewportSize,
+      currentScrollOffset,
+    });
+    if (orientation === "vertical") viewport.scrollTop = next;
+    else viewport.scrollLeft = next;
+    interacting = false;
+    scheduleMeasurement();
+    scheduleScrollHide();
+  }
+
+  function handleThumbPointerDown(event: PointerEvent): void {
+    if (!viewport || event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const thumb = event.currentTarget as HTMLElement;
+    thumb.setPointerCapture(event.pointerId);
+    dragPointerId = event.pointerId;
+    dragPointerStart =
+      orientation === "vertical" ? event.clientY : event.clientX;
+    dragScrollStart =
+      orientation === "vertical" ? viewport.scrollTop : viewport.scrollLeft;
+    interacting = true;
+  }
+
+  function handleThumbPointerMove(event: PointerEvent): void {
+    if (!viewport || dragPointerId !== event.pointerId) return;
+    event.preventDefault();
+    const pointer = orientation === "vertical" ? event.clientY : event.clientX;
+    const next = scrollOffsetForThumbDrag({
+      pointerDelta: pointer - dragPointerStart,
+      startScrollOffset: dragScrollStart,
+      metrics,
+    });
+    if (orientation === "vertical") viewport.scrollTop = next;
+    else viewport.scrollLeft = next;
+    scheduleMeasurement();
+  }
+
+  function endThumbDrag(event: PointerEvent): void {
+    if (dragPointerId !== event.pointerId) return;
+    const thumb = event.currentTarget as HTMLElement;
+    if (thumb.hasPointerCapture(event.pointerId)) {
+      thumb.releasePointerCapture(event.pointerId);
+    }
+    dragPointerId = null;
+    interacting = false;
+    scheduleScrollHide();
+  }
+
+  $effect(() => {
+    const mountedRoot = root;
+    if (!mountedRoot) return;
+    const handlePointerEnter = () => {
+      hovered = true;
+    };
+    const handlePointerLeave = () => {
+      hovered = false;
+    };
+    mountedRoot.addEventListener("pointerenter", handlePointerEnter);
+    mountedRoot.addEventListener("pointerleave", handlePointerLeave);
+    return () => {
+      mountedRoot.removeEventListener("pointerenter", handlePointerEnter);
+      mountedRoot.removeEventListener("pointerleave", handlePointerLeave);
+    };
+  });
+
+  $effect(() => {
+    const mountedViewport = viewport;
+    const mountedTrack = track;
+    if (!mountedViewport || !mountedTrack) return;
+    const handleScroll = () => {
+      scheduleMeasurement();
+      scheduleScrollHide();
+    };
+    const observeContent = () => {
+      resizeObserver.disconnect();
+      resizeObserver.observe(mountedViewport);
+      for (const child of mountedViewport.children) {
+        resizeObserver.observe(child);
+      }
+      scheduleMeasurement();
+    };
+    const resizeObserver = new ResizeObserver(scheduleMeasurement);
+    const mutationObserver = new MutationObserver(observeContent);
+    mountedViewport.addEventListener("scroll", handleScroll, { passive: true });
+    observeContent();
+    mutationObserver.observe(mountedViewport, {
+      childList: true,
+      subtree: true,
+    });
+    return () => {
+      mountedViewport.removeEventListener("scroll", handleScroll);
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  });
+
+  $effect(() => {
+    type;
+    scrollHideDelay;
+    scheduleMeasurement();
+  });
+
+  onDestroy(() => {
+    if (hideTimer !== undefined) clearTimeout(hideTimer);
+    if (measurementFrame !== undefined) cancelAnimationFrame(measurementFrame);
+  });
+</script>
+
+<!-- The native viewport remains the focusable accessible scroll region. -->
+<div
+  bind:this={track}
+  aria-hidden="true"
+  class={`ui-scroll-area__overlay-scrollbar ${className}`}
+  data-ui-component="scroll-area"
+  data-ui-part="scroll-area-scrollbar"
+  data-slot="scroll-area-scrollbar"
+  data-orientation={orientation}
+  data-scrollbar-overlay
+  data-overflow={metrics.overflowing ? "" : undefined}
+  data-state={visible ? "visible" : "hidden"}
+  onpointerenter={() => (scrollbarHovered = true)}
+  onpointerleave={() => (scrollbarHovered = false)}
+  onpointerdown={handleTrackPointerDown}
+>
+  <!-- svelte-ignore a11y_no_static_element_interactions (presentation-only thumb delegates to the native accessible viewport) -->
+  <div
+    class="ui-scroll-area__overlay-thumb"
+    data-ui-component="scroll-area"
+    data-ui-part="scroll-area-thumb"
+    data-slot="scroll-area-thumb"
+    data-orientation={orientation}
+    data-state={interacting ? "active" : "idle"}
+    style={thumbStyle}
+    onpointerdown={handleThumbPointerDown}
+    onpointermove={handleThumbPointerMove}
+    onpointerup={endThumbDrag}
+    onpointercancel={endThumbDrag}
+  ></div>
+</div>
+
+<style>
+  [data-ui-component="scroll-area"][data-ui-part="scroll-area-scrollbar"][data-scrollbar-overlay].ui-scroll-area__overlay-scrollbar {
+    position: absolute;
+    display: block;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    opacity: 0;
+    pointer-events: none;
+    touch-action: none;
+    transition: opacity 120ms ease;
+    user-select: none;
+  }
+
+  [data-ui-component="scroll-area"][data-ui-part="scroll-area-scrollbar"][data-scrollbar-overlay].ui-scroll-area__overlay-scrollbar[data-state="visible"] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  [data-ui-component="scroll-area"][data-ui-part="scroll-area-scrollbar"][data-scrollbar-overlay].ui-scroll-area__overlay-scrollbar[data-overflow] {
+    /* Keep the transparent rail reachable after scroll-mode paint fades so a
+       pointer entering the edge can reveal and retain the thumb. */
+    pointer-events: auto;
+  }
+
+  [data-ui-component="scroll-area"][data-ui-part="scroll-area-scrollbar"][data-scrollbar-overlay].ui-scroll-area__overlay-scrollbar[data-orientation="vertical"] {
+    inset-block: 0;
+    inset-inline-end: 0;
+    width: 0.5rem;
+  }
+
+  [data-ui-component="scroll-area"][data-ui-part="scroll-area-scrollbar"][data-scrollbar-overlay].ui-scroll-area__overlay-scrollbar[data-orientation="horizontal"] {
+    inset-inline: 0;
+    inset-block-end: 0;
+    height: 0.5rem;
+  }
+
+  [data-scrollbar-overlay]
+    > [data-ui-component="scroll-area"][data-ui-part="scroll-area-thumb"].ui-scroll-area__overlay-thumb {
+    position: absolute;
+    flex: none;
+    border-radius: var(--ui-scroll-area-radius, 9999px);
+    background: var(--ui-scroll-area-foreground, var(--border));
+    transition:
+      width 140ms ease,
+      height 140ms ease,
+      background-color 140ms ease;
+  }
+
+  [data-scrollbar-overlay]
+    > [data-ui-component="scroll-area"][data-ui-part="scroll-area-thumb"].ui-scroll-area__overlay-thumb:hover {
+    background: color-mix(
+      in srgb,
+      var(--ui-scroll-area-foreground, var(--border)) 65%,
+      currentColor
+    );
+  }
+
+  [data-scrollbar-overlay]
+    > [data-ui-component="scroll-area"][data-ui-part="scroll-area-thumb"].ui-scroll-area__overlay-thumb[data-state="active"] {
+    background: color-mix(
+      in srgb,
+      var(--ui-scroll-area-foreground, var(--border)) 50%,
+      currentColor
+    );
+  }
+
+  [data-scrollbar-overlay]
+    > [data-ui-component="scroll-area"][data-ui-part="scroll-area-thumb"].ui-scroll-area__overlay-thumb[data-orientation="vertical"] {
+    inset-inline-end: 0;
+    inset-block-start: 0;
+    width: 0.25rem;
+  }
+
+  [data-scrollbar-overlay]
+    > [data-ui-component="scroll-area"][data-ui-part="scroll-area-thumb"].ui-scroll-area__overlay-thumb[data-orientation="vertical"]:is(
+      :hover,
+      [data-state="active"]
+    ) {
+    width: 0.375rem;
+  }
+
+  [data-scrollbar-overlay]
+    > [data-ui-component="scroll-area"][data-ui-part="scroll-area-thumb"].ui-scroll-area__overlay-thumb[data-orientation="horizontal"] {
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    height: 0.25rem;
+  }
+
+  [data-scrollbar-overlay]
+    > [data-ui-component="scroll-area"][data-ui-part="scroll-area-thumb"].ui-scroll-area__overlay-thumb[data-orientation="horizontal"]:is(
+      :hover,
+      [data-state="active"]
+    ) {
+    height: 0.375rem;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-scroll-area__overlay-scrollbar,
+    .ui-scroll-area__overlay-thumb {
+      transition: none !important;
+    }
+  }
+</style>

package/src/shared/shadcn/scroll-area/scroll-area-scrollbar.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+  import { type WithoutChild } from "../../../lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    orientation = "vertical",
+    children,
+    ...restProps
+  }: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+  bind:ref
+  data-ui-component="scroll-area"
+  data-ui-part="scroll-area-scrollbar"
+  data-slot="scroll-area-scrollbar"
+  data-orientation={orientation}
+  {orientation}
+  class={className}
+  {...restProps}
+>
+  {@render children?.()}
+  <ScrollAreaPrimitive.Thumb
+    data-ui-component="scroll-area"
+    data-ui-part="scroll-area-thumb"
+    data-slot="scroll-area-thumb"
+  />
+</ScrollAreaPrimitive.Scrollbar>

package/src/shared/shadcn/scroll-area/scroll-area.docs-body.md

@@ -0,0 +1,81 @@
+## Installation
+
+```bash
+pnpm ui:add scroll-area
+```
+
+## Usage
+
+```html
+<script lang="ts">
+  import { ScrollArea } from "@lapismd/design-core/shadcn/scroll-area";
+</script>
+```
+
+```html
+<ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
+  Jokester began sneaking into the castle in the middle of the night and leaving
+  jokes all over the place: under the king's pillow, in his soup, even in the
+  royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
+  then, one day, the people of the kingdom discovered that the jokes left by
+  Jokester were so funny that they couldn't help but laugh. And once they
+  started laughing, they couldn't stop.
+</ScrollArea>
+```
+
+## Examples
+
+### Horizontal Scrolling
+
+Set the `orientation` prop to `"horizontal"` to enable horizontal scrolling.
+
+```html
+<script lang="ts">
+  import { ScrollArea } from "@lapismd/design-core/shadcn/scroll-area";
+
+  type Artwork = {
+    artist: string;
+    art: string;
+  };
+
+  const works: Artwork[] = [
+    {
+      artist: "Ornella Binni",
+      art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
+    },
+    {
+      artist: "Tom Byrom",
+      art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
+    },
+    {
+      artist: "Vladimir Malyavko",
+      art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
+    },
+  ];
+</script>
+
+<ScrollArea
+  class="w-96 rounded-md border whitespace-nowrap"
+  orientation="horizontal"
+>
+  <div class="flex w-max space-x-4 p-4">
+    {#each works as artwork (artwork.artist)}
+    <figure class="shrink-0">
+      <div class="overflow-hidden rounded-md">
+        <img
+          src="{artwork.art}"
+          alt="Photo by {artwork.artist}"
+          class="aspect-[3/4] h-fit w-fit object-cover"
+          width="{300}"
+          height="{400}"
+        />
+      </div>
+      <figcaption class="text-muted-foreground pt-2 text-xs">
+        Photo by
+        <span class="text-foreground font-semibold"> {artwork.artist} </span>
+      </figcaption>
+    </figure>
+    {/each}
+  </div>
+</ScrollArea>
+```

package/src/shared/shadcn/scroll-area/scroll-area.docs.md

@@ -0,0 +1,87 @@
+<!-- Adapted from https://github.com/huntabyte/shadcn-svelte/blob/bf4f461d88526359d0e96e1950f637912bbeebe7/docs/content/components/scroll-area.md for the @lapismd/design-core native-CSS catalog. -->
+
+# Scroll Area
+
+Augments native scroll functionality for custom, cross-browser styling.
+
+## Installation
+
+```bash
+pnpm ui:add scroll-area
+```
+
+## Usage
+
+```html
+<script lang="ts">
+  import { ScrollArea } from "@lapismd/design-core/shadcn/scroll-area";
+</script>
+```
+
+```html
+<ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
+  Jokester began sneaking into the castle in the middle of the night and leaving
+  jokes all over the place: under the king's pillow, in his soup, even in the
+  royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
+  then, one day, the people of the kingdom discovered that the jokes left by
+  Jokester were so funny that they couldn't help but laugh. And once they
+  started laughing, they couldn't stop.
+</ScrollArea>
+```
+
+## Examples
+
+### Horizontal Scrolling
+
+Set the `orientation` prop to `"horizontal"` to enable horizontal scrolling.
+
+```html
+<script lang="ts">
+  import { ScrollArea } from "@lapismd/design-core/shadcn/scroll-area";
+
+  type Artwork = {
+    artist: string;
+    art: string;
+  };
+
+  const works: Artwork[] = [
+    {
+      artist: "Ornella Binni",
+      art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
+    },
+    {
+      artist: "Tom Byrom",
+      art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
+    },
+    {
+      artist: "Vladimir Malyavko",
+      art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
+    },
+  ];
+</script>
+
+<ScrollArea
+  class="w-96 rounded-md border whitespace-nowrap"
+  orientation="horizontal"
+>
+  <div class="flex w-max space-x-4 p-4">
+    {#each works as artwork (artwork.artist)}
+    <figure class="shrink-0">
+      <div class="overflow-hidden rounded-md">
+        <img
+          src="{artwork.art}"
+          alt="Photo by {artwork.artist}"
+          class="aspect-[3/4] h-fit w-fit object-cover"
+          width="{300}"
+          height="{400}"
+        />
+      </div>
+      <figcaption class="text-muted-foreground pt-2 text-xs">
+        Photo by
+        <span class="text-foreground font-semibold"> {artwork.artist} </span>
+      </figcaption>
+    </figure>
+    {/each}
+  </div>
+</ScrollArea>
+```

package/src/shared/shadcn/scroll-area/scroll-area.provenance.json

@@ -0,0 +1,44 @@
+{
+  "schemaVersion": 1,
+  "component": "scroll-area",
+  "scope": "shared",
+  "upstream": {
+    "project": "shadcn-svelte",
+    "registry": "https://shadcn-svelte.com/registry",
+    "cliVersion": "1.4.2",
+    "item": "scroll-area",
+    "fetchedAt": "2026-07-19T18:49:09.498Z",
+    "sourceFiles": [
+      {
+        "path": "src/lib/components/ui/scroll-area/index.ts",
+        "sha256": "9b88919b9751aa6bcc575ce5f848c4f1098336867d2a4c982a7d9071712dc26e"
+      },
+      {
+        "path": "src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte",
+        "sha256": "ddd5f5b0f983bd38dff75eb32d3bafca1a346e6b8fafbb6aab9e5365b2302a95"
+      },
+      {
+        "path": "src/lib/components/ui/scroll-area/scroll-area.svelte",
+        "sha256": "92472dd587436aff6e563df95b1411e7b05062338d210eba349ee169135dcf93"
+      }
+    ],
+    "docsUrl": "https://github.com/huntabyte/shadcn-svelte/blob/bf4f461d88526359d0e96e1950f637912bbeebe7/docs/content/components/scroll-area.md",
+    "docsFetchedAt": "2026-07-22T09:57:18.442Z",
+    "docsSha256": "6f092cd87b9bf8b05ca6225393cc408c7175a45832553901eb3a8ce8307bd103",
+    "examplesIncluded": ["Preview", "Horizontal Scrolling"],
+    "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": "scroll-area",
+    "version": 1,
+    "tier": "lightCompound"
+  }
+}