@dillingerstaffing/strand-svelte 0.16.1 → 0.17.1

package/src/components/LabShell/LabSection.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<section class="strand-ref-section" {...$$restProps}>
+  <slot />
+</section>

package/src/components/LabShell/LabSectionBody.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<div class="strand-ref-section__body" {...$$restProps}>
+  <slot />
+</div>

package/src/components/LabShell/LabSectionHead.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<div class="strand-ref-section__head" {...$$restProps}>
+  <slot />
+</div>

package/src/components/LabShell/LabSectionHeadNote.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<span class="strand-ref-section__head-note" {...$$restProps}>
+  <slot />
+</span>

package/src/components/LabShell/LabShell.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<div class="strand-ref-shell" {...$$restProps}>
+  <slot />
+</div>

package/src/components/LabShell/LabShell.test.ts

@@ -0,0 +1,148 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import LabShell from './LabShell.svelte'
+import LabSidebar from './LabSidebar.svelte'
+import LabSidebarHead from './LabSidebarHead.svelte'
+import LabSidebarScroll from './LabSidebarScroll.svelte'
+import LabBrand from './LabBrand.svelte'
+import LabBrandMark from './LabBrandMark.svelte'
+import LabBrandTitle from './LabBrandTitle.svelte'
+import LabBrandSub from './LabBrandSub.svelte'
+import LabSidebarGroup from './LabSidebarGroup.svelte'
+import LabSidebarGroupLabel from './LabSidebarGroupLabel.svelte'
+import LabSidebarGroupList from './LabSidebarGroupList.svelte'
+import LabSidebarGroupLink from './LabSidebarGroupLink.svelte'
+import LabSidebarGroupDot from './LabSidebarGroupDot.svelte'
+import LabMain from './LabMain.svelte'
+import LabHeader from './LabHeader.svelte'
+import LabHeaderTitle from './LabHeaderTitle.svelte'
+import LabHeaderLead from './LabHeaderLead.svelte'
+import LabHeaderMeta from './LabHeaderMeta.svelte'
+import LabHeaderMetaItem from './LabHeaderMetaItem.svelte'
+import LabHeaderMetaLabel from './LabHeaderMetaLabel.svelte'
+import LabHeaderMetaValue from './LabHeaderMetaValue.svelte'
+import LabTaxonomy from './LabTaxonomy.svelte'
+import LabTaxonomyTitle from './LabTaxonomyTitle.svelte'
+import LabTaxonomyList from './LabTaxonomyList.svelte'
+import LabSection from './LabSection.svelte'
+import LabSectionHead from './LabSectionHead.svelte'
+import LabSectionHeadNote from './LabSectionHeadNote.svelte'
+import LabSectionBody from './LabSectionBody.svelte'
+import LabExample from './LabExample.svelte'
+import LabExampleMeta from './LabExampleMeta.svelte'
+import LabExampleLabel from './LabExampleLabel.svelte'
+import LabExampleCode from './LabExampleCode.svelte'
+import LabExampleDemo from './LabExampleDemo.svelte'
+import LabExampleCaption from './LabExampleCaption.svelte'
+
+describe('LabShell family (Svelte)', () => {
+  it('LabShell base class', () => {
+    const { container } = render(LabShell)
+    expect(container.querySelector('.strand-ref-shell')).toBeInTheDocument()
+  })
+
+  it('LabSidebar renders aside', () => {
+    const { container } = render(LabSidebar)
+    expect(container.querySelector('aside.strand-ref-shell__sidebar')).toBeInTheDocument()
+  })
+
+  it('sidebar parts render with scoped classes', () => {
+    expect(
+      render(LabSidebarHead).container.querySelector('.strand-ref-shell__sidebar-head'),
+    ).toBeInTheDocument()
+    expect(
+      render(LabSidebarScroll).container.querySelector('.strand-ref-shell__sidebar-scroll'),
+    ).toBeInTheDocument()
+    expect(
+      render(LabBrand).container.querySelector('.strand-ref-shell__brand'),
+    ).toBeInTheDocument()
+    expect(
+      render(LabBrandMark).container.querySelector('.strand-ref-shell__brand-mark'),
+    ).toBeInTheDocument()
+    expect(
+      render(LabBrandTitle).container.querySelector('.strand-ref-shell__brand-title'),
+    ).toBeInTheDocument()
+    expect(
+      render(LabBrandSub).container.querySelector('.strand-ref-shell__brand-sub'),
+    ).toBeInTheDocument()
+    expect(
+      render(LabSidebarGroup).container.querySelector('.strand-ref-shell__group'),
+    ).toBeInTheDocument()
+    expect(
+      render(LabSidebarGroupLabel).container.querySelector(
+        '.strand-ref-shell__group-label',
+      ),
+    ).toBeInTheDocument()
+    expect(
+      render(LabSidebarGroupList).container.querySelector(
+        'nav.strand-ref-shell__group-list',
+      ),
+    ).toBeInTheDocument()
+  })
+
+  it('sidebar link renders anchor with dot and href', () => {
+    const { container } = render(LabSidebarGroupLink, { props: { href: '#x' } })
+    const a = container.querySelector('a.strand-ref-shell__group-link') as HTMLAnchorElement
+    expect(a).toBeInTheDocument()
+    expect(a.getAttribute('href')).toBe('#x')
+    expect(a.querySelector('.strand-ref-shell__group-dot')).toBeInTheDocument()
+  })
+
+  it('sidebar dot renders standalone', () => {
+    const { container } = render(LabSidebarGroupDot)
+    expect(container.querySelector('span.strand-ref-shell__group-dot')).toBeInTheDocument()
+  })
+
+  it('LabMain renders main', () => {
+    const { container } = render(LabMain)
+    expect(container.querySelector('main.strand-ref-shell__main')).toBeInTheDocument()
+  })
+
+  it('LabHeader family renders correct tags', () => {
+    expect(render(LabHeader).container.querySelector('header.strand-ref-header')).toBeInTheDocument()
+    expect(render(LabHeaderTitle).container.querySelector('h1.strand-ref-header__title')).toBeInTheDocument()
+    expect(render(LabHeaderLead).container.querySelector('p.strand-ref-header__lead')).toBeInTheDocument()
+    expect(render(LabHeaderMeta).container.querySelector('.strand-ref-header__meta')).toBeInTheDocument()
+    expect(render(LabHeaderMetaItem).container.querySelector('.strand-ref-header__meta-item')).toBeInTheDocument()
+    expect(render(LabHeaderMetaLabel).container.querySelector('span.strand-ref-header__meta-label')).toBeInTheDocument()
+    expect(render(LabHeaderMetaValue).container.querySelector('span.strand-ref-header__meta-value')).toBeInTheDocument()
+  })
+
+  it('LabTaxonomy family renders correct tags', () => {
+    expect(render(LabTaxonomy).container.querySelector('.strand-ref-taxonomy')).toBeInTheDocument()
+    expect(render(LabTaxonomyTitle).container.querySelector('span.strand-ref-taxonomy__title')).toBeInTheDocument()
+    expect(render(LabTaxonomyList).container.querySelector('dl.strand-ref-taxonomy__list')).toBeInTheDocument()
+  })
+
+  it('LabSection family renders correct tags', () => {
+    expect(render(LabSection).container.querySelector('section.strand-ref-section')).toBeInTheDocument()
+    expect(render(LabSectionHead).container.querySelector('.strand-ref-section__head')).toBeInTheDocument()
+    expect(render(LabSectionHeadNote).container.querySelector('span.strand-ref-section__head-note')).toBeInTheDocument()
+    expect(render(LabSectionBody).container.querySelector('.strand-ref-section__body')).toBeInTheDocument()
+  })
+
+  it('LabExample family renders correct tags', () => {
+    expect(render(LabExample).container.querySelector('.strand-ref-example')).toBeInTheDocument()
+    expect(render(LabExampleMeta).container.querySelector('.strand-ref-example__meta')).toBeInTheDocument()
+    expect(render(LabExampleLabel).container.querySelector('span.strand-ref-example__label')).toBeInTheDocument()
+    expect(render(LabExampleCode).container.querySelector('span.strand-ref-example__code')).toBeInTheDocument()
+    expect(render(LabExampleDemo).container.querySelector('.strand-ref-example__demo')).toBeInTheDocument()
+    expect(render(LabExampleCaption).container.querySelector('p.strand-ref-example__caption')).toBeInTheDocument()
+  })
+
+  it('LabExampleDemo applies --pad-none modifier', () => {
+    const { container } = render(LabExampleDemo, { props: { padNone: true } })
+    expect(container.querySelector('.strand-ref-example__demo')).toHaveClass(
+      'strand-ref-example__demo--pad-none',
+    )
+  })
+
+  it('LabExampleDemo applies --recessed modifier', () => {
+    const { container } = render(LabExampleDemo, { props: { recessed: true } })
+    expect(container.querySelector('.strand-ref-example__demo')).toHaveClass(
+      'strand-ref-example__demo--recessed',
+    )
+  })
+})

