@dillingerstaffing/strand-vue 0.16.1 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-vue",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "description": "Strand UI - Vue 3 component library built on the Strand Design Language",
   "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
   "license": "MIT",
@@ -53,7 +53,7 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "@dillingerstaffing/strand": "^0.16.1"
+    "@dillingerstaffing/strand": "^0.17.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.0",

package/src/components/CardSection/CardSection.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import CardSection from './CardSection.vue'
+
+describe('CardSection', () => {
+  it('renders a div element', () => {
+    const { container } = render(CardSection, { slots: { default: 'Content' } })
+    expect(container.firstElementChild?.tagName).toBe('DIV')
+  })
+
+  it('renders slot content', () => {
+    const { getByText } = render(CardSection, { slots: { default: 'Hello world' } })
+    expect(getByText('Hello world')).toBeTruthy()
+  })
+
+  it('applies the strand-card__section base class', () => {
+    const { container } = render(CardSection, { slots: { default: 'Test' } })
+    expect(container.firstElementChild?.className).toContain('strand-card__section')
+  })
+
+  it('does not apply --header modifier by default', () => {
+    const { container } = render(CardSection, { slots: { default: 'Test' } })
+    expect(container.firstElementChild?.className).not.toContain('strand-card__section--header')
+  })
+
+  it('applies --header modifier when header prop is true', () => {
+    const { container } = render(CardSection, {
+      props: { header: true },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-card__section--header')
+  })
+
+  it('merges custom className', () => {
+    const { container } = render(CardSection, {
+      props: { className: 'custom' },
+      slots: { default: 'Test' },
+    })
+    const el = container.firstElementChild
+    expect(el?.className).toContain('strand-card__section')
+    expect(el?.className).toContain('custom')
+  })
+
+  it('forwards additional attributes', () => {
+    const { container } = render(CardSection, {
+      attrs: { id: 's-1' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.getAttribute('id')).toBe('s-1')
+  })
+})

package/src/components/CardSection/CardSection.vue

@@ -0,0 +1,42 @@
+<!--! Strand Vue | 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.
+
+  Distinct from the standalone strand-card-section molecule
+  (DL 11.10 section-boundary production), which is a same-named
+  block used outside cards.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** When true, applies the --header layout (baseline, space-between, gap) */
+  header?: boolean
+  /** Additional CSS class */
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  header: false,
+  className: '',
+})
+
+const classes = computed(() =>
+  [
+    'strand-card__section',
+    props.header ? 'strand-card__section--header' : '',
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+</script>
+
+<template>
+  <div :class="classes" v-bind="$attrs">
+    <slot />
+  </div>
+</template>

package/src/components/CardSection/index.ts

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

package/src/components/ContainerScale/ContainerScale.test.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import ContainerScale from './ContainerScale.vue'
+import ContainerScaleRow from './ContainerScaleRow.vue'
+import ContainerScaleLabel from './ContainerScaleLabel.vue'
+import ContainerScaleCaption from './ContainerScaleCaption.vue'
+import ContainerScaleTrack from './ContainerScaleTrack.vue'
+import ContainerScaleBar from './ContainerScaleBar.vue'
+import ContainerScalePx from './ContainerScalePx.vue'
+import ContainerScaleAxis from './ContainerScaleAxis.vue'
+
+describe('ContainerScale (Vue)', () => {
+  it('root base class', () => {
+    const { container } = render(ContainerScale, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.className).toContain('strand-container-scale')
+  })
+
+  it('BEM parts render with scoped classes', () => {
+    const pairs: Array<[any, string]> = [
+      [ContainerScaleRow, 'strand-container-scale__row'],
+      [ContainerScaleLabel, 'strand-container-scale__label'],
+      [ContainerScaleCaption, 'strand-container-scale__caption'],
+      [ContainerScaleTrack, 'strand-container-scale__track'],
+      [ContainerScalePx, 'strand-container-scale__px'],
+      [ContainerScaleAxis, 'strand-container-scale__axis'],
+    ]
+    for (const [C, cls] of pairs) {
+      const { container } = render(C, { slots: { default: 'x' } })
+      expect(container.firstElementChild?.className).toContain(cls)
+    }
+  })
+
+  it('Bar applies inline width', () => {
+    const { container } = render(ContainerScaleBar, {
+      props: { width: '60%' },
+      slots: { default: 'x' },
+    })
+    const el = container.firstElementChild as HTMLElement
+    expect(el.style.width).toBe('60%')
+    expect(el.className).toContain('strand-container-scale__bar')
+  })
+})

package/src/components/ContainerScale/ContainerScale.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-container-scale', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/ContainerScale/ContainerScaleAxis.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-container-scale__axis', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/ContainerScale/ContainerScaleBar.vue

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

package/src/components/ContainerScale/ContainerScaleCaption.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-container-scale__caption', props.className].filter(Boolean).join(' '))
+</script>
+<template><span :class="classes" v-bind="$attrs"><slot /></span></template>

package/src/components/ContainerScale/ContainerScaleLabel.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-container-scale__label', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/ContainerScale/ContainerScalePx.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-container-scale__px', props.className].filter(Boolean).join(' '))
+</script>
+<template><span :class="classes" v-bind="$attrs"><slot /></span></template>

package/src/components/ContainerScale/ContainerScaleRow.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-container-scale__row', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/ContainerScale/ContainerScaleTrack.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-container-scale__track', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/ContainerScale/index.ts

@@ -0,0 +1,8 @@
+export { default as ContainerScale } from './ContainerScale.vue'
+export { default as ContainerScaleRow } from './ContainerScaleRow.vue'
+export { default as ContainerScaleLabel } from './ContainerScaleLabel.vue'
+export { default as ContainerScaleCaption } from './ContainerScaleCaption.vue'
+export { default as ContainerScaleTrack } from './ContainerScaleTrack.vue'
+export { default as ContainerScaleBar } from './ContainerScaleBar.vue'
+export { default as ContainerScalePx } from './ContainerScalePx.vue'
+export { default as ContainerScaleAxis } from './ContainerScaleAxis.vue'

package/src/components/KvEditorial/KvEditorial.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import KvEditorial from './KvEditorial.vue'
+
+describe('KvEditorial', () => {
+  it('renders a div with strand-kv base class', () => {
+    const { container } = render(KvEditorial, {
+      props: { label: 'A', value: 'B' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-kv')
+  })
+
+  it('applies --editorial modifier', () => {
+    const { container } = render(KvEditorial, {
+      props: { label: 'A', value: 'B' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-kv--editorial')
+  })
+
+  it('renders label and value', () => {
+    const { getByText } = render(KvEditorial, {
+      props: { label: 'Owner', value: 'DS' },
+    })
+    expect(getByText('Owner')).toBeTruthy()
+    expect(getByText('DS')).toBeTruthy()
+  })
+
+  it('does not apply --status by default', () => {
+    const { container } = render(KvEditorial, {
+      props: { label: 'A', value: 'B' },
+    })
+    const valueEl = container.querySelector('.strand-kv__value')
+    expect(valueEl?.className).not.toContain('strand-kv__value--status')
+  })
+
+  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?.className).toContain('strand-kv__value--status')
+  })
+})

package/src/components/KvEditorial/KvEditorial.vue

@@ -0,0 +1,56 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Card-metadata key-value row. Editorial sibling of the default
+  instrument strand-kv readout. Use inside CardSection bodies to
+  produce soft sans-serif Blue-midnight values separated by a
+  dashed divider.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** Label column content (mono, uppercase, left) */
+  label: string
+  /** Value column content (sans, blue-midnight, right) */
+  value: string
+  /** When true, applies --status color (teal-vital) to the value */
+  status?: boolean
+  /** Additional CSS class */
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  status: false,
+  className: '',
+})
+
+const classes = computed(() =>
+  [
+    'strand-kv',
+    'strand-kv--editorial',
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+
+const valueClasses = computed(() =>
+  [
+    'strand-kv__value',
+    props.status ? 'strand-kv__value--status' : '',
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+</script>
+
+<template>
+  <div :class="classes" v-bind="$attrs">
+    <span class="strand-kv__label">
+      <slot name="label">{{ label }}</slot>
+    </span>
+    <span :class="valueClasses">
+      <slot name="value">{{ value }}</slot>
+    </span>
+  </div>
+</template>

package/src/components/KvEditorial/index.ts

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

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

@@ -0,0 +1,89 @@
+import { describe, it, expect, vi } from 'vitest'
+import { fireEvent, render } from '@testing-library/vue'
+import LabFrame from './LabFrame.vue'
+import LabFrameChrome from './LabFrameChrome.vue'
+import LabFrameDot from './LabFrameDot.vue'
+import LabFrameTitle from './LabFrameTitle.vue'
+import LabFrameBody from './LabFrameBody.vue'
+import LabFrameContent from './LabFrameContent.vue'
+import LabFrameContentHead from './LabFrameContentHead.vue'
+import LabFrameActions from './LabFrameActions.vue'
+import LabFrameOverlay from './LabFrameOverlay.vue'
+import LabFramePanel from './LabFramePanel.vue'
+import LabFramePanelHeader from './LabFramePanelHeader.vue'
+import LabFramePanelTitle from './LabFramePanelTitle.vue'
+import LabFramePanelClose from './LabFramePanelClose.vue'
+import LabFramePanelBody from './LabFramePanelBody.vue'
+import LabFramePanelFooter from './LabFramePanelFooter.vue'
+
+describe('LabFrame family (Vue)', () => {
+  it('LabFrame base class', () => {
+    const { container } = render(LabFrame, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.className).toContain('strand-ref-frame')
+  })
+
+  it('Chrome + Title + Body render', () => {
+    expect(render(LabFrameChrome, { slots: { default: 'x' } }).container.firstElementChild?.className).toContain('strand-ref-frame__chrome')
+    expect(render(LabFrameTitle, { slots: { default: 'x' } }).container.firstElementChild?.className).toContain('strand-ref-frame__title')
+    expect(render(LabFrameBody, { slots: { default: 'x' } }).container.firstElementChild?.className).toContain('strand-ref-frame__body')
+  })
+
+  it('Dot applies inline background', () => {
+    const { container } = render(LabFrameDot, { props: { color: '#ff5f57' } })
+    const el = container.firstElementChild as HTMLElement
+    expect(el.style.background).toBe('rgb(255, 95, 87)')
+  })
+
+  it('Content aria-hidden when hidden prop is true', () => {
+    const { container } = render(LabFrameContent, {
+      props: { hidden: true },
+      slots: { default: 'x' },
+    })
+    expect(container.firstElementChild?.getAttribute('aria-hidden')).toBe('true')
+  })
+
+  it('Content no aria-hidden by default', () => {
+    const { container } = render(LabFrameContent, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.getAttribute('aria-hidden')).toBeNull()
+  })
+
+  it('Overlay and Panel render with roles', () => {
+    expect(render(LabFrameOverlay, { slots: { default: 'x' } }).container.firstElementChild?.className).toContain('strand-ref-frame__overlay')
+    const { container } = render(LabFramePanel, { slots: { default: 'x' } })
+    const panel = container.firstElementChild as HTMLElement
+    expect(panel.className).toContain('strand-ref-frame__panel')
+    expect(panel.getAttribute('role')).toBe('dialog')
+    expect(panel.getAttribute('aria-modal')).toBe('true')
+  })
+
+  it('Panel sub-elements render', () => {
+    expect(render(LabFramePanelHeader, { slots: { default: 'x' } }).container.firstElementChild?.className).toContain('strand-ref-frame__panel-header')
+    const { container } = render(LabFramePanelTitle, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.tagName).toBe('H2')
+    expect(render(LabFramePanelBody, { slots: { default: 'x' } }).container.firstElementChild?.className).toContain('strand-ref-frame__panel-body')
+    expect(render(LabFramePanelFooter, { slots: { default: 'x' } }).container.firstElementChild?.className).toContain('strand-ref-frame__panel-footer')
+  })
+
+  it('Panel close renders button + default aria-label', () => {
+    const { container } = render(LabFramePanelClose)
+    const btn = container.firstElementChild as HTMLButtonElement
+    expect(btn.tagName).toBe('BUTTON')
+    expect(btn.type).toBe('button')
+    expect(btn.getAttribute('aria-label')).toBe('Close')
+  })
+
+  it('Panel close accepts custom ariaLabel and children', () => {
+    const { container } = render(LabFramePanelClose, {
+      props: { ariaLabel: 'Close dialog' },
+      slots: { default: 'x' },
+    })
+    const btn = container.firstElementChild as HTMLButtonElement
+    expect(btn.getAttribute('aria-label')).toBe('Close dialog')
+    expect(btn.textContent).toBe('x')
+  })
+
+  it('ContentHead + Actions render', () => {
+    expect(render(LabFrameContentHead, { slots: { default: 'x' } }).container.firstElementChild?.className).toContain('strand-ref-frame__content-head')
+    expect(render(LabFrameActions, { slots: { default: 'x' } }).container.firstElementChild?.className).toContain('strand-ref-frame__actions')
+  })
+})

package/src/components/LabFrame/LabFrame.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-frame', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabFrame/LabFrameActions.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-frame__actions', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabFrame/LabFrameBody.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-frame__body', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabFrame/LabFrameChrome.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-frame__chrome', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabFrame/LabFrameContent.vue

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

package/src/components/LabFrame/LabFrameContentHead.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-frame__content-head', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabFrame/LabFrameDot.vue

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

package/src/components/LabFrame/LabFrameOverlay.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-frame__overlay', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabFrame/LabFramePanel.vue

@@ -0,0 +1,11 @@
+<!--! 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-frame__panel', props.className].filter(Boolean).join(' '))
+</script>
+
+<template>
+  <div :class="classes" role="dialog" aria-modal="true" v-bind="$attrs"><slot /></div>
+</template>

package/src/components/LabFrame/LabFramePanelBody.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-frame__panel-body', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabFrame/LabFramePanelClose.vue

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

package/src/components/LabFrame/LabFramePanelFooter.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-frame__panel-footer', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabFrame/LabFramePanelHeader.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-frame__panel-header', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabFrame/LabFramePanelTitle.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-frame__panel-title', props.className].filter(Boolean).join(' '))
+</script>
+<template><h2 :class="classes" v-bind="$attrs"><slot /></h2></template>

package/src/components/LabFrame/LabFrameTitle.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-frame__title', props.className].filter(Boolean).join(' '))
+</script>
+<template><span :class="classes" v-bind="$attrs"><slot /></span></template>