@mkatogui/uds-svelte 0.2.1 → 0.5.0

package/README.md

@@ -1,6 +1,6 @@
 # @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.
+Svelte 5 components for the Universal Design System. 43 accessible, themeable components built with Svelte 5 runes, BEM naming, and full WCAG 2.2 AA compliance.
 
 ## Installation
 
@@ -75,7 +75,7 @@ Available palettes: `minimal-saas`, `ai-futuristic`, `gradient-startup`, `corpor
 
 ## Accessibility
 
-All components follow WCAG 2.1 AA guidelines:
+All components follow WCAG 2.2 AA guidelines:
 
 - Proper ARIA roles and attributes (dialog, alert, switch, tablist, etc.)
 - Keyboard navigation support (arrow keys, Enter, Space, Escape)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mkatogui/uds-svelte",
-  "version": "0.2.1",
-  "description": "Svelte 5 components for Universal Design System — 31 accessible, themeable components",
+  "version": "0.5.0",
+  "description": "Svelte 5 components for Universal Design System — 43 accessible, themeable components",
   "svelte": "./src/index.js",
   "main": "./src/index.js",
   "module": "./src/index.js",

package/src/components/Box.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  interface Props {
+    padding?: string | number;
+    margin?: string | number;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: unknown;
+  }
+
+  let { padding, margin, class: className = '', children, ...rest }: Props = $props();
+
+  let classes = $derived(['uds-box', className].filter(Boolean).join(' '));
+
+  let styleObj = $derived.by(() => {
+    const s: Record<string, string> = {};
+    if (padding != null)
+      s.padding = typeof padding === 'number' ? `${padding}px` : `var(--space-${padding}, ${padding})`;
+    if (margin != null)
+      s.margin = typeof margin === 'number' ? `${margin}px` : `var(--space-${margin}, ${margin})`;
+    return s;
+  });
+</script>
+
+<div class={classes} style={Object.keys(styleObj).length ? styleObj : undefined} {...rest}>
+  {@render children?.()}
+</div>

package/src/components/Carousel.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  interface Props {
+    items: unknown[];
+    autoPlay?: boolean;
+    interval?: number;
+    showDots?: boolean;
+    showArrows?: boolean;
+    ariaLabel?: string;
+    onSlideChange?: (index: number) => void;
+    children?: import('svelte').Snippet<[{ item: unknown; index: number }]>;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    items,
+    autoPlay = false,
+    interval = 5000,
+    showDots = true,
+    showArrows = true,
+    ariaLabel = 'Content carousel',
+    onSlideChange,
+    children,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let current = $state(0);
+  let isPaused = $state(false);
+
+  function goTo(index: number) {
+    const next = Math.max(0, Math.min(index, items.length - 1));
+    current = next;
+    onSlideChange?.(next);
+  }
+
+  function next() {
+    goTo(current + 1);
+  }
+  function prev() {
+    goTo(current - 1);
+  }
+
+  let intervalId: ReturnType<typeof setInterval> | null = null;
+  $effect(() => {
+    if (intervalId) clearInterval(intervalId);
+    if (autoPlay && !isPaused && items.length > 1) {
+      intervalId = setInterval(() => {
+        current = (current + 1) % items.length;
+        onSlideChange?.(current);
+      }, interval);
+    }
+    return () => {
+      if (intervalId) clearInterval(intervalId);
+    };
+  });
+
+  let classes = $derived(['uds-carousel', className].filter(Boolean).join(' '));
+</script>
+
+{#if items.length}
+  <section
+    class={classes}
+    role="region"
+    aria-roledescription="carousel"
+    aria-label={ariaLabel}
+    onfocus={() => (isPaused = true)}
+    onblur={() => (isPaused = false)}
+    onmouseenter={() => (isPaused = true)}
+    onmouseleave={() => (isPaused = false)}
+    {...rest}
+  >
+    <div class="uds-carousel__track" style="transform: translateX(-{current * 100}%)">
+      {#each items as item, i}
+        <div
+          class="uds-carousel__slide"
+          role="group"
+          aria-roledescription="slide"
+          aria-label="Slide {i + 1} of {items.length}"
+        >
+          {@render children?.({ item, index: i })}
+        </div>
+      {/each}
+    </div>
+    {#if showArrows && items.length > 1}
+      <button
+        type="button"
+        class="uds-carousel__arrow uds-carousel__arrow--prev"
+        aria-label="Previous slide"
+        disabled={current === 0}
+        onclick={() => prev()}
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M15 18l-6-6 6-6" /></svg>
+      </button>
+      <button
+        type="button"
+        class="uds-carousel__arrow uds-carousel__arrow--next"
+        aria-label="Next slide"
+        disabled={current === items.length - 1}
+        onclick={() => next()}
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 18l6-6-6-6" /></svg>
+      </button>
+    {/if}
+    {#if showDots && items.length > 1}
+      <div class="uds-carousel__dots" role="tablist" aria-label="Slide indicators">
+        {#each items as _, i}
+          <button
+            type="button"
+            role="tab"
+            aria-selected={i === current}
+            aria-label="Slide {i + 1}"
+            class="uds-carousel__dot {i === current ? 'uds-carousel__dot--active' : ''}"
+            onclick={() => goTo(i)}
+          />
+        {/each}
+      </div>
+    {/if}
+  </section>
+{/if}

package/src/components/ChipInput.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  interface Props {
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (chips: string[]) => void;
+    onAdd?: (chip: string) => void;
+    onRemove?: (index: number) => void;
+    maxChips?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    value: controlledValue,
+    defaultValue = [],
+    onChange,
+    onAdd,
+    onRemove,
+    maxChips,
+    placeholder = 'Add...',
+    disabled = false,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let internalValue = $state<string[]>([...defaultValue]);
+  let inputValue = $state('');
+
+  let chips = $derived(controlledValue ?? internalValue);
+
+  let classes = $derived(
+    ['uds-chip-input', disabled && 'uds-chip-input--disabled', className].filter(Boolean).join(' ')
+  );
+
+  function updateChips(next: string[]) {
+    if (controlledValue === undefined) internalValue = next;
+    onChange?.(next);
+  }
+
+  function handleAdd() {
+    const trimmed = inputValue.trim();
+    if (!trimmed || (maxChips != null && chips.length >= maxChips)) return;
+    if (chips.includes(trimmed)) return;
+    updateChips([...chips, trimmed]);
+    onAdd?.(trimmed);
+    inputValue = '';
+  }
+
+  function handleRemove(index: number) {
+    updateChips(chips.filter((_, i) => i !== index));
+    onRemove?.(index);
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleAdd();
+    }
+    if (e.key === 'Backspace' && inputValue === '' && chips.length > 0) {
+      handleRemove(chips.length - 1);
+    }
+  }
+</script>
+
+<div class={classes} role="listbox" aria-label="Chips" aria-disabled={disabled} {...rest}>
+  {#each chips as chip, index}
+    <span class="uds-chip-input__chip" role="option">
+      <span class="uds-chip-input__chip-label">{chip}</span>
+      <button
+        type="button"
+        class="uds-chip-input__chip-remove"
+        aria-label="Remove {chip}"
+        disabled={disabled}
+        onclick={() => handleRemove(index)}
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6L6 18M6 6l12 12" /></svg>
+      </button>
+    </span>
+  {/each}
+  {#if maxChips == null || chips.length < maxChips}
+    <input
+      type="text"
+      class="uds-chip-input__input"
+      placeholder={placeholder}
+      aria-label="Add chip"
+      disabled={disabled}
+      bind:value={inputValue}
+      onkeydown={handleKeydown}
+    />
+  {/if}
+</div>

package/src/components/ColorPicker.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  interface Props {
+    value?: string;
+    label?: string;
+    showHexInput?: boolean;
+    disabled?: boolean;
+    onChange?: (v: string) => void;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    value = '#000000',
+    label,
+    showHexInput = true,
+    disabled = false,
+    onChange,
+    class: className = '',
+  }: Props = $props();
+
+  let id = $state('uds-cp-' + Math.random().toString(36).slice(2, 9));
+  let classes = $derived(['uds-color-picker', className].filter(Boolean).join(' '));
+</script>
+
+<div class={classes}>
+  {#if label}
+    <label for={id} class="uds-color-picker__label">{label}</label>
+  {/if}
+  <div class="uds-color-picker__row">
+    <input
+      id={id}
+      type="color"
+      value={value}
+      {disabled}
+      class="uds-color-picker__swatch"
+      aria-describedby={showHexInput ? `${id}-hex` : undefined}
+      oninput={(e) => onChange?.((e.currentTarget as HTMLInputElement).value)}
+    />
+    {#if showHexInput}
+      <input
+        id="{id}-hex"
+        type="text"
+        value={value}
+        {disabled}
+        class="uds-color-picker__hex"
+        aria-label="Hex color"
+        oninput={(e) => onChange?.((e.currentTarget as HTMLInputElement).value)}
+      />
+    {/if}
+  </div>
+</div>

package/src/components/Container.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  interface Props {
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: unknown;
+  }
+
+  let { size = 'lg', class: className = '', children, ...rest }: Props = $props();
+
+  let classes = $derived(['uds-container', `uds-container--${size}`, className].filter(Boolean).join(' '));
+</script>
+
+<div class={classes} {...rest}>
+  {@render children?.()}
+</div>

package/src/components/Divider.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'line' | 'dashed';
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    orientation = 'horizontal',
+    variant = 'line',
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-divider',
+      `uds-divider--${orientation}`,
+      variant === 'dashed' && 'uds-divider--dashed',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<hr class={classes} role="separator" {...rest} />

package/src/components/Form.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  interface Props {
+    id?: string;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: unknown;
+  }
+
+  let { id, class: className = '', children, ...rest }: Props = $props();
+
+  let classes = $derived(['uds-form', className].filter(Boolean).join(' '));
+</script>
+
+<form class={classes} {id} {...rest}>
+  {@render children?.()}
+</form>

package/src/components/Grid.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  interface Props {
+    columns?: 1 | 2 | 3 | 4 | 12;
+    gap?: 'sm' | 'md' | 'lg';
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: unknown;
+  }
+
+  let { columns = 1, gap = 'md', class: className = '', children, ...rest }: Props = $props();
+
+  let classes = $derived(
+    ['uds-grid', `uds-grid--cols-${columns}`, `uds-grid--gap-${gap}`, className].filter(Boolean).join(' ')
+  );
+</script>
+
+<div class={classes} {...rest}>
+  {@render children?.()}
+</div>

package/src/components/Link.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  interface Props {
+    href: string;
+    variant?: 'default' | 'muted' | 'primary';
+    external?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    href,
+    variant = 'primary',
+    external = false,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(['uds-link', `uds-link--${variant}`, className].filter(Boolean).join(' '));
+  let rel = $derived(external ? 'noopener noreferrer' : undefined);
+  let target = $derived(external ? '_blank' : undefined);
+</script>
+
+<a class={classes} {href} {rel} {target} {...rest}>
+  {@render children?.()}
+</a>

package/src/components/NumberInput.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  interface Props {
+    value?: number | string;
+    min?: number;
+    max?: number;
+    step?: number;
+    showStepper?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    onChange?: (v: number | string) => void;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    value = '',
+    min,
+    max,
+    step = 1,
+    showStepper = false,
+    size = 'md',
+    disabled = false,
+    onChange,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-number-input',
+      `uds-number-input--${size}`,
+      showStepper && 'uds-number-input--stepper',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  function handleStep(delta: number) {
+    const next = (Number(value) || 0) + delta;
+    const clamped = min != null && next < min ? min : max != null && next > max ? max : next;
+    onChange?.(clamped);
+  }
+</script>
+
+<div class={classes}>
+  {#if showStepper}
+    <button
+      type="button"
+      class="uds-number-input__stepper uds-number-input__stepper--minus"
+      aria-label="Decrease"
+      disabled={disabled || (min != null && Number(value) <= min)}
+      onclick={() => handleStep(-step)}
+    >
+      −
+    </button>
+  {/if}
+  <input
+    type="number"
+    value={value}
+    min={min}
+    max={max}
+    step={step}
+    {disabled}
+    class="uds-number-input__input"
+    aria-valuenow={value !== '' && value !== undefined ? Number(value) : undefined}
+    aria-valuemin={min}
+    aria-valuemax={max}
+    oninput={(e) => onChange?.((e.currentTarget as HTMLInputElement).value)}
+    {...rest}
+  />
+  {#if showStepper}
+    <button
+      type="button"
+      class="uds-number-input__stepper uds-number-input__stepper--plus"
+      aria-label="Increase"
+      disabled={disabled || (max != null && Number(value) >= max)}
+      onclick={() => handleStep(step)}
+    >
+      +
+    </button>
+  {/if}
+</div>

package/src/components/OTPInput.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  interface Props {
+    length?: 4 | 6;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    autoFocus?: boolean;
+    inputMode?: 'numeric' | 'text';
+    disabled?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    length = 4,
+    value: controlledValue,
+    defaultValue = '',
+    onChange,
+    autoFocus = false,
+    inputMode = 'numeric',
+    disabled = false,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let internalValue = $state(defaultValue.slice(0, length));
+  let value = $derived((controlledValue ?? internalValue).slice(0, length).padEnd(length, ''));
+
+  let classes = $derived(
+    ['uds-otp-input', disabled && 'uds-otp-input--disabled', className].filter(Boolean).join(' ')
+  );
+
+  function setValue(next: string) {
+    const s = next.slice(0, length);
+    if (controlledValue === undefined) internalValue = s;
+    onChange?.(s);
+  }
+
+  function handleChange(index: number, digit: string) {
+    const char = inputMode === 'numeric' ? digit.replace(/\D/g, '').slice(-1) : digit.slice(-1);
+    const arr = value.split('');
+    arr[index] = char;
+    setValue(arr.join(''));
+  }
+
+  function handleKeydown(e: KeyboardEvent, index: number) {
+    if (e.key === 'Backspace' && value[index] === '' && index > 0) {
+      const inputs = document.querySelectorAll<HTMLInputElement>('.uds-otp-input__digit');
+      inputs[index - 1]?.focus();
+    }
+  }
+</script>
+
+<div class={classes} role="group" aria-label="One-time code" {...rest}>
+  {#each Array(length) as _, i}
+    <input
+      type="text"
+      inputmode={inputMode}
+      maxlength="1"
+      autocomplete="one-time-code"
+      class="uds-otp-input__digit"
+      value={value[i] ?? ''}
+      aria-label="Digit {i + 1}"
+      disabled={disabled}
+      autofocus={autoFocus && i === 0}
+      oninput={(e) => handleChange(i, (e.currentTarget as HTMLInputElement).value)}
+      onkeydown={(e) => handleKeydown(e, i)}
+    />
+  {/each}
+</div>

package/src/components/Popover.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  interface Props {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+    size?: 'sm' | 'md';
+    class?: string;
+    trigger?: import('svelte').Snippet<[{ open: boolean }]>;
+    children?: import('svelte').Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    open: controlledOpen,
+    onOpenChange,
+    placement = 'bottom',
+    size = 'md',
+    class: className = '',
+    trigger,
+    children,
+    ...rest
+  }: Props = $props();
+
+  let internalOpen = $state(false);
+  let open = $derived(controlledOpen ?? internalOpen);
+
+  let contentRef: HTMLDivElement;
+  let triggerRef: HTMLDivElement;
+  let contentStyle = $state<Record<string, string>>({ position: 'fixed', left: '0', top: '0', zIndex: '9999' });
+
+  $effect(() => {
+    if (open && contentRef && triggerRef) {
+      const tr = triggerRef.getBoundingClientRect();
+      const cr = contentRef.getBoundingClientRect();
+      let top = tr.bottom + 8;
+      let left = tr.left + (tr.width - cr.width) / 2;
+      if (placement === 'top') top = tr.top - cr.height - 8;
+      left = Math.max(8, Math.min(window.innerWidth - cr.width - 8, left));
+      top = Math.max(8, Math.min(window.innerHeight - cr.height - 8, top));
+      contentStyle = { position: 'fixed', left: `${left}px`, top: `${top}px`, zIndex: '9999' };
+    }
+  });
+
+  let classes = $derived(
+    ['uds-popover', `uds-popover--${size}`, `uds-popover--${placement}`, className].filter(Boolean).join(' ')
+  );
+
+  function setOpen(v: boolean) {
+    if (controlledOpen === undefined) internalOpen = v;
+    onOpenChange?.(v);
+  }
+
+  function handleEscape(e: KeyboardEvent) {
+    if (e.key === 'Escape') setOpen(false);
+  }
+</script>
+
+<svelte:window onkeydown={handleEscape} />
+
+<div class="uds-popover__wrapper" {...rest}>
+  <div bind:this={triggerRef} onclick={() => setOpen(!open)}>
+    {@render trigger?.({ open })}
+  </div>
+</div>
+
+{#if open}
+  <svelte:portal target="body">
+    <div
+      bind:this={contentRef}
+      class={classes}
+      role="dialog"
+      aria-modal="false"
+      style={contentStyle}
+    >
+      <div class="uds-popover__content">
+        {@render children?.()}
+      </div>
+    </div>
+  </svelte:portal>
+{/if}

package/src/components/Rating.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  interface Props {
+    value?: number;
+    max?: number;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    onChange?: (v: number) => void;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    value = 0,
+    max = 5,
+    size = 'md',
+    disabled = false,
+    onChange,
+    class: className = '',
+  }: Props = $props();
+
+  let classes = $derived(['uds-rating', `uds-rating--${size}`, className].filter(Boolean).join(' '));
+</script>
+
+<div class={classes} role="group" aria-label="Rating {value} of {max}">
+  {#each Array(max) as _, i}
+    {@const starValue = i + 1}
+    <button
+      type="button"
+      class="uds-rating__star"
+      class:uds-rating__star--filled={value >= starValue}
+      aria-label="{starValue} star{starValue > 1 ? 's' : ''}"
+      {disabled}
+      onclick={() => onChange?.(starValue)}
+    >
+      <span aria-hidden="true">{value >= starValue ? '★' : '☆'}</span>
+    </button>
+  {/each}
+</div>

package/src/components/SegmentedControl.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  export interface SegmentedControlOption {
+    value: string;
+    label: string;
+    icon?: import('svelte').Snippet;
+  }
+
+  interface Props {
+    options: SegmentedControlOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    size?: 'sm' | 'md' | 'lg';
+    iconOnly?: boolean;
+    disabled?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    options,
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    size = 'md',
+    iconOnly = false,
+    disabled = false,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let internalValue = $state(defaultValue ?? options[0]?.value ?? '');
+  let value = $derived(controlledValue ?? internalValue);
+
+  let classes = $derived(
+    [
+      'uds-segmented-control',
+      `uds-segmented-control--${size}`,
+      iconOnly && 'uds-segmented-control--icon-only',
+      disabled && 'uds-segmented-control--disabled',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  function select(optionValue: string) {
+    if (disabled) return;
+    if (controlledValue === undefined) internalValue = optionValue;
+    onChange?.(optionValue);
+  }
+
+  function handleKeydown(e: KeyboardEvent, currentIndex: number) {
+    if (disabled) return;
+    let nextIndex = currentIndex;
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      nextIndex = Math.max(0, currentIndex - 1);
+    } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      e.preventDefault();
+      nextIndex = Math.min(options.length - 1, currentIndex + 1);
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      nextIndex = 0;
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      nextIndex = options.length - 1;
+    } else return;
+    const nextValue = options[nextIndex]?.value;
+    if (nextValue != null) select(nextValue);
+  }
+</script>
+
+<div class={classes} role="radiogroup" aria-label="Options" aria-disabled={disabled} {...rest}>
+  {#each options as option, index}
+    <button
+      type="button"
+      role="radio"
+      aria-checked={value === option.value}
+      disabled={disabled}
+      class="uds-segmented-control__option {value === option.value ? 'uds-segmented-control__option--selected' : ''}"
+      onclick={() => select(option.value)}
+      onkeydown={(e) => handleKeydown(e, index)}
+    >
+      {#if option.icon}
+        <span class="uds-segmented-control__icon" aria-hidden="true">{@render option.icon()}</span>
+      {/if}
+      {#if !iconOnly}<span class="uds-segmented-control__label">{option.label}</span>{/if}
+    </button>
+  {/each}
+</div>

package/src/components/Slider.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    onChange?: (v: number) => void;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    value,
+    min = 0,
+    max = 100,
+    step = 1,
+    size = 'md',
+    disabled = false,
+    onChange,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let val = $derived(value ?? min);
+  let classes = $derived(['uds-slider', `uds-slider--${size}`, className].filter(Boolean).join(' '));
+</script>
+
+<div class={classes}>
+  <input
+    type="range"
+    value={val}
+    {min}
+    {max}
+    {step}
+    {disabled}
+    role="slider"
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-valuenow={val}
+    class="uds-slider__input"
+    oninput={(e) => onChange?.(Number((e.currentTarget as HTMLInputElement).value))}
+    {...rest}
+  />
+</div>

package/src/components/Stack.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  interface Props {
+    direction?: 'row' | 'column';
+    gap?: 'sm' | 'md' | 'lg';
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    wrap?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    direction = 'column',
+    gap = 'md',
+    align = 'stretch',
+    wrap = false,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-stack',
+      `uds-stack--${direction}`,
+      `uds-stack--gap-${gap}`,
+      align !== 'stretch' && `uds-stack--align-${align}`,
+      wrap && 'uds-stack--wrap',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<div class={classes} {...rest}>
+  {@render children?.()}
+</div>

package/src/components/Stepper.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  export interface StepperStep {
+    id: string;
+    label: string;
+    optional?: boolean;
+  }
+
+  interface Props {
+    steps: StepperStep[];
+    activeStep?: number;
+    defaultActiveStep?: number;
+    orientation?: 'horizontal' | 'vertical';
+    linear?: boolean;
+    onStepClick?: (index: number) => void;
+    onChange?: (index: number) => void;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    steps,
+    activeStep: controlledStep,
+    defaultActiveStep = 0,
+    orientation = 'horizontal',
+    linear = true,
+    onStepClick,
+    onChange,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let internalStep = $state(defaultActiveStep);
+  let activeStep = $derived(controlledStep ?? internalStep);
+
+  let classes = $derived(
+    ['uds-stepper', `uds-stepper--${orientation}`, className].filter(Boolean).join(' ')
+  );
+
+  function handleStepClick(index: number) {
+    if (linear && index > activeStep) return;
+    if (controlledStep === undefined) internalStep = index;
+    onChange?.(index);
+    onStepClick?.(index);
+  }
+</script>
+
+<nav class={classes} aria-label="Progress" {...rest}>
+  {#each steps as step, index}
+    <div
+      class="uds-stepper__step uds-stepper__step--{index < activeStep ? 'completed' : index === activeStep ? 'active' : 'pending'}"
+      aria-current={index === activeStep ? 'step' : undefined}
+      aria-disabled={index > activeStep && linear ? 'true' : undefined}
+      role="button"
+      tabindex={!linear || index <= activeStep ? 0 : -1}
+      onclick={() => (!linear || index <= activeStep) && handleStepClick(index)}
+      onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && (!linear || index <= activeStep) && (e.preventDefault(), handleStepClick(index))}
+    >
+      <span class="uds-stepper__step-indicator">
+        {#if index < activeStep}
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M20 6L9 17l-5-5" /></svg>
+        {:else}
+          {index + 1}
+        {/if}
+      </span>
+      <span class="uds-stepper__step-label">{step.label}</span>
+      {#if step.optional}<span class="uds-stepper__step-optional">(optional)</span>{/if}
+    </div>
+    {#if index < steps.length - 1}
+      <span class="uds-stepper__connector uds-stepper__connector--{index < activeStep ? 'completed' : ''}" aria-hidden="true"></span>
+    {/if}
+  {/each}
+</nav>

package/src/components/TimePicker.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  interface Props {
+    value?: string;
+    size?: 'md' | 'lg';
+    disabled?: boolean;
+    onChange?: (v: string) => void;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    value = '',
+    size = 'md',
+    disabled = false,
+    onChange,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(['uds-time-picker', `uds-time-picker--${size}`, className].filter(Boolean).join(' '));
+</script>
+
+<input
+  type="time"
+  value={value}
+  class={classes}
+  {disabled}
+  aria-label="Time"
+  oninput={(e) => onChange?.((e.currentTarget as HTMLInputElement).value)}
+  {...rest}
+/>

package/src/components/Toolbar.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  interface Props {
+    'aria-label': string;
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    'aria-label': ariaLabel,
+    orientation = 'horizontal',
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-toolbar',
+      orientation === 'vertical' && 'uds-toolbar--vertical',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<div class={classes} role="toolbar" aria-label={ariaLabel} {...rest}>
+  {@render children?.()}
+</div>

package/src/components/TreeView.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  export interface TreeNode {
+    id: string;
+    label: string;
+    children?: TreeNode[];
+  }
+
+  interface Props {
+    nodes: TreeNode[];
+    selectedIds?: string | string[];
+    onSelect?: (ids: string[]) => void;
+    onExpand?: (id: string, expanded: boolean) => void;
+    selectionMode?: 'single' | 'multi' | 'none';
+    defaultExpandedIds?: string[];
+    ariaLabel?: string;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    nodes,
+    selectedIds,
+    onSelect,
+    onExpand,
+    selectionMode = 'single',
+    defaultExpandedIds = [],
+    ariaLabel = 'Tree',
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let expanded = $state<Set<string>>(new Set(defaultExpandedIds));
+
+  let selectedArray = $derived(
+    Array.isArray(selectedIds) ? selectedIds : selectedIds != null ? [selectedIds] : []
+  );
+  let selectedSet = $derived(new Set(selectedArray));
+
+  let classes = $derived(['uds-tree', className].filter(Boolean).join(' '));
+
+  function toggle(id: string, isExp: boolean) {
+    const next = new Set(expanded);
+    if (isExp) next.add(id);
+    else next.delete(id);
+    expanded = next;
+    onExpand?.(id, isExp);
+  }
+
+  function handleSelect(ids: string[]) {
+    onSelect?.(ids);
+  }
+</script>
+
+<div class={classes} role="tree" aria-label={ariaLabel} aria-multiselectable={selectionMode === 'multi'} {...rest}>
+  {#each nodes as node}
+    <div
+      class="uds-tree__item {node.children?.length ? 'uds-tree__item--branch' : ''} {selectedSet.has(node.id) ? 'uds-tree__item--selected' : ''}"
+      role="treeitem"
+      aria-expanded={node.children?.length ? expanded.has(node.id) : undefined}
+      aria-level="1"
+      aria-selected={selectionMode !== 'none' ? selectedSet.has(node.id) : undefined}
+      tabindex="0"
+      onclick={() => {
+        if (node.children?.length) toggle(node.id, !expanded.has(node.id));
+        if (selectionMode !== 'none') {
+          if (selectionMode === 'single') handleSelect([node.id]);
+          else handleSelect(selectedSet.has(node.id) ? selectedArray.filter((x) => x !== node.id) : [...selectedArray, node.id]);
+        }
+      }}
+    >
+      <span class="uds-tree__item-label">{node.label}</span>
+      {#if node.children?.length && expanded.has(node.id)}
+        <div role="group" class="uds-tree__group">
+          {#each node.children as child}
+            <div
+              class="uds-tree__item {selectedSet.has(child.id) ? 'uds-tree__item--selected' : ''}"
+              role="treeitem"
+              aria-level="2"
+              aria-selected={selectionMode !== 'none' ? selectedSet.has(child.id) : undefined}
+              tabindex="0"
+              onclick={() => selectionMode !== 'none' && handleSelect(selectionMode === 'single' ? [child.id] : [])}
+            >
+              <span class="uds-tree__item-label">{child.label}</span>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>

package/src/components/Typography.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  type Variant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'code';
+
+  interface Props {
+    variant?: Variant;
+    as?: string;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: unknown;
+  }
+
+  let { variant = 'body', as, class: className = '', children, ...rest }: Props = $props();
+
+  const tagMap: Record<Variant, string> = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    body: 'p',
+    caption: 'span',
+    code: 'code',
+  };
+  let tag = $derived(as ?? tagMap[variant]);
+
+  let classes = $derived(
+    ['uds-typography', `uds-typography--${variant}`, className].filter(Boolean).join(' ')
+  );
+</script>
+
+<svelte:element this={tag} class={classes} {...rest}>
+  {@render children?.()}
+</svelte:element>

package/src/index.js

@@ -15,7 +15,20 @@ export { default as Radio } from './components/Radio.svelte';
 export { default as ToggleSwitch } from './components/ToggleSwitch.svelte';
 export { default as Alert } from './components/Alert.svelte';
 export { default as Badge } from './components/Badge.svelte';
+export { default as Box } from './components/Box.svelte';
+export { default as Container } from './components/Container.svelte';
+export { default as Divider } from './components/Divider.svelte';
+export { default as Grid } from './components/Grid.svelte';
+export { default as Link } from './components/Link.svelte';
+export { default as Stack } from './components/Stack.svelte';
+export { default as Typography } from './components/Typography.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
+export { default as NumberInput } from './components/NumberInput.svelte';
+export { default as Slider } from './components/Slider.svelte';
+export { default as Form } from './components/Form.svelte';
+export { default as TimePicker } from './components/TimePicker.svelte';
+export { default as Rating } from './components/Rating.svelte';
+export { default as ColorPicker } from './components/ColorPicker.svelte';
 export { default as Accordion } from './components/Accordion.svelte';
 export { default as Breadcrumb } from './components/Breadcrumb.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
@@ -30,3 +43,11 @@ export { default as CommandPalette } from './components/CommandPalette.svelte';
 export { default as ProgressIndicator } from './components/ProgressIndicator.svelte';
 export { default as SideNavigation } from './components/SideNavigation.svelte';
 export { default as FileUpload } from './components/FileUpload.svelte';
+export { default as Toolbar } from './components/Toolbar.svelte';
+export { default as Stepper } from './components/Stepper.svelte';
+export { default as SegmentedControl } from './components/SegmentedControl.svelte';
+export { default as OTPInput } from './components/OTPInput.svelte';
+export { default as ChipInput } from './components/ChipInput.svelte';
+export { default as Popover } from './components/Popover.svelte';
+export { default as Carousel } from './components/Carousel.svelte';
+export { default as TreeView } from './components/TreeView.svelte';