@dillingerstaffing/strand-svelte 0.4.1

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@dillingerstaffing/strand-svelte",
+  "version": "0.4.1",
+  "description": "Strand UI - Svelte component library built on the Strand Design Language",
+  "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
+  "license": "MIT",
+  "keywords": ["design-system", "ui-components", "svelte", "svelte4", "svelte5", "css-custom-properties", "design-tokens", "accessibility", "wcag", "aria", "component-library"],
+  "homepage": "https://dillingerstaffing.com/labs/strand",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dillingerstaffing/strand",
+    "directory": "packages/strand-svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/dillingerstaffing/strand/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    },
+    "./css/strand-ui.css": "./dist/css/strand-ui.css"
+  },
+  "style": "./dist/css/strand-ui.css",
+  "files": ["dist/", "src/"],
+  "sideEffects": ["dist/css/*.css"],
+  "scripts": {
+    "build": "vite build && cp ../../HTML_REFERENCE.md ./HTML_REFERENCE.md",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0 || ^5.0.0"
+  },
+  "dependencies": {
+    "@dillingerstaffing/strand": "workspace:^"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@testing-library/jest-dom": "^6.6.0",
+    "@testing-library/svelte": "^5.2.0",
+    "jsdom": "^26.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "vite": "^6.0.0",
+    "vitest": "^3.0.0"
+  }
+}

package/src/components/Alert/Alert.svelte

@@ -0,0 +1,32 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Visual status of the alert */
+  export let status: 'info' | 'success' | 'warning' | 'error' = 'info'
+  /** Show dismiss button */
+  export let dismissible: boolean = false
+  /** Called when dismiss button is clicked */
+  export let ondismiss: (() => void) | undefined = undefined
+
+  $: role = status === 'error' || status === 'warning' ? 'alert' : 'status'
+
+  $: classes = [
+    'strand-alert',
+    `strand-alert--${status}`,
+  ].filter(Boolean).join(' ')
+</script>
+
+<div class={classes} {role} {...$$restProps}>
+  <div class="strand-alert__content">
+    <slot />
+  </div>
+  {#if dismissible}
+    <button
+      type="button"
+      class="strand-alert__dismiss"
+      aria-label="Dismiss"
+      on:click={() => ondismiss?.()}
+    >
+      &#215;
+    </button>
+  {/if}
+</div>

package/src/components/Alert/Alert.test.ts

@@ -0,0 +1,64 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect, vi } from 'vitest'
+import { render, fireEvent } from '@testing-library/svelte'
+import Alert from './Alert.svelte'
+
+describe('Alert', () => {
+  it('renders with default classes', () => {
+    const { container } = render(Alert)
+    const el = container.querySelector('.strand-alert')
+    expect(el).toBeInTheDocument()
+    expect(el).toHaveClass('strand-alert--info')
+    expect(el).toHaveAttribute('role', 'status')
+  })
+
+  it('applies status classes', () => {
+    const statuses = ['info', 'success', 'warning', 'error'] as const
+    for (const status of statuses) {
+      const { container, unmount } = render(Alert, { props: { status } })
+      expect(container.querySelector('.strand-alert')).toHaveClass(`strand-alert--${status}`)
+      unmount()
+    }
+  })
+
+  it('uses alert role for error and warning', () => {
+    for (const status of ['error', 'warning'] as const) {
+      const { container, unmount } = render(Alert, { props: { status } })
+      expect(container.querySelector('.strand-alert')).toHaveAttribute('role', 'alert')
+      unmount()
+    }
+  })
+
+  it('uses status role for info and success', () => {
+    for (const status of ['info', 'success'] as const) {
+      const { container, unmount } = render(Alert, { props: { status } })
+      expect(container.querySelector('.strand-alert')).toHaveAttribute('role', 'status')
+      unmount()
+    }
+  })
+
+  it('shows dismiss button when dismissible', () => {
+    const { container } = render(Alert, { props: { dismissible: true } })
+    const btn = container.querySelector('.strand-alert__dismiss')
+    expect(btn).toBeInTheDocument()
+    expect(btn).toHaveAttribute('aria-label', 'Dismiss')
+  })
+
+  it('does not show dismiss button by default', () => {
+    const { container } = render(Alert)
+    expect(container.querySelector('.strand-alert__dismiss')).not.toBeInTheDocument()
+  })
+
+  it('fires ondismiss callback', async () => {
+    const ondismiss = vi.fn()
+    const { container } = render(Alert, { props: { dismissible: true, ondismiss } })
+    await fireEvent.click(container.querySelector('.strand-alert__dismiss')!)
+    expect(ondismiss).toHaveBeenCalled()
+  })
+
+  it('has content wrapper', () => {
+    const { container } = render(Alert)
+    expect(container.querySelector('.strand-alert__content')).toBeInTheDocument()
+  })
+})

