@dillingerstaffing/strand-svelte 0.4.1

package/src/components/Card/Card.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 Card from './Card.svelte'
+
+describe('Card', () => {
+  it('renders with default classes', () => {
+    const { container } = render(Card)
+    const el = container.querySelector('.strand-card')
+    expect(el).toBeInTheDocument()
+    expect(el).toHaveClass('strand-card--elevated', 'strand-card--pad-md')
+  })
+
+  it('applies variant classes', () => {
+    const variants = ['elevated', 'outlined', 'interactive'] as const
+    for (const variant of variants) {
+      const { container, unmount } = render(Card, { props: { variant } })
+      expect(container.querySelector('.strand-card')).toHaveClass(`strand-card--${variant}`)
+      unmount()
+    }
+  })
+
+  it('applies padding classes', () => {
+    const paddings = ['none', 'sm', 'md', 'lg'] as const
+    for (const padding of paddings) {
+      const { container, unmount } = render(Card, { props: { padding } })
+      expect(container.querySelector('.strand-card')).toHaveClass(`strand-card--pad-${padding}`)
+      unmount()
+    }
+  })
+})

package/src/components/Card/index.ts

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

package/src/components/Checkbox/Checkbox.svelte

@@ -0,0 +1,62 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Controlled checked state */
+  export let checked: boolean = false
+  /** Indeterminate visual state */
+  export let indeterminate: boolean = false
+  /** Disabled state */
+  export let disabled: boolean = false
+  /** Label text */
+  export let label: string | undefined = undefined
+  /** Change handler */
+  export let onchange: ((e: Event) => void) | undefined = undefined
+
+  let inputEl: HTMLInputElement
+
+  $: classes = [
+    'strand-checkbox',
+    checked && 'strand-checkbox--checked',
+    indeterminate && 'strand-checkbox--indeterminate',
+    disabled && 'strand-checkbox--disabled',
+  ].filter(Boolean).join(' ')
+
+  $: ariaChecked = indeterminate ? 'mixed' : checked ? 'true' : 'false'
+
+  $: if (inputEl) {
+    inputEl.indeterminate = indeterminate
+  }
+
+  function handleChange(e: Event) {
+    if (!disabled) {
+      onchange?.(e)
+    }
+  }
+</script>
+
+<label class={classes}>
+  <input
+    bind:this={inputEl}
+    type="checkbox"
+    class="strand-checkbox__native"
+    {checked}
+    {disabled}
+    aria-checked={ariaChecked}
+    role="checkbox"
+    on:change={handleChange}
+    {...$$restProps}
+  />
+  <span class="strand-checkbox__control" aria-hidden="true">
+    {#if indeterminate}
+      <svg class="strand-checkbox__icon" viewBox="0 0 16 16" fill="none">
+        <line x1="4" y1="8" x2="12" y2="8" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+      </svg>
+    {:else if checked}
+      <svg class="strand-checkbox__icon" viewBox="0 0 16 16" fill="none">
+        <path d="M3.5 8L6.5 11L12.5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    {/if}
+  </span>
+  {#if label}
+    <span class="strand-checkbox__label">{label}</span>
+  {/if}
+</label>

package/src/components/Checkbox/Checkbox.test.ts

@@ -0,0 +1,67 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Checkbox from './Checkbox.svelte'
+
+describe('Checkbox', () => {
+  it('renders with default classes', () => {
+    const { container } = render(Checkbox)
+    expect(container.querySelector('.strand-checkbox')).toBeInTheDocument()
+    const input = container.querySelector('.strand-checkbox__native')
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveAttribute('type', 'checkbox')
+    expect(input).toHaveAttribute('role', 'checkbox')
+  })
+
+  it('applies checked class and aria-checked', () => {
+    const { container } = render(Checkbox, { props: { checked: true } })
+    expect(container.querySelector('.strand-checkbox')).toHaveClass('strand-checkbox--checked')
+    expect(container.querySelector('.strand-checkbox__native')).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('shows checkmark icon when checked', () => {
+    const { container } = render(Checkbox, { props: { checked: true } })
+    expect(container.querySelector('.strand-checkbox__icon')).toBeInTheDocument()
+  })
+
+  it('applies indeterminate class and aria-checked mixed', () => {
+    const { container } = render(Checkbox, { props: { indeterminate: true } })
+    expect(container.querySelector('.strand-checkbox')).toHaveClass('strand-checkbox--indeterminate')
+    expect(container.querySelector('.strand-checkbox__native')).toHaveAttribute('aria-checked', 'mixed')
+  })
+
+  it('shows indeterminate icon', () => {
+    const { container } = render(Checkbox, { props: { indeterminate: true } })
+    expect(container.querySelector('.strand-checkbox__icon')).toBeInTheDocument()
+    expect(container.querySelector('.strand-checkbox__icon line')).toBeInTheDocument()
+  })
+
+  it('applies disabled class and attribute', () => {
+    const { container } = render(Checkbox, { props: { disabled: true } })
+    expect(container.querySelector('.strand-checkbox')).toHaveClass('strand-checkbox--disabled')
+    expect(container.querySelector('.strand-checkbox__native')).toBeDisabled()
+  })
+
+  it('renders label text', () => {
+    const { container } = render(Checkbox, { props: { label: 'Accept terms' } })
+    const labelEl = container.querySelector('.strand-checkbox__label')
+    expect(labelEl).toBeInTheDocument()
+    expect(labelEl).toHaveTextContent('Accept terms')
+  })
+
+  it('does not render label when not provided', () => {
+    const { container } = render(Checkbox)
+    expect(container.querySelector('.strand-checkbox__label')).not.toBeInTheDocument()
+  })
+
+  it('control has aria-hidden', () => {
+    const { container } = render(Checkbox)
+    expect(container.querySelector('.strand-checkbox__control')).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('unchecked state has aria-checked false', () => {
+    const { container } = render(Checkbox)
+    expect(container.querySelector('.strand-checkbox__native')).toHaveAttribute('aria-checked', 'false')
+  })
+})

package/src/components/Checkbox/index.ts

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

package/src/components/CodeBlock/CodeBlock.svelte

@@ -0,0 +1,14 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** The code content to display */
+  export let code: string
+  /** Optional language label (e.g. "html", "css", "bash") */
+  export let language: string | undefined = undefined
+</script>
+
+<div class="strand-code-block" {...$$restProps}>
+  {#if language}
+    <span class="strand-code-block__label">{language}</span>
+  {/if}
+  <pre class="strand-code-block__pre"><code>{code}</code></pre>
+</div>

package/src/components/CodeBlock/CodeBlock.test.ts

@@ -0,0 +1,36 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import CodeBlock from './CodeBlock.svelte'
+
+describe('CodeBlock', () => {
+  it('renders with default class', () => {
+    const { container } = render(CodeBlock, { props: { code: 'const x = 1' } })
+    expect(container.querySelector('.strand-code-block')).toBeInTheDocument()
+  })
+
+  it('renders code content', () => {
+    const { container } = render(CodeBlock, { props: { code: 'console.log("hi")' } })
+    const code = container.querySelector('.strand-code-block__pre code')
+    expect(code).toHaveTextContent('console.log("hi")')
+  })
+
+  it('shows language label when provided', () => {
+    const { container } = render(CodeBlock, { props: { code: 'x = 1', language: 'python' } })
+    const label = container.querySelector('.strand-code-block__label')
+    expect(label).toBeInTheDocument()
+    expect(label).toHaveTextContent('python')
+  })
+
+  it('does not show label when language is not provided', () => {
+    const { container } = render(CodeBlock, { props: { code: 'x = 1' } })
+    expect(container.querySelector('.strand-code-block__label')).not.toBeInTheDocument()
+  })
+
+  it('renders pre and code elements', () => {
+    const { container } = render(CodeBlock, { props: { code: 'test' } })
+    expect(container.querySelector('.strand-code-block__pre')).toBeInTheDocument()
+    expect(container.querySelector('code')).toBeInTheDocument()
+  })
+})

package/src/components/CodeBlock/index.ts

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

package/src/components/Container/Container.svelte

@@ -0,0 +1,14 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Max-width constraint */
+  export let size: 'narrow' | 'default' | 'wide' | 'full' = 'default'
+
+  $: classes = [
+    'strand-container',
+    `strand-container--${size}`,
+  ].filter(Boolean).join(' ')
+</script>
+
+<div class={classes} {...$$restProps}>
+  <slot />
+</div>

package/src/components/Container/Container.test.ts

@@ -0,0 +1,23 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Container from './Container.svelte'
+
+describe('Container', () => {
+  it('renders with default classes', () => {
+    const { container } = render(Container)
+    const el = container.querySelector('.strand-container')
+    expect(el).toBeInTheDocument()
+    expect(el).toHaveClass('strand-container--default')
+  })
+
+  it('applies size classes', () => {
+    const sizes = ['narrow', 'default', 'wide', 'full'] as const
+    for (const size of sizes) {
+      const { container, unmount } = render(Container, { props: { size } })
+      expect(container.querySelector('.strand-container')).toHaveClass(`strand-container--${size}`)
+      unmount()
+    }
+  })
+})

package/src/components/Container/index.ts

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

package/src/components/DataReadout/DataReadout.svelte

@@ -0,0 +1,19 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Overline label text */
+  export let label: string
+  /** The large displayed value */
+  export let value: string | number
+  /** Size variant: sm (compact), md (default), lg (hero) */
+  export let size: 'sm' | 'md' | 'lg' | undefined = undefined
+
+  $: classes = [
+    'strand-data-readout',
+    size && size !== 'md' ? `strand-data-readout--${size}` : '',
+  ].filter(Boolean).join(' ')
+</script>
+
+<div class={classes} {...$$restProps}>
+  <span class="strand-data-readout__label">{label}</span>
+  <span class="strand-data-readout__value">{value}</span>
+</div>

package/src/components/DataReadout/DataReadout.test.ts

@@ -0,0 +1,35 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import DataReadout from './DataReadout.svelte'
+
+describe('DataReadout', () => {
+  it('renders label and value', () => {
+    const { container } = render(DataReadout, { props: { label: 'Revenue', value: '$1.2M' } })
+    expect(container.querySelector('.strand-data-readout')).toBeInTheDocument()
+    expect(container.querySelector('.strand-data-readout__label')).toHaveTextContent('Revenue')
+    expect(container.querySelector('.strand-data-readout__value')).toHaveTextContent('$1.2M')
+  })
+
+  it('renders numeric value', () => {
+    const { container } = render(DataReadout, { props: { label: 'Count', value: 42 } })
+    expect(container.querySelector('.strand-data-readout__value')).toHaveTextContent('42')
+  })
+
+  it('applies sm size class', () => {
+    const { container } = render(DataReadout, { props: { label: 'L', value: 'V', size: 'sm' } })
+    expect(container.querySelector('.strand-data-readout')).toHaveClass('strand-data-readout--sm')
+  })
+
+  it('applies lg size class', () => {
+    const { container } = render(DataReadout, { props: { label: 'L', value: 'V', size: 'lg' } })
+    expect(container.querySelector('.strand-data-readout')).toHaveClass('strand-data-readout--lg')
+  })
+
+  it('does not apply size class for md', () => {
+    const { container } = render(DataReadout, { props: { label: 'L', value: 'V', size: 'md' } })
+    const el = container.querySelector('.strand-data-readout')
+    expect(el!.className).not.toContain('strand-data-readout--md')
+  })
+})

package/src/components/DataReadout/index.ts

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

package/src/components/Dialog/Dialog.svelte

@@ -0,0 +1,131 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  import { onDestroy, tick } from 'svelte'
+
+  /** Whether the dialog is open */
+  export let open: boolean = false
+  /** Optional title rendered in the dialog header */
+  export let title: string | undefined = undefined
+  /** Close when clicking the backdrop */
+  export let closeOnOutsideClick: boolean = true
+  /** Close when pressing Escape */
+  export let closeOnEscape: boolean = true
+  /** Called when the dialog should close */
+  export let onclose: (() => void) | undefined = undefined
+
+  const FOCUSABLE_SELECTOR =
+    'a[href], button:not(:disabled), textarea:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])'
+
+  let dialogIdCounter = 0
+  const titleId = `strand-dialog-title-${++dialogIdCounter}`
+
+  let panelEl: HTMLDivElement
+  let previousFocus: Element | null = null
+  let originalOverflow = ''
+
+  $: if (open) {
+    onOpen()
+  } else {
+    onCloseCleanup()
+  }
+
+  async function onOpen() {
+    previousFocus = document.activeElement
+    originalOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+
+    await tick()
+    if (panelEl) {
+      const focusable = panelEl.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)
+      if (focusable.length > 0) {
+        focusable[0].focus()
+      } else {
+        panelEl.focus()
+      }
+    }
+  }
+
+  function onCloseCleanup() {
+    if (originalOverflow !== undefined) {
+      document.body.style.overflow = originalOverflow
+    }
+    if (previousFocus && previousFocus instanceof HTMLElement) {
+      previousFocus.focus()
+    }
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape' && closeOnEscape) {
+      e.stopPropagation()
+      onclose?.()
+      return
+    }
+
+    if (e.key === 'Tab' && panelEl) {
+      const focusable = Array.from(panelEl.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
+      if (focusable.length === 0) return
+
+      const first = focusable[0]
+      const last = focusable[focusable.length - 1]
+
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault()
+          last.focus()
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault()
+          first.focus()
+        }
+      }
+    }
+  }
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (closeOnOutsideClick && e.target === e.currentTarget) {
+      onclose?.()
+    }
+  }
+
+  onDestroy(() => {
+    if (open) {
+      document.body.style.overflow = originalOverflow
+    }
+  })
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="strand-dialog__backdrop"
+    on:click={handleBackdropClick}
+    on:keydown={handleKeyDown}
+  >
+    <div
+      bind:this={panelEl}
+      class="strand-dialog__panel"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={title ? titleId : undefined}
+      tabindex={-1}
+    >
+      {#if title}
+        <div class="strand-dialog__header">
+          <h2 id={titleId} class="strand-dialog__title">{title}</h2>
+        </div>
+      {/if}
+      <button
+        type="button"
+        class="strand-dialog__close"
+        aria-label="Close"
+        on:click={() => onclose?.()}
+      >
+        &#215;
+      </button>
+      <div class="strand-dialog__body">
+        <slot />
+      </div>
+    </div>
+  </div>
+{/if}

package/src/components/Dialog/Dialog.test.ts

@@ -0,0 +1,77 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect, vi } from 'vitest'
+import { render, fireEvent } from '@testing-library/svelte'
+import Dialog from './Dialog.svelte'
+
+describe('Dialog', () => {
+  it('does not render when closed', () => {
+    const { container } = render(Dialog, { props: { open: false } })
+    expect(container.querySelector('.strand-dialog__backdrop')).not.toBeInTheDocument()
+  })
+
+  it('renders backdrop and panel when open', () => {
+    const { container } = render(Dialog, { props: { open: true } })
+    expect(container.querySelector('.strand-dialog__backdrop')).toBeInTheDocument()
+    const panel = container.querySelector('.strand-dialog__panel')
+    expect(panel).toBeInTheDocument()
+    expect(panel).toHaveAttribute('role', 'dialog')
+    expect(panel).toHaveAttribute('aria-modal', 'true')
+  })
+
+  it('renders title when provided', () => {
+    const { container } = render(Dialog, { props: { open: true, title: 'Confirm' } })
+    const header = container.querySelector('.strand-dialog__header')
+    expect(header).toBeInTheDocument()
+    const titleEl = container.querySelector('.strand-dialog__title')
+    expect(titleEl).toHaveTextContent('Confirm')
+    const panel = container.querySelector('.strand-dialog__panel')
+    expect(panel).toHaveAttribute('aria-labelledby', titleEl!.id)
+  })
+
+  it('does not render title when not provided', () => {
+    const { container } = render(Dialog, { props: { open: true } })
+    expect(container.querySelector('.strand-dialog__header')).not.toBeInTheDocument()
+    expect(container.querySelector('.strand-dialog__panel')).not.toHaveAttribute('aria-labelledby')
+  })
+
+  it('has close button', () => {
+    const { container } = render(Dialog, { props: { open: true } })
+    const close = container.querySelector('.strand-dialog__close')
+    expect(close).toBeInTheDocument()
+    expect(close).toHaveAttribute('aria-label', 'Close')
+  })
+
+  it('fires onclose on close button click', async () => {
+    const onclose = vi.fn()
+    const { container } = render(Dialog, { props: { open: true, onclose } })
+    await fireEvent.click(container.querySelector('.strand-dialog__close')!)
+    expect(onclose).toHaveBeenCalled()
+  })
+
+  it('fires onclose on backdrop click', async () => {
+    const onclose = vi.fn()
+    const { container } = render(Dialog, { props: { open: true, onclose } })
+    await fireEvent.click(container.querySelector('.strand-dialog__backdrop')!)
+    expect(onclose).toHaveBeenCalled()
+  })
+
+  it('fires onclose on Escape key', async () => {
+    const onclose = vi.fn()
+    const { container } = render(Dialog, { props: { open: true, onclose } })
+    await fireEvent.keyDown(container.querySelector('.strand-dialog__backdrop')!, { key: 'Escape' })
+    expect(onclose).toHaveBeenCalled()
+  })
+
+  it('does not fire onclose on Escape when closeOnEscape is false', async () => {
+    const onclose = vi.fn()
+    const { container } = render(Dialog, { props: { open: true, closeOnEscape: false, onclose } })
+    await fireEvent.keyDown(container.querySelector('.strand-dialog__backdrop')!, { key: 'Escape' })
+    expect(onclose).not.toHaveBeenCalled()
+  })
+
+  it('has dialog body', () => {
+    const { container } = render(Dialog, { props: { open: true } })
+    expect(container.querySelector('.strand-dialog__body')).toBeInTheDocument()
+  })
+})

package/src/components/Dialog/index.ts

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

package/src/components/Divider/Divider.svelte

@@ -0,0 +1,36 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Separator direction */
+  export let direction: 'horizontal' | 'vertical' = 'horizontal'
+  /** Optional label text displayed in the middle of the line */
+  export let label: string | undefined = undefined
+
+  $: isVertical = direction === 'vertical'
+</script>
+
+{#if isVertical}
+  <div
+    role="separator"
+    aria-orientation="vertical"
+    class={['strand-divider', 'strand-divider--vertical'].join(' ')}
+    {...$$restProps}
+  ></div>
+{:else if label}
+  <div
+    role="separator"
+    aria-orientation="horizontal"
+    class={['strand-divider', 'strand-divider--horizontal', 'strand-divider--labeled'].join(' ')}
+    {...$$restProps}
+  >
+    <span class="strand-divider__line"></span>
+    <span class="strand-divider__label">{label}</span>
+    <span class="strand-divider__line"></span>
+  </div>
+{:else}
+  <hr
+    role="separator"
+    aria-orientation="horizontal"
+    class={['strand-divider', 'strand-divider--horizontal'].join(' ')}
+    {...$$restProps}
+  />
+{/if}

package/src/components/Divider/Divider.test.ts

@@ -0,0 +1,34 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Divider from './Divider.svelte'
+
+describe('Divider', () => {
+  it('renders horizontal hr by default', () => {
+    const { container } = render(Divider)
+    const el = container.querySelector('.strand-divider')
+    expect(el).toBeInTheDocument()
+    expect(el!.tagName).toBe('HR')
+    expect(el).toHaveClass('strand-divider--horizontal')
+    expect(el).toHaveAttribute('role', 'separator')
+    expect(el).toHaveAttribute('aria-orientation', 'horizontal')
+  })
+
+  it('renders vertical divider', () => {
+    const { container } = render(Divider, { props: { direction: 'vertical' } })
+    const el = container.querySelector('.strand-divider')
+    expect(el).toHaveClass('strand-divider--vertical')
+    expect(el).toHaveAttribute('aria-orientation', 'vertical')
+  })
+
+  it('renders labeled horizontal divider', () => {
+    const { container } = render(Divider, { props: { label: 'OR' } })
+    const el = container.querySelector('.strand-divider')
+    expect(el).toHaveClass('strand-divider--labeled')
+    expect(el!.tagName).toBe('DIV')
+    expect(container.querySelector('.strand-divider__label')).toHaveTextContent('OR')
+    const lines = container.querySelectorAll('.strand-divider__line')
+    expect(lines.length).toBe(2)
+  })
+})

package/src/components/Divider/index.ts

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

package/src/components/FormField/FormField.svelte

@@ -0,0 +1,39 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Label text */
+  export let label: string
+  /** Associates the label with a form control */
+  export let htmlFor: string
+  /** Hint text displayed below the input */
+  export let hint: string | undefined = undefined
+  /** Error text displayed below the input (replaces hint) */
+  export let error: string | undefined = undefined
+  /** Show required indicator */
+  export let required: boolean = false
+
+  $: classes = [
+    'strand-form-field',
+    error && 'strand-form-field--error',
+  ].filter(Boolean).join(' ')
+</script>
+
+<div class={classes} {...$$restProps}>
+  <label class="strand-form-field__label" for={htmlFor}>
+    {label}
+    {#if required}
+      <span class="strand-form-field__required" aria-hidden="true">*</span>
+    {/if}
+  </label>
+  <div class="strand-form-field__control">
+    <slot />
+  </div>
+  {#if error}
+    <p class="strand-form-field__error" id={`${htmlFor}-error`} role="alert">
+      {error}
+    </p>
+  {:else if hint}
+    <p class="strand-form-field__hint" id={`${htmlFor}-hint`}>
+      {hint}
+    </p>
+  {/if}
+</div>