@dillingerstaffing/strand-vue 0.16.0 → 0.17.0

package/src/components/LabFrame/index.ts

@@ -0,0 +1,15 @@
+export { default as LabFrame } from './LabFrame.vue'
+export { default as LabFrameChrome } from './LabFrameChrome.vue'
+export { default as LabFrameDot } from './LabFrameDot.vue'
+export { default as LabFrameTitle } from './LabFrameTitle.vue'
+export { default as LabFrameBody } from './LabFrameBody.vue'
+export { default as LabFrameContent } from './LabFrameContent.vue'
+export { default as LabFrameContentHead } from './LabFrameContentHead.vue'
+export { default as LabFrameActions } from './LabFrameActions.vue'
+export { default as LabFrameOverlay } from './LabFrameOverlay.vue'
+export { default as LabFramePanel } from './LabFramePanel.vue'
+export { default as LabFramePanelHeader } from './LabFramePanelHeader.vue'
+export { default as LabFramePanelTitle } from './LabFramePanelTitle.vue'
+export { default as LabFramePanelClose } from './LabFramePanelClose.vue'
+export { default as LabFramePanelBody } from './LabFramePanelBody.vue'
+export { default as LabFramePanelFooter } from './LabFramePanelFooter.vue'

package/src/components/LabGlassStage/LabGlassPanel.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-glass-panel', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabGlassStage/LabGlassStage.test.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import LabGlassStage from './LabGlassStage.vue'
+import LabGlassPanel from './LabGlassPanel.vue'
+
+describe('LabGlassStage (Vue)', () => {
+  it('Stage base class', () => {
+    const { container } = render(LabGlassStage, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.className).toContain('strand-ref-glass-stage')
+  })
+
+  it('Panel base class', () => {
+    const { container } = render(LabGlassPanel, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.className).toContain('strand-ref-glass-panel')
+  })
+})

package/src/components/LabGlassStage/LabGlassStage.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-glass-stage', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabGlassStage/index.ts

@@ -0,0 +1,2 @@
+export { default as LabGlassStage } from './LabGlassStage.vue'
+export { default as LabGlassPanel } from './LabGlassPanel.vue'

package/src/components/LabRevealStage/LabRevealLine.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-reveal-line', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabRevealStage/LabRevealStage.test.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import LabRevealStage from './LabRevealStage.vue'
+import LabRevealLine from './LabRevealLine.vue'
+
+describe('LabRevealStage (Vue)', () => {
+  it('Stage base class', () => {
+    const { container } = render(LabRevealStage, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.className).toContain('strand-ref-reveal-stage')
+  })
+
+  it('Line base class', () => {
+    const { container } = render(LabRevealLine, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.className).toContain('strand-ref-reveal-line')
+  })
+})

package/src/components/LabRevealStage/LabRevealStage.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-reveal-stage', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabRevealStage/index.ts

@@ -0,0 +1,2 @@
+export { default as LabRevealStage } from './LabRevealStage.vue'
+export { default as LabRevealLine } from './LabRevealLine.vue'

package/src/components/LabShell/LabBrand.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-shell__brand', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabShell/LabBrandMark.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-shell__brand-mark', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabShell/LabBrandSub.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-shell__brand-sub', props.className].filter(Boolean).join(' '))
+</script>
+<template><span :class="classes" v-bind="$attrs"><slot /></span></template>

package/src/components/LabShell/LabBrandTitle.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-shell__brand-title', props.className].filter(Boolean).join(' '))
+</script>
+<template><span :class="classes" v-bind="$attrs"><slot /></span></template>

package/src/components/LabShell/LabExample.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-example', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabShell/LabExampleCaption.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-example__caption', props.className].filter(Boolean).join(' '))
+</script>
+<template><p :class="classes" v-bind="$attrs"><slot /></p></template>

package/src/components/LabShell/LabExampleCode.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-example__code', props.className].filter(Boolean).join(' '))
+</script>
+<template><span :class="classes" v-bind="$attrs"><slot /></span></template>

package/src/components/LabShell/LabExampleDemo.vue

@@ -0,0 +1,30 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  padNone?: boolean
+  recessed?: boolean
+  className?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  padNone: false,
+  recessed: false,
+  className: '',
+})
+
+const classes = computed(() =>
+  [
+    'strand-ref-example__demo',
+    props.padNone ? 'strand-ref-example__demo--pad-none' : '',
+    props.recessed ? 'strand-ref-example__demo--recessed' : '',
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+</script>
+
+<template>
+  <div :class="classes" v-bind="$attrs"><slot /></div>
+</template>

package/src/components/LabShell/LabExampleLabel.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-example__label', props.className].filter(Boolean).join(' '))
+</script>
+<template><span :class="classes" v-bind="$attrs"><slot /></span></template>

package/src/components/LabShell/LabExampleMeta.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-example__meta', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabShell/LabHeader.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-header', props.className].filter(Boolean).join(' '))
+</script>
+<template><header :class="classes" v-bind="$attrs"><slot /></header></template>