package/src/components/Alert/index.ts

@@ -0,0 +1,2 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+export { default as Alert } from './Alert.svelte'

package/src/components/Avatar/Avatar.svelte

@@ -0,0 +1,40 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Image URL */
+  export let src: string | undefined = undefined
+  /** Alt text for image */
+  export let alt: string = ''
+  /** Fallback initials (1-2 characters) */
+  export let initials: string = ''
+  /** Avatar size */
+  export let size: 'sm' | 'md' | 'lg' | 'xl' = 'md'
+
+  let imgError = false
+
+  $: showImage = src && !imgError
+  $: displayInitials = initials.slice(0, 2).toUpperCase()
+
+  $: classes = [
+    'strand-avatar',
+    `strand-avatar--${size}`,
+  ].filter(Boolean).join(' ')
+
+  function handleError() {
+    imgError = true
+  }
+</script>
+
+<div class={classes} role="img" aria-label={alt || displayInitials} {...$$restProps}>
+  {#if showImage}
+    <img
+      class="strand-avatar__img"
+      {src}
+      {alt}
+      on:error={handleError}
+    />
+  {:else}
+    <span class="strand-avatar__initials" aria-hidden="true">
+      {displayInitials}
+    </span>
+  {/if}
+</div>

package/src/components/Avatar/Avatar.test.ts

@@ -0,0 +1,55 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Avatar from './Avatar.svelte'
+
+describe('Avatar', () => {
+  it('renders with default classes', () => {
+    const { container } = render(Avatar)
+    const el = container.querySelector('.strand-avatar')
+    expect(el).toBeInTheDocument()
+    expect(el).toHaveClass('strand-avatar--md')
+    expect(el).toHaveAttribute('role', 'img')
+  })
+
+  it('applies size classes', () => {
+    const sizes = ['sm', 'md', 'lg', 'xl'] as const
+    for (const size of sizes) {
+      const { container, unmount } = render(Avatar, { props: { size } })
+      expect(container.querySelector('.strand-avatar')).toHaveClass(`strand-avatar--${size}`)
+      unmount()
+    }
+  })
+
+  it('shows initials when no src', () => {
+    const { container } = render(Avatar, { props: { initials: 'AB' } })
+    const span = container.querySelector('.strand-avatar__initials')
+    expect(span).toBeInTheDocument()
+    expect(span).toHaveTextContent('AB')
+    expect(span).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('truncates initials to 2 characters', () => {
+    const { container } = render(Avatar, { props: { initials: 'abc' } })
+    expect(container.querySelector('.strand-avatar__initials')).toHaveTextContent('AB')
+  })
+
+  it('renders image when src is provided', () => {
+    const { container } = render(Avatar, { props: { src: 'test.jpg', alt: 'Test' } })
+    const img = container.querySelector('.strand-avatar__img')
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveAttribute('src', 'test.jpg')
+    expect(img).toHaveAttribute('alt', 'Test')
+  })
+
+  it('sets aria-label from alt text', () => {
+    const { container } = render(Avatar, { props: { alt: 'User Name' } })
+    expect(container.querySelector('.strand-avatar')).toHaveAttribute('aria-label', 'User Name')
+  })
+
+  it('sets aria-label from initials when no alt', () => {
+    const { container } = render(Avatar, { props: { initials: 'JD' } })
+    expect(container.querySelector('.strand-avatar')).toHaveAttribute('aria-label', 'JD')
+  })
+})

package/src/components/Avatar/index.ts

@@ -0,0 +1,2 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+export { default as Avatar } from './Avatar.svelte'

package/src/components/Badge/Badge.svelte

@@ -0,0 +1,41 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Badge display mode */
+  export let variant: 'dot' | 'count' = 'count'
+  /** Color status */
+  export let status: 'default' | 'teal' | 'blue' | 'amber' | 'red' = 'default'
+  /** Number to display (count variant only) */
+  export let count: number | undefined = undefined
+  /** Maximum count before showing "N+" */
+  export let maxCount: number = 99
+
+  $: displayValue = variant === 'count'
+    ? (count != null && count > maxCount ? `${maxCount}+` : count)
+    : null
+
+  $: ariaLabel = variant === 'dot'
+    ? 'Status indicator'
+    : count != null
+      ? `${count} notifications`
+      : undefined
+
+  $: badgeClasses = [
+    'strand-badge__indicator',
+    `strand-badge--${variant}`,
+    `strand-badge--${status}`,
+  ].filter(Boolean).join(' ')
+
+  $: hasChildren = $$slots.default
+  $: wrapperClasses = hasChildren
+    ? ['strand-badge'].filter(Boolean).join(' ')
+    : ['strand-badge', 'strand-badge--inline'].filter(Boolean).join(' ')
+</script>
+
+<span class={wrapperClasses} {...$$restProps}>
+  {#if hasChildren}
+    <slot />
+  {/if}
+  <span class={badgeClasses} aria-label={ariaLabel} role="status">
+    {#if displayValue != null}{displayValue}{/if}
+  </span>
+</span>

package/src/components/Badge/Badge.test.ts

@@ -0,0 +1,55 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Badge from './Badge.svelte'
+
+describe('Badge', () => {
+  it('renders with default classes (inline, no children)', () => {
+    const { container } = render(Badge)
+    const el = container.querySelector('.strand-badge')
+    expect(el).toBeInTheDocument()
+    expect(el).toHaveClass('strand-badge--inline')
+  })
+
+  it('shows count variant indicator', () => {
+    const { container } = render(Badge, { props: { count: 5 } })
+    const indicator = container.querySelector('.strand-badge__indicator')
+    expect(indicator).toHaveClass('strand-badge--count')
+    expect(indicator).toHaveTextContent('5')
+  })
+
+  it('caps count at maxCount', () => {
+    const { container } = render(Badge, { props: { count: 150, maxCount: 99 } })
+    const indicator = container.querySelector('.strand-badge__indicator')
+    expect(indicator).toHaveTextContent('99+')
+  })
+
+  it('renders dot variant', () => {
+    const { container } = render(Badge, { props: { variant: 'dot' } })
+    const indicator = container.querySelector('.strand-badge__indicator')
+    expect(indicator).toHaveClass('strand-badge--dot')
+    expect(indicator).toHaveAttribute('aria-label', 'Status indicator')
+  })
+
+  it('applies status classes', () => {
+    const statuses = ['default', 'teal', 'blue', 'amber', 'red'] as const
+    for (const status of statuses) {
+      const { container, unmount } = render(Badge, { props: { status } })
+      expect(container.querySelector('.strand-badge__indicator')).toHaveClass(`strand-badge--${status}`)
+      unmount()
+    }
+  })
+
+  it('has role="status" on indicator', () => {
+    const { container } = render(Badge, { props: { count: 3 } })
+    const indicator = container.querySelector('.strand-badge__indicator')
+    expect(indicator).toHaveAttribute('role', 'status')
+  })
+
+  it('sets notifications aria-label for count', () => {
+    const { container } = render(Badge, { props: { count: 7 } })
+    const indicator = container.querySelector('.strand-badge__indicator')
+    expect(indicator).toHaveAttribute('aria-label', '7 notifications')
+  })
+})

package/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+export { default as Badge } from './Badge.svelte'

package/src/components/Breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,29 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  export interface BreadcrumbItem {
+    label: string
+    href?: string
+  }
+
+  /** Breadcrumb path items; last item is treated as current page */
+  export let items: BreadcrumbItem[] = []
+  /** Separator character between items */
+  export let separator: string = '/'
+</script>
+
+<nav aria-label="Breadcrumb" class="strand-breadcrumb" {...$$restProps}>
+  <ol class="strand-breadcrumb__list">
+    {#each items as item, index (item.label + index)}
+      <li class="strand-breadcrumb__item">
+        {#if index > 0}
+          <span class="strand-breadcrumb__separator" aria-hidden="true">{separator}</span>
+        {/if}
+        {#if index === items.length - 1}
+          <span class="strand-breadcrumb__current" aria-current="page">{item.label}</span>
+        {:else}
+          <a href={item.href} class="strand-breadcrumb__link">{item.label}</a>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>

package/src/components/Breadcrumb/Breadcrumb.test.ts

@@ -0,0 +1,66 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Breadcrumb from './Breadcrumb.svelte'
+
+const testItems = [
+  { label: 'Home', href: '/' },
+  { label: 'Products', href: '/products' },
+  { label: 'Widget' },
+]
+
+describe('Breadcrumb', () => {
+  it('renders with nav and aria-label', () => {
+    const { container } = render(Breadcrumb, { props: { items: testItems } })
+    const nav = container.querySelector('nav')
+    expect(nav).toBeInTheDocument()
+    expect(nav).toHaveAttribute('aria-label', 'Breadcrumb')
+    expect(nav).toHaveClass('strand-breadcrumb')
+  })
+
+  it('renders items as list', () => {
+    const { container } = render(Breadcrumb, { props: { items: testItems } })
+    const list = container.querySelector('.strand-breadcrumb__list')
+    expect(list).toBeInTheDocument()
+    const items = container.querySelectorAll('.strand-breadcrumb__item')
+    expect(items.length).toBe(3)
+  })
+
+  it('renders links for non-last items', () => {
+    const { container } = render(Breadcrumb, { props: { items: testItems } })
+    const links = container.querySelectorAll('.strand-breadcrumb__link')
+    expect(links.length).toBe(2)
+    expect(links[0]).toHaveAttribute('href', '/')
+    expect(links[0]).toHaveTextContent('Home')
+  })
+
+  it('renders last item as current page', () => {
+    const { container } = render(Breadcrumb, { props: { items: testItems } })
+    const current = container.querySelector('.strand-breadcrumb__current')
+    expect(current).toBeInTheDocument()
+    expect(current).toHaveAttribute('aria-current', 'page')
+    expect(current).toHaveTextContent('Widget')
+  })
+
+  it('shows separators between items', () => {
+    const { container } = render(Breadcrumb, { props: { items: testItems } })
+    const seps = container.querySelectorAll('.strand-breadcrumb__separator')
+    expect(seps.length).toBe(2)
+    expect(seps[0]).toHaveAttribute('aria-hidden', 'true')
+    expect(seps[0]).toHaveTextContent('/')
+  })
+
+  it('uses custom separator', () => {
+    const { container } = render(Breadcrumb, { props: { items: testItems, separator: '>' } })
+    const seps = container.querySelectorAll('.strand-breadcrumb__separator')
+    expect(seps[0]).toHaveTextContent('>')
+  })
+
+  it('does not show separator before first item', () => {
+    const { container } = render(Breadcrumb, { props: { items: testItems } })
+    const firstItem = container.querySelector('.strand-breadcrumb__item')!
+    const sep = firstItem.querySelector('.strand-breadcrumb__separator')
+    expect(sep).not.toBeInTheDocument()
+  })
+})

package/src/components/Breadcrumb/index.ts

@@ -0,0 +1,2 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+export { default as Breadcrumb } from './Breadcrumb.svelte'

package/src/components/Button/Button.svelte

@@ -0,0 +1,55 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Visual style variant */
+  export let variant: 'primary' | 'secondary' | 'ghost' | 'danger' = 'primary'
+  /** Button size */
+  export let size: 'sm' | 'md' | 'lg' = 'md'
+  /** Show loading spinner and disable interaction */
+  export let loading: boolean = false
+  /** Square button for icon-only use */
+  export let iconOnly: boolean = false
+  /** HTML button type */
+  export let type: 'button' | 'submit' | 'reset' = 'button'
+  /** Disabled state */
+  export let disabled: boolean = false
+  /** Stretch to full container width */
+  export let fullWidth: boolean = false
+  /** Click handler */
+  export let onclick: ((event: MouseEvent) => void) | undefined = undefined
+
+  $: isDisabled = disabled || loading
+
+  $: classes = [
+    'strand-btn',
+    `strand-btn--${variant}`,
+    `strand-btn--${size}`,
+    iconOnly && 'strand-btn--icon-only',
+    fullWidth && 'strand-btn--full-width',
+    loading && 'strand-btn--loading',
+  ].filter(Boolean).join(' ')
+
+  function handleClick(event: MouseEvent) {
+    if (!isDisabled && onclick) {
+      onclick(event)
+    }
+  }
+</script>
+
+<button
+  {type}
+  class={classes}
+  disabled={isDisabled}
+  aria-disabled={isDisabled ? 'true' : undefined}
+  aria-busy={loading ? 'true' : undefined}
+  on:click={handleClick}
+>
+  {#if loading}
+    <span class="strand-btn__spinner" aria-hidden="true"></span>
+  {/if}
+  <span
+    class="strand-btn__content"
+    style={loading ? 'visibility: hidden' : undefined}
+  >
+    <slot />
+  </span>
+</button>

package/src/components/Button/Button.test.ts

@@ -0,0 +1,110 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect, vi } from 'vitest'
+import { render, fireEvent } from '@testing-library/svelte'
+import Button from './Button.svelte'
+
+describe('Button', () => {
+  it('renders with default props', () => {
+    const { getByRole } = render(Button)
+    const btn = getByRole('button')
+    expect(btn).toBeInTheDocument()
+    expect(btn).toHaveClass('strand-btn', 'strand-btn--primary', 'strand-btn--md')
+    expect(btn).toHaveAttribute('type', 'button')
+    expect(btn).not.toBeDisabled()
+  })
+
+  it('applies variant classes', () => {
+    const variants = ['primary', 'secondary', 'ghost', 'danger'] as const
+    for (const variant of variants) {
+      const { container, unmount } = render(Button, { props: { variant } })
+      expect(container.querySelector('.strand-btn')).toHaveClass(`strand-btn--${variant}`)
+      unmount()
+    }
+  })
+
+  it('applies size classes', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+    for (const size of sizes) {
+      const { container, unmount } = render(Button, { props: { size } })
+      expect(container.querySelector('.strand-btn')).toHaveClass(`strand-btn--${size}`)
+      unmount()
+    }
+  })
+
+  it('fires click event when clicked', async () => {
+    const onClick = vi.fn()
+    const { getByRole } = render(Button, { props: { onclick: onClick } })
+    await fireEvent.click(getByRole('button'))
+    expect(onClick).toHaveBeenCalled()
+  })
+
+  it('does not fire click when disabled', async () => {
+    const onClick = vi.fn()
+    const { getByRole } = render(Button, { props: { disabled: true, onclick: onClick } })
+    await fireEvent.click(getByRole('button'))
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('sets disabled and aria-disabled when disabled', () => {
+    const { getByRole } = render(Button, { props: { disabled: true } })
+    const btn = getByRole('button')
+    expect(btn).toBeDisabled()
+    expect(btn).toHaveAttribute('aria-disabled', 'true')
+  })
+
+  it('shows loading state with spinner and aria-busy', () => {
+    const { getByRole, container } = render(Button, { props: { loading: true } })
+    const btn = getByRole('button')
+    expect(btn).toHaveClass('strand-btn--loading')
+    expect(btn).toHaveAttribute('aria-busy', 'true')
+    expect(btn).toBeDisabled()
+    expect(btn).toHaveAttribute('aria-disabled', 'true')
+    const spinner = container.querySelector('.strand-btn__spinner')
+    expect(spinner).toBeInTheDocument()
+    expect(spinner).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('hides content visibility when loading', () => {
+    const { container } = render(Button, { props: { loading: true } })
+    const content = container.querySelector('.strand-btn__content')
+    expect(content).toHaveStyle({ visibility: 'hidden' })
+  })
+
+  it('does not fire click when loading', async () => {
+    const onClick = vi.fn()
+    const { getByRole } = render(Button, { props: { loading: true, onclick: onClick } })
+    await fireEvent.click(getByRole('button'))
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('applies iconOnly class', () => {
+    const { getByRole } = render(Button, { props: { iconOnly: true } })
+    expect(getByRole('button')).toHaveClass('strand-btn--icon-only')
+  })
+
+  it('applies fullWidth class', () => {
+    const { getByRole } = render(Button, { props: { fullWidth: true } })
+    expect(getByRole('button')).toHaveClass('strand-btn--full-width')
+  })
+
+  it('passes type attribute', () => {
+    const { getByRole } = render(Button, { props: { type: 'submit' } })
+    expect(getByRole('button')).toHaveAttribute('type', 'submit')
+  })
+
+  it('does not set aria-disabled when not disabled', () => {
+    const { getByRole } = render(Button)
+    expect(getByRole('button')).not.toHaveAttribute('aria-disabled')
+  })
+
+  it('does not set aria-busy when not loading', () => {
+    const { getByRole } = render(Button)
+    expect(getByRole('button')).not.toHaveAttribute('aria-busy')
+  })
+
+  it('does not show spinner when not loading', () => {
+    const { container } = render(Button)
+    expect(container.querySelector('.strand-btn__spinner')).not.toBeInTheDocument()
+  })
+})

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+export { default as Button } from './Button.svelte'

package/src/components/Card/Card.svelte

@@ -0,0 +1,17 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Visual style variant */
+  export let variant: 'elevated' | 'outlined' | 'interactive' = 'elevated'
+  /** Inner padding */
+  export let padding: 'none' | 'sm' | 'md' | 'lg' = 'md'
+
+  $: classes = [
+    'strand-card',
+    `strand-card--${variant}`,
+    `strand-card--pad-${padding}`,
+  ].filter(Boolean).join(' ')
+</script>
+
+<div class={classes} {...$$restProps}>
+  <slot />
+</div>