@dillingerstaffing/strand-svelte 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-svelte",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Strand UI - Svelte component library built on the Strand Design Language",
   "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
   "license": "MIT",
@@ -56,7 +56,7 @@
     "svelte": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
-    "@dillingerstaffing/strand": "^0.16.0"
+    "@dillingerstaffing/strand": "^0.17.0"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.0",

package/src/components/CardSection/CardSection.svelte

@@ -0,0 +1,20 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  A horizontal row inside a composed card, separated from siblings
+  by a hairline rule. Use multiple CardSection children inside a
+  Card with padding="none" to stack header / body / cta rows. The
+  first child's top rule is suppressed automatically.
+-->
+<script lang="ts">
+  /** When true, applies the --header layout (baseline, space-between, gap) */
+  export let header: boolean = false
+
+  $: classes = [
+    'strand-card__section',
+    header ? 'strand-card__section--header' : '',
+  ].filter(Boolean).join(' ')
+</script>
+
+<div class={classes} {...$$restProps}>
+  <slot />
+</div>

package/src/components/CardSection/CardSection.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 CardSection from './CardSection.svelte'
+
+describe('CardSection', () => {
+  it('renders with base class', () => {
+    const { container } = render(CardSection)
+    const el = container.querySelector('.strand-card__section')
+    expect(el).toBeInTheDocument()
+  })
+
+  it('does not apply header modifier by default', () => {
+    const { container } = render(CardSection)
+    expect(container.querySelector('.strand-card__section')).not.toHaveClass(
+      'strand-card__section--header',
+    )
+  })
+
+  it('applies header modifier when header prop is true', () => {
+    const { container } = render(CardSection, { props: { header: true } })
+    expect(container.querySelector('.strand-card__section')).toHaveClass(
+      'strand-card__section--header',
+    )
+  })
+})

package/src/components/CardSection/index.ts

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

package/src/components/ContainerScale/ContainerScale.svelte

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

package/src/components/ContainerScale/ContainerScale.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 ContainerScale from './ContainerScale.svelte'
+import ContainerScaleRow from './ContainerScaleRow.svelte'
+import ContainerScaleLabel from './ContainerScaleLabel.svelte'
+import ContainerScaleCaption from './ContainerScaleCaption.svelte'
+import ContainerScaleTrack from './ContainerScaleTrack.svelte'
+import ContainerScaleBar from './ContainerScaleBar.svelte'
+import ContainerScalePx from './ContainerScalePx.svelte'
+import ContainerScaleAxis from './ContainerScaleAxis.svelte'
+
+describe('ContainerScale (Svelte)', () => {
+  it('root base class', () => {
+    const { container } = render(ContainerScale)
+    expect(container.querySelector('.strand-container-scale')).toBeInTheDocument()
+  })
+
+  it('BEM parts render with scoped classes', () => {
+    expect(render(ContainerScaleRow).container.querySelector('.strand-container-scale__row')).toBeInTheDocument()
+    expect(render(ContainerScaleLabel).container.querySelector('.strand-container-scale__label')).toBeInTheDocument()
+    expect(render(ContainerScaleCaption).container.querySelector('.strand-container-scale__caption')).toBeInTheDocument()
+    expect(render(ContainerScaleTrack).container.querySelector('.strand-container-scale__track')).toBeInTheDocument()
+    expect(render(ContainerScalePx).container.querySelector('.strand-container-scale__px')).toBeInTheDocument()
+    expect(render(ContainerScaleAxis).container.querySelector('.strand-container-scale__axis')).toBeInTheDocument()
+  })
+
+  it('Bar inline width', () => {
+    const { container } = render(ContainerScaleBar, { props: { width: '60%' } })
+    const el = container.querySelector('.strand-container-scale__bar') as HTMLElement
+    expect(el.style.width).toBe('60%')
+  })
+})

package/src/components/ContainerScale/ContainerScaleAxis.svelte

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

package/src/components/ContainerScale/ContainerScaleBar.svelte

@@ -0,0 +1,9 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  export let width: string | undefined = undefined
+  $: styleAttr = width ? `width: ${width};` : ''
+</script>
+
+<div class="strand-container-scale__bar" style={styleAttr} {...$$restProps}>
+  <slot />
+</div>

package/src/components/ContainerScale/ContainerScaleCaption.svelte

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

