@dillingerstaffing/strand-vue 0.15.0 → 0.15.1

package/src/components/Avatar/Avatar.vue

@@ -1,4 +1,19 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Circular user representation with image, initials fallback, and multiple sizes.
+
+  @example
+  ```vue
+  <script setup>
+  import { Avatar } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <Avatar src="/photo.jpg" alt="Jane Doe" size="lg" />
+    <Avatar initials="JD" size="md" />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 

package/src/components/Badge/Badge.vue

@@ -1,4 +1,21 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Small status indicator or notification count, displayed inline or overlaid on content.
+
+  @example
+  ```vue
+  <script setup>
+  import { Badge } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <Badge variant="count" status="red" :count="5">
+      <button>Notifications</button>
+    </Badge>
+    <Badge variant="dot" status="teal" />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
 

package/src/components/Breadcrumb/Breadcrumb.vue

@@ -1,4 +1,24 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Hierarchical navigation path showing the current page location.
+
+  @example
+  ```vue
+  <script setup>
+  import { Breadcrumb } from '@dillingerstaffing/strand-vue';
+
+  const items = [
+    { label: 'Home', href: '/' },
+    { label: 'Settings', href: '/settings' },
+    { label: 'Profile' },
+  ];
+  </script>
+
+  <template>
+    <Breadcrumb :items="items" />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/Button/Button.vue

@@ -1,4 +1,20 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Primary action trigger with multiple visual variants and sizes.
+
+  @example
+  ```vue
+  <script setup>
+  import { Button } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <Button variant="primary" size="md" @click="handleClick">
+      Submit
+    </Button>
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/Card/Card.vue

@@ -1,4 +1,21 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Contained surface for grouping related content with elevation and padding options.
+
+  @example
+  ```vue
+  <script setup>
+  import { Card } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <Card variant="elevated" padding="lg">
+      <h3>Card Title</h3>
+      <p>Card content goes here.</p>
+    </Card>
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/Checkbox/Checkbox.vue

@@ -1,4 +1,20 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Toggle control for boolean or indeterminate selections with optional label.
+
+  @example
+  ```vue
+  <script setup>
+  import { ref } from 'vue';
+  import { Checkbox } from '@dillingerstaffing/strand-vue';
+  const accepted = ref(false);
+  </script>
+
+  <template>
+    <Checkbox v-model:checked="accepted" label="Accept terms" />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed, ref, watch, onMounted } from 'vue'
 

package/src/components/CodeBlock/CodeBlock.vue

@@ -1,4 +1,18 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Syntax-highlighted code display with optional language label and copy-to-clipboard.
+
+  @example
+  ```vue
+  <script setup>
+  import { CodeBlock } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <CodeBlock code="const x = 42;" language="js" copyable />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref } from 'vue'
 

package/src/components/Container/Container.vue

@@ -1,4 +1,20 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Centered max-width wrapper for constraining page content.
+
+  @example
+  ```vue
+  <script setup>
+  import { Container } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <Container size="default">
+      <p>Content constrained to default max width.</p>
+    </Container>
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/DataReadout/DataReadout.vue

@@ -1,4 +1,18 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Instrument-panel metric display with overline label and prominent value.
+
+  @example
+  ```vue
+  <script setup>
+  import { DataReadout } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <DataReadout label="Conversion Rate" value="94%" size="lg" />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/Dialog/Dialog.vue

@@ -1,4 +1,22 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Modal overlay with focus trapping, scroll lock, and backdrop click dismissal.
+
+  @example
+  ```vue
+  <script setup>
+  import { ref } from 'vue';
+  import { Dialog } from '@dillingerstaffing/strand-vue';
+  const isOpen = ref(false);
+  </script>
+
+  <template>
+    <Dialog :open="isOpen" title="Confirm" @close="isOpen = false">
+      <p>Are you sure?</p>
+    </Dialog>
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed, ref, watch, onUnmounted, nextTick } from 'vue'
 

package/src/components/Divider/Divider.vue