package/src/components/LabShell/LabHeaderLead.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-header__lead', props.className].filter(Boolean).join(' '))
+</script>
+<template><p :class="classes" v-bind="$attrs"><slot /></p></template>

package/src/components/LabShell/LabHeaderMeta.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-header__meta', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabShell/LabHeaderMetaItem.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-header__meta-item', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabShell/LabHeaderMetaLabel.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-header__meta-label', props.className].filter(Boolean).join(' '))
+</script>
+<template><span :class="classes" v-bind="$attrs"><slot /></span></template>

package/src/components/LabShell/LabHeaderMetaValue.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-header__meta-value', props.className].filter(Boolean).join(' '))
+</script>
+<template><span :class="classes" v-bind="$attrs"><slot /></span></template>

package/src/components/LabShell/LabHeaderTitle.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-header__title', props.className].filter(Boolean).join(' '))
+</script>
+<template><h1 :class="classes" v-bind="$attrs"><slot /></h1></template>

package/src/components/LabShell/LabMain.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-shell__main', props.className].filter(Boolean).join(' '))
+</script>
+<template><main :class="classes" v-bind="$attrs"><slot /></main></template>

package/src/components/LabShell/LabSection.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-section', props.className].filter(Boolean).join(' '))
+</script>
+<template><section :class="classes" v-bind="$attrs"><slot /></section></template>

package/src/components/LabShell/LabSectionBody.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-section__body', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabShell/LabSectionHead.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-section__head', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabShell/LabSectionHeadNote.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-section__head-note', props.className].filter(Boolean).join(' '))
+</script>
+<template><span :class="classes" v-bind="$attrs"><slot /></span></template>

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