package/src/components/LabShell/LabSidebar.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<aside class="strand-ref-shell__sidebar" {...$$restProps}>
+  <slot />
+</aside>

package/src/components/LabShell/LabSidebarGroup.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<div class="strand-ref-shell__group" {...$$restProps}>
+  <slot />
+</div>

package/src/components/LabShell/LabSidebarGroupDot.svelte

@@ -0,0 +1,2 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<span class="strand-ref-shell__group-dot" {...$$restProps}></span>

package/src/components/LabShell/LabSidebarGroupLabel.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<span class="strand-ref-shell__group-label" {...$$restProps}>
+  <slot />
+</span>

package/src/components/LabShell/LabSidebarGroupLink.svelte

@@ -0,0 +1,9 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  export let href: string = '#'
+</script>
+
+<a class="strand-ref-shell__group-link" {href} {...$$restProps}>
+  <span class="strand-ref-shell__group-dot"></span>
+  <slot />
+</a>

package/src/components/LabShell/LabSidebarGroupList.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<nav class="strand-ref-shell__group-list" {...$$restProps}>
+  <slot />
+</nav>

package/src/components/LabShell/LabSidebarHead.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<div class="strand-ref-shell__sidebar-head" {...$$restProps}>
+  <slot />
+</div>

package/src/components/LabShell/LabSidebarScroll.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<div class="strand-ref-shell__sidebar-scroll" {...$$restProps}>
+  <slot />
+</div>

