@dillingerstaffing/strand-vue 0.14.0 → 0.15.1

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'
 

package/src/components/Textarea/Textarea.vue

@@ -1,4 +1,20 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Multi-line text input with auto-resize, character count, and error state.
+
+  @example
+  ```vue
+  <script setup>
+  import { ref } from 'vue';
+  import { Textarea } from '@dillingerstaffing/strand-vue';
+  const text = ref('');
+  </script>
+
+  <template>
+    <Textarea v-model:value="text" :max-length="500" show-count auto-resize />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed, ref, onMounted, watch } from 'vue'
 

package/src/components/Toast/Toast.vue

@@ -1,4 +1,18 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Standalone notification message with status indicator and optional dismiss.
+
+  @example
+  ```vue
+  <script setup>
+  import { Toast } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <Toast status="success" message="Changes saved." @dismiss="handleDismiss" />
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { ToastStatus } from './useToast'

package/src/components/Toast/ToastProvider.vue

@@ -1,4 +1,20 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Context provider that manages toast notifications for its subtree.
+
+  @example
+  ```vue
+  <script setup>
+  import { ToastProvider } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <ToastProvider>
+      <App />
+    </ToastProvider>
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { ref, provide, onUnmounted } from 'vue'
 import { ToastKey } from './useToast'

package/src/components/Tooltip/Tooltip.vue

@@ -1,4 +1,20 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<!--
+  Hover/focus-triggered text popup anchored to a trigger element.
+
+  @example
+  ```vue
+  <script setup>
+  import { Tooltip, Button } from '@dillingerstaffing/strand-vue';
+  </script>
+
+  <template>
+    <Tooltip content="Save your progress" position="top">
+      <Button variant="primary">Save</Button>
+    </Tooltip>
+  </template>
+  ```
+-->
 <script setup lang="ts">
 import { computed, ref, onUnmounted } from 'vue'