package/src/components/ContainerScale/ContainerScaleLabel.svelte

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

package/src/components/ContainerScale/ContainerScalePx.svelte

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

package/src/components/ContainerScale/ContainerScaleRow.svelte

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

package/src/components/ContainerScale/ContainerScaleTrack.svelte

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

package/src/components/ContainerScale/index.ts

@@ -0,0 +1,9 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+export { default as ContainerScale } from './ContainerScale.svelte'
+export { default as ContainerScaleRow } from './ContainerScaleRow.svelte'
+export { default as ContainerScaleLabel } from './ContainerScaleLabel.svelte'
+export { default as ContainerScaleCaption } from './ContainerScaleCaption.svelte'
+export { default as ContainerScaleTrack } from './ContainerScaleTrack.svelte'
+export { default as ContainerScaleBar } from './ContainerScaleBar.svelte'
+export { default as ContainerScalePx } from './ContainerScalePx.svelte'
+export { default as ContainerScaleAxis } from './ContainerScaleAxis.svelte'

package/src/components/KvEditorial/KvEditorial.svelte

@@ -0,0 +1,20 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Label column content (mono, uppercase, left) */
+  export let label: string
+  /** Value column content (sans, blue-midnight, right) */
+  export let value: string
+  /** When true, applies --status color (teal-vital) to the value */
+  export let status: boolean = false
+
+  $: classes = ['strand-kv', 'strand-kv--editorial'].join(' ')
+  $: valueClasses = [
+    'strand-kv__value',
+    status ? 'strand-kv__value--status' : '',
+  ].filter(Boolean).join(' ')
+</script>
+
+<div class={classes} {...$$restProps}>
+  <span class="strand-kv__label">{label}</span>
+  <span class={valueClasses}>{value}</span>
+</div>

package/src/components/KvEditorial/KvEditorial.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 KvEditorial from './KvEditorial.svelte'
+
+describe('KvEditorial', () => {
+  it('renders base + --editorial classes', () => {
+    const { container } = render(KvEditorial, {
+      props: { label: 'A', value: 'B' },
+    })
+    const el = container.querySelector('.strand-kv')
+    expect(el).toBeInTheDocument()
+    expect(el).toHaveClass('strand-kv--editorial')
+  })
+
+  it('renders label and value', () => {
+    const { getByText } = render(KvEditorial, {
+      props: { label: 'Owner', value: 'DS' },
+    })
+    expect(getByText('Owner')).toBeInTheDocument()
+    expect(getByText('DS')).toBeInTheDocument()
+  })
+
+  it('applies --status modifier when status is true', () => {
+    const { container } = render(KvEditorial, {
+      props: { label: 'A', value: 'B', status: true },
+    })
+    const valueEl = container.querySelector('.strand-kv__value')
+    expect(valueEl).toHaveClass('strand-kv__value--status')
+  })
+})

package/src/components/KvEditorial/index.ts

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

package/src/components/LabFrame/LabFrame.svelte

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

package/src/components/LabFrame/LabFrame.test.ts

