@spaethtech/svelte-ui 0.11.0 → 0.12.0

package/.claude/skills/svelte-ui/SKILL.md

@@ -152,8 +152,10 @@ Mount `<Toaster />` once at the app root, then push from anywhere with `toast.su
 All from `@spaethtech/svelte-ui` (see the shipped `docs/components.md` + `docs/usage.md` for props +
 examples):
 
-- **Form:** `Button` `ButtonDropdown` `Input` `Select` `List` `TextArea` `Checkbox` `Toggle` `Radio`
-  `Rating` · **`FieldGroup`** (fieldset wrapper for radio/checkbox/toggle sets) · **`ButtonGroup`**
+- **Form:** `Button` `ButtonDropdown` `Input` `Select` `Slider` `List` `TextArea` `Checkbox` `Toggle`
+  `Radio` `Rating` · **`Slider`** (draggable number/range; `range` dual-thumb, `min`/`max`/`step`,
+  `showValue`/`format`; FieldChrome + `variant`/`size`; keyboard + `role="slider"`) · **`FieldGroup`**
+  (fieldset wrapper for radio/checkbox/toggle sets) · **`ButtonGroup`**
   (joined row/`col` of `<Button>`s as one unit — an action toolbar or a **controlled** segmented
   selector; `items` of `ButtonGroupItem` {`value`,`text`,`icon`,`variant`,`disabled`,`menu`,`onclick`}
   or a presentational default slot; `select` `'none'|'single'|'multi'` with `bind:value`/`bind:values`;
@@ -169,7 +171,9 @@ examples):
 - **Overlays:** `Dialog` (pure modal shell — BYO content; `width`/`height` take any CSS value;
   `onShow(ctx)`/`onHide(ctx)` control focus — set `ctx.autoFocus` to a selector/element/`false`,
   `ctx.restoreFocus` likewise) · `ConfirmDialog` (title + message + Confirm/Cancel, built on Dialog)
-  · `Popup` `Menu` · `tooltip` (a Svelte `use:` action) · `anchored` (positioning engine)
+  · **`Drawer`** (edge-anchored sliding panel / "sheet"; `side` left/right/top/bottom, `size` CSS
+  length, `bind:open`, `dismissible`/`backdrop`; same modal mechanics as Dialog — a pure shell, put a
+  Card inside) · `Popup` `Menu` · `tooltip` (a Svelte `use:` action) · `anchored` (positioning engine)
 - **Navigation:** `TabStrip` (tabs; `size`/`variant`, `gap`/`pad` bordered spacer cells, `height` for a
   fixed-height bar with bottom-aligned tabs, `activeSurface` to flow the active tab into the content
   below) · **`SideBarMenu`** (data-driven vertical nav: `items`/`bottomItems` of `SideBarMenuItem`
@@ -178,7 +182,12 @@ examples):
   `interactMode` `'hover'|'click'` popouts; `currentPath` active-match (per-item `activeMatch` for
   query-keyed/exact rules); `bind:open`/`bind:api`/`bind:activeMode`; `publishWidthVar` → CSS width var;
   popouts expose `data-sbm-popout`/`data-open`)
-- **Feedback:** `Alert` `Banner` `Badge` `Toaster` + `toast`
+- **Feedback:** `Alert` `Banner` `Badge` `Toaster` + `toast` · **`Spinner`** (indeterminate loading
+  ring; `variant`/`size`, omit `variant` to inherit `currentColor`. `Button` has a `loading` prop that
+  renders one in place of its icon and blocks interaction.) · **`Progress`** (horizontal bar;
+  determinate `value`/`max` or `indeterminate` sweep; `variant`/`size` = 4/8/12px; `label`/`showValue`.)
+  · **`Skeleton`** (neutral loading placeholder; `shape` text/rect/circle, `lines`, `width`/`height`,
+  `animate` shimmer. No `variant` — it's absent-content, not a themed surface. Compose to sketch a card.)
 - **Layout:** `Card` `CardHeader` `CardBody` `CardFooter` · **`Grid`** (auto-placed equal-cell grid;
   `columns` + `gap`)
 - **Disclosure:** **`Disclosure`** (one expand/collapse section; `title`/`header`, `bind:open`, panel

package/dist/components/Button.svelte

@@ -5,6 +5,7 @@
   import { responsiveClasses, type Responsive } from "../types/responsive.js";
   import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
   import { tooltip } from "../positioning/tooltip.js";
+  import Spinner from "./Spinner/Spinner.svelte";
   import { DEV } from "esm-env";
 
   // Only lib-specific props live here; standard element attributes (class, title, aria-*, onclick,
@@ -15,6 +16,8 @@
     text?: string;
     variant?: Responsive<Variant>;
     size?: Responsive<Size>;
+    /** Show a `Spinner` (in place of the icon) and block interaction — for async actions. */
+    loading?: boolean;
     /** Border colour matches the fill (invisible ring, box unchanged) — the default. Set
      *  `borderless={false}` for the standard contrasting tint-border; on the `ghost` variant that's
      *  the "outline button" (transparent fill + a 30% text-tint edge), no separate variant needed. */
@@ -44,6 +47,7 @@
     text,
     variant = "secondary",
     size = "md",
+    loading = false,
     borderless = true,
     children,
     disabled = false,
@@ -65,7 +69,7 @@
         "Button: Props (text/icon) and children provided. Using props, ignoring children.",
       );
     }
-    if (!text && !icon && !children) {
+    if (!text && !icon && !children && !loading) {
       console.warn("Button: No content provided (text, icon, or children). Button will be empty.");
     }
   }
@@ -179,40 +183,53 @@
   <span class="inline-flex {iconSizeClass}">{@render icon?.()}</span>
 {/snippet}
 
+<!-- Shared content — `loading` swaps a Spinner in for the icon (Spinner inherits the button's text
+     colour via currentColor); the label stays visible. Squared/icon-only shows just the spinner. -->
+{#snippet content()}
+  <div class="{text || children ? '-translate-y-px' : ''} flex items-center gap-2">
+    {#if loading}
+      <Spinner {size} />
+    {/if}
+    {#if hasProps}
+      {#if isIconOnly}
+        {#if !loading}{@render iconSlot()}{/if}
+      {:else}
+        {#if icon && !loading}
+          {@render iconSlot()}
+        {/if}
+        {#if text}
+          <span>{text}</span>
+        {/if}
+      {/if}
+    {:else if children}
+      {@render children()}
+    {/if}
+  </div>
+{/snippet}
+
 {#if href}
   <a
     bind:this={element}
     {href}
     use:tooltip={{ text: title ?? undefined }}
-    {onclick}
+    onclick={loading ? undefined : onclick}
     {onmouseenter}
     {onmouseleave}
-    class={buttonClasses}
+    aria-busy={loading || undefined}
+    aria-disabled={loading || undefined}
+    tabindex={loading ? -1 : undefined}
+    class="{buttonClasses} {loading ? 'opacity-50 pointer-events-none' : ''}"
     {...restProps as HTMLAnchorAttributes}
   >
-    <div class="{text || children ? '-translate-y-px' : ''} flex items-center gap-2">
-      {#if hasProps}
-        {#if isIconOnly}
-          {@render iconSlot()}
-        {:else}
-          {#if icon}
-            {@render iconSlot()}
-          {/if}
-          {#if text}
-            <span>{text}</span>
-          {/if}
-        {/if}
-      {:else if children}
-        {@render children()}
-      {/if}
-    </div>
+    {@render content()}
   </a>
 {:else}
   <button
     bind:this={element}
     {type}
-    {disabled}
-    aria-disabled={disabled}
+    disabled={disabled || loading}
+    aria-disabled={disabled || loading}
+    aria-busy={loading || undefined}
     use:tooltip={{ text: title ?? undefined }}
     {onclick}
     {onmouseenter}
@@ -220,21 +237,6 @@
     class={buttonClasses}
     {...restProps as HTMLButtonAttributes}
   >
-    <div class="{text || children ? '-translate-y-px' : ''} flex items-center gap-2">
-      {#if hasProps}
-        {#if isIconOnly}
-          {@render iconSlot()}
-        {:else}
-          {#if icon}
-            {@render iconSlot()}
-          {/if}
-          {#if text}
-            <span>{text}</span>
-          {/if}
-        {/if}
-      {:else if children}
-        {@render children()}
-      {/if}
-    </div>
+    {@render content()}
   </button>
 {/if}

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

@@ -9,6 +9,8 @@ interface BaseProps {
     text?: string;
     variant?: Responsive<Variant>;
     size?: Responsive<Size>;
+    /** Show a `Spinner` (in place of the icon) and block interaction — for async actions. */
+    loading?: boolean;
     /** Border colour matches the fill (invisible ring, box unchanged) — the default. Set
      *  `borderless={false}` for the standard contrasting tint-border; on the `ghost` variant that's
      *  the "outline button" (transparent fill + a 30% text-tint edge), no separate variant needed. */

package/dist/components/Drawer/Drawer.svelte

@@ -0,0 +1,184 @@
+<!--
+/**
+ * Drawer (Sheet) — an edge-anchored overlay panel that slides in from a screen edge. Shares Dialog's
+ * modal mechanics (portal to <body>, scroll-lock, dismissable backdrop, focus trap, role="dialog" +
+ * aria-modal) but pins to `side` and slides. A pure shell — put content (a Card) inside via children.
+ * See Drawer.spec.md.
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { cubicOut } from "svelte/easing";
+  import type { TransitionConfig } from "svelte/transition";
+  import { fade } from "svelte/transition";
+
+  interface DrawerShowContext {
+    panel: HTMLElement;
+    autoFocus: string | HTMLElement | false;
+  }
+  interface DrawerHideContext {
+    restoreFocus: HTMLElement | null | false;
+  }
+
+  let {
+    open = $bindable(false),
+    side = "right",
+    size = "20rem",
+    dismissible = true,
+    backdrop = true,
+    onClose,
+    onShow,
+    onHide,
+    ariaLabel,
+    class: cls = "",
+    children,
+  }: {
+    open?: boolean;
+    side?: "left" | "right" | "top" | "bottom";
+    size?: string;
+    dismissible?: boolean;
+    backdrop?: boolean;
+    onClose?: () => void;
+    onShow?: (ctx: DrawerShowContext) => void;
+    onHide?: (ctx: DrawerHideContext) => void;
+    ariaLabel?: string;
+    class?: string;
+    children?: Snippet;
+  } = $props();
+
+  const FOCUSABLE =
+    'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+  let panelEl: HTMLElement | undefined = $state();
+  let previouslyFocused: HTMLElement | null = null;
+
+  function portal(node: HTMLElement) {
+    document.body.appendChild(node);
+    return { destroy: () => node.remove() };
+  }
+
+  // Slide from the anchored edge. Percentage transform → fully clears the edge at any `size`.
+  function slide(_node: Element): TransitionConfig {
+    const axis = side === "left" || side === "right" ? "X" : "Y";
+    const sign = side === "left" || side === "top" ? -1 : 1;
+    return {
+      duration: 220,
+      easing: cubicOut,
+      css: (t) => `transform: translate${axis}(${(1 - t) * 100 * sign}%)`,
+    };
+  }
+
+  // Lock background scroll while open; compensate for the scrollbar width.
+  $effect(() => {
+    if (!open) return;
+    const sbw = window.innerWidth - document.documentElement.clientWidth;
+    const prevOverflow = document.body.style.overflow;
+    const prevPad = document.body.style.paddingRight;
+    document.body.style.overflow = "hidden";
+    if (sbw > 0) document.body.style.paddingRight = `${sbw}px`;
+    return () => {
+      document.body.style.overflow = prevOverflow;
+      document.body.style.paddingRight = prevPad;
+    };
+  });
+
+  // Focus management: remember → focus first focusable (or onShow target) → restore on close.
+  $effect(() => {
+    if (!open) return;
+    previouslyFocused = document.activeElement as HTMLElement | null;
+    queueMicrotask(() => {
+      if (!panelEl) return;
+      const ctx: DrawerShowContext = { panel: panelEl, autoFocus: FOCUSABLE };
+      onShow?.(ctx);
+      let target: HTMLElement | null;
+      if (ctx.autoFocus === false) target = panelEl;
+      else if (ctx.autoFocus instanceof HTMLElement) target = ctx.autoFocus;
+      else target = panelEl.querySelector<HTMLElement>(ctx.autoFocus) ?? panelEl;
+      target?.focus();
+    });
+    return () => {
+      const ctx: DrawerHideContext = { restoreFocus: previouslyFocused };
+      onHide?.(ctx);
+      if (ctx.restoreFocus) ctx.restoreFocus.focus?.();
+    };
+  });
+
+  const isX = $derived(side === "left" || side === "right");
+  const sideClass = $derived(
+    {
+      left: "inset-y-0 left-0 h-full border-r",
+      right: "inset-y-0 right-0 h-full border-l",
+      top: "inset-x-0 top-0 w-full border-b",
+      bottom: "inset-x-0 bottom-0 w-full border-t",
+    }[side],
+  );
+  const panelStyle = $derived(
+    isX
+      ? `width:${size};max-width:calc(100vw - 1rem)`
+      : `height:${size};max-height:calc(100vh - 1rem)`,
+  );
+
+  function close() {
+    if (!dismissible) return;
+    onClose?.();
+    open = false;
+  }
+  function onBackdrop(event: MouseEvent) {
+    if (event.target === event.currentTarget) close();
+  }
+  function onKeydown(event: KeyboardEvent) {
+    if (!open) return;
+    if (event.key === "Escape") {
+      close();
+      return;
+    }
+    if (event.key === "Tab" && panelEl) {
+      const items = [...panelEl.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(
+        (el) => el.offsetParent !== null,
+      );
+      if (items.length === 0) {
+        event.preventDefault();
+        panelEl.focus();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      if (event.shiftKey && (active === first || active === panelEl)) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  }
+</script>
+
+<svelte:window on:keydown={onKeydown} />
+
+{#if open}
+  <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+  <div use:portal class="fixed inset-0 z-[9999]" role="presentation">
+    {#if backdrop}
+      <div
+        class="absolute inset-0 bg-black/50"
+        onclick={onBackdrop}
+        role="presentation"
+        transition:fade={{ duration: 200 }}
+      ></div>
+    {/if}
+    <div
+      bind:this={panelEl}
+      class="fixed {sideClass} overflow-auto z-[10000] shadow-xl [background-color:var(--ui-color-background)] [border-color:var(--ui-border-color)] {cls}"
+      style={panelStyle}
+      role="dialog"
+      aria-modal="true"
+      aria-label={ariaLabel}
+      tabindex="-1"
+      transition:slide
+    >
+      {@render children?.()}
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,24 @@
+import type { Snippet } from "svelte";
+interface DrawerShowContext {
+    panel: HTMLElement;
+    autoFocus: string | HTMLElement | false;
+}
+interface DrawerHideContext {
+    restoreFocus: HTMLElement | null | false;
+}
+type $$ComponentProps = {
+    open?: boolean;
+    side?: "left" | "right" | "top" | "bottom";
+    size?: string;
+    dismissible?: boolean;
+    backdrop?: boolean;
+    onClose?: () => void;
+    onShow?: (ctx: DrawerShowContext) => void;
+    onHide?: (ctx: DrawerHideContext) => void;
+    ariaLabel?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const Drawer: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/Drawer/index.d.ts

@@ -0,0 +1 @@
+export { default as Drawer } from "./Drawer.svelte";

package/dist/components/Drawer/index.js

@@ -0,0 +1 @@
+export { default as Drawer } from "./Drawer.svelte";

package/dist/components/Progress/Progress.svelte

@@ -0,0 +1,97 @@
+<!--
+/**
+ * Progress — a horizontal progress bar; the determinate counterpart to Spinner. Determinate when a
+ * `value` is given (fill width = value/max), indeterminate (a sweeping segment) otherwise. Honours the
+ * shared `variant`/`size` axes and is drawn from `--ui-*` tokens. See `Progress.spec.md`.
+ */
+-->
+<script lang="ts">
+  import type { Variant } from "../../types/variants.js";
+  import { variantToken } from "../../types/variants.js";
+  import type { Size } from "../../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../../types/responsive.js";
+
+  let {
+    value,
+    max = 100,
+    indeterminate = value == null,
+    variant = "primary",
+    size = "md",
+    label,
+    showValue = false,
+    class: cls = "",
+  }: {
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    label?: string;
+    showValue?: boolean;
+    class?: string;
+  } = $props();
+
+  const token = $derived(variantToken[variant]);
+  const pct = $derived(
+    value == null || max <= 0 ? 0 : Math.max(0, Math.min(100, (value / max) * 100)),
+  );
+
+  // Bar thickness on the shared size axis (4 / 8 / 12px).
+  const heightClass: Record<Size, string> = { sm: "h-1", md: "h-2", lg: "h-3" };
+  const textClass: Record<Size, string> = { sm: "text-xs", md: "text-sm", lg: "text-sm" };
+</script>
+
+<div class="w-full {cls}">
+  {#if label || (showValue && !indeterminate)}
+    <div
+      class="mb-1 flex items-center justify-between {responsiveClasses(
+        size,
+        textClass,
+      )} [color:color-mix(in_srgb,var(--ui-color-text)_70%,transparent)]"
+    >
+      {#if label}<span>{label}</span>{:else}<span></span>{/if}
+      {#if showValue && !indeterminate}<span class="tabular-nums">{Math.round(pct)}%</span>{/if}
+    </div>
+  {/if}
+
+  <div
+    role="progressbar"
+    aria-label={label}
+    aria-valuemin={indeterminate ? undefined : 0}
+    aria-valuemax={indeterminate ? undefined : max}
+    aria-valuenow={indeterminate ? undefined : value}
+    class="relative w-full overflow-hidden rounded-full {responsiveClasses(size, heightClass)}"
+    style="background-color: color-mix(in srgb, var({token}) 16%, transparent);"
+  >
+    {#if indeterminate}
+      <div
+        class="ui-progress-indet absolute top-0 bottom-0 w-2/5 rounded-full"
+        style="background-color: var({token});"
+      ></div>
+    {:else}
+      <div
+        class="h-full rounded-full transition-[width] duration-300 ease-out"
+        style="width: {pct}%; background-color: var({token});"
+      ></div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  @keyframes ui-progress-indet {
+    from {
+      left: -40%;
+    }
+    to {
+      left: 100%;
+    }
+  }
+  .ui-progress-indet {
+    animation: ui-progress-indet 1.4s ease-in-out infinite;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ui-progress-indet {
+      animation-duration: 3s;
+    }
+  }
+</style>

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

@@ -0,0 +1,16 @@
+import type { Variant } from "../../types/variants.js";
+import type { Size } from "../../types/sizes.js";
+import { type Responsive } from "../../types/responsive.js";
+type $$ComponentProps = {
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    label?: string;
+    showValue?: boolean;
+    class?: string;
+};
+declare const Progress: import("svelte").Component<$$ComponentProps, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/components/Progress/index.d.ts

@@ -0,0 +1 @@
+export { default as Progress } from "./Progress.svelte";

package/dist/components/Progress/index.js

@@ -0,0 +1 @@
+export { default as Progress } from "./Progress.svelte";

package/dist/components/Skeleton/Skeleton.svelte

@@ -0,0 +1,87 @@
+<!--
+/**
+ * Skeleton — a colour-neutral content placeholder shown while real content loads (text lines, an
+ * image rectangle, an avatar circle). Decorative (`aria-hidden`); the loading state is announced by
+ * the surrounding region. CSS-only shimmer. See `Skeleton.spec.md`.
+ */
+-->
+<script lang="ts">
+  let {
+    shape = "text",
+    width,
+    height,
+    lines = 1,
+    radius,
+    animate = true,
+    class: cls = "",
+  }: {
+    shape?: "text" | "rect" | "circle";
+    width?: string | number;
+    height?: string | number;
+    lines?: number;
+    radius?: string;
+    animate?: boolean;
+    class?: string;
+  } = $props();
+
+  const css = (v: string | number | undefined): string | undefined =>
+    typeof v === "number" ? `${v}px` : v;
+
+  const h = $derived(
+    css(height) ?? (shape === "text" ? "0.75em" : shape === "circle" ? "2.5rem" : "1rem"),
+  );
+  const w = $derived(css(width) ?? (shape === "circle" ? h : "100%"));
+  const rad = $derived(
+    radius ??
+      (shape === "circle" ? "9999px" : shape === "text" ? "0.25rem" : "var(--ui-border-radius)"),
+  );
+  const blockClass = $derived(`block ${animate ? "ui-skeleton" : "ui-skeleton-base"}`);
+</script>
+
+{#if shape === "text" && lines > 1}
+  <div class="flex flex-col gap-2 {cls}" aria-hidden="true">
+    {#each Array(lines) as _, i (i)}
+      <span
+        class={blockClass}
+        style="width: {i === lines - 1 ? '70%' : (css(width) ?? '100%')}; height: {h}; border-radius: {rad};"
+      ></span>
+    {/each}
+  </div>
+{:else}
+  <span
+    class="{blockClass} {cls}"
+    style="width: {w}; height: {h}; border-radius: {rad};"
+    aria-hidden="true"
+  ></span>
+{/if}
+
+<style>
+  .ui-skeleton,
+  .ui-skeleton-base {
+    background-color: color-mix(in srgb, var(--ui-color-text) 10%, transparent);
+  }
+  .ui-skeleton {
+    background-image: linear-gradient(
+      90deg,
+      transparent 0%,
+      color-mix(in srgb, var(--ui-color-text) 9%, transparent) 50%,
+      transparent 100%
+    );
+    background-size: 200% 100%;
+    background-repeat: no-repeat;
+    animation: ui-skeleton-shimmer 1.4s ease-in-out infinite;
+  }
+  @keyframes ui-skeleton-shimmer {
+    from {
+      background-position: -150% 0;
+    }
+    to {
+      background-position: 150% 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ui-skeleton {
+      animation: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    shape?: "text" | "rect" | "circle";
+    width?: string | number;
+    height?: string | number;
+    lines?: number;
+    radius?: string;
+    animate?: boolean;
+    class?: string;
+};
+declare const Skeleton: import("svelte").Component<$$ComponentProps, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from "./Skeleton.svelte";

package/dist/components/Skeleton/index.js

@@ -0,0 +1 @@
+export { default as Skeleton } from "./Skeleton.svelte";

package/dist/components/Slider/Slider.svelte

@@ -0,0 +1,219 @@
+<!--
+/**
+ * Slider — a draggable range input (single value or a [min,max] pair). A form field: wears
+ * FieldChrome and the shared variant/size axes, drawn from --ui-* tokens. Custom track+thumb (not a
+ * native range input) so it themes consistently and supports a dual-thumb range. See Slider.spec.md.
+ */
+-->
+<script lang="ts">
+  import FieldChrome, { nextFieldId } from "../FieldChrome.svelte";
+  import type { Snippet } from "svelte";
+  import type { Variant } from "../../types/variants.js";
+  import { variantToken } from "../../types/variants.js";
+  import type { Size } from "../../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../../types/responsive.js";
+
+  let {
+    value = $bindable(0),
+    min = 0,
+    max = 100,
+    step = 1,
+    range = false,
+    variant = "primary",
+    size = "md",
+    disabled = false,
+    showValue = false,
+    format = (n: number) => String(n),
+    label = null,
+    aside,
+    error = null,
+    description = null,
+    required = false,
+    id,
+    class: cls = "",
+  }: {
+    value?: number | [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+    range?: boolean;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    disabled?: boolean;
+    showValue?: boolean;
+    format?: (n: number) => string;
+    label?: string | null;
+    aside?: Snippet;
+    error?: string | Snippet | null;
+    description?: string | Snippet | null;
+    required?: boolean;
+    id?: string;
+    class?: string;
+  } = $props();
+
+  const controlId = id ?? nextFieldId();
+  const isRange = $derived(range || Array.isArray(value));
+  // Normalised thumbs. In range mode a non-tuple value defaults to [min, max].
+  const thumbs = $derived<number[]>(
+    isRange
+      ? Array.isArray(value)
+        ? value
+        : [min, max]
+      : [typeof value === "number" ? value : min],
+  );
+
+  const token = $derived(variantToken[variant]);
+
+  const clampSnap = (n: number): number => {
+    const s = Math.round((n - min) / step) * step + min;
+    return Math.max(min, Math.min(max, s));
+  };
+  const pctOf = (n: number): number => (max <= min ? 0 : ((n - min) / (max - min)) * 100);
+
+  function setThumb(i: number, raw: number) {
+    let v = clampSnap(raw);
+    if (isRange) {
+      const arr = [thumbs[0], thumbs[1]] as [number, number];
+      if (i === 0) v = Math.min(v, arr[1]);
+      else v = Math.max(v, arr[0]);
+      arr[i] = v;
+      value = arr;
+    } else {
+      value = v;
+    }
+  }
+
+  let trackEl: HTMLDivElement | undefined = $state();
+  let dragging: number | null = $state(null);
+
+  const valueFromClientX = (clientX: number): number => {
+    if (!trackEl) return min;
+    const rect = trackEl.getBoundingClientRect();
+    const ratio = rect.width <= 0 ? 0 : (clientX - rect.left) / rect.width;
+    return min + ratio * (max - min);
+  };
+  const nearestThumb = (v: number): number => {
+    if (!isRange) return 0;
+    return Math.abs(v - thumbs[0]) <= Math.abs(v - thumbs[1]) ? 0 : 1;
+  };
+
+  function onTrackPointerDown(e: PointerEvent) {
+    if (disabled) return;
+    const v = valueFromClientX(e.clientX);
+    const i = nearestThumb(v);
+    dragging = i;
+    setThumb(i, v);
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+  }
+  function onPointerMove(e: PointerEvent) {
+    if (dragging === null) return;
+    setThumb(dragging, valueFromClientX(e.clientX));
+  }
+  function onPointerUp() {
+    dragging = null;
+    window.removeEventListener("pointermove", onPointerMove);
+    window.removeEventListener("pointerup", onPointerUp);
+  }
+  // Safety: drop listeners if we unmount mid-drag.
+  $effect(() => () => {
+    window.removeEventListener("pointermove", onPointerMove);
+    window.removeEventListener("pointerup", onPointerUp);
+  });
+
+  function onThumbKeydown(e: KeyboardEvent, i: number) {
+    if (disabled) return;
+    const big = step * 10;
+    let delta = 0;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        delta = step;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        delta = -step;
+        break;
+      case "PageUp":
+        delta = big;
+        break;
+      case "PageDown":
+        delta = -big;
+        break;
+      case "Home":
+        e.preventDefault();
+        setThumb(i, min);
+        return;
+      case "End":
+        e.preventDefault();
+        setThumb(i, max);
+        return;
+      default:
+        return;
+    }
+    e.preventDefault();
+    setThumb(i, thumbs[i] + delta);
+  }
+
+  const trackH: Record<Size, string> = { sm: "h-1", md: "h-1.5", lg: "h-2" };
+  const thumbSz: Record<Size, string> = { sm: "w-3 h-3", md: "w-4 h-4", lg: "w-5 h-5" };
+  const fillLeft = $derived(isRange ? pctOf(thumbs[0]) : 0);
+  const fillRight = $derived(pctOf(thumbs[isRange ? 1 : 0]));
+
+  const thumbLabel = (i: number): string | undefined =>
+    isRange ? `${label ?? "Value"} ${i === 0 ? "minimum" : "maximum"}` : (label ?? undefined);
+</script>
+
+<FieldChrome {label} {aside} {error} {description} {required} {controlId} {size} class={cls}>
+  {#snippet control({ describedBy })}
+    <div class="flex items-center gap-3">
+      <!-- The track is the click-to-position surface; the thumbs below carry role="slider". -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        bind:this={trackEl}
+        onpointerdown={onTrackPointerDown}
+        class="relative flex-1 select-none rounded-full {disabled
+          ? 'opacity-50 pointer-events-none'
+          : 'cursor-pointer'} {responsiveClasses(size, trackH)}"
+        style="background-color: color-mix(in srgb, var({token}) 16%, transparent);"
+      >
+        <!-- filled range -->
+        <div
+          class="absolute top-0 bottom-0 rounded-full"
+          style="left: {fillLeft}%; right: {100 - fillRight}%; background-color: var({token});"
+        ></div>
+        <!-- thumbs -->
+        {#each thumbs as t, i (i)}
+          <div
+            id={i === 0 ? controlId : undefined}
+            role="slider"
+            tabindex={disabled ? -1 : 0}
+            aria-valuemin={isRange && i === 1 ? thumbs[0] : min}
+            aria-valuemax={isRange && i === 0 ? thumbs[1] : max}
+            aria-valuenow={t}
+            aria-valuetext={format(t)}
+            aria-label={thumbLabel(i)}
+            aria-orientation="horizontal"
+            aria-disabled={disabled || undefined}
+            aria-describedby={describedBy}
+            onkeydown={(e) => onThumbKeydown(e, i)}
+            class="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 shadow {disabled
+              ? ''
+              : 'cursor-grab active:cursor-grabbing'} focus-visible:[outline:2px_solid_color-mix(in_srgb,var(--ui-color-text)_70%,transparent)] focus-visible:[outline-offset:2px] {responsiveClasses(
+              size,
+              thumbSz,
+            )}"
+            style="left: {pctOf(t)}%; background-color: var({token}); border-color: var(--ui-color-background);"
+          ></div>
+        {/each}
+      </div>
+      {#if showValue}
+        <span
+          class="tabular-nums text-sm [color:var(--ui-color-text)] min-w-[3ch] shrink-0 text-right"
+        >
+          {isRange ? `${format(thumbs[0])}–${format(thumbs[1])}` : format(thumbs[0])}
+        </span>
+      {/if}
+    </div>
+  {/snippet}
+</FieldChrome>

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

@@ -0,0 +1,26 @@
+import type { Snippet } from "svelte";
+import type { Variant } from "../../types/variants.js";
+import type { Size } from "../../types/sizes.js";
+import { type Responsive } from "../../types/responsive.js";
+type $$ComponentProps = {
+    value?: number | [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+    range?: boolean;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    disabled?: boolean;
+    showValue?: boolean;
+    format?: (n: number) => string;
+    label?: string | null;
+    aside?: Snippet;
+    error?: string | Snippet | null;
+    description?: string | Snippet | null;
+    required?: boolean;
+    id?: string;
+    class?: string;
+};
+declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/Slider/index.d.ts

@@ -0,0 +1 @@
+export { default as Slider } from "./Slider.svelte";

package/dist/components/Slider/index.js

@@ -0,0 +1 @@
+export { default as Slider } from "./Slider.svelte";

package/dist/components/Spinner/Spinner.svelte

@@ -0,0 +1,56 @@
+<!--
+/**
+ * Spinner — an indeterminate loading ring. Honours the shared `variant`/`size` axes and is drawn
+ * from `--ui-*` tokens via `currentColor`, so it is theme-correct automatically and inherits the
+ * ambient text colour when `variant` is omitted (e.g. white inside a filled Button).
+ *
+ * For a known 0–100% progress, use `Progress` instead. See `Spinner.spec.md`.
+ */
+-->
+<script lang="ts">
+  import type { Variant } from "../../types/variants.js";
+  import { variantToken } from "../../types/variants.js";
+  import type { Size } from "../../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../../types/responsive.js";
+
+  let {
+    variant,
+    size = "md",
+    label = "Loading",
+    class: cls = "",
+  }: {
+    /** Colour accent. Omit to inherit `currentColor` (e.g. inside a filled Button). */
+    variant?: Variant;
+    size?: Responsive<Size>;
+    /** Accessible label (visually hidden). */
+    label?: string;
+    class?: string;
+  } = $props();
+
+  // 16 / 20 / 24px rings on the shared size axis.
+  const sizeClass: Record<Size, string> = {
+    sm: "w-4 h-4 border-2",
+    md: "w-5 h-5 border-2",
+    lg: "w-6 h-6 border-[3px]",
+  };
+
+  // Track = faint currentColor; head (top edge) = full currentColor. If `variant` is set, colour
+  // `currentColor` from its token; otherwise inherit the surrounding text colour.
+  const style = $derived(
+    (variant ? `color: var(${variantToken[variant]});` : "") +
+      "border-color: color-mix(in srgb, currentColor 25%, transparent);" +
+      "border-top-color: currentColor;",
+  );
+</script>
+
+<span
+  role="status"
+  aria-live="polite"
+  class="inline-block shrink-0 animate-spin rounded-full border-solid align-[-0.125em] {responsiveClasses(
+    size,
+    sizeClass,
+  )} {cls}"
+  {style}
+>
+  <span class="sr-only">{label}</span>
+</span>

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

@@ -0,0 +1,14 @@
+import type { Variant } from "../../types/variants.js";
+import type { Size } from "../../types/sizes.js";
+import { type Responsive } from "../../types/responsive.js";
+type $$ComponentProps = {
+    /** Colour accent. Omit to inherit `currentColor` (e.g. inside a filled Button). */
+    variant?: Variant;
+    size?: Responsive<Size>;
+    /** Accessible label (visually hidden). */
+    label?: string;
+    class?: string;
+};
+declare const Spinner: import("svelte").Component<$$ComponentProps, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/Spinner/index.d.ts

@@ -0,0 +1 @@
+export { default as Spinner } from "./Spinner.svelte";

package/dist/components/Spinner/index.js

@@ -0,0 +1 @@
+export { default as Spinner } from "./Spinner.svelte";

package/dist/index.d.ts

@@ -10,13 +10,18 @@ export { default as CardFooter } from "./components/CardFooter.svelte";
 export { default as Toaster } from "./components/Toast/Toaster.svelte";
 export { toast, getToasts, dismissToast, type ToastVariant, type ToastItem, } from "./components/Toast/toast.svelte.js";
 export { default as Dialog } from "./components/Dialog.svelte";
+export { Drawer } from "./components/Drawer/index.js";
 export { default as ConfirmDialog } from "./components/ConfirmDialog.svelte";
 export { default as Input } from "./components/Input.svelte";
 export { default as NotesEditor } from "./components/NotesEditor.svelte";
 export { default as Rating } from "./components/Rating.svelte";
 export { default as Select } from "./components/Select.svelte";
+export { Slider } from "./components/Slider/index.js";
 export { default as List } from "./components/List.svelte";
 export { default as TextArea } from "./components/TextArea.svelte";
+export { Spinner } from "./components/Spinner/index.js";
+export { Progress } from "./components/Progress/index.js";
+export { Skeleton } from "./components/Skeleton/index.js";
 export { default as PasswordInput } from "./components/PasswordInput.svelte";
 export { default as EmailInput } from "./components/EmailInput.svelte";
 export { default as SearchInput } from "./components/SearchInput.svelte";

package/dist/index.js

@@ -12,13 +12,18 @@ export { default as CardFooter } from "./components/CardFooter.svelte";
 export { default as Toaster } from "./components/Toast/Toaster.svelte";
 export { toast, getToasts, dismissToast, } from "./components/Toast/toast.svelte.js";
 export { default as Dialog } from "./components/Dialog.svelte";
+export { Drawer } from "./components/Drawer/index.js";
 export { default as ConfirmDialog } from "./components/ConfirmDialog.svelte";
 export { default as Input } from "./components/Input.svelte";
 export { default as NotesEditor } from "./components/NotesEditor.svelte";
 export { default as Rating } from "./components/Rating.svelte";
 export { default as Select } from "./components/Select.svelte";
+export { Slider } from "./components/Slider/index.js";
 export { default as List } from "./components/List.svelte";
 export { default as TextArea } from "./components/TextArea.svelte";
+export { Spinner } from "./components/Spinner/index.js";
+export { Progress } from "./components/Progress/index.js";
+export { Skeleton } from "./components/Skeleton/index.js";
 // Specialized Input Components
 export { default as PasswordInput } from "./components/PasswordInput.svelte";
 export { default as EmailInput } from "./components/EmailInput.svelte";

package/docs/components.md

@@ -49,10 +49,11 @@ Flexible button/anchor component.
 
 - **Location**: `src/lib/components/Button.svelte`
 - **Axes**: `variant`, `size`
-- **Props**: `text`, `icon` (snippet), `href` (renders an `<a>`), `disabled`, `onclick`, `title`,
-  plus native button/anchor attributes
+- **Props**: `text`, `icon` (snippet), `href` (renders an `<a>`), `disabled`, `loading`, `onclick`,
+  `title`, plus native button/anchor attributes
 - **Features**: icon-only sizing, themed tooltip driven from `title` (via `use:tooltip`),
-  TypeScript discriminated union for button-vs-anchor
+  TypeScript discriminated union for button-vs-anchor; `loading` swaps a `Spinner` in for the icon
+  (inheriting the button's text colour) and blocks interaction (`aria-busy`)
 - **Accessibility**: ARIA attributes, focus-visible outlines
 
 ### Input
@@ -78,6 +79,21 @@ Custom dropdown built on `Input` + `List`.
   `maxResults`, `headers`, `searchTerm`)
 - **Modes**: static `options` or search-as-you-type against `url`
 
+### Slider
+
+Draggable range input — a single value or a `[min, max]` pair.
+
+- **Location**: `src/lib/components/Slider/Slider.svelte`
+- **Axes**: `variant` (fill + thumb; track is a soft tint), `size` (track thickness + thumb size)
+- **Props**: `value` (bindable — number, or `[lo, hi]` in range mode), `min`/`max`/`step`, `range`,
+  `disabled`, `showValue`, `format`, plus the FieldChrome vocabulary (`label`, `aside`, `error`,
+  `description`, `required`, `id`), `class`
+- **Interaction**: drag, click-to-position, keyboard (arrows / PageUp-Dn / Home / End); range thumbs
+  can't cross
+- **Accessibility**: each thumb `role="slider"` with `aria-valuemin/max/now`, `aria-valuetext`
+  (`format`), `aria-label`; `aria-describedby` wired from FieldChrome
+- **Theming**: fill/thumb = variant token; track = that token @16%; thumb ring = `--ui-color-background`
+
 ### List
 
 Standalone selectable list (Select's dropdown body).
@@ -306,6 +322,20 @@ dialog (operators, casts, dynamic `now()` dates, and a worked examples table). T
   + Escape dismiss, **focus trap** (initial focus in, Tab wraps, focus restored on close),
   `role="dialog"` + `aria-modal`.
 
+### Drawer
+
+**Edge-anchored overlay panel** (a "sheet") — Dialog's mechanics, but slides in from a screen edge.
+Pure shell; put a `Card` (or anything) inside.
+
+- **Location**: `src/lib/components/Drawer/Drawer.svelte`
+- **Props**: `open` (bindable), `side` (`left`/`right`/`top`/`bottom`, default `right`), `size` (any CSS
+  length — width for left/right, height for top/bottom; a surface dimension, **not** the sm/md/lg axis;
+  capped to viewport − 1rem), `dismissible` (default `true`), `backdrop` (default `true`), `onClose`,
+  `onShow`/`onHide` (same focus-knob contract as `Dialog`), `ariaLabel`, `class`, `children`
+- **Features**: portals to `<body>`, scroll-lock, focus trap + restore, Escape / backdrop dismiss,
+  CSS slide transition (percentage-based so it clears the edge at any `size`), `role="dialog"` +
+  `aria-modal`
+
 ### ConfirmDialog
 
 The common title + message + Confirm/Cancel modal, composed from a `Card` on top of the `Dialog`
@@ -360,6 +390,42 @@ Shared placement engine — a Svelte action plus `computePlacement` / `resolveBo
 
 ## Display / Theme
 
