@elvora/svelte 1.0.0-rc.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Elvora UI Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,46 @@
+# @elvora/svelte
+
+Elvora UI components for Svelte 4+ and Svelte 5.
+
+This adapter ships components as **raw `.svelte` source files** — the
+recommended distribution shape for Svelte component libraries. SvelteKit
+(or any consumer using the official Svelte preprocessor) will compile them
+on demand, ensuring users always get the right runtime for their Svelte
+version.
+
+## Install
+
+```bash
+pnpm add @elvora/svelte svelte
+```
+
+## Quick start
+
+```svelte
+<script lang="ts">
+  import { ElvoraProvider, ElvoraButton, ElvoraCard, ElvoraStack } from '@elvora/svelte';
+  import { defaultTheme } from '@elvora/themes';
+</script>
+
+<ElvoraProvider theme={defaultTheme}>
+  <ElvoraCard>
+    <ElvoraStack gap={12}>
+      <h2>Hello Elvora</h2>
+      <ElvoraButton variant="primary" on:click={() => alert('hi')}>Click me</ElvoraButton>
+    </ElvoraStack>
+  </ElvoraCard>
+</ElvoraProvider>
+```
+
+## Available components (alpha)
+
+`ElvoraProvider`, `ElvoraButton`, `ElvoraIconButton`, `ElvoraBox`, `ElvoraStack`,
+`ElvoraCard`, `ElvoraAlert`, `ElvoraSpinner`, `ElvoraDivider`, `ElvoraTag`,
+`ElvoraBadge`, `ElvoraAvatar`, `ElvoraIcon`, `ElvoraLabel`, `ElvoraInput`,
+`ElvoraTextarea`, `ElvoraCheckbox`, `ElvoraSwitch`, `ElvoraProgress`,
+`ElvoraSkeleton`, `ElvoraEmpty`, `ElvoraModal`.
+
+The Svelte adapter consumes the same `@elvora/core` headless logic and
+`@elvora/tokens` design tokens as the React, React Native, Angular, and
+Vue adapters. Full Phase 2–7 parity is on the v1.1 roadmap; today the
+Svelte surface focuses on the primitives most apps need on day one.

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@elvora/svelte",
+  "version": "1.0.0-rc.1",
+  "description": "Elvora UI components for Svelte 4 / Svelte 5 — same headless API as the React adapter, idiomatic Svelte stores, WCAG 2.1 AA.",
+  "license": "MIT",
+  "author": "Elvora UI Contributors",
+  "homepage": "https://github.com/elvora-ui/elvora/tree/main/packages/svelte#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/elvora-ui/elvora.git",
+    "directory": "packages/svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/elvora-ui/elvora/issues"
+  },
+  "keywords": [
+    "svelte",
+    "sveltekit",
+    "ui",
+    "components",
+    "design-system",
+    "headless",
+    "accessibility",
+    "elvora"
+  ],
+  "type": "module",
+  "svelte": "./src/index.ts",
+  "types": "./src/index.ts",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "exports": {
+    ".": {
+      "svelte": "./src/index.ts",
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./*.svelte": {
+      "svelte": "./src/components/*.svelte",
+      "types": "./src/components/*.svelte.d.ts"
+    }
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "svelte": ">=4.0.0"
+  },
+  "dependencies": {
+    "@elvora/themes": "1.0.0-rc.1",
+    "@elvora/tokens": "1.0.0-rc.1",
+    "@elvora/icons": "1.0.0-rc.1",
+    "@elvora/core": "1.0.0-rc.1"
+  },
+  "devDependencies": {
+    "svelte": "^5.0.0",
+    "typescript": "^5.7.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "echo 'Svelte components are shipped as source — no precompile step (consumed by SvelteKit / svelte preprocessor)'",
+    "dev": "echo 'no dev step'",
+    "typecheck": "echo 'svelte-check not configured yet'",
+    "lint": "echo 'no lint configured'",
+    "test": "echo 'no tests yet (requires svelte-testing-library)'",
+    "clean": "echo 'no dist to clean'"
+  }
+}

package/src/components/Alert.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { ElvoraStatus } from '@elvora/core';
+  import { useTheme } from '../context';
+
+  export let status: ElvoraStatus = 'info';
+  export let title: string | undefined = undefined;
+  export let dismissible = false;
+
+  const themeStore = useTheme();
+  let dismissed = false;
+
+  $: intent =
+    status === 'success'
+      ? $themeStore.colors.intent.success
+      : status === 'warning'
+        ? $themeStore.colors.intent.warning
+        : status === 'error'
+          ? $themeStore.colors.intent.danger
+          : status === 'neutral'
+            ? $themeStore.colors.intent.neutral
+            : $themeStore.colors.intent.info;
+</script>
+
+{#if !dismissed}
+  <div
+    role="alert"
+    style={`display:flex;gap:8px;padding:12px 14px;border-radius:${$themeStore.radii.md};background:${intent.subtle};color:${intent.fg};border:1px solid ${intent.border};`}
+  >
+    <div style="flex:1">
+      {#if title}
+        <div style="font-weight:600;margin-bottom:2px">{title}</div>
+      {/if}
+      <slot />
+    </div>
+    {#if dismissible}
+      <button
+        type="button"
+        aria-label="Dismiss"
+        style="background:transparent;border:none;cursor:pointer;color:inherit;font-size:16px;line-height:1;padding:0;margin-left:4px"
+        on:click={() => (dismissed = true)}
+      >
+        ×
+      </button>
+    {/if}
+  </div>
+{/if}

package/src/components/Avatar.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { useTheme } from '../context';
+
+  export let src: string | undefined = undefined;
+  export let alt = '';
+  export let initials: string | undefined = undefined;
+  export let size = 36;
+
+  const themeStore = useTheme();
+</script>
+
+<span
+  style={`display:inline-flex;align-items:center;justify-content:center;width:${size}px;height:${size}px;border-radius:50%;background:${$themeStore.colors.intent.neutral.subtle};color:${$themeStore.colors.fg};font-weight:600;font-size:${Math.max(10, size * 0.4)}px;overflow:hidden`}
+>
+  {#if src}
+    <img {src} {alt} style="width:100%;height:100%;object-fit:cover" />
+  {:else if initials}
+    {initials}
+  {:else}
+    <slot />
+  {/if}
+</span>

package/src/components/Badge.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { ElvoraStatus } from '@elvora/core';
+  import { useTheme } from '../context';
+
+  export let status: ElvoraStatus = 'info';
+  export let dot = false;
+
+  const themeStore = useTheme();
+
+  $: intent =
+    status === 'success'
+      ? $themeStore.colors.intent.success
+      : status === 'warning'
+        ? $themeStore.colors.intent.warning
+        : status === 'error'
+          ? $themeStore.colors.intent.danger
+          : status === 'neutral'
+            ? $themeStore.colors.intent.neutral
+            : $themeStore.colors.intent.info;
+</script>
+
+{#if dot}
+  <span
+    aria-hidden="true"
+    style={`display:inline-block;width:8px;height:8px;border-radius:50%;background:${intent.solid};`}
+  ></span>
+{:else}
+  <span
+    style={`display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:${intent.solid};color:${intent.solidFg};font-size:11px;font-weight:600;`}
+  >
+    <slot />
+  </span>
+{/if}

package/src/components/Box.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  export let as: keyof HTMLElementTagNameMap = 'div';
+  export let padding: string | number | undefined = undefined;
+  export let margin: string | number | undefined = undefined;
+  export let background: string | undefined = undefined;
+  export let color: string | undefined = undefined;
+  export let borderRadius: string | number | undefined = undefined;
+
+  $: style = [
+    padding !== undefined ? `padding: ${typeof padding === 'number' ? `${padding}px` : padding};` : '',
+    margin !== undefined ? `margin: ${typeof margin === 'number' ? `${margin}px` : margin};` : '',
+    background ? `background: ${background};` : '',
+    color ? `color: ${color};` : '',
+    borderRadius !== undefined
+      ? `border-radius: ${typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius};`
+      : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+</script>
+
+<svelte:element this={as} {style}>
+  <slot />
+</svelte:element>

package/src/components/Button.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import {
+    defaultButtonProps,
+    getButtonStyle,
+    type ElvoraSize,
+    type ElvoraVariant,
+    type ElvoraTheme,
+  } from '@elvora/core';
+  import { useTheme } from '../context';
+
+  export let variant: ElvoraVariant = defaultButtonProps.variant;
+  export let size: ElvoraSize = defaultButtonProps.size;
+  export let intent: keyof ElvoraTheme['colors']['intent'] | undefined = undefined;
+  export let fullWidth = defaultButtonProps.fullWidth;
+  export let isLoading = defaultButtonProps.isLoading;
+  export let isDisabled = defaultButtonProps.isDisabled;
+  export let loadingText: string | undefined = defaultButtonProps.loadingText;
+  export let type: 'button' | 'submit' | 'reset' = defaultButtonProps.type;
+
+  const themeStore = useTheme();
+
+  let hovered = false;
+  let pressed = false;
+  let focusVisible = false;
+
+  $: inert = isDisabled || isLoading;
+  $: style = getButtonStyle({
+    theme: $themeStore,
+    variant,
+    size,
+    fullWidth,
+    isLoading,
+    isDisabled,
+    isPressed: pressed,
+    isHovered: hovered,
+    isFocusVisible: focusVisible,
+    intent,
+  });
+
+  function cssText(record: Record<string, unknown>): string {
+    return Object.entries(record)
+      .filter(([, v]) => v !== undefined && v !== null && v !== '')
+      .map(([k, v]) => {
+        const kebab = k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+        return `${kebab}: ${String(v)};`;
+      })
+      .join(' ');
+  }
+</script>
+
+<button
+  {type}
+  disabled={inert || undefined}
+  aria-disabled={inert || undefined}
+  aria-busy={isLoading || undefined}
+  data-variant={variant}
+  data-size={size}
+  data-loading={isLoading || undefined}
+  style={cssText(style.root as Record<string, unknown>)}
+  on:click
+  on:keydown
+  on:focus={() => (focusVisible = true)}
+  on:blur={() => (focusVisible = false)}
+  on:mouseenter={() => (hovered = true)}
+  on:mouseleave={() => {
+    hovered = false;
+    pressed = false;
+  }}
+  on:mousedown={() => (pressed = true)}
+  on:mouseup={() => (pressed = false)}
+>
+  {#if isLoading}
+    <span aria-hidden="true" style="display:inline-flex;align-items:center;justify-content:center;margin-right:6px">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style="animation: elvora-spin 0.75s linear infinite">
+        <circle cx="12" cy="12" r="10" stroke={style.spinnerColor} stroke-opacity="0.25" stroke-width="3" />
+        <path d="M22 12a10 10 0 0 1-10 10" stroke={style.spinnerColor} stroke-width="3" stroke-linecap="round" />
+      </svg>
+    </span>
+    {#if loadingText}<span class="sr-only">{loadingText}</span>{/if}
+  {/if}
+  <span style={cssText(style.label as Record<string, unknown>)}>
+    <slot />
+  </span>
+</button>
+
+<style>
+  @keyframes elvora-spin {
+    to { transform: rotate(360deg); }
+  }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+  }
+</style>

package/src/components/Card.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { useTheme } from '../context';
+
+  export let bordered = true;
+  export let padding: number = 16;
+
+  const themeStore = useTheme();
+</script>
+
+<div
+  style={`background:${$themeStore.colors.surfaceElevated};color:${$themeStore.colors.fg};border-radius:${$themeStore.radii.md};padding:${padding}px;${bordered ? `border:1px solid ${$themeStore.colors.border};` : ''}box-shadow:${$themeStore.shadows.sm};`}
+>
+  <slot />
+</div>

package/src/components/Checkbox.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { useTheme } from '../context';
+
+  export let checked = false;
+  export let isDisabled = false;
+  export let id: string | undefined = undefined;
+  export let name: string | undefined = undefined;
+
+  const themeStore = useTheme();
+</script>
+
+<label
+  style={`display:inline-flex;align-items:center;gap:8px;cursor:${isDisabled ? 'not-allowed' : 'pointer'};color:${$themeStore.colors.fg};font-size:14px;line-height:1.4;opacity:${isDisabled ? 0.6 : 1};`}
+>
+  <input
+    {id}
+    {name}
+    type="checkbox"
+    bind:checked
+    disabled={isDisabled || undefined}
+    data-elvora="checkbox"
+    style="width:16px;height:16px;cursor:inherit;"
+    on:change
+    on:focus
+    on:blur
+  />
+  <span><slot /></span>
+</label>

package/src/components/Divider.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { useTheme } from '../context';
+
+  export let orientation: 'horizontal' | 'vertical' = 'horizontal';
+
+  const themeStore = useTheme();
+
+  $: style =
+    orientation === 'horizontal'
+      ? `height:1px;width:100%;background:${$themeStore.colors.border};`
+      : `width:1px;height:100%;align-self:stretch;background:${$themeStore.colors.border};`;
+</script>
+
+<div role="separator" aria-orientation={orientation} {style}></div>

package/src/components/ElvoraProvider.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { ElvoraTheme } from '@elvora/core';
+  import { defaultTheme } from '@elvora/themes';
+  import { provideElvora } from '../context';
+
+  export let theme: ElvoraTheme = defaultTheme;
+
+  provideElvora(theme);
+</script>
+
+<slot />

package/src/components/Empty.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { useTheme } from '../context';
+
+  export let title = 'No data';
+  export let description: string | undefined = undefined;
+
+  const themeStore = useTheme();
+</script>
+
+<div
+  data-elvora="empty"
+  style={`display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:8px;color:${$themeStore.colors.fgMuted};`}
+>
+  <slot name="icon">
+    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 7v5" />
+      <circle cx="12" cy="16" r="0.5" fill="currentColor" />
+    </svg>
+  </slot>
+  <div style={`font-size:14px;font-weight:600;color:${$themeStore.colors.fg};`}>{title}</div>
+  {#if description}
+    <div style="font-size:13px;max-width:360px">{description}</div>
+  {/if}
+  <slot name="action" />
+</div>

package/src/components/Icon.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { getIcon, type IconName } from '@elvora/icons';
+
+  export let name: IconName;
+  export let size = 16;
+  export let color = 'currentColor';
+
+  $: icon = getIcon(name);
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill={icon.stroke ? 'none' : color}
+  stroke={icon.stroke ? color : 'none'}
+  stroke-width={icon.strokeWidth ?? 1.75}
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path d={icon.d} />
+</svg>

package/src/components/IconButton.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { useTheme } from '../context';
+  import type { ElvoraVariant } from '@elvora/core';
+
+  export let variant: ElvoraVariant = 'tertiary';
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+  export let isDisabled = false;
+  export let isLoading = false;
+  /** Required: icon-only controls must announce a name. */
+  export let label: string;
+  export let type: 'button' | 'submit' | 'reset' = 'button';
+
+  const themeStore = useTheme();
+
+  const sizing: Record<'sm' | 'md' | 'lg', number> = { sm: 32, md: 40, lg: 48 };
+
+  $: dim = sizing[size];
+  $: bg =
+    variant === 'primary'
+      ? $themeStore.colors.intent.primary.solid
+      : variant === 'destructive'
+        ? $themeStore.colors.intent.danger.solid
+        : 'transparent';
+  $: fg =
+    variant === 'primary' || variant === 'destructive'
+      ? $themeStore.colors.intent.primary.solidFg
+      : $themeStore.colors.fg;
+  $: border =
+    variant === 'outline' ? `1px solid ${$themeStore.colors.border}` : 'none';
+</script>
+
+<button
+  {type}
+  aria-label={label}
+  disabled={isDisabled || isLoading || undefined}
+  aria-busy={isLoading || undefined}
+  data-elvora="icon-button"
+  data-variant={variant}
+  data-size={size}
+  style={`width:${dim}px;height:${dim}px;display:inline-flex;align-items:center;justify-content:center;background:${bg};color:${fg};border:${border};border-radius:${$themeStore.radii.md};cursor:${isDisabled ? 'not-allowed' : 'pointer'};opacity:${isDisabled ? 0.6 : 1};transition:background 120ms ease;`}
+  on:click
+  on:keydown
+  on:focus
+  on:blur
+>
+  <slot />
+</button>

package/src/components/Input.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { useTheme } from '../context';
+
+  export let value = '';
+  export let placeholder: string | undefined = undefined;
+  export let type: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' = 'text';
+  export let id: string | undefined = undefined;
+  export let isDisabled = false;
+  export let isInvalid = false;
+  export let isReadOnly = false;
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+
+  const themeStore = useTheme();
+
+  const pad: Record<'sm' | 'md' | 'lg', { padY: number; font: number; minH: number }> = {
+    sm: { padY: 6, font: 13, minH: 32 },
+    md: { padY: 8, font: 14, minH: 40 },
+    lg: { padY: 10, font: 15, minH: 48 },
+  };
+
+  $: dims = pad[size];
+  $: borderColor = isInvalid
+    ? $themeStore.colors.intent.danger.border
+    : $themeStore.colors.border;
+</script>
+
+<input
+  {id}
+  {type}
+  {placeholder}
+  bind:value
+  disabled={isDisabled || undefined}
+  readonly={isReadOnly || undefined}
+  aria-invalid={isInvalid || undefined}
+  data-elvora="input"
+  style={`box-sizing:border-box;width:100%;padding:${dims.padY}px 12px;min-height:${dims.minH}px;font-size:${dims.font}px;line-height:1.4;color:${$themeStore.colors.fg};background:${$themeStore.colors.surface};border:1px solid ${borderColor};border-radius:${$themeStore.radii.md};outline:none;transition:border-color 120ms ease;`}
+  on:input
+  on:change
+  on:focus
+  on:blur
+  on:keydown
+/>

package/src/components/Label.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { useTheme } from '../context';
+
+  export let htmlFor: string | undefined = undefined;
+  export let isRequired = false;
+
+  const themeStore = useTheme();
+</script>
+
+<label
+  for={htmlFor}
+  style={`display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:500;color:${$themeStore.colors.fg};`}
+>
+  <slot />
+  {#if isRequired}
+    <span aria-hidden="true" style={`color:${$themeStore.colors.intent.danger.fg}`}>*</span>
+  {/if}
+</label>

package/src/components/Modal.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import { useTheme } from '../context';
+
+  export let isOpen = false;
+  export let title: string | undefined = undefined;
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+  export let closeOnEscape = true;
+  export let closeOnOverlay = true;
+  export let closeLabel = 'Close';
+
+  const themeStore = useTheme();
+  const dispatch = createEventDispatcher<{ close: void }>();
+
+  const widths: Record<'sm' | 'md' | 'lg', number> = { sm: 360, md: 520, lg: 720 };
+  $: width = widths[size];
+
+  function close() {
+    dispatch('close');
+  }
+
+  function onKey(e: KeyboardEvent) {
+    if (closeOnEscape && e.key === 'Escape' && isOpen) close();
+  }
+
+  onMount(() => {
+    if (typeof window !== 'undefined') window.addEventListener('keydown', onKey);
+  });
+  onDestroy(() => {
+    if (typeof window !== 'undefined') window.removeEventListener('keydown', onKey);
+  });
+</script>
+
+{#if isOpen}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    role="presentation"
+    on:click={() => closeOnOverlay && close()}
+    style="position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px;"
+  >
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={title}
+      data-elvora="modal"
+      on:click|stopPropagation
+      style={`background:${$themeStore.colors.background};color:${$themeStore.colors.fg};border-radius:${$themeStore.radii.lg};box-shadow:0 20px 50px rgba(0,0,0,0.25);width:100%;max-width:${width}px;max-height:calc(100vh - 48px);overflow:auto;`}
+    >
+      {#if title || $$slots.header}
+        <div style={`display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid ${$themeStore.colors.border};`}>
+          <div style="font-weight:600;font-size:15px;">
+            <slot name="header">{title}</slot>
+          </div>
+          <button
+            type="button"
+            aria-label={closeLabel}
+            on:click={close}
+            style={`border:none;background:transparent;color:${$themeStore.colors.fgMuted};cursor:pointer;font-size:18px;line-height:1;padding:4px 8px;border-radius:${$themeStore.radii.md};`}
+          >
+            ×
+          </button>
+        </div>
+      {/if}
+      <div style="padding:20px"><slot /></div>
+      {#if $$slots.footer}
+        <div style={`padding:12px 20px;border-top:1px solid ${$themeStore.colors.border};display:flex;justify-content:flex-end;gap:8px;`}>
+          <slot name="footer" />
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

package/src/components/Progress.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { useTheme } from '../context';
+
+  export let value: number | null = null;
+  export let max = 100;
+  export let label: string | undefined = undefined;
+
+  const themeStore = useTheme();
+
+  $: percent = value === null ? null : Math.max(0, Math.min(100, (value / max) * 100));
+</script>
+
+<div
+  role="progressbar"
+  aria-valuemin="0"
+  aria-valuemax={max}
+  aria-valuenow={value ?? undefined}
+  aria-label={label}
+  data-elvora="progress"
+  style={`width:100%;height:6px;background:${$themeStore.colors.surface};border-radius:999px;overflow:hidden;`}
+>
+  {#if percent !== null}
+    <div
+      aria-hidden="true"
+      style={`height:100%;background:${$themeStore.colors.intent.primary.solid};border-radius:inherit;transition:width 200ms ease;width:${percent}%;`}
+    ></div>
+  {:else}
+    <div
+      aria-hidden="true"
+      style={`height:100%;width:40%;background:${$themeStore.colors.intent.primary.solid};border-radius:inherit;animation:elvora-indeterminate 1.4s infinite ease-in-out;`}
+    ></div>
+  {/if}
+</div>
+
+<style>
+  @keyframes elvora-indeterminate {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(250%); }
+  }
+</style>

package/src/components/Skeleton.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { useTheme } from '../context';
+
+  export let width: number | string = '100%';
+  export let height: number | string = 16;
+  export let radius: number | string = 4;
+  export let shimmer = true;
+
+  const themeStore = useTheme();
+
+  function dim(v: number | string): string {
+    return typeof v === 'number' ? `${v}px` : v;
+  }
+</script>
+
+<div
+  aria-hidden="true"
+  data-elvora="skeleton"
+  style={`display:block;width:${dim(width)};height:${dim(height)};border-radius:${dim(radius)};background:${$themeStore.colors.surface};${shimmer ? 'background-image:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);background-size:200px 100%;background-repeat:no-repeat;animation:elvora-shimmer 1.4s infinite linear;' : ''}`}
+></div>
+
+<style>
+  @keyframes elvora-shimmer {
+    0% { background-position: -200px 0; }
+    100% { background-position: calc(100% + 200px) 0; }
+  }
+</style>

package/src/components/Spinner.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let size = 16;
+  export let color: string = 'currentColor';
+  export let label = 'Loading';
+</script>
+
+<span role="status" aria-label={label} style={`display:inline-flex;width:${size}px;height:${size}px`}>
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style="animation: elvora-spin 0.75s linear infinite">
+    <circle cx="12" cy="12" r="10" stroke={color} stroke-opacity="0.25" stroke-width="3" />
+    <path d="M22 12a10 10 0 0 1-10 10" stroke={color} stroke-width="3" stroke-linecap="round" />
+  </svg>
+</span>
+
+<style>
+  @keyframes elvora-spin {
+    to { transform: rotate(360deg); }
+  }
+</style>

package/src/components/Stack.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  export let direction: 'row' | 'column' = 'column';
+  export let gap: number | string = 8;
+  export let align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'stretch';
+  export let justify: 'start' | 'center' | 'end' | 'between' | 'around' = 'start';
+  export let wrap = false;
+
+  const alignMap: Record<string, string> = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    stretch: 'stretch',
+    baseline: 'baseline',
+  };
+  const justifyMap: Record<string, string> = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    between: 'space-between',
+    around: 'space-around',
+  };
+
+  $: style = `display:flex;flex-direction:${direction};gap:${typeof gap === 'number' ? `${gap}px` : gap};align-items:${alignMap[align]};justify-content:${justifyMap[justify]};flex-wrap:${wrap ? 'wrap' : 'nowrap'};`;
+</script>
+
+<div {style}>
+  <slot />
+</div>

package/src/components/Switch.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { useTheme } from '../context';
+
+  export let checked = false;
+  export let isDisabled = false;
+  export let id: string | undefined = undefined;
+  export let name: string | undefined = undefined;
+  export let label: string | undefined = undefined;
+
+  const themeStore = useTheme();
+
+  function toggle() {
+    if (isDisabled) return;
+    checked = !checked;
+  }
+
+  function onKey(e: KeyboardEvent) {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      toggle();
+    }
+  }
+
+  $: trackBg = checked
+    ? $themeStore.colors.intent.primary.solid
+    : $themeStore.colors.borderStrong;
+</script>
+
+<button
+  {id}
+  type="button"
+  role="switch"
+  aria-checked={checked}
+  aria-label={label}
+  disabled={isDisabled || undefined}
+  data-elvora="switch"
+  style={`appearance:none;border:0;background:${trackBg};width:36px;height:20px;border-radius:999px;padding:2px;cursor:${isDisabled ? 'not-allowed' : 'pointer'};display:inline-flex;align-items:center;justify-content:${checked ? 'flex-end' : 'flex-start'};transition:background 150ms ease;opacity:${isDisabled ? 0.6 : 1};`}
+  on:click={toggle}
+  on:keydown={onKey}
+  on:focus
+  on:blur
+>
+  <input type="hidden" {name} value={checked ? 'on' : ''} />
+  <span
+    aria-hidden="true"
+    style={`display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.15);transition:transform 150ms ease;`}
+  ></span>
+</button>

package/src/components/Tag.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { ElvoraStatus } from '@elvora/core';
+  import { createEventDispatcher } from 'svelte';
+  import { useTheme } from '../context';
+
+  export let status: ElvoraStatus = 'neutral';
+  export let closable = false;
+  export let closeLabel = 'Remove';
+
+  const themeStore = useTheme();
+  const dispatch = createEventDispatcher<{ close: void }>();
+
+  $: intent =
+    status === 'success'
+      ? $themeStore.colors.intent.success
+      : status === 'warning'
+        ? $themeStore.colors.intent.warning
+        : status === 'error'
+          ? $themeStore.colors.intent.danger
+          : status === 'info'
+            ? $themeStore.colors.intent.info
+            : $themeStore.colors.intent.neutral;
+</script>
+
+<span
+  style={`display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:${$themeStore.radii.full};background:${intent.subtle};color:${intent.fg};font-size:12px;line-height:1.4;`}
+>
+  <slot />
+  {#if closable}
+    <button
+      type="button"
+      aria-label={closeLabel}
+      style="border:none;background:transparent;cursor:pointer;color:inherit;font-size:14px;line-height:1;padding:0"
+      on:click={() => dispatch('close')}
+    >
+      ×
+    </button>
+  {/if}
+</span>

package/src/components/Textarea.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { useTheme } from '../context';
+
+  export let value = '';
+  export let placeholder: string | undefined = undefined;
+  export let id: string | undefined = undefined;
+  export let rows = 4;
+  export let isDisabled = false;
+  export let isInvalid = false;
+  export let isReadOnly = false;
+
+  const themeStore = useTheme();
+
+  $: borderColor = isInvalid
+    ? $themeStore.colors.intent.danger.border
+    : $themeStore.colors.border;
+</script>
+
+<textarea
+  {id}
+  {placeholder}
+  {rows}
+  bind:value
+  disabled={isDisabled || undefined}
+  readonly={isReadOnly || undefined}
+  aria-invalid={isInvalid || undefined}
+  data-elvora="textarea"
+  style={`box-sizing:border-box;width:100%;padding:10px 12px;font-size:14px;line-height:1.5;color:${$themeStore.colors.fg};background:${$themeStore.colors.surface};border:1px solid ${borderColor};border-radius:${$themeStore.radii.md};outline:none;resize:vertical;transition:border-color 120ms ease;`}
+  on:input
+  on:change
+  on:focus
+  on:blur
+  on:keydown
+/>

package/src/context.ts

@@ -0,0 +1,25 @@
+import { getContext, setContext } from 'svelte';
+import { writable, type Writable } from 'svelte/store';
+import { defaultTheme } from '@elvora/themes';
+import type { ElvoraTheme } from '@elvora/core';
+
+const THEME_KEY = Symbol('elvora-theme');
+
+export interface ElvoraContextValue {
+  theme: Writable<ElvoraTheme>;
+}
+
+export function provideElvora(theme: ElvoraTheme = defaultTheme): ElvoraContextValue {
+  const store = writable(theme);
+  const ctx: ElvoraContextValue = { theme: store };
+  setContext(THEME_KEY, ctx);
+  return ctx;
+}
+
+export function useElvoraContext(): ElvoraContextValue {
+  return getContext<ElvoraContextValue>(THEME_KEY) ?? { theme: writable(defaultTheme) };
+}
+
+export function useTheme(): Writable<ElvoraTheme> {
+  return useElvoraContext().theme;
+}

package/src/index.ts

@@ -0,0 +1,38 @@
+export { default as ElvoraProvider } from './components/ElvoraProvider.svelte';
+export { default as ElvoraButton } from './components/Button.svelte';
+export { default as ElvoraIconButton } from './components/IconButton.svelte';
+export { default as ElvoraBox } from './components/Box.svelte';
+export { default as ElvoraStack } from './components/Stack.svelte';
+export { default as ElvoraCard } from './components/Card.svelte';
+export { default as ElvoraAlert } from './components/Alert.svelte';
+export { default as ElvoraSpinner } from './components/Spinner.svelte';
+export { default as ElvoraDivider } from './components/Divider.svelte';
+export { default as ElvoraTag } from './components/Tag.svelte';
+export { default as ElvoraBadge } from './components/Badge.svelte';
+export { default as ElvoraAvatar } from './components/Avatar.svelte';
+export { default as ElvoraIcon } from './components/Icon.svelte';
+export { default as ElvoraLabel } from './components/Label.svelte';
+export { default as ElvoraInput } from './components/Input.svelte';
+export { default as ElvoraTextarea } from './components/Textarea.svelte';
+export { default as ElvoraCheckbox } from './components/Checkbox.svelte';
+export { default as ElvoraSwitch } from './components/Switch.svelte';
+export { default as ElvoraProgress } from './components/Progress.svelte';
+export { default as ElvoraSkeleton } from './components/Skeleton.svelte';
+export { default as ElvoraEmpty } from './components/Empty.svelte';
+export { default as ElvoraModal } from './components/Modal.svelte';
+
+export { provideElvora, useElvoraContext, useTheme } from './context';
+export type { ElvoraContextValue } from './context';
+
+export type {
+  ElvoraTheme,
+  ThemeColors,
+  IntentScale,
+  ElvoraSize,
+  ElvoraVariant,
+  ElvoraStatus,
+  ElvoraTone,
+  Direction,
+  Placement,
+  Orientation,
+} from '@elvora/core';