@dillingerstaffing/strand-svelte 0.4.1

package/src/components/Table/Table.test.ts

@@ -0,0 +1,88 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect, vi } from 'vitest'
+import { render, fireEvent } from '@testing-library/svelte'
+import Table from './Table.svelte'
+
+const testColumns = [
+  { key: 'name', header: 'Name', sortable: true },
+  { key: 'age', header: 'Age' },
+  { key: 'role', header: 'Role', sortable: true, width: '200px' },
+]
+
+const testData = [
+  { name: 'Alice', age: 30, role: 'Engineer' },
+  { name: 'Bob', age: 25, role: 'Designer' },
+]
+
+describe('Table', () => {
+  it('renders with wrapper and table', () => {
+    const { container } = render(Table, { props: { columns: testColumns, data: testData } })
+    expect(container.querySelector('.strand-table-wrapper')).toBeInTheDocument()
+    expect(container.querySelector('.strand-table')).toBeInTheDocument()
+  })
+
+  it('renders column headers', () => {
+    const { container } = render(Table, { props: { columns: testColumns, data: testData } })
+    const headers = container.querySelectorAll('.strand-table__th')
+    expect(headers.length).toBe(3)
+  })
+
+  it('renders data rows', () => {
+    const { container } = render(Table, { props: { columns: testColumns, data: testData } })
+    const rows = container.querySelectorAll('.strand-table__row')
+    expect(rows.length).toBe(2)
+    const cells = rows[0].querySelectorAll('.strand-table__td')
+    expect(cells[0]).toHaveTextContent('Alice')
+    expect(cells[1]).toHaveTextContent('30')
+  })
+
+  it('renders sort button for sortable columns', () => {
+    const { container } = render(Table, { props: { columns: testColumns, data: testData } })
+    const sortBtns = container.querySelectorAll('.strand-table__sort-btn')
+    expect(sortBtns.length).toBe(2)
+    expect(sortBtns[0]).toHaveAttribute('aria-label', 'Sort by Name')
+  })
+
+  it('does not render sort button for non-sortable columns', () => {
+    const { container } = render(Table, { props: { columns: testColumns, data: testData } })
+    const headers = container.querySelectorAll('.strand-table__th')
+    expect(headers[1].querySelector('.strand-table__sort-btn')).not.toBeInTheDocument()
+  })
+
+  it('shows sort indicator', () => {
+    const { container } = render(Table, { props: { columns: testColumns, data: testData } })
+    const indicator = container.querySelector('.strand-table__sort-indicator')
+    expect(indicator).toBeInTheDocument()
+    expect(indicator).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('fires onsort callback with key and direction', async () => {
+    const onsort = vi.fn()
+    const { container } = render(Table, { props: { columns: testColumns, data: testData, onsort } })
+    const sortBtns = container.querySelectorAll('.strand-table__sort-btn')
+    await fireEvent.click(sortBtns[0])
+    expect(onsort).toHaveBeenCalledWith('name', 'asc')
+  })
+
+  it('toggles sort direction on second click', async () => {
+    const onsort = vi.fn()
+    const { container } = render(Table, { props: { columns: testColumns, data: testData, onsort } })
+    const sortBtns = container.querySelectorAll('.strand-table__sort-btn')
+    await fireEvent.click(sortBtns[0])
+    await fireEvent.click(sortBtns[0])
+    expect(onsort).toHaveBeenNthCalledWith(2, 'name', 'desc')
+  })
+
+  it('applies column width', () => {
+    const { container } = render(Table, { props: { columns: testColumns, data: testData } })
+    const headers = container.querySelectorAll('.strand-table__th')
+    expect((headers[2] as HTMLElement).style.width).toBe('200px')
+  })
+
+  it('has thead and tbody', () => {
+    const { container } = render(Table, { props: { columns: testColumns, data: testData } })
+    expect(container.querySelector('.strand-table__head')).toBeInTheDocument()
+    expect(container.querySelector('.strand-table__body')).toBeInTheDocument()
+  })
+})

package/src/components/Table/index.ts

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

package/src/components/Tabs/Tabs.svelte

@@ -0,0 +1,89 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  export interface TabItem {
+    id: string
+    label: string
+  }
+
+  /** Tab definitions */
+  export let tabs: TabItem[] = []
+  /** Currently active tab id (controlled) */
+  export let activeTab: string
+  /** Called when active tab changes */
+  export let onchange: ((id: string) => void) | undefined = undefined
+
+  let tablistEl: HTMLDivElement
+
+  function handleTabClick(id: string) {
+    onchange?.(id)
+  }
+
+  function focusAndSelect(index: number) {
+    const tab = tabs[index]
+    if (tab) {
+      onchange?.(tab.id)
+      const buttons = tablistEl?.querySelectorAll<HTMLButtonElement>('[role="tab"]')
+      buttons?.[index]?.focus()
+    }
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    const currentIndex = tabs.findIndex((t) => t.id === activeTab)
+    let nextIndex: number | null = null
+
+    switch (e.key) {
+      case 'ArrowRight':
+        nextIndex = (currentIndex + 1) % tabs.length
+        break
+      case 'ArrowLeft':
+        nextIndex = (currentIndex - 1 + tabs.length) % tabs.length
+        break
+      case 'Home':
+        nextIndex = 0
+        break
+      case 'End':
+        nextIndex = tabs.length - 1
+        break
+      default:
+        return
+    }
+
+    e.preventDefault()
+    focusAndSelect(nextIndex)
+  }
+</script>
+
+<div class="strand-tabs" {...$$restProps}>
+  <div bind:this={tablistEl} role="tablist" on:keydown={handleKeyDown}>
+    {#each tabs as tab (tab.id)}
+      {@const isActive = tab.id === activeTab}
+      <button
+        id={`tab-${tab.id}`}
+        role="tab"
+        type="button"
+        class={['strand-tabs__tab', isActive && 'strand-tabs__tab--active'].filter(Boolean).join(' ')}
+        aria-selected={isActive ? 'true' : 'false'}
+        aria-controls={`panel-${tab.id}`}
+        tabindex={isActive ? 0 : -1}
+        on:click={() => handleTabClick(tab.id)}
+      >
+        {tab.label}
+      </button>
+    {/each}
+  </div>
+
+  {#each tabs as tab (tab.id)}
+    {@const isActive = tab.id === activeTab}
+    <div
+      id={`panel-${tab.id}`}
+      role="tabpanel"
+      aria-labelledby={`tab-${tab.id}`}
+      hidden={!isActive}
+      tabindex={0}
+    >
+      {#if isActive}
+        <slot />
+      {/if}
+    </div>
+  {/each}
+</div>

package/src/components/Tabs/Tabs.test.ts

@@ -0,0 +1,66 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect, vi } from 'vitest'
+import { render, fireEvent } from '@testing-library/svelte'
+import Tabs from './Tabs.svelte'
+
+const testTabs = [
+  { id: 'one', label: 'Tab One' },
+  { id: 'two', label: 'Tab Two' },
+  { id: 'three', label: 'Tab Three' },
+]
+
+describe('Tabs', () => {
+  it('renders with tablist role', () => {
+    const { container } = render(Tabs, { props: { tabs: testTabs, activeTab: 'one' } })
+    expect(container.querySelector('.strand-tabs')).toBeInTheDocument()
+    expect(container.querySelector('[role="tablist"]')).toBeInTheDocument()
+  })
+
+  it('renders tab buttons', () => {
+    const { container } = render(Tabs, { props: { tabs: testTabs, activeTab: 'one' } })
+    const buttons = container.querySelectorAll('[role="tab"]')
+    expect(buttons.length).toBe(3)
+    expect(buttons[0]).toHaveTextContent('Tab One')
+    expect(buttons[1]).toHaveTextContent('Tab Two')
+  })
+
+  it('marks active tab', () => {
+    const { container } = render(Tabs, { props: { tabs: testTabs, activeTab: 'two' } })
+    const buttons = container.querySelectorAll('[role="tab"]')
+    expect(buttons[0]).toHaveAttribute('aria-selected', 'false')
+    expect(buttons[1]).toHaveAttribute('aria-selected', 'true')
+    expect(buttons[1]).toHaveClass('strand-tabs__tab--active')
+  })
+
+  it('sets tabindex on active and inactive tabs', () => {
+    const { container } = render(Tabs, { props: { tabs: testTabs, activeTab: 'one' } })
+    const buttons = container.querySelectorAll('[role="tab"]')
+    expect(buttons[0]).toHaveAttribute('tabindex', '0')
+    expect(buttons[1]).toHaveAttribute('tabindex', '-1')
+  })
+
+  it('renders panels with correct ARIA', () => {
+    const { container } = render(Tabs, { props: { tabs: testTabs, activeTab: 'one' } })
+    const panels = container.querySelectorAll('[role="tabpanel"]')
+    expect(panels.length).toBe(3)
+    expect(panels[0]).toHaveAttribute('aria-labelledby', 'tab-one')
+    expect(panels[0]).not.toHaveAttribute('hidden')
+    expect(panels[1]).toHaveAttribute('hidden', '')
+  })
+
+  it('fires onchange callback on tab click', async () => {
+    const onchange = vi.fn()
+    const { container } = render(Tabs, { props: { tabs: testTabs, activeTab: 'one', onchange } })
+    const buttons = container.querySelectorAll('[role="tab"]')
+    await fireEvent.click(buttons[1])
+    expect(onchange).toHaveBeenCalledWith('two')
+  })
+
+  it('sets aria-controls on tabs', () => {
+    const { container } = render(Tabs, { props: { tabs: testTabs, activeTab: 'one' } })
+    const buttons = container.querySelectorAll('[role="tab"]')
+    expect(buttons[0]).toHaveAttribute('aria-controls', 'panel-one')
+    expect(buttons[0]).toHaveAttribute('id', 'tab-one')
+  })
+})

package/src/components/Tabs/index.ts

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

package/src/components/Tag/Tag.svelte

@@ -0,0 +1,33 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Visual style variant */
+  export let variant: 'solid' | 'outlined' = 'solid'
+  /** Color status */
+  export let status: 'default' | 'teal' | 'blue' | 'amber' | 'red' = 'default'
+  /** Show remove button */
+  export let removable: boolean = false
+  /** Called when remove button is clicked */
+  export let onremove: (() => void) | undefined = undefined
+
+  $: classes = [
+    'strand-tag',
+    `strand-tag--${variant}`,
+    `strand-tag--${status}`,
+  ].filter(Boolean).join(' ')
+</script>
+
+<span class={classes} {...$$restProps}>
+  <span class="strand-tag__text"><slot /></span>
+  {#if removable}
+    <button
+      type="button"
+      class="strand-tag__remove"
+      aria-label="Remove"
+      on:click={() => onremove?.()}
+    >
+      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+        <path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      </svg>
+    </button>
+  {/if}
+</span>

package/src/components/Tag/Tag.test.ts

@@ -0,0 +1,63 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect, vi } from 'vitest'
+import { render, fireEvent } from '@testing-library/svelte'
+import Tag from './Tag.svelte'
+
+describe('Tag', () => {
+  it('renders with default classes', () => {
+    const { container } = render(Tag)
+    const el = container.querySelector('.strand-tag')
+    expect(el).toBeInTheDocument()
+    expect(el).toHaveClass('strand-tag--solid', 'strand-tag--default')
+  })
+
+  it('applies variant classes', () => {
+    const variants = ['solid', 'outlined'] as const
+    for (const variant of variants) {
+      const { container, unmount } = render(Tag, { props: { variant } })
+      expect(container.querySelector('.strand-tag')).toHaveClass(`strand-tag--${variant}`)
+      unmount()
+    }
+  })
+
+  it('applies status classes', () => {
+    const statuses = ['default', 'teal', 'blue', 'amber', 'red'] as const
+    for (const status of statuses) {
+      const { container, unmount } = render(Tag, { props: { status } })
+      expect(container.querySelector('.strand-tag')).toHaveClass(`strand-tag--${status}`)
+      unmount()
+    }
+  })
+
+  it('renders text content in .strand-tag__text', () => {
+    const { container } = render(Tag)
+    expect(container.querySelector('.strand-tag__text')).toBeInTheDocument()
+  })
+
+  it('shows remove button when removable', () => {
+    const { container } = render(Tag, { props: { removable: true } })
+    const btn = container.querySelector('.strand-tag__remove')
+    expect(btn).toBeInTheDocument()
+    expect(btn).toHaveAttribute('aria-label', 'Remove')
+  })
+
+  it('does not show remove button by default', () => {
+    const { container } = render(Tag)
+    expect(container.querySelector('.strand-tag__remove')).not.toBeInTheDocument()
+  })
+
+  it('fires onremove callback on button click', async () => {
+    const onremove = vi.fn()
+    const { container } = render(Tag, { props: { removable: true, onremove } })
+    const btn = container.querySelector('.strand-tag__remove')!
+    await fireEvent.click(btn)
+    expect(onremove).toHaveBeenCalled()
+  })
+
+  it('remove button svg is aria-hidden', () => {
+    const { container } = render(Tag, { props: { removable: true } })
+    const svg = container.querySelector('.strand-tag__remove svg')
+    expect(svg).toHaveAttribute('aria-hidden', 'true')
+  })
+})

package/src/components/Tag/index.ts

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

package/src/components/Textarea/Textarea.svelte

@@ -0,0 +1,53 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Auto-resize to fit content */
+  export let autoResize: boolean = false
+  /** Show character count (requires maxLength) */
+  export let showCount: boolean = false
+  /** Show error styling */
+  export let error: boolean = false
+  /** Maximum character count */
+  export let maxLength: number | undefined = undefined
+  /** Disabled state */
+  export let disabled: boolean = false
+  /** Controlled value */
+  export let value: string = ''
+
+  let textareaEl: HTMLTextAreaElement
+
+  $: wrapperClasses = [
+    'strand-textarea',
+    error && 'strand-textarea--error',
+    disabled && 'strand-textarea--disabled',
+    autoResize && 'strand-textarea--auto-resize',
+  ].filter(Boolean).join(' ')
+
+  $: currentLength = typeof value === 'string' ? value.length : 0
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLTextAreaElement
+    value = target.value
+    if (autoResize && textareaEl) {
+      textareaEl.style.height = 'auto'
+      textareaEl.style.height = `${textareaEl.scrollHeight}px`
+    }
+  }
+</script>
+
+<div class={wrapperClasses}>
+  <textarea
+    bind:this={textareaEl}
+    class="strand-textarea__field"
+    {disabled}
+    aria-invalid={error ? 'true' : undefined}
+    maxlength={maxLength}
+    {value}
+    on:input={handleInput}
+    {...$$restProps}
+  ></textarea>
+  {#if showCount && maxLength != null}
+    <span class="strand-textarea__count" aria-live="polite">
+      {currentLength}/{maxLength}
+    </span>
+  {/if}
+</div>

package/src/components/Textarea/Textarea.test.ts

@@ -0,0 +1,53 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Textarea from './Textarea.svelte'
+
+describe('Textarea', () => {
+  it('renders with default classes', () => {
+    const { container } = render(Textarea)
+    expect(container.querySelector('.strand-textarea')).toBeInTheDocument()
+    expect(container.querySelector('.strand-textarea__field')).toBeInTheDocument()
+  })
+
+  it('applies error class and aria-invalid', () => {
+    const { container } = render(Textarea, { props: { error: true } })
+    expect(container.querySelector('.strand-textarea')).toHaveClass('strand-textarea--error')
+    expect(container.querySelector('.strand-textarea__field')).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('applies disabled class and attribute', () => {
+    const { container } = render(Textarea, { props: { disabled: true } })
+    expect(container.querySelector('.strand-textarea')).toHaveClass('strand-textarea--disabled')
+    expect(container.querySelector('.strand-textarea__field')).toBeDisabled()
+  })
+
+  it('applies auto-resize class', () => {
+    const { container } = render(Textarea, { props: { autoResize: true } })
+    expect(container.querySelector('.strand-textarea')).toHaveClass('strand-textarea--auto-resize')
+  })
+
+  it('shows character count when showCount and maxLength', () => {
+    const { container } = render(Textarea, { props: { showCount: true, maxLength: 100, value: 'hello' } })
+    const count = container.querySelector('.strand-textarea__count')
+    expect(count).toBeInTheDocument()
+    expect(count).toHaveTextContent('5/100')
+    expect(count).toHaveAttribute('aria-live', 'polite')
+  })
+
+  it('does not show count without maxLength', () => {
+    const { container } = render(Textarea, { props: { showCount: true } })
+    expect(container.querySelector('.strand-textarea__count')).not.toBeInTheDocument()
+  })
+
+  it('does not show count when showCount is false', () => {
+    const { container } = render(Textarea, { props: { maxLength: 100 } })
+    expect(container.querySelector('.strand-textarea__count')).not.toBeInTheDocument()
+  })
+
+  it('does not set aria-invalid when no error', () => {
+    const { container } = render(Textarea)
+    expect(container.querySelector('.strand-textarea__field')).not.toHaveAttribute('aria-invalid')
+  })
+})

package/src/components/Textarea/index.ts

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

package/src/components/Toast/Toast.svelte

@@ -0,0 +1,29 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  import type { ToastStatus } from './useToast'
+
+  /** Visual status */
+  export let status: ToastStatus = 'info'
+  /** Toast message text */
+  export let message: string
+  /** Called when dismiss button is clicked */
+  export let ondismiss: (() => void) | undefined = undefined
+
+  $: isUrgent = status === 'error' || status === 'warning'
+  $: classes = [
+    'strand-toast',
+    `strand-toast--${status}`,
+  ].filter(Boolean).join(' ')
+</script>
+
+<div class={classes} role="status" aria-live={isUrgent ? 'assertive' : 'polite'} {...$$restProps}>
+  <span class="strand-toast__message">{message}</span>
+  <button
+    type="button"
+    class="strand-toast__dismiss"
+    aria-label="Dismiss"
+    on:click={() => ondismiss?.()}
+  >
+    &#215;
+  </button>
+</div>

package/src/components/Toast/Toast.test.ts

@@ -0,0 +1,60 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect, vi } from 'vitest'
+import { render, fireEvent } from '@testing-library/svelte'
+import Toast from './Toast.svelte'
+
+describe('Toast', () => {
+  it('renders with default classes', () => {
+    const { container } = render(Toast, { props: { message: 'Hello' } })
+    const el = container.querySelector('.strand-toast')
+    expect(el).toBeInTheDocument()
+    expect(el).toHaveClass('strand-toast--info')
+    expect(el).toHaveAttribute('role', 'status')
+    expect(el).toHaveAttribute('aria-live', 'polite')
+  })
+
+  it('renders message text', () => {
+    const { container } = render(Toast, { props: { message: 'Saved!' } })
+    expect(container.querySelector('.strand-toast__message')).toHaveTextContent('Saved!')
+  })
+
+  it('applies status classes', () => {
+    const statuses = ['info', 'success', 'warning', 'error'] as const
+    for (const status of statuses) {
+      const { container, unmount } = render(Toast, { props: { message: 'Test', status } })
+      expect(container.querySelector('.strand-toast')).toHaveClass(`strand-toast--${status}`)
+      unmount()
+    }
+  })
+
+  it('uses assertive aria-live for error and warning', () => {
+    for (const status of ['error', 'warning'] as const) {
+      const { container, unmount } = render(Toast, { props: { message: 'Test', status } })
+      expect(container.querySelector('.strand-toast')).toHaveAttribute('aria-live', 'assertive')
+      unmount()
+    }
+  })
+
+  it('uses polite aria-live for info and success', () => {
+    for (const status of ['info', 'success'] as const) {
+      const { container, unmount } = render(Toast, { props: { message: 'Test', status } })
+      expect(container.querySelector('.strand-toast')).toHaveAttribute('aria-live', 'polite')
+      unmount()
+    }
+  })
+
+  it('has dismiss button with aria-label', () => {
+    const { container } = render(Toast, { props: { message: 'Test' } })
+    const btn = container.querySelector('.strand-toast__dismiss')
+    expect(btn).toBeInTheDocument()
+    expect(btn).toHaveAttribute('aria-label', 'Dismiss')
+  })
+
+  it('fires ondismiss callback', async () => {
+    const ondismiss = vi.fn()
+    const { container } = render(Toast, { props: { message: 'Test', ondismiss } })
+    await fireEvent.click(container.querySelector('.strand-toast__dismiss')!)
+    expect(ondismiss).toHaveBeenCalled()
+  })
+})

package/src/components/Toast/ToastProvider.svelte

@@ -0,0 +1,45 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  import { onDestroy } from 'svelte'
+  import { createToastContext } from './useToast'
+  import type { ToastEntry } from './useToast'
+
+  const ctx = createToastContext()
+  const { toasts, removeToast } = ctx
+
+  let toastList: ToastEntry[] = []
+  const unsubscribe = toasts.subscribe((value) => {
+    toastList = value
+  })
+
+  function isUrgent(status: string): boolean {
+    return status === 'error' || status === 'warning'
+  }
+
+  onDestroy(() => {
+    unsubscribe()
+  })
+</script>
+
+<slot />
+{#if toastList.length > 0}
+  <div class="strand-toast__container">
+    {#each toastList as entry (entry.id)}
+      <div
+        class={['strand-toast', `strand-toast--${entry.status}`].join(' ')}
+        role="status"
+        aria-live={isUrgent(entry.status) ? 'assertive' : 'polite'}
+      >
+        <span class="strand-toast__message">{entry.message}</span>
+        <button
+          type="button"
+          class="strand-toast__dismiss"
+          aria-label="Dismiss"
+          on:click={() => removeToast(entry.id)}
+        >
+          &#215;
+        </button>
+      </div>
+    {/each}
+  </div>
+{/if}

package/src/components/Toast/index.ts

@@ -0,0 +1,5 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+export { default as Toast } from './Toast.svelte'
+export { default as ToastProvider } from './ToastProvider.svelte'
+export { createToastContext, getToastContext } from './useToast'
+export type { ToastStatus, ToastOptions, ToastEntry, ToastContextValue } from './useToast'