+### Spinner
+
+Indeterminate loading ring — the primitive `Button`'s `loading` state and the loading family build on.
+
+- **Location**: `src/lib/components/Spinner/Spinner.svelte`
+- **Axes**: `variant` (optional), `size` (`sm`/`md`/`lg` = 16/20/24px)
+- **Props**: `variant` (omit to inherit `currentColor` — e.g. white inside a filled Button), `size`,
+  `label` (visually-hidden, default `"Loading"`), `class`
+- **Accessibility**: `role="status"` + `aria-live="polite"` + visually-hidden `label`
+- **Theming**: track = `currentColor` @25%, head = `currentColor`; `variant` sets `color` to the
+  semantic token. No per-component tokens. For a known 0–100%, use `Progress`.
+
+### Progress
+
+Horizontal progress bar — the determinate counterpart to `Spinner`.
+
+- **Location**: `src/lib/components/Progress/Progress.svelte`
+- **Axes**: `variant` (fill; track is a soft tint of it), `size` (`sm`/`md`/`lg` = 4/8/12px thick)
+- **Props**: `value` (0…`max`; omit → indeterminate), `max` (default 100), `indeterminate`, `variant`,
+  `size`, `label` (caption + accessible name), `showValue` (percentage), `class`
+- **Accessibility**: `role="progressbar"` with `aria-valuemin/max/now` (now omitted when indeterminate)
+- **Theming**: fill = variant token, track = that token @16%. Indeterminate sweep is CSS-only (no
+  timer). No per-component tokens.
+
+### Skeleton
+
+Colour-neutral content placeholder for loading states.
+
+- **Location**: `src/lib/components/Skeleton/Skeleton.svelte`
+- **Props**: `shape` (`text`/`rect`/`circle`), `width`/`height` (number → px), `lines` (text),
+  `radius`, `animate` (shimmer, default on), `class`. **No `variant`/`size`** — it reads as absent
+  content, sized by `width`/`height`.
+- **Accessibility**: all nodes `aria-hidden`; announce loading on the surrounding region (`aria-busy`)
+- **Theming**: neutral text-tint base + CSS shimmer; corners use `--ui-border-radius`. Compose several
+  to sketch a card/list row.
+
 ### Badge
 
 Status indicator / label.

