@lapismd/design-core 0.1.0

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

@@ -0,0 +1,23 @@
+<!-- Adapted from https://github.com/huntabyte/shadcn-svelte/blob/bf4f461d88526359d0e96e1950f637912bbeebe7/docs/content/components/label.md for the @lapismd/design-core native-CSS catalog. -->
+
+# Label
+
+Renders an accessible label associated with controls.
+
+## Installation
+
+```bash
+pnpm ui:add label
+```
+
+## Usage
+
+```html
+<script lang="ts">
+  import { Label } from "@lapismd/design-core/shadcn/label";
+</script>
+```
+
+```html
+<label for="email">Your email address</label>
+```

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

@@ -0,0 +1,40 @@
+{
+  "schemaVersion": 1,
+  "component": "label",
+  "scope": "shared",
+  "upstream": {
+    "project": "shadcn-svelte",
+    "registry": "https://shadcn-svelte.com/registry",
+    "cliVersion": "1.4.2",
+    "item": "label",
+    "fetchedAt": "2026-07-19T16:28:42.721Z",
+    "sourceFiles": [
+      {
+        "path": "src/lib/components/ui/label/index.ts",
+        "sha256": "ea17621b03066fc6c0ab811ec97aac0cb2de4b504c0a1fc3f480c8fc4bef12f1"
+      },
+      {
+        "path": "src/lib/components/ui/label/label.svelte",
+        "sha256": "cafe265a42cb2aedc38ab8f547ad3a824d947200cc5fb9e9d30a7f5f7ab8ca13"
+      }
+    ],
+    "docsUrl": "https://github.com/huntabyte/shadcn-svelte/blob/bf4f461d88526359d0e96e1950f637912bbeebe7/docs/content/components/label.md",
+    "docsFetchedAt": "2026-07-22T09:57:18.223Z",
+    "docsSha256": "216d2eb6e70985abcbb3664ffda192348b6238c1dac85c2aad79dc2a1692124d",
+    "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": "label",
+    "version": 1,
+    "tier": "simpleRoot"
+  }
+}

package/src/shared/shadcn/label/label.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+  import { Label as LabelPrimitive } from "bits-ui";
+  import {
+    omitDataUiComponent,
+    resolveDataUiComponent,
+  } from "../../../lib/data-ui-host.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    dataUiComponent,
+    ...restProps
+  }: LabelPrimitive.RootProps & {
+    dataUiComponent?: string;
+  } = $props();
+</script>
+
+<LabelPrimitive.Root
+  bind:ref
+  {...omitDataUiComponent(restProps)}
+  data-ui-component={resolveDataUiComponent("label", dataUiComponent)}
+  data-slot="label"
+  class={className}
+/>
+
+<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="label"] {
+        display: flex;
+      }
+      [data-ui-component="label"] {
+        align-items: center;
+      }
+      [data-ui-component="label"] {
+        gap: calc(var(--spacing) * 2);
+      }
+      [data-ui-component="label"] {
+        font-size: var(--text-sm);
+        line-height: var(--tw-leading, var(--text-sm--line-height));
+      }
+      [data-ui-component="label"] {
+        --tw-leading: 1;
+        line-height: 1;
+      }
+      [data-ui-component="label"] {
+        --tw-font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-medium);
+      }
+      [data-ui-component="label"] {
+        -webkit-user-select: none;
+        user-select: none;
+      }
+      [data-ui-component="label"]:is(:where(.group)[data-disabled="true"] *) {
+        pointer-events: none;
+      }
+      [data-ui-component="label"]:is(:where(.group)[data-disabled="true"] *) {
+        opacity: 0.5;
+      }
+      [data-ui-component="label"]:is(:where(.peer):disabled ~ *) {
+        cursor: not-allowed;
+      }
+      [data-ui-component="label"]:is(:where(.peer):disabled ~ *) {
+        opacity: 0.5;
+      }
+    }
+    @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-leading {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-font-weight {
+      syntax: "*";
+      inherits: false;
+    }
+  }
+</style>

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

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

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

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

