@dillingerstaffing/strand-svelte 0.4.1

package/src/components/Section/Section.svelte

@@ -0,0 +1,17 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Padding variant */
+  export let variant: 'standard' | 'hero' = 'standard'
+  /** Surface background */
+  export let background: 'primary' | 'elevated' | 'recessed' = 'primary'
+
+  $: classes = [
+    'strand-section',
+    `strand-section--${variant}`,
+    `strand-section--bg-${background}`,
+  ].filter(Boolean).join(' ')
+</script>
+
+<section class={classes} {...$$restProps}>
+  <slot />
+</section>

package/src/components/Section/Section.test.ts

@@ -0,0 +1,29 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Section from './Section.svelte'
+
+describe('Section', () => {
+  it('renders with default classes', () => {
+    const { container } = render(Section)
+    const el = container.querySelector('.strand-section')
+    expect(el).toBeInTheDocument()
+    expect(el!.tagName).toBe('SECTION')
+    expect(el).toHaveClass('strand-section--standard', 'strand-section--bg-primary')
+  })
+
+  it('applies variant classes', () => {
+    const { container } = render(Section, { props: { variant: 'hero' } })
+    expect(container.querySelector('.strand-section')).toHaveClass('strand-section--hero')
+  })
+
+  it('applies background classes', () => {
+    const backgrounds = ['primary', 'elevated', 'recessed'] as const
+    for (const background of backgrounds) {
+      const { container, unmount } = render(Section, { props: { background } })
+      expect(container.querySelector('.strand-section')).toHaveClass(`strand-section--bg-${background}`)
+      unmount()
+    }
+  })
+})

package/src/components/Section/index.ts

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

package/src/components/Select/Select.svelte