package/docs/usage.md

@@ -218,6 +218,103 @@ A `Disclosure` is one expand/collapse section (`bind:open`); an `Accordion` coor
 <Button text="Delete" variant="danger">
   {#snippet icon()}<IconDelete />{/snippet}
 </Button>
+
+<!-- Loading — swaps a Spinner in for the icon (inheriting text colour) and blocks interaction -->
+<Button text="Saving…" variant="primary" loading />
+```
+
+### Spinner
+
+An indeterminate loading ring on the shared `variant`/`size` axes. Omit `variant` to inherit the
+ambient text colour (e.g. white inside a filled Button). For a known 0–100%, use `Progress`.
+
+```svelte
+<script>
+  import { Spinner } from "@spaethtech/svelte-ui";
+</script>
+
+<!-- Inherits the ambient text colour -->
+<Spinner />
+
+<!-- Coloured by a semantic variant -->
+<Spinner variant="primary" />
+
+<!-- size="md" is the default -->
+<Spinner size="sm" variant="success" />
+<Spinner size="lg" variant="danger" />
+
+<!-- On a coloured surface, omit variant so it adopts the text colour -->
+<div class="[background-color:var(--ui-color-primary)] text-white p-4">
+  <Spinner label="Loading" />
+</div>
+```
+
+### Progress
+
+A horizontal progress bar. Determinate with a `value`; indeterminate (a sweeping segment) without one.
+
+```svelte
+<script>
+  import { Progress } from "@spaethtech/svelte-ui";
+  let value = $state(40);
+</script>
+
+<!-- Determinate: proportional fill, optional caption + percentage -->
+<Progress {value} label="Uploading" showValue />
+
+<!-- Indeterminate: omit value (or set indeterminate) for a sweeping bar -->
+<Progress indeterminate label="Working…" />
+
+<!-- variant colours the fill; size sets thickness (sm/md/lg = 4/8/12px) -->
+<Progress value={65} variant="success" size="lg" />
+```
+
+### Skeleton
+
+A neutral placeholder shown while content loads. Compose primitives to sketch the real layout.
+
+```svelte
+<script>
+  import { Skeleton, Card } from "@spaethtech/svelte-ui";
+</script>
+
+<Skeleton shape="text" width="12rem" />
+<Skeleton shape="rect" height={120} />
+<Skeleton shape="circle" height={48} />
+
+<!-- Multiple lines (last line shortened) -->
+<Skeleton shape="text" lines={4} />
+
+<!-- Composed: a loading card -->
+<Card class="p-4 max-w-sm">
+  <div class="flex items-center gap-3">
+    <Skeleton shape="circle" height={40} />
+    <div class="flex-1"><Skeleton shape="text" width="60%" /></div>
+  </div>
+  <div class="mt-4"><Skeleton shape="rect" height={140} /></div>
+</Card>
+```
+
+### Slider
+
+A draggable range input — a single value or a `[min, max]` pair. A form field (wears FieldChrome).
+
+```svelte
+<script>
+  import { Slider } from "@spaethtech/svelte-ui";
+  let volume = $state(60);
+  let price = $state([200, 750]);
+</script>
+
+<!-- Single value -->
+<Slider bind:value={volume} label="Volume" showValue />
+
+<!-- Range (dual thumb — thumbs can't cross); format the displayed/announced value -->
+<Slider bind:value={price} range min={0} max={1000} step={10}
+  label="Price" showValue format={(n) => "$" + n} />
+
+<!-- variant colours the fill + thumb; size scales the control -->
+<Slider value={65} variant="success" size="lg" label="Level" />
 ```
 
 ### ButtonGroup
@@ -478,6 +575,35 @@ ignore it):
 </Dialog>
 ```
 
+### Drawer (sheet)
+
+An edge-anchored panel that slides in — same modal mechanics as `Dialog`, pinned to a `side`. Put a
+`Card` inside.
+
+```svelte
+<script>
+  import { Drawer, Card, CardHeader, CardBody, CardFooter, Button, Input } from "@spaethtech/svelte-ui";
+  let open = $state(false);
+</script>
+
+<Button text="Settings" onclick={() => (open = true)} />
+
+<Drawer bind:open side="right" size="24rem" ariaLabel="Settings">
+  <Card class="h-full flex flex-col">
+    <CardHeader><h3 class="font-medium">Settings</h3></CardHeader>
+    <CardBody>
+      <Input label="Display name" placeholder="Jane Doe" />
+    </CardBody>
+    <CardFooter separator={false}>
+      <div class="flex justify-end gap-2">
+        <Button text="Cancel" variant="ghost" onclick={() => (open = false)} />
+        <Button text="Save" variant="primary" onclick={() => (open = false)} />
+      </div>
+    </CardFooter>
+  </Card>
+</Drawer>
+```
+
 ### Badge
 
 ```svelte

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"