@@ -0,0 +1,166 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import LabShell from './LabShell.vue'
+import LabSidebar from './LabSidebar.vue'
+import LabSidebarHead from './LabSidebarHead.vue'
+import LabSidebarScroll from './LabSidebarScroll.vue'
+import LabBrand from './LabBrand.vue'
+import LabBrandMark from './LabBrandMark.vue'
+import LabBrandTitle from './LabBrandTitle.vue'
+import LabBrandSub from './LabBrandSub.vue'
+import LabSidebarGroup from './LabSidebarGroup.vue'
+import LabSidebarGroupLabel from './LabSidebarGroupLabel.vue'
+import LabSidebarGroupList from './LabSidebarGroupList.vue'
+import LabSidebarGroupLink from './LabSidebarGroupLink.vue'
+import LabSidebarGroupDot from './LabSidebarGroupDot.vue'
+import LabMain from './LabMain.vue'
+import LabHeader from './LabHeader.vue'
+import LabHeaderTitle from './LabHeaderTitle.vue'
+import LabHeaderLead from './LabHeaderLead.vue'
+import LabHeaderMeta from './LabHeaderMeta.vue'
+import LabHeaderMetaItem from './LabHeaderMetaItem.vue'
+import LabHeaderMetaLabel from './LabHeaderMetaLabel.vue'
+import LabHeaderMetaValue from './LabHeaderMetaValue.vue'
+import LabTaxonomy from './LabTaxonomy.vue'
+import LabTaxonomyTitle from './LabTaxonomyTitle.vue'
+import LabTaxonomyList from './LabTaxonomyList.vue'
+import LabSection from './LabSection.vue'
+import LabSectionHead from './LabSectionHead.vue'
+import LabSectionHeadNote from './LabSectionHeadNote.vue'
+import LabSectionBody from './LabSectionBody.vue'
+import LabExample from './LabExample.vue'
+import LabExampleMeta from './LabExampleMeta.vue'
+import LabExampleLabel from './LabExampleLabel.vue'
+import LabExampleCode from './LabExampleCode.vue'
+import LabExampleDemo from './LabExampleDemo.vue'
+import LabExampleCaption from './LabExampleCaption.vue'
+
+describe('LabShell family (Vue)', () => {
+  it('LabShell renders with base class', () => {
+    const { container } = render(LabShell, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.className).toContain('strand-ref-shell')
+  })
+
+  it('LabSidebar renders an aside', () => {
+    const { container } = render(LabSidebar, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.tagName).toBe('ASIDE')
+    expect(container.firstElementChild?.className).toContain('strand-ref-shell__sidebar')
+  })
+
+  it('LabSidebarHead + LabSidebarScroll render with scoped classes', () => {
+    const head = render(LabSidebarHead, { slots: { default: 'x' } })
+    expect(head.container.firstElementChild?.className).toContain('strand-ref-shell__sidebar-head')
+    const scroll = render(LabSidebarScroll, { slots: { default: 'x' } })
+    expect(scroll.container.firstElementChild?.className).toContain('strand-ref-shell__sidebar-scroll')
+  })
+
+  it('LabBrand + mark + title + sub compose', () => {
+    const brand = render(LabBrand, { slots: { default: 'x' } })
+    expect(brand.container.firstElementChild?.className).toContain('strand-ref-shell__brand')
+    const mark = render(LabBrandMark, { slots: { default: 'x' } })
+    expect(mark.container.firstElementChild?.className).toContain('strand-ref-shell__brand-mark')
+    const title = render(LabBrandTitle, { slots: { default: 'x' } })
+    expect(title.container.firstElementChild?.className).toContain('strand-ref-shell__brand-title')
+    const sub = render(LabBrandSub, { slots: { default: 'x' } })
+    expect(sub.container.firstElementChild?.className).toContain('strand-ref-shell__brand-sub')
+  })
+
+  it('LabSidebarGroup + label + list + link + dot render', () => {
+    const group = render(LabSidebarGroup, { slots: { default: 'x' } })
+    expect(group.container.firstElementChild?.className).toContain('strand-ref-shell__group')
+    const label = render(LabSidebarGroupLabel, { slots: { default: 'x' } })
+    expect(label.container.firstElementChild?.className).toContain('strand-ref-shell__group-label')
+    const list = render(LabSidebarGroupList, { slots: { default: 'x' } })
+    expect(list.container.firstElementChild?.tagName).toBe('NAV')
+    expect(list.container.firstElementChild?.className).toContain('strand-ref-shell__group-list')
+    const link = render(LabSidebarGroupLink, {
+      props: { href: '#typography' },
+      slots: { default: 'Typography' },
+    })
+    const a = link.container.firstElementChild as HTMLAnchorElement
+    expect(a.tagName).toBe('A')
+    expect(a.getAttribute('href')).toBe('#typography')
+    expect(a.className).toContain('strand-ref-shell__group-link')
+    expect(a.querySelector('.strand-ref-shell__group-dot')).toBeTruthy()
+    const dot = render(LabSidebarGroupDot)
+    expect(dot.container.firstElementChild?.tagName).toBe('SPAN')
+    expect(dot.container.firstElementChild?.className).toContain('strand-ref-shell__group-dot')
+  })
+
+  it('LabMain renders a <main>', () => {
+    const { container } = render(LabMain, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.tagName).toBe('MAIN')
+    expect(container.firstElementChild?.className).toContain('strand-ref-shell__main')
+  })
+
+  it('LabHeader family renders correct tags + classes', () => {
+    const h = render(LabHeader, { slots: { default: 'x' } })
+    expect(h.container.firstElementChild?.tagName).toBe('HEADER')
+    const t = render(LabHeaderTitle, { slots: { default: 'x' } })
+    expect(t.container.firstElementChild?.tagName).toBe('H1')
+    const l = render(LabHeaderLead, { slots: { default: 'x' } })
+    expect(l.container.firstElementChild?.tagName).toBe('P')
+    const m = render(LabHeaderMeta, { slots: { default: 'x' } })
+    expect(m.container.firstElementChild?.className).toContain('strand-ref-header__meta')
+    const mi = render(LabHeaderMetaItem, { slots: { default: 'x' } })
+    expect(mi.container.firstElementChild?.className).toContain('strand-ref-header__meta-item')
+    const ml = render(LabHeaderMetaLabel, { slots: { default: 'x' } })
+    expect(ml.container.firstElementChild?.className).toContain('strand-ref-header__meta-label')
+    const mv = render(LabHeaderMetaValue, { slots: { default: 'x' } })
+    expect(mv.container.firstElementChild?.className).toContain('strand-ref-header__meta-value')
+  })
+
+  it('LabTaxonomy family renders correct tags + classes', () => {
+    const tx = render(LabTaxonomy, { slots: { default: 'x' } })
+    expect(tx.container.firstElementChild?.className).toContain('strand-ref-taxonomy')
+    const ti = render(LabTaxonomyTitle, { slots: { default: 'x' } })
+    expect(ti.container.firstElementChild?.className).toContain('strand-ref-taxonomy__title')
+    const ls = render(LabTaxonomyList, { slots: { default: 'x' } })
+    expect(ls.container.firstElementChild?.tagName).toBe('DL')
+    expect(ls.container.firstElementChild?.className).toContain('strand-ref-taxonomy__list')
+  })
+
+  it('LabSection family renders correct tags + classes', () => {
+    const s = render(LabSection, { slots: { default: 'x' } })
+    expect(s.container.firstElementChild?.tagName).toBe('SECTION')
+    expect(s.container.firstElementChild?.className).toContain('strand-ref-section')
+    const sh = render(LabSectionHead, { slots: { default: 'x' } })
+    expect(sh.container.firstElementChild?.className).toContain('strand-ref-section__head')
+    const shn = render(LabSectionHeadNote, { slots: { default: 'x' } })
+    expect(shn.container.firstElementChild?.className).toContain('strand-ref-section__head-note')
+    const sb = render(LabSectionBody, { slots: { default: 'x' } })
+    expect(sb.container.firstElementChild?.className).toContain('strand-ref-section__body')
+  })
+
+  it('LabExample family renders correct classes', () => {
+    const e = render(LabExample, { slots: { default: 'x' } })
+    expect(e.container.firstElementChild?.className).toContain('strand-ref-example')
+    const em = render(LabExampleMeta, { slots: { default: 'x' } })
+    expect(em.container.firstElementChild?.className).toContain('strand-ref-example__meta')
+    const el = render(LabExampleLabel, { slots: { default: 'x' } })
+    expect(el.container.firstElementChild?.className).toContain('strand-ref-example__label')
+    const ec = render(LabExampleCode, { slots: { default: 'x' } })
+    expect(ec.container.firstElementChild?.className).toContain('strand-ref-example__code')
+    const ed = render(LabExampleDemo, { slots: { default: 'x' } })
+    expect(ed.container.firstElementChild?.className).toContain('strand-ref-example__demo')
+    const ep = render(LabExampleCaption, { slots: { default: 'x' } })
+    expect(ep.container.firstElementChild?.tagName).toBe('P')
+    expect(ep.container.firstElementChild?.className).toContain('strand-ref-example__caption')
+  })
+
+  it('LabExampleDemo padNone adds --pad-none modifier', () => {
+    const { container } = render(LabExampleDemo, {
+      props: { padNone: true },
+      slots: { default: 'x' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-ref-example__demo--pad-none')
+  })
+
+  it('LabExampleDemo recessed adds --recessed modifier', () => {
+    const { container } = render(LabExampleDemo, {
+      props: { recessed: true },
+      slots: { default: 'x' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-ref-example__demo--recessed')
+  })
+})

package/src/components/LabShell/LabShell.vue

@@ -0,0 +1,12 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-shell', props.className].filter(Boolean).join(' '))
+</script>
+
+<template>
+  <div :class="classes" v-bind="$attrs"><slot /></div>
+</template>

package/src/components/LabShell/LabSidebar.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-shell__sidebar', props.className].filter(Boolean).join(' '))
+</script>
+<template><aside :class="classes" v-bind="$attrs"><slot /></aside></template>

package/src/components/LabShell/LabSidebarGroup.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-shell__group', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabShell/LabSidebarGroupDot.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-shell__group-dot', props.className].filter(Boolean).join(' '))
+</script>
+<template><span :class="classes" v-bind="$attrs" /></template>

package/src/components/LabShell/LabSidebarGroupLabel.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-shell__group-label', props.className].filter(Boolean).join(' '))
+</script>
+<template><span :class="classes" v-bind="$attrs"><slot /></span></template>

package/src/components/LabShell/LabSidebarGroupLink.vue

@@ -0,0 +1,14 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { href?: string; className?: string }
+const props = withDefaults(defineProps<Props>(), { href: '#', className: '' })
+const classes = computed(() => ['strand-ref-shell__group-link', props.className].filter(Boolean).join(' '))
+</script>
+
+<template>
+  <a :class="classes" :href="props.href" v-bind="$attrs">
+    <span class="strand-ref-shell__group-dot"></span>
+    <slot />
+  </a>
+</template>

package/src/components/LabShell/LabSidebarGroupList.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-shell__group-list', props.className].filter(Boolean).join(' '))
+</script>
+<template><nav :class="classes" v-bind="$attrs"><slot /></nav></template>

package/src/components/LabShell/LabSidebarHead.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-shell__sidebar-head', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabShell/LabSidebarScroll.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-shell__sidebar-scroll', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabShell/LabTaxonomy.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-taxonomy', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>