@@ -1,4 +1,18 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Visual separator line between content sections, horizontal or vertical.
+
+  @example
+  ```vue
+  <script setup>
+  import { Divider } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <Divider direction="horizontal" label="OR" />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/FormField/FormField.vue

@@ -1,4 +1,20 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Form control wrapper providing label, hint text, error messaging, and required indicator.
+
+  @example
+  ```vue
+  <script setup>
+  import { FormField, Input } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <FormField label="Email" html-for="email" hint="Work email preferred" required>
+      <Input id="email" type="email" />
+    </FormField>
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/Grid/Grid.vue

@@ -1,4 +1,22 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  CSS Grid layout with configurable column count and gap spacing.
+
+  @example
+  ```vue
+  <script setup>
+  import { Grid, Card } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <Grid :columns="3" :gap="6">
+      <Card>Item 1</Card>
+      <Card>Item 2</Card>
+      <Card>Item 3</Card>
+    </Grid>
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/Input/Input.vue

@@ -1,4 +1,18 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Text input field with optional leading/trailing addons and error state.
+
+  @example
+  ```vue
+  <script setup>
+  import { Input } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <Input type="email" placeholder="you@example.com" />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
 

package/src/components/InstrumentViewport/InstrumentViewport.vue

@@ -1,4 +1,20 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Recessed dark surface for displaying instrument-style UI components.
+
+  @example
+  ```vue
+  <script setup>
+  import { InstrumentViewport, DataReadout } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <InstrumentViewport grid>
+      <DataReadout label="Uptime" value="99.9%" />
+    </InstrumentViewport>
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/Link/Link.vue

@@ -1,4 +1,19 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Styled anchor element with external-link handling and visual variants.
+
+  @example
+  ```vue
+  <script setup>
+  import { Link } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <Link href="/docs" variant="cta">Read the docs</Link>
+    <Link href="https://example.com" external>External site</Link>
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/Nav/Nav.vue

@@ -1,4 +1,27 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Top-level navigation bar with logo slot, link items, actions, and responsive mobile menu.
+
+  @example
+  ```vue
+  <script setup>
+  import { Nav } from '@dillingerstaffing/strand-vue';
+
+  const items = [
+    { label: 'Home', href: '/', active: true },
+    { label: 'About', href: '/about' },
+  ];
+  </script>
+
+  <template>
+    <Nav :items="items" glass>
+      <template #logo>
+        <img src="/logo.svg" alt="Brand" />
+      </template>
+    </Nav>
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 

package/src/components/Progress/Progress.vue

@@ -1,4 +1,19 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Determinate or indeterminate progress indicator in bar or ring form.
+
+  @example
+  ```vue
+  <script setup>
+  import { Progress } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <Progress variant="bar" :value="65" size="md" />
+    <Progress variant="ring" size="lg" />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/Radio/Radio.vue

@@ -1,4 +1,21 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Single-selection control for use within a radio group.
+
+  @example
+  ```vue
+  <script setup>
+  import { ref } from 'vue';
+  import { Radio } from '@dillingerstaffing/strand-vue';
+  const selected = ref('pro');
+  </script>
+
+  <template>
+    <Radio name="plan" value="pro" label="Pro" :checked="selected === 'pro'" @change="selected = 'pro'" />
+    <Radio name="plan" value="free" label="Free" :checked="selected === 'free'" @change="selected = 'free'" />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/ScrollReveal/ScrollReveal.vue

@@ -1,4 +1,20 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Intersection Observer wrapper that reveals children with a transition on scroll.
+
+  @example
+  ```vue
+  <script setup>
+  import { ScrollReveal } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <ScrollReveal :threshold="0.2" once>
+      <p>This content fades in on scroll.</p>
+    </ScrollReveal>
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed, ref, onMounted, onUnmounted } from 'vue'
 

package/src/components/Section/Section.vue

