@mkatogui/uds-svelte 0.2.1

package/README.md

@@ -0,0 +1,100 @@
+# @mkatogui/uds-svelte
+
+Svelte 5 components for the Universal Design System. 32 accessible, themeable components built with Svelte 5 runes, BEM naming, and full WCAG 2.1 AA compliance.
+
+## Installation
+
+```bash
+npm install @mkatogui/uds-svelte
+```
+
+Requires Svelte 5 or later as a peer dependency.
+
+## Usage
+
+```svelte
+<script>
+  import { Button, Alert, Modal } from '@mkatogui/uds-svelte';
+</script>
+
+<Button variant="primary" size="md" onclick={() => console.log('clicked')}>
+  Get Started
+</Button>
+
+<Alert variant="success" title="Done" message="Operation completed successfully." dismissible />
+```
+
+## Theming
+
+Components use UDS CSS custom properties (`--color-*`, `--space-*`, `--font-size-*`). Apply a palette with the `data-theme` attribute on a parent element:
+
+```html
+<div data-theme="minimal-saas">
+  <!-- All UDS components inside inherit the palette -->
+</div>
+```
+
+Available palettes: `minimal-saas`, `ai-futuristic`, `gradient-startup`, `corporate`, `apple-minimal`, `illustration`, `dashboard`, `bold-lifestyle`, `minimal-corporate`.
+
+## Components
+
+| Component | CSS Class | Variants |
+|---|---|---|
+| Button | `uds-btn` | primary, secondary, ghost, gradient, destructive, icon-only |
+| NavigationBar | `uds-navbar` | standard, minimal, dark, transparent |
+| HeroSection | `uds-hero` | centered, product-screenshot, video-bg, gradient-mesh, search-forward, split |
+| FeatureCard | `uds-card` | icon-top, image-top, horizontal, stat-card, dashboard-preview |
+| PricingTable | `uds-pricing` | 2-column, 3-column, 4-column, toggle |
+| SocialProofBar | `uds-social-proof` | logo-strip, stats-counter, testimonial-mini, combined |
+| TestimonialCard | `uds-testimonial` | quote-card, video, metric, carousel |
+| Footer | `uds-footer` | simple, multi-column, newsletter, mega-footer |
+| CodeBlock | `uds-code-block` | syntax-highlighted, terminal, multi-tab |
+| Modal | `uds-modal` | confirmation, task, alert |
+| FormInput | `uds-input` | text, email, password, number, search, textarea |
+| Select | `uds-select` | native, custom |
+| Checkbox | `uds-checkbox` | standard, indeterminate |
+| Radio | `uds-radio` | standard, card |
+| ToggleSwitch | `uds-toggle` | standard, with-label |
+| Alert | `uds-alert` | success, warning, error, info |
+| Badge | `uds-badge` | status, count, tag |
+| Tabs | `uds-tabs` | line, pill, segmented |
+| Accordion | `uds-accordion` | single, multi, flush |
+| Breadcrumb | `uds-breadcrumb` | standard, truncated |
+| Tooltip | `uds-tooltip` | simple, rich |
+| DropdownMenu | `uds-dropdown` | action, context, nav-sub |
+| Avatar | `uds-avatar` | image, initials, icon, group |
+| Skeleton | `uds-skeleton` | text, card, avatar, table |
+| Toast | `uds-toast` | success, error, warning, info, neutral |
+| Pagination | `uds-pagination` | numbered, simple, load-more, infinite-scroll |
+| DataTable | `uds-data-table` | basic, sortable, selectable, expandable |
+| DatePicker | `uds-date-picker` | single, range, with-time |
+| CommandPalette | `uds-command-palette` | standard |
+| ProgressIndicator | `uds-progress` | bar, circular, stepper |
+| SideNavigation | `uds-side-nav` | default, collapsed, with-sections |
+| FileUpload | `uds-file-upload` | dropzone, button, avatar-upload |
+
+## Accessibility
+
+All components follow WCAG 2.1 AA guidelines:
+
+- Proper ARIA roles and attributes (dialog, alert, switch, tablist, etc.)
+- Keyboard navigation support (arrow keys, Enter, Space, Escape)
+- Focus management and visible focus indicators
+- Label associations (`for`/`id` pairing on form controls)
+- Semantic HTML elements (nav, blockquote, fieldset, etc.)
+- Live regions for dynamic content (role=alert, role=status, aria-live)
+
+## Svelte 5 Patterns
+
+Components use Svelte 5 features:
+
+- `$props()` rune for prop declarations
+- `$derived()` rune for computed values
+- `$state()` rune for internal state
+- `$effect()` rune for side effects
+- `$bindable()` for two-way binding on form values
+- `{@render children?.()}` for snippet-based slot content
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@mkatogui/uds-svelte",
+  "version": "0.2.1",
+  "description": "Svelte 5 components for Universal Design System — 31 accessible, themeable components",
+  "svelte": "./src/index.js",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    ".": {
+      "svelte": "./src/index.js",
+      "types": "./src/index.d.ts"
+    }
+  },
+  "files": ["src/"],
+  "peerDependencies": {
+    "svelte": ">=5.0.0"
+  },
+  "keywords": ["svelte", "design-system", "components", "accessibility", "wcag"],
+  "author": "Marcelo Katogui",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mkatogui/universal-design-system.git",
+    "directory": "packages/svelte"
+  }
+}