@@ -0,0 +1,45 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  export interface SelectOption {
+    value: string
+    label: string
+  }
+
+  /** Array of options to display */
+  export let options: SelectOption[] = []
+  /** Disabled state */
+  export let disabled: boolean = false
+  /** Currently selected value */
+  export let value: string | undefined = undefined
+  /** Show error styling */
+  export let error: boolean = false
+  /** Placeholder text shown as first disabled option */
+  export let placeholder: string | undefined = undefined
+  /** Change handler */
+  export let onchange: ((e: Event) => void) | undefined = undefined
+
+  $: wrapperClasses = [
+    'strand-select',
+    error && 'strand-select--error',
+    disabled && 'strand-select--disabled',
+  ].filter(Boolean).join(' ')
+</script>
+
+<div class={wrapperClasses}>
+  <select
+    class="strand-select__field"
+    {value}
+    {disabled}
+    aria-invalid={error ? 'true' : undefined}
+    on:change={onchange}
+    {...$$restProps}
+  >
+    {#if placeholder}
+      <option value="" disabled>{placeholder}</option>
+    {/if}
+    {#each options as opt (opt.value)}
+      <option value={opt.value}>{opt.label}</option>
+    {/each}
+  </select>
+  <span class="strand-select__arrow" aria-hidden="true"></span>
+</div>

package/src/components/Select/Select.test.ts

@@ -0,0 +1,59 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Select from './Select.svelte'
+
+const testOptions = [
+  { value: 'a', label: 'Option A' },
+  { value: 'b', label: 'Option B' },
+  { value: 'c', label: 'Option C' },
+]
+
+describe('Select', () => {
+  it('renders with default classes', () => {
+    const { container } = render(Select, { props: { options: testOptions } })
+    expect(container.querySelector('.strand-select')).toBeInTheDocument()
+    expect(container.querySelector('.strand-select__field')).toBeInTheDocument()
+  })
+
+  it('renders options', () => {
+    const { container } = render(Select, { props: { options: testOptions } })
+    const optionEls = container.querySelectorAll('option')
+    expect(optionEls.length).toBe(3)
+    expect(optionEls[0]).toHaveTextContent('Option A')
+    expect(optionEls[1]).toHaveTextContent('Option B')
+  })
+
+  it('renders placeholder as disabled option', () => {
+    const { container } = render(Select, { props: { options: testOptions, placeholder: 'Choose...' } })
+    const optionEls = container.querySelectorAll('option')
+    expect(optionEls.length).toBe(4)
+    expect(optionEls[0]).toHaveTextContent('Choose...')
+    expect(optionEls[0]).toBeDisabled()
+  })
+
+  it('applies error class and aria-invalid', () => {
+    const { container } = render(Select, { props: { options: testOptions, error: true } })
+    expect(container.querySelector('.strand-select')).toHaveClass('strand-select--error')
+    expect(container.querySelector('.strand-select__field')).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('applies disabled class and attribute', () => {
+    const { container } = render(Select, { props: { options: testOptions, disabled: true } })
+    expect(container.querySelector('.strand-select')).toHaveClass('strand-select--disabled')
+    expect(container.querySelector('.strand-select__field')).toBeDisabled()
+  })
+
+  it('has arrow indicator with aria-hidden', () => {
+    const { container } = render(Select, { props: { options: testOptions } })
+    const arrow = container.querySelector('.strand-select__arrow')
+    expect(arrow).toBeInTheDocument()
+    expect(arrow).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('does not set aria-invalid when no error', () => {
+    const { container } = render(Select, { props: { options: testOptions } })
+    expect(container.querySelector('.strand-select__field')).not.toHaveAttribute('aria-invalid')
+  })
+})

package/src/components/Select/index.ts

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

package/src/components/Skeleton/Skeleton.svelte

@@ -0,0 +1,25 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Shape variant */
+  export let variant: 'text' | 'rectangle' | 'circle' = 'text'
+  /** CSS width value */
+  export let width: string | undefined = undefined
+  /** CSS height value */
+  export let height: string | undefined = undefined
+
+  $: effectiveWidth = width ?? (variant === 'text' ? '100%' : undefined)
+  $: effectiveHeight = variant === 'circle' ? effectiveWidth : height
+
+  $: classes = [
+    'strand-skeleton',
+    `strand-skeleton--${variant}`,
+    'strand-skeleton--shimmer',
+  ].filter(Boolean).join(' ')
+
+  $: inlineStyle = [
+    effectiveWidth ? `width: ${effectiveWidth}` : '',
+    effectiveHeight ? `height: ${effectiveHeight}` : '',
+  ].filter(Boolean).join('; ')
+</script>
+
+<div class={classes} aria-hidden="true" style={inlineStyle || undefined} {...$$restProps}></div>

package/src/components/Skeleton/Skeleton.test.ts

@@ -0,0 +1,44 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Skeleton from './Skeleton.svelte'
+
+describe('Skeleton', () => {
+  it('renders with default classes', () => {
+    const { container } = render(Skeleton)
+    const el = container.querySelector('.strand-skeleton')
+    expect(el).toBeInTheDocument()
+    expect(el).toHaveClass('strand-skeleton--text', 'strand-skeleton--shimmer')
+    expect(el).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('applies variant classes', () => {
+    const variants = ['text', 'rectangle', 'circle'] as const
+    for (const variant of variants) {
+      const { container, unmount } = render(Skeleton, { props: { variant } })
+      expect(container.querySelector('.strand-skeleton')).toHaveClass(`strand-skeleton--${variant}`)
+      unmount()
+    }
+  })
+
+  it('defaults text variant to 100% width', () => {
+    const { container } = render(Skeleton)
+    const el = container.querySelector('.strand-skeleton') as HTMLElement
+    expect(el.style.width).toBe('100%')
+  })
+
+  it('applies custom width and height', () => {
+    const { container } = render(Skeleton, { props: { variant: 'rectangle', width: '200px', height: '100px' } })
+    const el = container.querySelector('.strand-skeleton') as HTMLElement
+    expect(el.style.width).toBe('200px')
+    expect(el.style.height).toBe('100px')
+  })
+
+  it('circle variant sets height equal to width', () => {
+    const { container } = render(Skeleton, { props: { variant: 'circle', width: '48px' } })
+    const el = container.querySelector('.strand-skeleton') as HTMLElement
+    expect(el.style.width).toBe('48px')
+    expect(el.style.height).toBe('48px')
+  })
+})

package/src/components/Skeleton/index.ts

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

package/src/components/Slider/Slider.svelte

@@ -0,0 +1,37 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Minimum value */
+  export let min: number = 0
+  /** Maximum value */
+  export let max: number = 100
+  /** Step increment */
+  export let step: number = 1
+  /** Current value */
+  export let value: number | undefined = undefined
+  /** Disabled state */
+  export let disabled: boolean = false
+  /** Change handler */
+  export let onchange: ((e: Event) => void) | undefined = undefined
+
+  $: wrapperClasses = [
+    'strand-slider',
+    disabled && 'strand-slider--disabled',
+  ].filter(Boolean).join(' ')
+</script>
+
+<div class={wrapperClasses}>
+  <input
+    type="range"
+    class="strand-slider__field"
+    {min}
+    {max}
+    {step}
+    {value}
+    {disabled}
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-valuenow={value}
+    on:change={onchange}
+    {...$$restProps}
+  />
+</div>

package/src/components/Slider/Slider.test.ts

@@ -0,0 +1,45 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Slider from './Slider.svelte'
+
+describe('Slider', () => {
+  it('renders with default classes', () => {
+    const { container } = render(Slider)
+    expect(container.querySelector('.strand-slider')).toBeInTheDocument()
+    const input = container.querySelector('.strand-slider__field')
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveAttribute('type', 'range')
+  })
+
+  it('applies disabled class and attribute', () => {
+    const { container } = render(Slider, { props: { disabled: true } })
+    expect(container.querySelector('.strand-slider')).toHaveClass('strand-slider--disabled')
+    expect(container.querySelector('.strand-slider__field')).toBeDisabled()
+  })
+
+  it('passes min, max, step', () => {
+    const { container } = render(Slider, { props: { min: 10, max: 50, step: 5 } })
+    const input = container.querySelector('.strand-slider__field')
+    expect(input).toHaveAttribute('min', '10')
+    expect(input).toHaveAttribute('max', '50')
+    expect(input).toHaveAttribute('step', '5')
+  })
+
+  it('sets aria-value attributes', () => {
+    const { container } = render(Slider, { props: { min: 0, max: 100, value: 50 } })
+    const input = container.querySelector('.strand-slider__field')
+    expect(input).toHaveAttribute('aria-valuemin', '0')
+    expect(input).toHaveAttribute('aria-valuemax', '100')
+    expect(input).toHaveAttribute('aria-valuenow', '50')
+  })
+
+  it('defaults to min=0, max=100, step=1', () => {
+    const { container } = render(Slider)
+    const input = container.querySelector('.strand-slider__field')
+    expect(input).toHaveAttribute('min', '0')
+    expect(input).toHaveAttribute('max', '100')
+    expect(input).toHaveAttribute('step', '1')
+  })
+})

package/src/components/Slider/index.ts

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

package/src/components/Spinner/Spinner.svelte

@@ -0,0 +1,15 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Size of the spinner */
+  export let size: 'sm' | 'md' | 'lg' = 'md'
+
+  $: classes = [
+    'strand-spinner',
+    `strand-spinner--${size}`,
+  ].filter(Boolean).join(' ')
+</script>
+
+<span class={classes} role="status" {...$$restProps}>
+  <span class="strand-spinner__ring" aria-hidden="true"></span>
+  <span class="strand-spinner__sr-only">Loading</span>
+</span>

package/src/components/Spinner/Spinner.test.ts

@@ -0,0 +1,38 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Spinner from './Spinner.svelte'
+
+describe('Spinner', () => {
+  it('renders with default classes', () => {
+    const { container } = render(Spinner)
+    const el = container.querySelector('.strand-spinner')
+    expect(el).toBeInTheDocument()
+    expect(el).toHaveClass('strand-spinner--md')
+    expect(el).toHaveAttribute('role', 'status')
+  })
+
+  it('applies size classes', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+    for (const size of sizes) {
+      const { container, unmount } = render(Spinner, { props: { size } })
+      expect(container.querySelector('.strand-spinner')).toHaveClass(`strand-spinner--${size}`)
+      unmount()
+    }
+  })
+
+  it('has ring with aria-hidden', () => {
+    const { container } = render(Spinner)
+    const ring = container.querySelector('.strand-spinner__ring')
+    expect(ring).toBeInTheDocument()
+    expect(ring).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('has screen reader text', () => {
+    const { container } = render(Spinner)
+    const srOnly = container.querySelector('.strand-spinner__sr-only')
+    expect(srOnly).toBeInTheDocument()
+    expect(srOnly).toHaveTextContent('Loading')
+  })
+})

package/src/components/Spinner/index.ts

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

package/src/components/Stack/Stack.svelte

@@ -0,0 +1,27 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Flex direction */
+  export let direction: 'vertical' | 'horizontal' = 'vertical'
+  /** Gap between items, maps to --strand-space-{n} */
+  export let gap: number = 4
+  /** Cross-axis alignment */
+  export let align: 'start' | 'center' | 'end' | 'stretch' = 'stretch'
+  /** Main-axis alignment */
+  export let justify: 'start' | 'center' | 'end' | 'between' | 'around' | undefined = undefined
+  /** Enable flex-wrap */
+  export let wrap: boolean = false
+
+  $: classes = [
+    'strand-stack',
+    `strand-stack--${direction}`,
+    align !== 'stretch' && `strand-stack--align-${align}`,
+    justify && `strand-stack--justify-${justify}`,
+    wrap && 'strand-stack--wrap',
+  ].filter(Boolean).join(' ')
+
+  $: inlineStyle = `gap: var(--strand-space-${gap});`
+</script>
+
+<div class={classes} style={inlineStyle} {...$$restProps}>
+  <slot />
+</div>

package/src/components/Stack/Stack.test.ts

@@ -0,0 +1,46 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Stack from './Stack.svelte'
+
+describe('Stack', () => {
+  it('renders with default classes', () => {
+    const { container } = render(Stack)
+    const el = container.querySelector('.strand-stack')
+    expect(el).toBeInTheDocument()
+    expect(el).toHaveClass('strand-stack--vertical')
+  })
+
+  it('applies direction class', () => {
+    const { container } = render(Stack, { props: { direction: 'horizontal' } })
+    expect(container.querySelector('.strand-stack')).toHaveClass('strand-stack--horizontal')
+  })
+
+  it('sets gap via inline style', () => {
+    const { container } = render(Stack, { props: { gap: 6 } })
+    const el = container.querySelector('.strand-stack') as HTMLElement
+    expect(el.style.gap).toBe('var(--strand-space-6)')
+  })
+
+  it('applies align class when not stretch', () => {
+    const { container } = render(Stack, { props: { align: 'center' } })
+    expect(container.querySelector('.strand-stack')).toHaveClass('strand-stack--align-center')
+  })
+
+  it('does not apply align class for stretch (default)', () => {
+    const { container } = render(Stack)
+    const el = container.querySelector('.strand-stack')
+    expect(el!.className).not.toContain('strand-stack--align')
+  })
+
+  it('applies justify class', () => {
+    const { container } = render(Stack, { props: { justify: 'between' } })
+    expect(container.querySelector('.strand-stack')).toHaveClass('strand-stack--justify-between')
+  })
+
+  it('applies wrap class', () => {
+    const { container } = render(Stack, { props: { wrap: true } })
+    expect(container.querySelector('.strand-stack')).toHaveClass('strand-stack--wrap')
+  })
+})

package/src/components/Stack/index.ts

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

package/src/components/Switch/Switch.svelte

@@ -0,0 +1,48 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Controlled checked state */
+  export let checked: boolean = false
+  /** Disabled state */
+  export let disabled: boolean = false
+  /** Inline label text */
+  export let label: string | undefined = undefined
+  /** Change handler */
+  export let onchange: ((checked: boolean) => void) | undefined = undefined
+
+  $: classes = [
+    'strand-switch',
+    checked && 'strand-switch--checked',
+    disabled && 'strand-switch--disabled',
+  ].filter(Boolean).join(' ')
+
+  function handleClick() {
+    if (!disabled) {
+      onchange?.(!checked)
+    }
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if ((e.key === ' ' || e.key === 'Enter') && !disabled) {
+      e.preventDefault()
+      onchange?.(!checked)
+    }
+  }
+</script>
+
+<label class={classes}>
+  <button
+    type="button"
+    role="switch"
+    class="strand-switch__track"
+    aria-checked={checked ? 'true' : 'false'}
+    {disabled}
+    on:click={handleClick}
+    on:keydown={handleKeyDown}
+    {...$$restProps}
+  >
+    <span class="strand-switch__thumb" aria-hidden="true"></span>
+  </button>
+  {#if label}
+    <span class="strand-switch__label">{label}</span>
+  {/if}
+</label>

package/src/components/Switch/Switch.test.ts

@@ -0,0 +1,61 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect, vi } from 'vitest'
+import { render, fireEvent } from '@testing-library/svelte'
+import Switch from './Switch.svelte'
+
+describe('Switch', () => {
+  it('renders with default classes', () => {
+    const { container } = render(Switch)
+    expect(container.querySelector('.strand-switch')).toBeInTheDocument()
+    const btn = container.querySelector('.strand-switch__track')
+    expect(btn).toBeInTheDocument()
+    expect(btn).toHaveAttribute('role', 'switch')
+    expect(btn).toHaveAttribute('aria-checked', 'false')
+  })
+
+  it('applies checked class and aria-checked', () => {
+    const { container } = render(Switch, { props: { checked: true } })
+    expect(container.querySelector('.strand-switch')).toHaveClass('strand-switch--checked')
+    expect(container.querySelector('.strand-switch__track')).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('applies disabled class and attribute', () => {
+    const { container } = render(Switch, { props: { disabled: true } })
+    expect(container.querySelector('.strand-switch')).toHaveClass('strand-switch--disabled')
+    expect(container.querySelector('.strand-switch__track')).toBeDisabled()
+  })
+
+  it('renders label text', () => {
+    const { container } = render(Switch, { props: { label: 'Dark mode' } })
+    const labelEl = container.querySelector('.strand-switch__label')
+    expect(labelEl).toBeInTheDocument()
+    expect(labelEl).toHaveTextContent('Dark mode')
+  })
+
+  it('does not render label when not provided', () => {
+    const { container } = render(Switch)
+    expect(container.querySelector('.strand-switch__label')).not.toBeInTheDocument()
+  })
+
+  it('fires onchange callback on click', async () => {
+    const onchange = vi.fn()
+    const { container } = render(Switch, { props: { onchange } })
+    await fireEvent.click(container.querySelector('.strand-switch__track')!)
+    expect(onchange).toHaveBeenCalledWith(true)
+  })
+
+  it('does not fire onchange when disabled', async () => {
+    const onchange = vi.fn()
+    const { container } = render(Switch, { props: { disabled: true, onchange } })
+    await fireEvent.click(container.querySelector('.strand-switch__track')!)
+    expect(onchange).not.toHaveBeenCalled()
+  })
+
+  it('has thumb with aria-hidden', () => {
+    const { container } = render(Switch)
+    const thumb = container.querySelector('.strand-switch__thumb')
+    expect(thumb).toBeInTheDocument()
+    expect(thumb).toHaveAttribute('aria-hidden', 'true')
+  })
+})

package/src/components/Switch/index.ts

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

package/src/components/Table/Table.svelte

@@ -0,0 +1,67 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  export interface TableColumn {
+    /** Unique key matching the data field */
+    key: string
+    /** Display header text */
+    header: string
+    /** Whether the column is sortable */
+    sortable?: boolean
+    /** Optional fixed width */
+    width?: string
+  }
+
+  /** Column definitions */
+  export let columns: TableColumn[] = []
+  /** Row data */
+  export let data: Array<Record<string, any>> = []
+  /** Called when a sortable column header is clicked */
+  export let onsort: ((key: string, direction: 'asc' | 'desc') => void) | undefined = undefined
+
+  let sortKey: string | null = null
+  let sortDirection: 'asc' | 'desc' = 'asc'
+
+  function handleSort(key: string) {
+    const nextDirection = sortKey === key && sortDirection === 'asc' ? 'desc' : 'asc'
+    sortKey = key
+    sortDirection = nextDirection
+    onsort?.(key, nextDirection)
+  }
+</script>
+
+<div class="strand-table-wrapper" {...$$restProps}>
+  <table class="strand-table">
+    <thead class="strand-table__head">
+      <tr>
+        {#each columns as col (col.key)}
+          <th class="strand-table__th" style={col.width ? `width: ${col.width}` : undefined}>
+            {#if col.sortable}
+              <button
+                type="button"
+                class="strand-table__sort-btn"
+                aria-label={`Sort by ${col.header}`}
+                on:click={() => handleSort(col.key)}
+              >
+                {col.header}
+                <span class="strand-table__sort-indicator" aria-hidden="true">
+                  {sortKey === col.key ? (sortDirection === 'asc' ? '\u2191' : '\u2193') : '\u2195'}
+                </span>
+              </button>
+            {:else}
+              {col.header}
+            {/if}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody class="strand-table__body">
+      {#each data as row, rowIndex (rowIndex)}
+        <tr class="strand-table__row">
+          {#each columns as col (col.key)}
+            <td class="strand-table__td">{row[col.key]}</td>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>