@dillingerstaffing/strand-svelte 0.15.0 → 0.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-svelte",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "Strand UI - Svelte component library built on the Strand Design Language",
   "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
   "license": "MIT",
@@ -55,7 +55,7 @@
     "svelte": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
-    "@dillingerstaffing/strand": "^0.15.0"
+    "@dillingerstaffing/strand": "^0.15.1"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.0",

package/src/components/Alert/Alert.svelte

@@ -1,4 +1,18 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Contextual feedback banner for status messages, warnings, and errors.
+
+  @example
+  ```svelte
+  <script>
+    import { Alert } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Alert status="success" dismissible ondismiss={() => {}}>
+    Operation completed successfully.
+  </Alert>
+  ```
+-->
 <script lang="ts">
   /** Visual status of the alert */
   export let status: 'info' | 'success' | 'warning' | 'error' = 'info'

package/src/components/Avatar/Avatar.svelte

@@ -1,4 +1,17 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Circular user representation with image, initials fallback, and multiple sizes.
+
+  @example
+  ```svelte
+  <script>
+    import { Avatar } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Avatar src="/photo.jpg" alt="Jane Doe" size="lg" />
+  <Avatar initials="JD" size="md" />
+  ```
+-->
 <script lang="ts">
   /** Image URL */
   export let src: string | undefined = undefined

package/src/components/Badge/Badge.svelte

@@ -1,4 +1,19 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Small status indicator or notification count, displayed inline or overlaid on content.
+
+  @example
+  ```svelte
+  <script>
+    import { Badge } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Badge variant="count" status="red" count={5}>
+    <button>Notifications</button>
+  </Badge>
+  <Badge variant="dot" status="teal" />
+  ```
+-->
 <script lang="ts">
   /** Badge display mode */
   export let variant: 'dot' | 'count' = 'count'

package/src/components/Breadcrumb/Breadcrumb.svelte