@@ -1,4 +1,22 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Page-level content region with padding, background, and optional top border.
+
+  @example
+  ```vue
+  <script setup>
+  import { Section, Container } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <Section variant="hero" background="recessed">
+      <Container>
+        <h1>Hero Section</h1>
+      </Container>
+    </Section>
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/Select/Select.vue

@@ -1,4 +1,24 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Native select dropdown with styled wrapper, error state, and placeholder support.
+
+  @example
+  ```vue
+  <script setup>
+  import { ref } from 'vue';
+  import { Select } from '@dillingerstaffing/strand-vue';
+  const role = ref('eng');
+  const options = [
+    { value: 'eng', label: 'Engineer' },
+    { value: 'design', label: 'Designer' },
+  ];
+  </script>
+
+  <template>
+    <Select placeholder="Choose a role" :options="options" v-model:value="role" />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/Skeleton/Skeleton.vue

@@ -1,4 +1,20 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Placeholder shimmer shape used while content is loading.
+
+  @example
+  ```vue
+  <script setup>
+  import { Skeleton } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <Skeleton variant="text" width="60%" />
+    <Skeleton variant="circle" width="48px" />
+    <Skeleton variant="rectangle" width="100%" height="200px" />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/Slider/Slider.vue

@@ -1,4 +1,20 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Range input control for selecting a numeric value within a bounded interval.
+
+  @example
+  ```vue
+  <script setup>
+  import { ref } from 'vue';
+  import { Slider } from '@dillingerstaffing/strand-vue';
+  const value = ref(50);
+  </script>
+
+  <template>
+    <Slider :min="0" :max="100" :step="5" v-model:value="value" />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/Spinner/Spinner.vue

@@ -1,4 +1,18 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Animated loading indicator with screen-reader-accessible status text.
+
+  @example
+  ```vue
+  <script setup>
+  import { Spinner } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <Spinner size="lg" />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/Stack/Stack.vue

@@ -1,4 +1,21 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Flexbox layout container for arranging children with consistent spacing.
+
+  @example
+  ```vue
+  <script setup>
+  import { Stack, Button } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <Stack direction="horizontal" :gap="4" align="center">
+      <Button variant="primary">Save</Button>
+      <Button variant="secondary">Cancel</Button>
+    </Stack>
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/Switch/Switch.vue

@@ -1,4 +1,20 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Toggle switch for binary on/off settings with optional inline label.
+
+  @example
+  ```vue
+  <script setup>
+  import { ref } from 'vue';
+  import { Switch } from '@dillingerstaffing/strand-vue';
+  const darkMode = ref(false);
+  </script>
+
+  <template>
+    <Switch v-model:checked="darkMode" label="Dark mode" />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 

package/src/components/Table/Table.vue

@@ -1,4 +1,27 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Data table with column definitions, sortable headers, and row rendering.
+
+  @example
+  ```vue
+  <script setup>
+  import { Table } from '@dillingerstaffing/strand-vue';
+
+  const columns = [
+    { key: 'name', header: 'Name', sortable: true },
+    { key: 'role', header: 'Role' },
+  ];
+  const data = [
+    { name: 'Jane', role: 'Engineer' },
+    { name: 'Alex', role: 'Designer' },
+  ];
+  </script>
+
+  <template>
+    <Table :columns="columns" :data="data" @sort="(key, dir) => console.log(key, dir)" />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 

package/src/components/Tabs/Tabs.vue

@@ -1,4 +1,27 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Tabbed content switcher with keyboard navigation and ARIA tab pattern.
+
+  @example
+  ```vue
+  <script setup>
+  import { ref } from 'vue';
+  import { Tabs } from '@dillingerstaffing/strand-vue';
+  const activeTab = ref('overview');
+  const tabs = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'details', label: 'Details' },
+  ];
+  </script>
+
+  <template>
+    <Tabs :tabs="tabs" v-model:active-tab="activeTab">
+      <template #overview><p>Overview content</p></template>
+      <template #details><p>Details content</p></template>
+    </Tabs>
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 

package/src/components/Tag/Tag.vue

@@ -1,4 +1,20 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Compact label for categorization, filtering, or status display.
+
+  @example
+  ```vue
+  <script setup>
+  import { Tag } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <Tag variant="solid" status="teal" removable @remove="handleRemove">
+      Active
+    </Tag>
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'