package/src/components/LabShell/LabTaxonomy.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<div class="strand-ref-taxonomy" {...$$restProps}>
+  <slot />
+</div>

package/src/components/LabShell/LabTaxonomyList.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<dl class="strand-ref-taxonomy__list" {...$$restProps}>
+  <slot />
+</dl>

package/src/components/LabShell/LabTaxonomyTitle.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<span class="strand-ref-taxonomy__title" {...$$restProps}>
+  <slot />
+</span>

package/src/components/LabShell/index.ts

@@ -0,0 +1,35 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+export { default as LabShell } from './LabShell.svelte'
+export { default as LabSidebar } from './LabSidebar.svelte'
+export { default as LabSidebarHead } from './LabSidebarHead.svelte'
+export { default as LabSidebarScroll } from './LabSidebarScroll.svelte'
+export { default as LabBrand } from './LabBrand.svelte'
+export { default as LabBrandMark } from './LabBrandMark.svelte'
+export { default as LabBrandTitle } from './LabBrandTitle.svelte'
+export { default as LabBrandSub } from './LabBrandSub.svelte'
+export { default as LabSidebarGroup } from './LabSidebarGroup.svelte'
+export { default as LabSidebarGroupLabel } from './LabSidebarGroupLabel.svelte'
+export { default as LabSidebarGroupList } from './LabSidebarGroupList.svelte'
+export { default as LabSidebarGroupLink } from './LabSidebarGroupLink.svelte'
+export { default as LabSidebarGroupDot } from './LabSidebarGroupDot.svelte'
+export { default as LabMain } from './LabMain.svelte'
+export { default as LabHeader } from './LabHeader.svelte'
+export { default as LabHeaderTitle } from './LabHeaderTitle.svelte'
+export { default as LabHeaderLead } from './LabHeaderLead.svelte'
+export { default as LabHeaderMeta } from './LabHeaderMeta.svelte'
+export { default as LabHeaderMetaItem } from './LabHeaderMetaItem.svelte'
+export { default as LabHeaderMetaLabel } from './LabHeaderMetaLabel.svelte'
+export { default as LabHeaderMetaValue } from './LabHeaderMetaValue.svelte'
+export { default as LabTaxonomy } from './LabTaxonomy.svelte'
+export { default as LabTaxonomyTitle } from './LabTaxonomyTitle.svelte'
+export { default as LabTaxonomyList } from './LabTaxonomyList.svelte'
+export { default as LabSection } from './LabSection.svelte'
+export { default as LabSectionHead } from './LabSectionHead.svelte'
+export { default as LabSectionHeadNote } from './LabSectionHeadNote.svelte'
+export { default as LabSectionBody } from './LabSectionBody.svelte'
+export { default as LabExample } from './LabExample.svelte'
+export { default as LabExampleMeta } from './LabExampleMeta.svelte'
+export { default as LabExampleLabel } from './LabExampleLabel.svelte'
+export { default as LabExampleCode } from './LabExampleCode.svelte'
+export { default as LabExampleDemo } from './LabExampleDemo.svelte'
+export { default as LabExampleCaption } from './LabExampleCaption.svelte'