package/src/shared/shadcn/pagination/examples/preview.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  // @generated by ui-generator — do not edit
+
+  import * as Pagination from "../index.js";
+</script>
+
+<Pagination.Root count={30} page={2}>
+  {#snippet children({ pages, currentPage })}
+    <Pagination.Content>
+      <Pagination.Item>
+        <Pagination.Previous />
+      </Pagination.Item>
+      {#each pages as page (page.key)}
+        {#if page.type === "ellipsis"}
+          <Pagination.Item>
+            <Pagination.Ellipsis />
+          </Pagination.Item>
+        {:else}
+          <Pagination.Item>
+            <Pagination.Link {page} isActive={currentPage === page.value}>
+              {page.value}
+            </Pagination.Link>
+          </Pagination.Item>
+        {/if}
+      {/each}
+      <Pagination.Item>
+        <Pagination.Ellipsis />
+      </Pagination.Item>
+      <Pagination.Item>
+        <Pagination.Next />
+      </Pagination.Item>
+    </Pagination.Content>
+  {/snippet}
+</Pagination.Root>

package/src/shared/shadcn/pagination/index.ts

@@ -0,0 +1,36 @@
+import Root from "./pagination.svelte";
+import Content from "./pagination-content.svelte";
+import Item from "./pagination-item.svelte";
+import Link from "./pagination-link.svelte";
+import PrevButton from "./pagination-prev-button.svelte";
+import NextButton from "./pagination-next-button.svelte";
+import Ellipsis from "./pagination-ellipsis.svelte";
+import Previous from "./pagination-previous.svelte";
+import Next from "./pagination-next.svelte";
+
+export {
+  Root,
+  Content,
+  Item,
+  Link,
+  PrevButton, // old
+  NextButton, // old
+  Ellipsis,
+  Previous,
+  Next,
+  //
+  Root as Pagination,
+  Content as PaginationContent,
+  Item as PaginationItem,
+  Link as PaginationLink,
+  PrevButton as PaginationPrevButton, // old
+  NextButton as PaginationNextButton, // old
+  Ellipsis as PaginationEllipsis,
+  Previous as PaginationPrevious,
+  Next as PaginationNext,
+};
+
+export {
+  paginationTokenNames,
+  type PaginationToken,
+} from "./pagination.tokens.js";

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { type WithElementRef } from "../../../lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+  bind:this={ref}
+  {...restProps}
+  data-ui-component="pagination"
+  data-ui-part="pagination-content"
+  data-slot="pagination-content"
+  class={className}
+>
+  {@render children?.()}
+</ul>

package/src/shared/shadcn/pagination/pagination-ellipsis.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import {
+    type WithElementRef,
+    type WithoutChildren,
+  } from "../../../lib/utils.js";
+  import MoreHorizontalIcon from "@lucide/svelte/icons/more-horizontal";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildren<
+    WithElementRef<HTMLAttributes<HTMLSpanElement>>
+  > = $props();
+</script>
+
+<span
+  bind:this={ref}
+  aria-hidden="true"
+  {...restProps}
+  data-ui-component="pagination"
+  data-ui-part="pagination-ellipsis"
+  data-slot="pagination-ellipsis"
+  class={className}
+>
+  <MoreHorizontalIcon />
+  <span class="sr-only">More pages</span>
+</span>

package/src/shared/shadcn/pagination/pagination-item.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { HTMLLiAttributes } from "svelte/elements";
+  import type { WithElementRef } from "../../../lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    children,
+    ...restProps
+  }: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li bind:this={ref} data-slot="pagination-item" {...restProps}>
+  {@render children?.()}
+</li>

package/src/shared/shadcn/pagination/pagination-link.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { Pagination as PaginationPrimitive } from "bits-ui";
+  import { type ButtonSize } from "../button/index.js";
+  let {
+    ref = $bindable(null),
+    class: className,
+    size = "icon",
+    isActive,
+    page,
+    children,
+    ...restProps
+  }: PaginationPrimitive.PageProps & {
+    size?: ButtonSize;
+    isActive: boolean;
+  } = $props();
+</script>
+
+{#snippet Fallback()}
+  {page.value}
+{/snippet}
+
+<PaginationPrimitive.Page
+  bind:ref
+  {page}
+  aria-current={isActive ? "page" : undefined}
+  data-ui-component="pagination"
+  data-ui-part="pagination-link"
+  data-slot="pagination-link"
+  data-active={isActive}
+  data-variant={isActive ? "outline" : "ghost"}
+  data-size={size}
+  class={className}
+  {...restProps}
+>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    {@render Fallback()}
+  {/if}
+</PaginationPrimitive.Page>

package/src/shared/shadcn/pagination/pagination-next-button.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { Pagination as PaginationPrimitive } from "bits-ui";
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: PaginationPrimitive.NextButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+  <span>Next</span>
+  <ChevronRightIcon
+    data-ui-component="pagination"
+    data-ui-part="pagination-next-button"
+    data-slot="pagination-next-button"
+    class={className}
+  />
+{/snippet}
+
+<PaginationPrimitive.NextButton
+  bind:ref
+  aria-label="Go to next page"
+  data-ui-component="pagination"
+  data-ui-part="pagination-next-button-anon-0"
+  data-slot="pagination-next-button-anon-0"
+  data-variant="ghost"
+  data-size="default"
+  class={className}
+  {...restProps}
+>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    {@render Fallback()}
+  {/if}
+</PaginationPrimitive.NextButton>

package/src/shared/shadcn/pagination/pagination-next.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Pagination as PaginationPrimitive } from "bits-ui";
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: PaginationPrimitive.NextButtonProps = $props();
+</script>
+
+<PaginationPrimitive.NextButton
+  bind:ref
+  aria-label="Go to next page"
+  data-ui-component="pagination"
+  data-ui-part="pagination-next"
+  data-slot="pagination-next"
+  data-variant="ghost"
+  data-size="default"
+  class={className}
+  {...restProps}
+>
+  <span class="cn-pagination-next-text">Next</span>
+  <ChevronRightIcon data-icon="inline-end" />
+</PaginationPrimitive.NextButton>

package/src/shared/shadcn/pagination/pagination-prev-button.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { Pagination as PaginationPrimitive } from "bits-ui";
+  import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: PaginationPrimitive.PrevButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+  <ChevronLeftIcon
+    data-ui-component="pagination"
+    data-ui-part="pagination-prev-button"
+    data-slot="pagination-prev-button"
+    class={className}
+  />
+  <span>Previous</span>
+{/snippet}
+
+<PaginationPrimitive.PrevButton
+  bind:ref
+  aria-label="Go to previous page"
+  data-ui-component="pagination"
+  data-ui-part="pagination-prev-button-anon-0"
+  data-slot="pagination-prev-button-anon-0"
+  data-variant="ghost"
+  data-size="default"
+  class={className}
+  {...restProps}
+>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    {@render Fallback()}
+  {/if}
+</PaginationPrimitive.PrevButton>

package/src/shared/shadcn/pagination/pagination-previous.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Pagination as PaginationPrimitive } from "bits-ui";
+  import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: PaginationPrimitive.PrevButtonProps = $props();
+</script>
+
+<PaginationPrimitive.PrevButton
+  bind:ref
+  aria-label="Go to previous page"
+  data-ui-component="pagination"
+  data-ui-part="pagination-previous"
+  data-slot="pagination-previous"
+  data-variant="ghost"
+  data-size="default"
+  class={className}
+  {...restProps}
+>
+  <ChevronLeftIcon data-icon="inline-start" />
+  <span class="cn-pagination-previous-text">Previous</span>
+</PaginationPrimitive.PrevButton>

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

@@ -0,0 +1,39 @@
+## Installation
+
+```bash
+pnpm ui:add pagination
+```
+
+## Usage
+
+```html
+<script lang="ts">
+  import * as Pagination from "@lapismd/design-core/shadcn/pagination";
+</script>
+```
+
+```html
+<Pagination.Root count="{100}" perPage="{10}">
+  {#snippet children({ pages, currentPage })}
+  <Pagination.Content>
+    <Pagination.Item>
+      <Pagination.Previous />
+    </Pagination.Item>
+    {#each pages as page (page.key)} {#if page.type === "ellipsis"}
+    <Pagination.Item>
+      <Pagination.Ellipsis />
+    </Pagination.Item>
+    {:else}
+    <Pagination.Item>
+      <Pagination.Link {page} isActive="{currentPage" ="" ="" ="page.value}">
+        {page.value}
+      </Pagination.Link>
+    </Pagination.Item>
+    {/if} {/each}
+    <Pagination.Item>
+      <Pagination.Next />
+    </Pagination.Item>
+  </Pagination.Content>
+  {/snippet}
+</Pagination.Root>
+```

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

@@ -0,0 +1,45 @@
+<!-- Adapted from https://github.com/huntabyte/shadcn-svelte/blob/bf4f461d88526359d0e96e1950f637912bbeebe7/docs/content/components/pagination.md for the @lapismd/design-core native-CSS catalog. -->
+
+# Pagination
+
+Pagination with page navigation, next and previous links.
+
+## Installation
+
+```bash
+pnpm ui:add pagination
+```
+
+## Usage
+
+```html
+<script lang="ts">
+  import * as Pagination from "@lapismd/design-core/shadcn/pagination";
+</script>
+```
+
+```html
+<Pagination.Root count="{100}" perPage="{10}">
+  {#snippet children({ pages, currentPage })}
+  <Pagination.Content>
+    <Pagination.Item>
+      <Pagination.Previous />
+    </Pagination.Item>
+    {#each pages as page (page.key)} {#if page.type === "ellipsis"}
+    <Pagination.Item>
+      <Pagination.Ellipsis />
+    </Pagination.Item>
+    {:else}
+    <Pagination.Item>
+      <Pagination.Link {page} isActive="{currentPage" ="" ="" ="page.value}">
+        {page.value}
+      </Pagination.Link>
+    </Pagination.Item>
+    {/if} {/each}
+    <Pagination.Item>
+      <Pagination.Next />
+    </Pagination.Item>
+  </Pagination.Content>
+  {/snippet}
+</Pagination.Root>
+```