@dillingerstaffing/strand-svelte 0.4.1

package/src/components/FormField/FormField.test.ts

@@ -0,0 +1,58 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import FormField from './FormField.svelte'
+
+describe('FormField', () => {
+  it('renders with label', () => {
+    const { container } = render(FormField, { props: { label: 'Email', htmlFor: 'email' } })
+    expect(container.querySelector('.strand-form-field')).toBeInTheDocument()
+    const labelEl = container.querySelector('.strand-form-field__label')
+    expect(labelEl).toBeInTheDocument()
+    expect(labelEl).toHaveTextContent('Email')
+    expect(labelEl).toHaveAttribute('for', 'email')
+  })
+
+  it('shows required indicator', () => {
+    const { container } = render(FormField, { props: { label: 'Name', htmlFor: 'name', required: true } })
+    const req = container.querySelector('.strand-form-field__required')
+    expect(req).toBeInTheDocument()
+    expect(req).toHaveTextContent('*')
+    expect(req).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('does not show required by default', () => {
+    const { container } = render(FormField, { props: { label: 'Name', htmlFor: 'name' } })
+    expect(container.querySelector('.strand-form-field__required')).not.toBeInTheDocument()
+  })
+
+  it('shows hint text', () => {
+    const { container } = render(FormField, { props: { label: 'Name', htmlFor: 'name', hint: 'Enter your name' } })
+    const hint = container.querySelector('.strand-form-field__hint')
+    expect(hint).toBeInTheDocument()
+    expect(hint).toHaveTextContent('Enter your name')
+    expect(hint).toHaveAttribute('id', 'name-hint')
+  })
+
+  it('shows error text and applies error class', () => {
+    const { container } = render(FormField, { props: { label: 'Name', htmlFor: 'name', error: 'Required' } })
+    expect(container.querySelector('.strand-form-field')).toHaveClass('strand-form-field--error')
+    const errorEl = container.querySelector('.strand-form-field__error')
+    expect(errorEl).toBeInTheDocument()
+    expect(errorEl).toHaveTextContent('Required')
+    expect(errorEl).toHaveAttribute('role', 'alert')
+    expect(errorEl).toHaveAttribute('id', 'name-error')
+  })
+
+  it('error takes precedence over hint', () => {
+    const { container } = render(FormField, { props: { label: 'Name', htmlFor: 'name', error: 'Required', hint: 'Enter name' } })
+    expect(container.querySelector('.strand-form-field__error')).toBeInTheDocument()
+    expect(container.querySelector('.strand-form-field__hint')).not.toBeInTheDocument()
+  })
+
+  it('has control wrapper', () => {
+    const { container } = render(FormField, { props: { label: 'Name', htmlFor: 'name' } })
+    expect(container.querySelector('.strand-form-field__control')).toBeInTheDocument()
+  })
+})

package/src/components/FormField/index.ts

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

package/src/components/Grid/Grid.svelte

@@ -0,0 +1,13 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Number of equal-width columns */
+  export let columns: number = 1
+  /** Gap between items, maps to --strand-space-{n} */
+  export let gap: number = 4
+
+  $: inlineStyle = `grid-template-columns: repeat(${columns}, 1fr); gap: var(--strand-space-${gap});`
+</script>
+
+<div class="strand-grid" style={inlineStyle} {...$$restProps}>
+  <slot />
+</div>

package/src/components/Grid/Grid.test.ts

@@ -0,0 +1,32 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Grid from './Grid.svelte'
+
+describe('Grid', () => {
+  it('renders with default class', () => {
+    const { container } = render(Grid)
+    const el = container.querySelector('.strand-grid')
+    expect(el).toBeInTheDocument()
+  })
+
+  it('sets grid-template-columns from columns prop', () => {
+    const { container } = render(Grid, { props: { columns: 3 } })
+    const el = container.querySelector('.strand-grid') as HTMLElement
+    expect(el.style.gridTemplateColumns).toBe('repeat(3, 1fr)')
+  })
+
+  it('sets gap from gap prop', () => {
+    const { container } = render(Grid, { props: { gap: 6 } })
+    const el = container.querySelector('.strand-grid') as HTMLElement
+    expect(el.style.gap).toBe('var(--strand-space-6)')
+  })
+
+  it('uses default columns=1 and gap=4', () => {
+    const { container } = render(Grid)
+    const el = container.querySelector('.strand-grid') as HTMLElement
+    expect(el.style.gridTemplateColumns).toBe('repeat(1, 1fr)')
+    expect(el.style.gap).toBe('var(--strand-space-4)')
+  })
+})

package/src/components/Grid/index.ts

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

package/src/components/Input/Input.svelte

@@ -0,0 +1,41 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Input type */
+  export let type: 'text' | 'email' | 'password' | 'search' | 'number' = 'text'
+  /** Show error styling */
+  export let error: boolean = false
+  /** Disabled state */
+  export let disabled: boolean = false
+  /** Whether there is a leading addon */
+  export let hasLeading: boolean = false
+  /** Whether there is a trailing addon */
+  export let hasTrailing: boolean = false
+
+  $: wrapperClasses = [
+    'strand-input',
+    error && 'strand-input--error',
+    disabled && 'strand-input--disabled',
+    hasLeading && 'strand-input--has-leading',
+    hasTrailing && 'strand-input--has-trailing',
+  ].filter(Boolean).join(' ')
+</script>
+
+<div class={wrapperClasses}>
+  {#if hasLeading}
+    <span class="strand-input__leading" aria-hidden="true">
+      <slot name="leading" />
+    </span>
+  {/if}
+  <input
+    {type}
+    class="strand-input__field"
+    {disabled}
+    aria-invalid={error ? 'true' : undefined}
+    {...$$restProps}
+  />
+  {#if hasTrailing}
+    <span class="strand-input__trailing" aria-hidden="true">
+      <slot name="trailing" />
+    </span>
+  {/if}
+</div>

package/src/components/Input/Input.test.ts

@@ -0,0 +1,64 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Input from './Input.svelte'
+
+describe('Input', () => {
+  it('renders with default classes', () => {
+    const { container } = render(Input)
+    const wrapper = container.querySelector('.strand-input')
+    expect(wrapper).toBeInTheDocument()
+    const input = container.querySelector('.strand-input__field')
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveAttribute('type', 'text')
+  })
+
+  it('applies error class and aria-invalid', () => {
+    const { container } = render(Input, { props: { error: true } })
+    expect(container.querySelector('.strand-input')).toHaveClass('strand-input--error')
+    expect(container.querySelector('.strand-input__field')).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('applies disabled class and attribute', () => {
+    const { container } = render(Input, { props: { disabled: true } })
+    expect(container.querySelector('.strand-input')).toHaveClass('strand-input--disabled')
+    expect(container.querySelector('.strand-input__field')).toBeDisabled()
+  })
+
+  it('applies type attribute', () => {
+    const types = ['text', 'email', 'password', 'search', 'number'] as const
+    for (const type of types) {
+      const { container, unmount } = render(Input, { props: { type } })
+      expect(container.querySelector('.strand-input__field')).toHaveAttribute('type', type)
+      unmount()
+    }
+  })
+
+  it('shows leading addon area when hasLeading', () => {
+    const { container } = render(Input, { props: { hasLeading: true } })
+    expect(container.querySelector('.strand-input--has-leading')).toBeInTheDocument()
+    const leading = container.querySelector('.strand-input__leading')
+    expect(leading).toBeInTheDocument()
+    expect(leading).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('shows trailing addon area when hasTrailing', () => {
+    const { container } = render(Input, { props: { hasTrailing: true } })
+    expect(container.querySelector('.strand-input--has-trailing')).toBeInTheDocument()
+    const trailing = container.querySelector('.strand-input__trailing')
+    expect(trailing).toBeInTheDocument()
+    expect(trailing).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('does not show addons by default', () => {
+    const { container } = render(Input)
+    expect(container.querySelector('.strand-input__leading')).not.toBeInTheDocument()
+    expect(container.querySelector('.strand-input__trailing')).not.toBeInTheDocument()
+  })
+
+  it('does not set aria-invalid when no error', () => {
+    const { container } = render(Input)
+    expect(container.querySelector('.strand-input__field')).not.toHaveAttribute('aria-invalid')
+  })
+})

package/src/components/Input/index.ts

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

package/src/components/Link/Link.svelte

@@ -0,0 +1,17 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** URL destination */
+  export let href: string
+  /** Opens in new tab with rel="noopener noreferrer" */
+  export let external: boolean = false
+</script>
+
+<a
+  {href}
+  class="strand-link"
+  target={external ? '_blank' : undefined}
+  rel={external ? 'noopener noreferrer' : undefined}
+  {...$$restProps}
+>
+  <slot />
+</a>

package/src/components/Link/Link.test.ts

@@ -0,0 +1,28 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Link from './Link.svelte'
+
+describe('Link', () => {
+  it('renders with class and href', () => {
+    const { container } = render(Link, { props: { href: '/test' } })
+    const el = container.querySelector('.strand-link')
+    expect(el).toBeInTheDocument()
+    expect(el).toHaveAttribute('href', '/test')
+  })
+
+  it('does not set target or rel by default', () => {
+    const { container } = render(Link, { props: { href: '/test' } })
+    const el = container.querySelector('.strand-link')
+    expect(el).not.toHaveAttribute('target')
+    expect(el).not.toHaveAttribute('rel')
+  })
+
+  it('sets target and rel for external links', () => {
+    const { container } = render(Link, { props: { href: 'https://example.com', external: true } })
+    const el = container.querySelector('.strand-link')
+    expect(el).toHaveAttribute('target', '_blank')
+    expect(el).toHaveAttribute('rel', 'noopener noreferrer')
+  })
+})

package/src/components/Link/index.ts

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

package/src/components/Nav/Nav.svelte

@@ -0,0 +1,69 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  export interface NavItem {
+    label: string
+    href: string
+    active?: boolean
+  }
+
+  /** Navigation items */
+  export let items: NavItem[] = []
+
+  let menuOpen = false
+
+  function toggleMenu() {
+    menuOpen = !menuOpen
+  }
+</script>
+
+<nav class="strand-nav" aria-label="Main navigation" {...$$restProps}>
+  <div class="strand-nav__inner">
+    {#if $$slots.logo}
+      <div class="strand-nav__logo">
+        <slot name="logo" />
+      </div>
+    {/if}
+
+    <div class="strand-nav__items">
+      {#each items as item (item.href)}
+        <a
+          href={item.href}
+          class={['strand-nav__link', item.active && 'strand-nav__link--active'].filter(Boolean).join(' ')}
+          aria-current={item.active ? 'page' : undefined}
+        >
+          {item.label}
+        </a>
+      {/each}
+    </div>
+
+    {#if $$slots.actions}
+      <div class="strand-nav__actions">
+        <slot name="actions" />
+      </div>
+    {/if}
+
+    <button
+      type="button"
+      class="strand-nav__hamburger"
+      aria-expanded={menuOpen ? 'true' : 'false'}
+      aria-label={menuOpen ? 'Close menu' : 'Menu'}
+      on:click={toggleMenu}
+    >
+      <span class="strand-nav__hamburger-icon" aria-hidden="true"></span>
+    </button>
+  </div>
+
+  {#if menuOpen}
+    <div class="strand-nav__mobile-menu">
+      {#each items as item (item.href)}
+        <a
+          href={item.href}
+          class={['strand-nav__mobile-link', item.active && 'strand-nav__mobile-link--active'].filter(Boolean).join(' ')}
+          aria-current={item.active ? 'page' : undefined}
+        >
+          {item.label}
+        </a>
+      {/each}
+    </div>
+  {/if}
+</nav>

package/src/components/Nav/Nav.test.ts

@@ -0,0 +1,75 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render, fireEvent } from '@testing-library/svelte'
+import Nav from './Nav.svelte'
+
+const testItems = [
+  { label: 'Home', href: '/', active: true },
+  { label: 'About', href: '/about' },
+  { label: 'Contact', href: '/contact' },
+]
+
+describe('Nav', () => {
+  it('renders with nav element and aria-label', () => {
+    const { container } = render(Nav, { props: { items: testItems } })
+    const nav = container.querySelector('nav')
+    expect(nav).toBeInTheDocument()
+    expect(nav).toHaveClass('strand-nav')
+    expect(nav).toHaveAttribute('aria-label', 'Main navigation')
+  })
+
+  it('renders navigation items', () => {
+    const { container } = render(Nav, { props: { items: testItems } })
+    const links = container.querySelectorAll('.strand-nav__link')
+    expect(links.length).toBe(3)
+    expect(links[0]).toHaveTextContent('Home')
+    expect(links[0]).toHaveAttribute('href', '/')
+  })
+
+  it('marks active item with class and aria-current', () => {
+    const { container } = render(Nav, { props: { items: testItems } })
+    const links = container.querySelectorAll('.strand-nav__link')
+    expect(links[0]).toHaveClass('strand-nav__link--active')
+    expect(links[0]).toHaveAttribute('aria-current', 'page')
+    expect(links[1]).not.toHaveClass('strand-nav__link--active')
+    expect(links[1]).not.toHaveAttribute('aria-current')
+  })
+
+  it('has hamburger button', () => {
+    const { container } = render(Nav, { props: { items: testItems } })
+    const btn = container.querySelector('.strand-nav__hamburger')
+    expect(btn).toBeInTheDocument()
+    expect(btn).toHaveAttribute('aria-expanded', 'false')
+    expect(btn).toHaveAttribute('aria-label', 'Menu')
+  })
+
+  it('toggles mobile menu on hamburger click', async () => {
+    const { container } = render(Nav, { props: { items: testItems } })
+    const btn = container.querySelector('.strand-nav__hamburger')!
+    expect(container.querySelector('.strand-nav__mobile-menu')).not.toBeInTheDocument()
+    await fireEvent.click(btn)
+    expect(container.querySelector('.strand-nav__mobile-menu')).toBeInTheDocument()
+    expect(btn).toHaveAttribute('aria-expanded', 'true')
+    expect(btn).toHaveAttribute('aria-label', 'Close menu')
+  })
+
+  it('renders mobile links when menu is open', async () => {
+    const { container } = render(Nav, { props: { items: testItems } })
+    await fireEvent.click(container.querySelector('.strand-nav__hamburger')!)
+    const mobileLinks = container.querySelectorAll('.strand-nav__mobile-link')
+    expect(mobileLinks.length).toBe(3)
+    expect(mobileLinks[0]).toHaveClass('strand-nav__mobile-link--active')
+  })
+
+  it('has hamburger icon with aria-hidden', () => {
+    const { container } = render(Nav, { props: { items: testItems } })
+    const icon = container.querySelector('.strand-nav__hamburger-icon')
+    expect(icon).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('has inner wrapper', () => {
+    const { container } = render(Nav, { props: { items: testItems } })
+    expect(container.querySelector('.strand-nav__inner')).toBeInTheDocument()
+  })
+})

package/src/components/Nav/index.ts

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

package/src/components/Progress/Progress.svelte

@@ -0,0 +1,78 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Visual variant */
+  export let variant: 'bar' | 'ring' = 'bar'
+  /** Completion percentage (0-100). Omit for indeterminate. */
+  export let value: number | undefined = undefined
+  /** Size of the progress indicator */
+  export let size: 'sm' | 'md' | 'lg' = 'md'
+
+  const RING_SIZES: Record<string, number> = { sm: 24, md: 40, lg: 56 }
+  const RING_STROKE = 3
+
+  $: isDeterminate = value != null
+  $: classes = [
+    'strand-progress',
+    `strand-progress--${variant}`,
+    `strand-progress--${size}`,
+    !isDeterminate && 'strand-progress--indeterminate',
+  ].filter(Boolean).join(' ')
+
+  $: dim = RING_SIZES[size] ?? RING_SIZES.md
+  $: radius = (dim - RING_STROKE) / 2
+  $: circumference = 2 * Math.PI * radius
+  $: offset = isDeterminate ? circumference - (circumference * (value as number)) / 100 : 0
+</script>
+
+{#if variant === 'ring'}
+  <div
+    class={classes}
+    role="progressbar"
+    aria-valuemin={0}
+    aria-valuemax={100}
+    aria-valuenow={isDeterminate ? value : undefined}
+    {...$$restProps}
+  >
+    <svg
+      width={dim}
+      height={dim}
+      viewBox={`0 0 ${dim} ${dim}`}
+      class="strand-progress__ring"
+    >
+      <circle
+        cx={dim / 2}
+        cy={dim / 2}
+        r={radius}
+        fill="none"
+        stroke-width={RING_STROKE}
+        class="strand-progress__track"
+      />
+      <circle
+        cx={dim / 2}
+        cy={dim / 2}
+        r={radius}
+        fill="none"
+        stroke-width={RING_STROKE}
+        stroke-dasharray={circumference}
+        stroke-dashoffset={isDeterminate ? offset : undefined}
+        stroke-linecap="round"
+        class="strand-progress__fill"
+        transform={`rotate(-90 ${dim / 2} ${dim / 2})`}
+      />
+    </svg>
+  </div>
+{:else}
+  <div
+    class={classes}
+    role="progressbar"
+    aria-valuemin={0}
+    aria-valuemax={100}
+    aria-valuenow={isDeterminate ? value : undefined}
+    {...$$restProps}
+  >
+    <div
+      class="strand-progress__fill"
+      style={isDeterminate ? `width: ${value}%` : undefined}
+    ></div>
+  </div>
+{/if}

package/src/components/Progress/Progress.test.ts

@@ -0,0 +1,58 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Progress from './Progress.svelte'
+
+describe('Progress', () => {
+  it('renders bar with default classes', () => {
+    const { container } = render(Progress)
+    const el = container.querySelector('.strand-progress')
+    expect(el).toBeInTheDocument()
+    expect(el).toHaveClass('strand-progress--bar', 'strand-progress--md')
+    expect(el).toHaveAttribute('role', 'progressbar')
+  })
+
+  it('shows indeterminate when no value', () => {
+    const { container } = render(Progress)
+    expect(container.querySelector('.strand-progress')).toHaveClass('strand-progress--indeterminate')
+  })
+
+  it('shows determinate with value', () => {
+    const { container } = render(Progress, { props: { value: 50 } })
+    const el = container.querySelector('.strand-progress')
+    expect(el).not.toHaveClass('strand-progress--indeterminate')
+    expect(el).toHaveAttribute('aria-valuenow', '50')
+  })
+
+  it('sets fill width for determinate bar', () => {
+    const { container } = render(Progress, { props: { value: 75 } })
+    const fill = container.querySelector('.strand-progress__fill') as HTMLElement
+    expect(fill.style.width).toBe('75%')
+  })
+
+  it('applies size classes', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+    for (const size of sizes) {
+      const { container, unmount } = render(Progress, { props: { size } })
+      expect(container.querySelector('.strand-progress')).toHaveClass(`strand-progress--${size}`)
+      unmount()
+    }
+  })
+
+  it('renders ring variant with SVG', () => {
+    const { container } = render(Progress, { props: { variant: 'ring', value: 50 } })
+    const el = container.querySelector('.strand-progress')
+    expect(el).toHaveClass('strand-progress--ring')
+    expect(container.querySelector('svg')).toBeInTheDocument()
+    expect(container.querySelector('.strand-progress__track')).toBeInTheDocument()
+    expect(container.querySelector('.strand-progress__fill')).toBeInTheDocument()
+  })
+
+  it('has aria-valuemin and aria-valuemax', () => {
+    const { container } = render(Progress, { props: { value: 25 } })
+    const el = container.querySelector('.strand-progress')
+    expect(el).toHaveAttribute('aria-valuemin', '0')
+    expect(el).toHaveAttribute('aria-valuemax', '100')
+  })
+})

package/src/components/Progress/index.ts

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

package/src/components/Radio/Radio.svelte

@@ -0,0 +1,46 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Controlled checked state */
+  export let checked: boolean = false
+  /** Disabled state */
+  export let disabled: boolean = false
+  /** Label text */
+  export let label: string | undefined = undefined
+  /** Radio group name */
+  export let name: string | undefined = undefined
+  /** Radio value */
+  export let value: string | undefined = undefined
+  /** Change handler */
+  export let onchange: ((e: Event) => void) | undefined = undefined
+
+  $: classes = [
+    'strand-radio',
+    checked && 'strand-radio--checked',
+    disabled && 'strand-radio--disabled',
+  ].filter(Boolean).join(' ')
+
+  function handleChange(e: Event) {
+    if (!disabled) {
+      onchange?.(e)
+    }
+  }
+</script>
+
+<label class={classes}>
+  <input
+    type="radio"
+    class="strand-radio__native"
+    {checked}
+    {disabled}
+    {name}
+    {value}
+    on:change={handleChange}
+    {...$$restProps}
+  />
+  <span class="strand-radio__control" aria-hidden="true">
+    <span class="strand-radio__dot"></span>
+  </span>
+  {#if label}
+    <span class="strand-radio__label">{label}</span>
+  {/if}
+</label>

package/src/components/Radio/Radio.test.ts

@@ -0,0 +1,52 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Radio from './Radio.svelte'
+
+describe('Radio', () => {
+  it('renders with default classes', () => {
+    const { container } = render(Radio)
+    expect(container.querySelector('.strand-radio')).toBeInTheDocument()
+    const input = container.querySelector('.strand-radio__native')
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveAttribute('type', 'radio')
+  })
+
+  it('applies checked class', () => {
+    const { container } = render(Radio, { props: { checked: true } })
+    expect(container.querySelector('.strand-radio')).toHaveClass('strand-radio--checked')
+  })
+
+  it('applies disabled class and attribute', () => {
+    const { container } = render(Radio, { props: { disabled: true } })
+    expect(container.querySelector('.strand-radio')).toHaveClass('strand-radio--disabled')
+    expect(container.querySelector('.strand-radio__native')).toBeDisabled()
+  })
+
+  it('renders label text', () => {
+    const { container } = render(Radio, { props: { label: 'Option A' } })
+    const labelEl = container.querySelector('.strand-radio__label')
+    expect(labelEl).toBeInTheDocument()
+    expect(labelEl).toHaveTextContent('Option A')
+  })
+
+  it('does not render label when not provided', () => {
+    const { container } = render(Radio)
+    expect(container.querySelector('.strand-radio__label')).not.toBeInTheDocument()
+  })
+
+  it('passes name and value', () => {
+    const { container } = render(Radio, { props: { name: 'group1', value: 'a' } })
+    const input = container.querySelector('.strand-radio__native')
+    expect(input).toHaveAttribute('name', 'group1')
+    expect(input).toHaveAttribute('value', 'a')
+  })
+
+  it('has control with aria-hidden and dot', () => {
+    const { container } = render(Radio)
+    const control = container.querySelector('.strand-radio__control')
+    expect(control).toHaveAttribute('aria-hidden', 'true')
+    expect(container.querySelector('.strand-radio__dot')).toBeInTheDocument()
+  })
+})

package/src/components/Radio/index.ts

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