package/src/components/LabTip/LabTip.svelte

@@ -0,0 +1,11 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  export let pinned: boolean = false
+  $: classes = ['strand-ref-tip', pinned ? 'strand-ref-tip--pinned' : '']
+    .filter(Boolean)
+    .join(' ')
+</script>
+
+<span class={classes} {...$$restProps}>
+  <slot />
+</span>

package/src/components/LabTip/LabTip.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 LabTip from './LabTip.svelte'
+import LabTipBubble from './LabTipBubble.svelte'
+
+describe('LabTip (Svelte)', () => {
+  it('Tip base class', () => {
+    const { container } = render(LabTip)
+    expect(container.querySelector('.strand-ref-tip')).toBeInTheDocument()
+  })
+
+  it('Tip pinned modifier', () => {
+    const { container } = render(LabTip, { props: { pinned: true } })
+    expect(container.querySelector('.strand-ref-tip')).toHaveClass('strand-ref-tip--pinned')
+  })
+
+  it('Bubble default placement top', () => {
+    const { container } = render(LabTipBubble)
+    expect(container.querySelector('.strand-ref-tip__bubble')).toHaveClass('strand-ref-tip__bubble--top')
+  })
+
+  it('Bubble placements', () => {
+    for (const p of ['top', 'bottom', 'left', 'right'] as const) {
+      const { container } = render(LabTipBubble, { props: { placement: p } })
+      expect(container.querySelector('.strand-ref-tip__bubble')).toHaveClass(`strand-ref-tip__bubble--${p}`)
+    }
+  })
+
+  it('Bubble role=tooltip', () => {
+    const { container } = render(LabTipBubble)
+    expect(container.querySelector('.strand-ref-tip__bubble')?.getAttribute('role')).toBe('tooltip')
+  })
+})

package/src/components/LabTip/LabTipBubble.svelte

@@ -0,0 +1,12 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  type Placement = 'top' | 'bottom' | 'left' | 'right'
+  export let placement: Placement = 'top'
+  $: classes = ['strand-ref-tip__bubble', `strand-ref-tip__bubble--${placement}`]
+    .filter(Boolean)
+    .join(' ')
+</script>
+
+<span class={classes} role="tooltip" {...$$restProps}>
+  <slot />
+</span>

package/src/components/LabTip/index.ts

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

package/src/components/LabUtilCell/LabUtilCell.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<div class="strand-ref-util-cell" {...$$restProps}>
+  <slot />
+</div>

package/src/components/LabUtilCell/LabUtilCell.test.ts

@@ -0,0 +1,27 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import LabUtilRow from './LabUtilRow.svelte'
+import LabUtilCell from './LabUtilCell.svelte'
+import LabUtilCellCode from './LabUtilCellCode.svelte'
+import LabUtilCellCaption from './LabUtilCellCaption.svelte'
+import LabUtilCellDemo from './LabUtilCellDemo.svelte'
+import LabUtilCellBlock from './LabUtilCellBlock.svelte'
+
+describe('LabUtilCell family (Svelte)', () => {
+  const cases: Array<[any, string]> = [
+    [LabUtilRow, 'strand-ref-util-row'],
+    [LabUtilCell, 'strand-ref-util-cell'],
+    [LabUtilCellCode, 'strand-ref-util-cell__code'],
+    [LabUtilCellCaption, 'strand-ref-util-cell__caption'],
+    [LabUtilCellDemo, 'strand-ref-util-cell__demo'],
+    [LabUtilCellBlock, 'strand-ref-util-cell__block'],
+  ]
+  for (const [C, cls] of cases) {
+    it(`${cls} renders with base class`, () => {
+      const { container } = render(C)
+      expect(container.querySelector(`.${cls}`)).toBeInTheDocument()
+    })
+  }
+})

package/src/components/LabUtilCell/LabUtilCellBlock.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<span class="strand-ref-util-cell__block" {...$$restProps}>
+  <slot />
+</span>