@@ -0,0 +1,76 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import LabFrame from './LabFrame.svelte'
+import LabFrameChrome from './LabFrameChrome.svelte'
+import LabFrameDot from './LabFrameDot.svelte'
+import LabFrameTitle from './LabFrameTitle.svelte'
+import LabFrameBody from './LabFrameBody.svelte'
+import LabFrameContent from './LabFrameContent.svelte'
+import LabFrameContentHead from './LabFrameContentHead.svelte'
+import LabFrameActions from './LabFrameActions.svelte'
+import LabFrameOverlay from './LabFrameOverlay.svelte'
+import LabFramePanel from './LabFramePanel.svelte'
+import LabFramePanelHeader from './LabFramePanelHeader.svelte'
+import LabFramePanelTitle from './LabFramePanelTitle.svelte'
+import LabFramePanelClose from './LabFramePanelClose.svelte'
+import LabFramePanelBody from './LabFramePanelBody.svelte'
+import LabFramePanelFooter from './LabFramePanelFooter.svelte'
+
+describe('LabFrame family (Svelte)', () => {
+  it('LabFrame base class', () => {
+    const { container } = render(LabFrame)
+    expect(container.querySelector('.strand-ref-frame')).toBeInTheDocument()
+  })
+
+  it('Chrome / Title / Body render', () => {
+    expect(render(LabFrameChrome).container.querySelector('.strand-ref-frame__chrome')).toBeInTheDocument()
+    expect(render(LabFrameTitle).container.querySelector('span.strand-ref-frame__title')).toBeInTheDocument()
+    expect(render(LabFrameBody).container.querySelector('.strand-ref-frame__body')).toBeInTheDocument()
+  })
+
+  it('Dot applies inline background', () => {
+    const { container } = render(LabFrameDot, { props: { color: '#ff5f57' } })
+    const el = container.querySelector('.strand-ref-frame__dot') as HTMLElement
+    expect(el.style.background).toBe('rgb(255, 95, 87)')
+  })
+
+  it('Content aria-hidden when hidden=true', () => {
+    const { container } = render(LabFrameContent, { props: { hidden: true } })
+    expect(container.querySelector('.strand-ref-frame__content')?.getAttribute('aria-hidden')).toBe('true')
+  })
+
+  it('Content no aria-hidden default', () => {
+    const { container } = render(LabFrameContent)
+    expect(container.querySelector('.strand-ref-frame__content')?.getAttribute('aria-hidden')).toBeNull()
+  })
+
+  it('Overlay + Panel (role=dialog, aria-modal)', () => {
+    expect(render(LabFrameOverlay).container.querySelector('.strand-ref-frame__overlay')).toBeInTheDocument()
+    const { container } = render(LabFramePanel)
+    const panel = container.querySelector('.strand-ref-frame__panel') as HTMLElement
+    expect(panel.getAttribute('role')).toBe('dialog')
+    expect(panel.getAttribute('aria-modal')).toBe('true')
+  })
+
+  it('Panel parts render correct tags', () => {
+    expect(render(LabFramePanelHeader).container.querySelector('.strand-ref-frame__panel-header')).toBeInTheDocument()
+    expect(render(LabFramePanelTitle).container.querySelector('h2.strand-ref-frame__panel-title')).toBeInTheDocument()
+    expect(render(LabFramePanelBody).container.querySelector('.strand-ref-frame__panel-body')).toBeInTheDocument()
+    expect(render(LabFramePanelFooter).container.querySelector('.strand-ref-frame__panel-footer')).toBeInTheDocument()
+  })
+
+  it('Panel close is a button with default aria-label', () => {
+    const { container } = render(LabFramePanelClose)
+    const btn = container.querySelector('button.strand-ref-frame__panel-close') as HTMLButtonElement
+    expect(btn).toBeInTheDocument()
+    expect(btn.type).toBe('button')
+    expect(btn.getAttribute('aria-label')).toBe('Close')
+  })
+
+  it('ContentHead + Actions render', () => {
+    expect(render(LabFrameContentHead).container.querySelector('.strand-ref-frame__content-head')).toBeInTheDocument()
+    expect(render(LabFrameActions).container.querySelector('.strand-ref-frame__actions')).toBeInTheDocument()
+  })
+})

package/src/components/LabFrame/LabFrameActions.svelte

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

package/src/components/LabFrame/LabFrameBody.svelte

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

package/src/components/LabFrame/LabFrameChrome.svelte

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

package/src/components/LabFrame/LabFrameContent.svelte

@@ -0,0 +1,12 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  export let hidden: boolean = false
+</script>
+
+<div
+  class="strand-ref-frame__content"
+  aria-hidden={hidden ? 'true' : undefined}
+  {...$$restProps}
+>
+  <slot />
+</div>

package/src/components/LabFrame/LabFrameContentHead.svelte

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

package/src/components/LabFrame/LabFrameDot.svelte

@@ -0,0 +1,7 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  export let color: string | undefined = undefined
+  $: styleAttr = color ? `background: ${color};` : ''
+</script>
+
+<span class="strand-ref-frame__dot" style={styleAttr} {...$$restProps}></span>

package/src/components/LabFrame/LabFrameOverlay.svelte

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

package/src/components/LabFrame/LabFramePanel.svelte

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

package/src/components/LabFrame/LabFramePanelBody.svelte

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

package/src/components/LabFrame/LabFramePanelClose.svelte

@@ -0,0 +1,8 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  export let ariaLabel: string = 'Close'
+</script>
+
+<button type="button" class="strand-ref-frame__panel-close" aria-label={ariaLabel} {...$$restProps}>
+  <slot>×</slot>
+</button>