@@ -1,4 +1,22 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Hierarchical navigation path showing the current page location.
+
+  @example
+  ```svelte
+  <script>
+    import { Breadcrumb } from '@dillingerstaffing/strand-svelte';
+
+    const items = [
+      { label: 'Home', href: '/' },
+      { label: 'Settings', href: '/settings' },
+      { label: 'Profile' },
+    ];
+  </script>
+
+  <Breadcrumb {items} />
+  ```
+-->
 <script lang="ts">
   export interface BreadcrumbItem {
     label: string

package/src/components/Button/Button.svelte

@@ -1,4 +1,18 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Primary action trigger with multiple visual variants and sizes.
+
+  @example
+  ```svelte
+  <script>
+    import { Button } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Button variant="primary" size="md" onclick={() => {}}>
+    Submit
+  </Button>
+  ```
+-->
 <script lang="ts">
   /** Visual style variant */
   export let variant: 'primary' | 'secondary' | 'ghost' | 'danger' = 'primary'

package/src/components/Card/Card.svelte

@@ -1,4 +1,19 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Contained surface for grouping related content with elevation and padding options.
+
+  @example
+  ```svelte
+  <script>
+    import { Card } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Card variant="elevated" padding="lg">
+    <h3>Card Title</h3>
+    <p>Card content goes here.</p>
+  </Card>
+  ```
+-->
 <script lang="ts">
   /** Visual style variant */
   export let variant: 'elevated' | 'outlined' | 'interactive' = 'elevated'

package/src/components/Checkbox/Checkbox.svelte

@@ -1,4 +1,17 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Toggle control for boolean or indeterminate selections with optional label.
+
+  @example
+  ```svelte
+  <script>
+    import { Checkbox } from '@dillingerstaffing/strand-svelte';
+    let accepted = false;
+  </script>
+
+  <Checkbox bind:checked={accepted} label="Accept terms" />
+  ```
+-->
 <script lang="ts">
   /** Controlled checked state */
   export let checked: boolean = false

package/src/components/CodeBlock/CodeBlock.svelte

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

package/src/components/Container/Container.svelte

@@ -1,4 +1,18 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Centered max-width wrapper for constraining page content.
+
+  @example
+  ```svelte
+  <script>
+    import { Container } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Container size="default">
+    <p>Content constrained to default max width.</p>
+  </Container>
+  ```
+-->
 <script lang="ts">
   /** Max-width constraint */
   export let size: 'narrow' | 'default' | 'wide' | 'full' = 'default'

package/src/components/DataReadout/DataReadout.svelte

@@ -1,4 +1,16 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Instrument-panel metric display with overline label and prominent value.
+
+  @example
+  ```svelte
+  <script>
+    import { DataReadout } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <DataReadout label="Conversion Rate" value="94%" size="lg" />
+  ```
+-->
 <script lang="ts">
   /** Overline label text */
   export let label: string

package/src/components/Dialog/Dialog.svelte

@@ -1,4 +1,19 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Modal overlay with focus trapping, scroll lock, and backdrop click dismissal.
+
+  @example
+  ```svelte
+  <script>
+    import { Dialog } from '@dillingerstaffing/strand-svelte';
+    let isOpen = false;
+  </script>
+
+  <Dialog open={isOpen} title="Confirm" onclose={() => isOpen = false}>
+    <p>Are you sure?</p>
+  </Dialog>
+  ```
+-->
 <script lang="ts">
   import { onDestroy, tick } from 'svelte'
 

package/src/components/Divider/Divider.svelte

@@ -1,4 +1,16 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Visual separator line between content sections, horizontal or vertical.
+
+  @example
+  ```svelte
+  <script>
+    import { Divider } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Divider direction="horizontal" label="OR" />
+  ```
+-->
 <script lang="ts">
   /** Separator direction */
   export let direction: 'horizontal' | 'vertical' = 'horizontal'

package/src/components/FormField/FormField.svelte

@@ -1,4 +1,18 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Form control wrapper providing label, hint text, error messaging, and required indicator.
+
+  @example
+  ```svelte
+  <script>
+    import { FormField, Input } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <FormField label="Email" htmlFor="email" hint="Work email preferred" required>
+    <Input id="email" type="email" />
+  </FormField>
+  ```
+-->
 <script lang="ts">
   /** Label text */
   export let label: string

package/src/components/Grid/Grid.svelte

@@ -1,4 +1,20 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  CSS Grid layout with configurable column count and gap spacing.
+
+  @example
+  ```svelte
+  <script>
+    import { Grid, Card } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Grid columns={3} gap={6}>
+    <Card>Item 1</Card>
+    <Card>Item 2</Card>
+    <Card>Item 3</Card>
+  </Grid>
+  ```
+-->
 <script lang="ts">
   /** Number of equal-width columns */
   export let columns: number = 1

package/src/components/Input/Input.svelte

@@ -1,4 +1,16 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Text input field with optional leading/trailing addons and error state.
+
+  @example
+  ```svelte
+  <script>
+    import { Input } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Input type="email" placeholder="you@example.com" />
+  ```
+-->
 <script lang="ts">
   /** Input type */
   export let type: 'text' | 'email' | 'password' | 'search' | 'number' = 'text'

package/src/components/InstrumentViewport/InstrumentViewport.svelte

@@ -1,4 +1,18 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Recessed dark surface for displaying instrument-style UI components.
+
+  @example
+  ```svelte
+  <script>
+    import { InstrumentViewport, DataReadout } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <InstrumentViewport grid>
+    <DataReadout label="Uptime" value="99.9%" />
+  </InstrumentViewport>
+  ```
+-->
 <script lang="ts">
   /** Show grid overlay lines */
   export let grid: boolean = false

package/src/components/Link/Link.svelte

@@ -1,4 +1,17 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Styled anchor element with external-link handling and visual variants.
+
+  @example
+  ```svelte
+  <script>
+    import { Link } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Link href="/docs" variant="cta">Read the docs</Link>
+  <Link href="https://example.com" external>External site</Link>
+  ```
+-->
 <script lang="ts">
   /** URL destination */
   export let href: string

package/src/components/Nav/Nav.svelte

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

package/src/components/Progress/Progress.svelte

@@ -1,4 +1,17 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Determinate or indeterminate progress indicator in bar or ring form.
+
+  @example
+  ```svelte
+  <script>
+    import { Progress } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Progress variant="bar" value={65} size="md" />
+  <Progress variant="ring" size="lg" />
+  ```
+-->
 <script lang="ts">
   /** Visual variant */
   export let variant: 'bar' | 'ring' = 'bar'

package/src/components/Radio/Radio.svelte

@@ -1,4 +1,18 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Single-selection control for use within a radio group.
+
+  @example
+  ```svelte
+  <script>
+    import { Radio } from '@dillingerstaffing/strand-svelte';
+    let selected = 'pro';
+  </script>
+
+  <Radio name="plan" value="pro" label="Pro" checked={selected === 'pro'} />
+  <Radio name="plan" value="free" label="Free" checked={selected === 'free'} />
+  ```
+-->
 <script lang="ts">
   /** Controlled checked state */
   export let checked: boolean = false

package/src/components/ScrollReveal/ScrollReveal.svelte

@@ -1,4 +1,18 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Intersection Observer wrapper that reveals children with a transition on scroll.
+
+  @example
+  ```svelte
+  <script>
+    import { ScrollReveal } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <ScrollReveal threshold={0.2} once>
+    <p>This content fades in on scroll.</p>
+  </ScrollReveal>
+  ```
+-->
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte'
 

package/src/components/Section/Section.svelte

@@ -1,4 +1,20 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Page-level content region with padding, background, and optional top border.
+
+  @example
+  ```svelte
+  <script>
+    import { Section, Container } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Section variant="hero" background="recessed">
+    <Container>
+      <h1>Hero Section</h1>
+    </Container>
+  </Section>
+  ```
+-->
 <script lang="ts">
   /** Padding variant */
   export let variant: 'standard' | 'hero' | 'compact' = 'standard'

package/src/components/Select/Select.svelte

@@ -1,4 +1,21 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Native select dropdown with styled wrapper, error state, and placeholder support.
+
+  @example
+  ```svelte
+  <script>
+    import { Select } from '@dillingerstaffing/strand-svelte';
+    let role = 'eng';
+    const options = [
+      { value: 'eng', label: 'Engineer' },
+      { value: 'design', label: 'Designer' },
+    ];
+  </script>
+
+  <Select placeholder="Choose a role" {options} bind:value={role} />
+  ```
+-->
 <script lang="ts">
   export interface SelectOption {
     value: string

package/src/components/Skeleton/Skeleton.svelte

@@ -1,4 +1,18 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Placeholder shimmer shape used while content is loading.
+
+  @example
+  ```svelte
+  <script>
+    import { Skeleton } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Skeleton variant="text" width="60%" />
+  <Skeleton variant="circle" width="48px" />
+  <Skeleton variant="rectangle" width="100%" height="200px" />
+  ```
+-->
 <script lang="ts">
   /** Shape variant */
   export let variant: 'text' | 'rectangle' | 'circle' = 'text'

package/src/components/Slider/Slider.svelte

@@ -1,4 +1,17 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Range input control for selecting a numeric value within a bounded interval.
+
+  @example
+  ```svelte
+  <script>
+    import { Slider } from '@dillingerstaffing/strand-svelte';
+    let value = 50;
+  </script>
+
+  <Slider min={0} max={100} step={5} bind:value />
+  ```
+-->
 <script lang="ts">
   /** Minimum value */
   export let min: number = 0

package/src/components/Spinner/Spinner.svelte

@@ -1,4 +1,16 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Animated loading indicator with screen-reader-accessible status text.
+
+  @example
+  ```svelte
+  <script>
+    import { Spinner } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Spinner size="lg" />
+  ```
+-->
 <script lang="ts">
   /** Size of the spinner */
   export let size: 'sm' | 'md' | 'lg' = 'md'

package/src/components/Stack/Stack.svelte

@@ -1,4 +1,19 @@
 <!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<!--
+  Flexbox layout container for arranging children with consistent spacing.
+
+  @example
+  ```svelte
+  <script>
+    import { Stack, Button } from '@dillingerstaffing/strand-svelte';
+  </script>
+
+  <Stack direction="horizontal" gap={4} align="center">
+    <Button variant="primary">Save</Button>
+    <Button variant="secondary">Cancel</Button>
+  </Stack>
+  ```
+-->
 <script lang="ts">
   /** Flex direction */
   export let direction: 'vertical' | 'horizontal' = 'vertical'

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