package/src/components/LabUtilCell/LabUtilCellCaption.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<span class="strand-ref-util-cell__caption" {...$$restProps}>
+  <slot />
+</span>

package/src/components/LabUtilCell/LabUtilCellCode.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<span class="strand-ref-util-cell__code" {...$$restProps}>
+  <slot />
+</span>

package/src/components/LabUtilCell/LabUtilCellDemo.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<div class="strand-ref-util-cell__demo" {...$$restProps}>
+  <slot />
+</div>

package/src/components/LabUtilCell/LabUtilRow.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<div class="strand-ref-util-row" {...$$restProps}>
+  <slot />
+</div>

package/src/components/LabUtilCell/index.ts

@@ -0,0 +1,7 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+export { default as LabUtilRow } from './LabUtilRow.svelte'
+export { default as LabUtilCell } from './LabUtilCell.svelte'
+export { default as LabUtilCellCode } from './LabUtilCellCode.svelte'
+export { default as LabUtilCellCaption } from './LabUtilCellCaption.svelte'
+export { default as LabUtilCellDemo } from './LabUtilCellDemo.svelte'
+export { default as LabUtilCellBlock } from './LabUtilCellBlock.svelte'

package/src/components/Swatch/Swatch.svelte

@@ -0,0 +1,12 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  export let name: string
+  export let hex: string
+  export let background: string
+  export let color: string
+</script>
+
+<div class="strand-swatch" style="background: {background}; color: {color};" {...$$restProps}>
+  <span class="strand-swatch__name">{name}</span>
+  <span class="strand-swatch__hex">{hex}</span>
+</div>

package/src/components/Swatch/Swatch.test.ts

@@ -0,0 +1,31 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Swatch from './Swatch.svelte'
+import SwatchGrid from './SwatchGrid.svelte'
+
+describe('Swatch (Svelte)', () => {
+  it('SwatchGrid base class', () => {
+    const { container } = render(SwatchGrid)
+    expect(container.querySelector('.strand-swatch-grid')).toBeInTheDocument()
+  })
+
+  it('Swatch renders name and hex', () => {
+    const { container, getByText } = render(Swatch, {
+      props: { name: 'blue', hex: '#fff', background: '#fff', color: '#000' },
+    })
+    expect(container.querySelector('.strand-swatch')).toBeInTheDocument()
+    expect(getByText('blue')).toBeInTheDocument()
+    expect(getByText('#fff')).toBeInTheDocument()
+  })
+
+  it('Swatch applies inline background/color', () => {
+    const { container } = render(Swatch, {
+      props: { name: 'a', hex: '#fff', background: 'rgb(1, 2, 3)', color: '#fff' },
+    })
+    const el = container.querySelector('.strand-swatch') as HTMLElement
+    expect(el.style.background).toContain('rgb(1, 2, 3)')
+    expect(el.style.color).toBe('rgb(255, 255, 255)')
+  })
+})

package/src/components/Swatch/SwatchGrid.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<div class="strand-swatch-grid" {...$$restProps}>
+  <slot />
+</div>

package/src/components/Swatch/index.ts

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

package/src/components/TokenSpecimen/TokenSpecimen.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<div class="strand-token-specimen" {...$$restProps}>
+  <slot />
+</div>

package/src/components/TokenSpecimen/TokenSpecimen.test.ts

@@ -0,0 +1,42 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import TokenSpecimen from './TokenSpecimen.svelte'
+import TokenSpecimenGrid from './TokenSpecimenGrid.svelte'
+import TokenSpecimenSpacer from './TokenSpecimenSpacer.svelte'
+import TokenSpecimenBox from './TokenSpecimenBox.svelte'
+
+describe('TokenSpecimen (Svelte)', () => {
+  it('Grid base class', () => {
+    const { container } = render(TokenSpecimenGrid)
+    expect(container.querySelector('.strand-token-specimen-grid')).toBeInTheDocument()
+  })
+
+  it('Specimen base class', () => {
+    const { container } = render(TokenSpecimen)
+    expect(container.querySelector('.strand-token-specimen')).toBeInTheDocument()
+  })
+
+  it('Spacer width string', () => {
+    const { container } = render(TokenSpecimenSpacer, { props: { width: '48px' } })
+    const el = container.querySelector('.strand-token-specimen__spacer') as HTMLElement
+    expect(el).toBeInTheDocument()
+    expect(el.style.width).toBe('48px')
+  })
+
+  it('Spacer width numeric', () => {
+    const { container } = render(TokenSpecimenSpacer, { props: { width: 48 } })
+    const el = container.querySelector('.strand-token-specimen__spacer') as HTMLElement
+    expect(el.style.width).toBe('48px')
+  })
+
+  it('Box radius + shadow', () => {
+    const { container } = render(TokenSpecimenBox, {
+      props: { radius: '8px', shadow: '0 4px 12px rgba(0,0,0,0.1)' },
+    })
+    const el = container.querySelector('.strand-token-specimen__box') as HTMLElement
+    expect(el.style.borderRadius).toBe('8px')
+    expect(el.style.boxShadow).toContain('rgba(0,0,0,0.1)')
+  })
+})