package/src/components/LabFrame/LabFramePanelFooter.svelte

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

package/src/components/LabFrame/LabFramePanelHeader.svelte

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

package/src/components/LabFrame/LabFramePanelTitle.svelte

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

package/src/components/LabFrame/LabFrameTitle.svelte

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

package/src/components/LabFrame/index.ts

@@ -0,0 +1,16 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+export { default as LabFrame } from './LabFrame.svelte'
+export { default as LabFrameChrome } from './LabFrameChrome.svelte'
+export { default as LabFrameDot } from './LabFrameDot.svelte'
+export { default as LabFrameTitle } from './LabFrameTitle.svelte'
+export { default as LabFrameBody } from './LabFrameBody.svelte'
+export { default as LabFrameContent } from './LabFrameContent.svelte'
+export { default as LabFrameContentHead } from './LabFrameContentHead.svelte'
+export { default as LabFrameActions } from './LabFrameActions.svelte'
+export { default as LabFrameOverlay } from './LabFrameOverlay.svelte'
+export { default as LabFramePanel } from './LabFramePanel.svelte'
+export { default as LabFramePanelHeader } from './LabFramePanelHeader.svelte'
+export { default as LabFramePanelTitle } from './LabFramePanelTitle.svelte'
+export { default as LabFramePanelClose } from './LabFramePanelClose.svelte'
+export { default as LabFramePanelBody } from './LabFramePanelBody.svelte'
+export { default as LabFramePanelFooter } from './LabFramePanelFooter.svelte'

package/src/components/LabGlassStage/LabGlassPanel.svelte

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

package/src/components/LabGlassStage/LabGlassStage.svelte

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

package/src/components/LabGlassStage/LabGlassStage.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 LabGlassStage from './LabGlassStage.svelte'
+import LabGlassPanel from './LabGlassPanel.svelte'
+
+describe('LabGlassStage (Svelte)', () => {
+  it('Stage base class', () => {
+    const { container } = render(LabGlassStage)
+    expect(container.querySelector('.strand-ref-glass-stage')).toBeInTheDocument()
+  })
+
+  it('Panel base class', () => {
+    const { container } = render(LabGlassPanel)
+    expect(container.querySelector('.strand-ref-glass-panel')).toBeInTheDocument()
+  })
+})

package/src/components/LabGlassStage/index.ts

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

package/src/components/LabRevealStage/LabRevealLine.svelte

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

package/src/components/LabRevealStage/LabRevealStage.svelte

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

package/src/components/LabRevealStage/LabRevealStage.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 LabRevealStage from './LabRevealStage.svelte'
+import LabRevealLine from './LabRevealLine.svelte'
+
+describe('LabRevealStage (Svelte)', () => {
+  it('Stage base class', () => {
+    const { container } = render(LabRevealStage)
+    expect(container.querySelector('.strand-ref-reveal-stage')).toBeInTheDocument()
+  })
+
+  it('Line base class', () => {
+    const { container } = render(LabRevealLine)
+    expect(container.querySelector('.strand-ref-reveal-line')).toBeInTheDocument()
+  })
+})

package/src/components/LabRevealStage/index.ts

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

package/src/components/LabShell/LabBrand.svelte

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

package/src/components/LabShell/LabBrandMark.svelte

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

package/src/components/LabShell/LabBrandSub.svelte

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

package/src/components/LabShell/LabBrandTitle.svelte

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

package/src/components/LabShell/LabExample.svelte

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

package/src/components/LabShell/LabExampleCaption.svelte

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

package/src/components/LabShell/LabExampleCode.svelte

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

package/src/components/LabShell/LabExampleDemo.svelte

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

package/src/components/LabShell/LabExampleLabel.svelte

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

package/src/components/LabShell/LabExampleMeta.svelte

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

package/src/components/LabShell/LabHeader.svelte

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

package/src/components/LabShell/LabHeaderLead.svelte

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

package/src/components/LabShell/LabHeaderMeta.svelte

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

package/src/components/LabShell/LabHeaderMetaItem.svelte

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

package/src/components/LabShell/LabHeaderMetaLabel.svelte

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

package/src/components/LabShell/LabHeaderMetaValue.svelte

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

package/src/components/LabShell/LabHeaderTitle.svelte

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

package/src/components/LabShell/LabMain.svelte

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