package/src/components/Accordion.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  interface AccordionItem {
+    id: string;
+    title: string;
+    content: string;
+  }
+
+  interface Props {
+    variant?: 'single' | 'multi' | 'flush';
+    items?: AccordionItem[];
+    defaultExpanded?: string[];
+    allowMultiple?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'single',
+    items = [],
+    defaultExpanded = [],
+    allowMultiple = false,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  let expandedItems = $state<Set<string>>(new Set(defaultExpanded));
+
+  let classes = $derived(
+    [
+      'uds-accordion',
+      `uds-accordion--${variant}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  function toggle(id: string) {
+    if (expandedItems.has(id)) {
+      expandedItems.delete(id);
+      expandedItems = new Set(expandedItems);
+    } else {
+      if (allowMultiple || variant === 'multi') {
+        expandedItems.add(id);
+        expandedItems = new Set(expandedItems);
+      } else {
+        expandedItems = new Set([id]);
+      }
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent, index: number) {
+    let nextIndex: number | undefined;
+    if (event.key === 'ArrowDown') {
+      nextIndex = (index + 1) % items.length;
+    } else if (event.key === 'ArrowUp') {
+      nextIndex = (index - 1 + items.length) % items.length;
+    }
+    if (nextIndex !== undefined) {
+      event.preventDefault();
+      const buttons = (event.currentTarget as HTMLElement)
+        .closest('.uds-accordion')?.querySelectorAll('.uds-accordion__trigger') as NodeListOf<HTMLElement>;
+      buttons?.[nextIndex]?.focus();
+    }
+  }
+</script>
+
+<div class={classes} {...rest}>
+  {#each items as item, i}
+    {@const isExpanded = expandedItems.has(item.id)}
+    <div class="uds-accordion__item" class:uds-accordion__item--expanded={isExpanded}>
+      <h3 class="uds-accordion__header">
+        <button
+          class="uds-accordion__trigger"
+          aria-expanded={isExpanded}
+          aria-controls="accordion-panel-{item.id}"
+          id="accordion-header-{item.id}"
+          onclick={() => toggle(item.id)}
+          onkeydown={(e) => handleKeydown(e, i)}
+        >
+          {item.title}
+          <span class="uds-accordion__icon" aria-hidden="true"></span>
+        </button>
+      </h3>
+      <div
+        class="uds-accordion__panel"
+        id="accordion-panel-{item.id}"
+        role="region"
+        aria-labelledby="accordion-header-{item.id}"
+        hidden={!isExpanded}
+      >
+        <div class="uds-accordion__content">{item.content}</div>
+      </div>
+    </div>
+  {/each}
+  {@render children?.()}
+</div>

package/src/components/Alert.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'success' | 'warning' | 'error' | 'info';
+    size?: 'sm' | 'md' | 'lg';
+    title?: string;
+    message?: string;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'info',
+    size = 'md',
+    title = '',
+    message = '',
+    dismissible = false,
+    onDismiss,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  let dismissed = $state(false);
+
+  let alertRole = $derived(
+    variant === 'error' || variant === 'warning' ? 'alert' : 'status'
+  );
+
+  let classes = $derived(
+    [
+      'uds-alert',
+      `uds-alert--${variant}`,
+      `uds-alert--${size}`,
+      dismissed && 'uds-alert--dismissing',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  function handleDismiss() {
+    dismissed = true;
+    onDismiss?.();
+  }
+</script>
+
+{#if !dismissed}
+  <div class={classes} role={alertRole} {...rest}>
+    <div class="uds-alert__content">
+      {#if title}
+        <p class="uds-alert__title">{title}</p>
+      {/if}
+      {#if message}
+        <p class="uds-alert__message">{message}</p>
+      {/if}
+      {@render children?.()}
+    </div>
+    {#if dismissible}
+      <button class="uds-alert__dismiss" onclick={handleDismiss} aria-label="Dismiss alert">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    {/if}
+  </div>
+{/if}

package/src/components/Avatar.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'image' | 'initials' | 'icon' | 'group';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    src?: string;
+    alt?: string;
+    initials?: string;
+    status?: 'online' | 'offline' | 'busy';
+    fallback?: string;
+    class?: string;
+    icon?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'image',
+    size = 'md',
+    src,
+    alt = '',
+    initials = '',
+    status,
+    fallback,
+    class: className = '',
+    icon,
+    children,
+    ...rest
+  }: Props = $props();
+
+  let imgError = $state(false);
+
+  let classes = $derived(
+    [
+      'uds-avatar',
+      `uds-avatar--${variant}`,
+      `uds-avatar--${size}`,
+      status && `uds-avatar--${status}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+{#if variant === 'group'}
+  <div class={classes} role="group" aria-label="User avatars" {...rest}>
+    {@render children?.()}
+  </div>
+{:else}
+  <div class={classes} {...rest}>
+    {#if variant === 'image' && src && !imgError}
+      <img class="uds-avatar__image" src={src} alt={alt} onerror={() => (imgError = true)} />
+    {:else if variant === 'icon' && icon}
+      <span class="uds-avatar__icon" aria-hidden="true">{@render icon()}</span>
+    {:else}
+      <span class="uds-avatar__initials" aria-label={alt || initials}>{initials || fallback || '?'}</span>
+    {/if}
+    {#if status}
+      <span class="uds-avatar__status" aria-label={status}></span>
+    {/if}
+  </div>
+{/if}

package/src/components/Badge.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'status' | 'count' | 'tag';
+    size?: 'sm' | 'md';
+    label?: string;
+    color?: string;
+    removable?: boolean;
+    onRemove?: () => void;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'status',
+    size = 'md',
+    label = '',
+    color,
+    removable = false,
+    onRemove,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-badge',
+      `uds-badge--${variant}`,
+      `uds-badge--${size}`,
+      color && `uds-badge--${color}`,
+      removable && 'uds-badge--removable',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<span class={classes} aria-label={label || undefined} {...rest}>
+  {#if label}
+    {label}
+  {/if}
+  {@render children?.()}
+  {#if removable}
+    <button class="uds-badge__remove" onclick={onRemove} aria-label="Remove {label}">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  {/if}
+</span>

package/src/components/Breadcrumb.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  interface BreadcrumbItem {
+    label: string;
+    href?: string;
+  }
+
+  interface Props {
+    variant?: 'standard' | 'truncated';
+    items?: BreadcrumbItem[];
+    separator?: string;
+    maxItems?: number;
+    class?: string;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'standard',
+    items = [],
+    separator = '/',
+    maxItems,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-breadcrumb',
+      `uds-breadcrumb--${variant}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  let displayItems = $derived(() => {
+    if (variant === 'truncated' && maxItems && items.length > maxItems) {
+      const first = items.slice(0, 1);
+      const last = items.slice(-(maxItems - 1));
+      return [...first, { label: '...', href: undefined }, ...last];
+    }
+    return items;
+  });
+</script>
+
+<nav class={classes} aria-label="Breadcrumb" {...rest}>
+  <ol class="uds-breadcrumb__list">
+    {#each displayItems() as item, i}
+      <li class="uds-breadcrumb__item">
+        {#if i > 0}
+          <span class="uds-breadcrumb__separator" aria-hidden="true">{separator}</span>
+        {/if}
+        {#if item.href && i < displayItems().length - 1}
+          <a class="uds-breadcrumb__link" href={item.href}>{item.label}</a>
+        {:else}
+          <span class="uds-breadcrumb__current" aria-current={i === displayItems().length - 1 ? 'page' : undefined}>{item.label}</span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>

package/src/components/Button.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'primary' | 'secondary' | 'ghost' | 'gradient' | 'destructive' | 'icon-only';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    loading?: boolean;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    class?: string;
+    iconLeft?: import('svelte').Snippet;
+    iconRight?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'primary',
+    size = 'md',
+    loading = false,
+    fullWidth = false,
+    disabled = false,
+    class: className = '',
+    iconLeft,
+    iconRight,
+    children,
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-btn',
+      `uds-btn--${variant}`,
+      `uds-btn--${size}`,
+      fullWidth && 'uds-btn--full-width',
+      loading && 'uds-btn--loading',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<button class={classes} disabled={disabled || loading} aria-busy={loading || undefined} aria-disabled={disabled || undefined} {...rest}>
+  {#if loading}
+    <span class="uds-btn__spinner" aria-hidden="true"></span>
+  {/if}
+  {#if iconLeft}
+    <span class="uds-btn__icon-left">{@render iconLeft()}</span>
+  {/if}
+  {@render children?.()}
+  {#if iconRight}
+    <span class="uds-btn__icon-right">{@render iconRight()}</span>
+  {/if}
+</button>

package/src/components/Checkbox.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  interface Props {
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    label?: string;
+    name?: string;
+    value?: string;
+    id?: string;
+    class?: string;
+    [key: string]: any;
+  }
+
+  let {
+    checked = $bindable(false),
+    indeterminate = false,
+    disabled = false,
+    label = '',
+    name,
+    value,
+    id,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let checkboxId = $derived(id || `uds-checkbox-${Math.random().toString(36).slice(2, 9)}`);
+
+  let classes = $derived(
+    [
+      'uds-checkbox',
+      indeterminate && 'uds-checkbox--indeterminate',
+      disabled && 'uds-checkbox--disabled',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  function bindIndeterminate(node: HTMLInputElement) {
+    $effect(() => {
+      node.indeterminate = indeterminate;
+    });
+  }
+</script>
+
+<div class={classes}>
+  <input
+    class="uds-checkbox__input"
+    type="checkbox"
+    id={checkboxId}
+    bind:checked
+    {disabled}
+    {name}
+    {value}
+    aria-checked={indeterminate ? 'mixed' : checked}
+    use:bindIndeterminate
+    {...rest}
+  />
+  {#if label}
+    <label class="uds-checkbox__label" for={checkboxId}>{label}</label>
+  {/if}
+</div>

package/src/components/CodeBlock.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  interface Tab {
+    label: string;
+    language: string;
+    code: string;
+  }
+
+  interface Props {
+    variant?: 'syntax-highlighted' | 'terminal' | 'multi-tab';
+    size?: 'sm' | 'md' | 'lg';
+    language?: string;
+    code?: string;
+    showLineNumbers?: boolean;
+    showCopy?: boolean;
+    tabs?: Tab[];
+    class?: string;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'syntax-highlighted',
+    size = 'md',
+    language = '',
+    code = '',
+    showLineNumbers = false,
+    showCopy = true,
+    tabs = [],
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let copied = $state(false);
+  let activeTab = $state(0);
+
+  let classes = $derived(
+    [
+      'uds-code-block',
+      `uds-code-block--${variant}`,
+      `uds-code-block--${size}`,
+      showLineNumbers && 'uds-code-block--line-numbers',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  let displayCode = $derived(
+    variant === 'multi-tab' && tabs.length > 0 ? tabs[activeTab].code : code
+  );
+
+  let displayLanguage = $derived(
+    variant === 'multi-tab' && tabs.length > 0 ? tabs[activeTab].language : language
+  );
+
+  async function copyToClipboard() {
+    try {
+      await navigator.clipboard.writeText(displayCode);
+      copied = true;
+      setTimeout(() => (copied = false), 2000);
+    } catch {
+      // Clipboard API not available
+    }
+  }
+</script>
+
+<div class={classes} {...rest}>
+  {#if variant === 'multi-tab' && tabs.length > 0}
+    <div class="uds-code-block__tabs" role="tablist">
+      {#each tabs as tab, i}
+        <button
+          class="uds-code-block__tab"
+          class:uds-code-block__tab--active={i === activeTab}
+          role="tab"
+          aria-selected={i === activeTab}
+          onclick={() => (activeTab = i)}
+        >
+          {tab.label}
+        </button>
+      {/each}
+    </div>
+  {/if}
+  <div class="uds-code-block__container">
+    {#if showCopy}
+      <button class="uds-code-block__copy" onclick={copyToClipboard} aria-label="Copy code">
+        {copied ? 'Copied' : 'Copy'}
+      </button>
+    {/if}
+    <pre class="uds-code-block__pre"><code class="uds-code-block__code language-{displayLanguage}">{displayCode}</code></pre>
+  </div>
+</div>