package/src/components/TokenSpecimen/TokenSpecimenBox.svelte

@@ -0,0 +1,11 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  export let radius: string | undefined = undefined
+  export let shadow: string | undefined = undefined
+  $: styleAttr = [
+    radius ? `border-radius: ${radius};` : '',
+    shadow ? `box-shadow: ${shadow};` : '',
+  ].filter(Boolean).join(' ')
+</script>
+
+<span class="strand-token-specimen__box" style={styleAttr} {...$$restProps}></span>

package/src/components/TokenSpecimen/TokenSpecimenGrid.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<div class="strand-token-specimen-grid" {...$$restProps}>
+  <slot />
+</div>

package/src/components/TokenSpecimen/TokenSpecimenSpacer.svelte

@@ -0,0 +1,8 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  export let width: string | number | undefined = undefined
+  $: w = typeof width === 'number' ? `${width}px` : width
+  $: styleAttr = w ? `width: ${w};` : ''
+</script>
+
+<span class="strand-token-specimen__spacer" style={styleAttr} {...$$restProps}></span>

package/src/components/TokenSpecimen/index.ts

@@ -0,0 +1,5 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+export { default as TokenSpecimen } from './TokenSpecimen.svelte'
+export { default as TokenSpecimenGrid } from './TokenSpecimenGrid.svelte'
+export { default as TokenSpecimenSpacer } from './TokenSpecimenSpacer.svelte'
+export { default as TokenSpecimenBox } from './TokenSpecimenBox.svelte'

package/src/components/TypeSpecimen/TypeSpecimen.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<div class="strand-type-specimen" {...$$restProps}>
+  <slot />
+</div>

package/src/components/TypeSpecimen/TypeSpecimen.test.ts

@@ -0,0 +1,18 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import TypeSpecimen from './TypeSpecimen.svelte'
+import TypeSpecimenMeta from './TypeSpecimenMeta.svelte'
+
+describe('TypeSpecimen (Svelte)', () => {
+  it('base class', () => {
+    const { container } = render(TypeSpecimen)
+    expect(container.querySelector('.strand-type-specimen')).toBeInTheDocument()
+  })
+
+  it('Meta span + base class', () => {
+    const { container } = render(TypeSpecimenMeta)
+    expect(container.querySelector('span.strand-type-specimen__meta')).toBeInTheDocument()
+  })
+})

package/src/components/TypeSpecimen/TypeSpecimenMeta.svelte

@@ -0,0 +1,4 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<span class="strand-type-specimen__meta" {...$$restProps}>
+  <slot />
+</span>

package/src/components/TypeSpecimen/index.ts

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

package/src/index.ts

@@ -47,3 +47,21 @@ export { default as Progress } from './components/Progress/Progress.svelte'
 export { default as Spinner } from './components/Spinner/Spinner.svelte'
 export { default as Skeleton } from './components/Skeleton/Skeleton.svelte'
 export { default as StarRating } from './components/StarRating/StarRating.svelte'
+
+// Composition helpers
+export { default as CardSection } from './components/CardSection/CardSection.svelte'
+export { default as KvEditorial } from './components/KvEditorial/KvEditorial.svelte'
+
+// Component-reference page chrome (strand-ref-* family)
+export * from './components/LabShell/index'
+export * from './components/LabFrame/index'
+export * from './components/LabGlassStage/index'
+export * from './components/LabRevealStage/index'
+export * from './components/LabTip/index'
+export * from './components/LabUtilCell/index'
+
+// Spec-visualizer primitives
+export * from './components/Swatch/index'
+export * from './components/TypeSpecimen/index'
+export * from './components/TokenSpecimen/index'
+export * from './components/ContainerScale/index'