@dillingerstaffing/strand-svelte 0.14.0 → 0.15.1

package/src/components/Switch/Switch.svelte

@@ -1,4 +1,17 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Toggle switch for binary on/off settings with optional inline label.
+
+  @example
+  ```svelte
+  <script>
+    import { Switch } from '@dillingerstaffing/strand-svelte';
+    let darkMode = false;
+  </script>
+
+  <Switch bind:checked={darkMode} label="Dark mode" />
+  ```
+-->
 <script lang="ts">
   /** Controlled checked state */
   export let checked: boolean = false

package/src/components/Table/Table.svelte

@@ -1,4 +1,25 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Data table with column definitions, sortable headers, and row rendering.
+
+  @example
+  ```svelte
+  <script>
+    import { Table } from '@dillingerstaffing/strand-svelte';
+
+    const columns = [
+      { key: 'name', header: 'Name', sortable: true },
+      { key: 'role', header: 'Role' },
+    ];
+    const data = [
+      { name: 'Jane', role: 'Engineer' },
+      { name: 'Alex', role: 'Designer' },
+    ];
+  </script>
+
+  <Table {columns} {data} onsort={(key, dir) => console.log(key, dir)} />
+  ```
+-->
 <script lang="ts">
   export interface TableColumn {
     /** Unique key matching the data field */

package/src/components/Tabs/Tabs.svelte

@@ -1,4 +1,24 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Tabbed content switcher with keyboard navigation and ARIA tab pattern.
+
+  @example
+  ```svelte
+  <script>
+    import { Tabs } from '@dillingerstaffing/strand-svelte';
+    let activeTab = 'overview';
+    const tabs = [
+      { id: 'overview', label: 'Overview' },
+      { id: 'details', label: 'Details' },
+    ];
+  </script>
+
+  <Tabs {tabs} bind:activeTab>
+    <div slot="overview"><p>Overview content</p></div>
+    <div slot="details"><p>Details content</p></div>
+  </Tabs>
+  ```
+-->
 <script lang="ts">
   export interface TabItem {
     id: string

package/src/components/Tag/Tag.svelte

@@ -1,4 +1,18 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Compact label for categorization, filtering, or status display.
+
+  @example
+  ```svelte
+  <script>
+    import { Tag } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Tag variant="solid" status="teal" removable onremove={() => {}}>
+    Active
+  </Tag>
+  ```
+-->
 <script lang="ts">
   /** Visual style variant */
   export let variant: 'solid' | 'outlined' = 'solid'

package/src/components/Textarea/Textarea.svelte

@@ -1,4 +1,17 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Multi-line text input with auto-resize, character count, and error state.
+
+  @example
+  ```svelte
+  <script>
+    import { Textarea } from '@dillingerstaffing/strand-svelte';
+    let text = '';
+  </script>
+
+  <Textarea bind:value={text} maxLength={500} showCount autoResize />
+  ```
+-->
 <script lang="ts">
   /** Auto-resize to fit content */
   export let autoResize: boolean = false

package/src/components/Toast/Toast.svelte

@@ -1,4 +1,16 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Standalone notification message with status indicator and optional dismiss.
+
+  @example
+  ```svelte
+  <script>
+    import { Toast } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Toast status="success" message="Changes saved." ondismiss={() => {}} />
+  ```
+-->
 <script lang="ts">
   import type { ToastStatus } from './useToast'
 

package/src/components/Toast/ToastProvider.svelte

@@ -1,4 +1,18 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Context provider that manages toast notifications for its subtree.
+
+  @example
+  ```svelte
+  <script>
+    import { ToastProvider } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <ToastProvider>
+    <App />
+  </ToastProvider>
+  ```
+-->
 <script lang="ts">
   import { onDestroy } from 'svelte'
   import { createToastContext } from './useToast'

package/src/components/Tooltip/Tooltip.svelte

@@ -1,4 +1,18 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Hover/focus-triggered text popup anchored to a trigger element.
+
+  @example
+  ```svelte
+  <script>
+    import { Tooltip, Button } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Tooltip content="Save your progress" position="top">
+    <Button variant="primary">Save</Button>
+  </Tooltip>
+  ```
+-->
 <script lang="ts">
   /** Tooltip text */
   export let content: string