@svgrid/ui 0.3.4 → 0.4.0

package/package.json

@@ -4,15 +4,15 @@
     "type": "commercial",
     "url": "https://svgrid.com/pricing"
   },
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "Add and preview SvGrid UI components in one command: npx @svgrid/ui try calendar",
   "type": "module",
   "license": "MIT",
   "author": "jQWidgets Ltd",
-  "homepage": "https://www.svgrid.com",
+  "homepage": "https://svgrid.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/sv-grid/sv-grid.git",
+    "url": "git+https://github.com/sv-grid/sv-grid.git",
     "directory": "packages/svgrid-ui"
   },
   "keywords": [
@@ -41,7 +41,7 @@
     "svelte": "^5.55.5",
     "svelte-check": "^4.4.6",
     "typescript": "6.0.3",
-    "@svgrid/grid": "2.2.0"
+    "@svgrid/grid": "2.2.27"
   },
   "scripts": {
     "test:types": "svelte-check --tsconfig ./tsconfig.json"

package/recipes/buttons/button-group.svelte

@@ -1,18 +1,18 @@
-<script lang="ts">
-  // SvButtonGroup - a segmented single/multi-select button bar. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-button-group
-  import { SvButtonGroup, type ButtonGroupItem } from '@svgrid/grid'
-
-  const views: ButtonGroupItem[] = [
-    { value: 'day', label: 'Day' },
-    { value: 'week', label: 'Week' },
-    { value: 'month', label: 'Month' },
-  ]
-  let view = $state<string | number>('week')
-</script>
-
-<SvButtonGroup
-  items={views}
-  value={view}
-  mode="single"
-  onChange={(v) => (view = v as string)}
-/>
+<script lang="ts">
+  // SvButtonGroup - a segmented single/multi-select button bar. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-button-group
+  import { SvButtonGroup, type ButtonGroupItem } from '@svgrid/grid'
+
+  const views: ButtonGroupItem[] = [
+    { value: 'day', label: 'Day' },
+    { value: 'week', label: 'Week' },
+    { value: 'month', label: 'Month' },
+  ]
+  let view = $state<string | number>('week')
+</script>
+
+<SvButtonGroup
+  items={views}
+  value={view}
+  mode="single"
+  onChange={(v) => (view = v as string)}
+/>

package/recipes/buttons/button.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-  // SvButton - the themeable press primitive with variants and loading. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-button
-  import { SvButton } from '@svgrid/grid'
-
-  let saving = $state(false)
-  async function save() {
-    saving = true
-    try {
-      await new Promise((r) => setTimeout(r, 800))
-    } finally {
-      saving = false
-    }
-  }
-</script>
-
-<SvButton variant="primary" loading={saving} onclick={save}>Save</SvButton>
-<SvButton variant="outline">Cancel</SvButton>
+<script lang="ts">
+  // SvButton - the themeable press primitive with variants and loading. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-button
+  import { SvButton } from '@svgrid/grid'
+
+  let saving = $state(false)
+  async function save() {
+    saving = true
+    try {
+      await new Promise((r) => setTimeout(r, 800))
+    } finally {
+      saving = false
+    }
+  }
+</script>
+
+<SvButton variant="primary" loading={saving} onclick={save}>Save</SvButton>
+<SvButton variant="outline">Cancel</SvButton>

package/recipes/buttons/check-box.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-  // SvCheckBox - a themed checkbox with a true indeterminate state. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-check-box
-  import { SvCheckBox } from '@svgrid/grid'
-
-  let agree = $state(false)
-</script>
-
-<SvCheckBox checked={agree} onChange={(v) => (agree = v)}>
-  I accept the terms
-</SvCheckBox>
+<script lang="ts">
+  // SvCheckBox - a themed checkbox with a true indeterminate state. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-check-box
+  import { SvCheckBox } from '@svgrid/grid'
+
+  let agree = $state(false)
+</script>
+
+<SvCheckBox checked={agree} onChange={(v) => (agree = v)}>
+  I accept the terms
+</SvCheckBox>

package/recipes/buttons/radio-group.svelte

@@ -1,18 +1,18 @@
-<script lang="ts">
-  // SvRadioGroup - an accessible single-select radio group. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-radio-group
-  import { SvRadioGroup, type RadioOption } from '@svgrid/grid'
-
-  const plans: RadioOption[] = [
-    { value: 'free', label: 'Free' },
-    { value: 'pro', label: 'Pro' },
-    { value: 'team', label: 'Team' },
-  ]
-  let plan = $state<string | number | null>('pro')
-</script>
-
-<SvRadioGroup
-  label="Plan"
-  options={plans}
-  value={plan}
-  onChange={(v) => (plan = v)}
-/>
+<script lang="ts">
+  // SvRadioGroup - an accessible single-select radio group. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-radio-group
+  import { SvRadioGroup, type RadioOption } from '@svgrid/grid'
+
+  const plans: RadioOption[] = [
+    { value: 'free', label: 'Free' },
+    { value: 'pro', label: 'Pro' },
+    { value: 'team', label: 'Team' },
+  ]
+  let plan = $state<string | number | null>('pro')
+</script>
+
+<SvRadioGroup
+  label="Plan"
+  options={plans}
+  value={plan}
+  onChange={(v) => (plan = v)}
+/>

package/recipes/buttons/rating.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">
-  // SvRating - a star rating control on the ARIA slider pattern. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-rating
-  import { SvRating } from '@svgrid/grid'
-
-  let score = $state(4)
-</script>
-
-<SvRating label="Your rating" value={score} onChange={(v) => (score = v)} />
+<script lang="ts">
+  // SvRating - a star rating control on the ARIA slider pattern. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-rating
+  import { SvRating } from '@svgrid/grid'
+
+  let score = $state(4)
+</script>
+
+<SvRating label="Your rating" value={score} onChange={(v) => (score = v)} />

package/recipes/buttons/repeat-button.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-  // SvRepeatButton - a button that keeps firing while held. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-repeat-button
-  import { SvRepeatButton } from '@svgrid/grid'
-
-  let qty = $state(1)
-</script>
-
-<SvRepeatButton ariaLabel="Decrease" onclick={() => (qty = Math.max(0, qty - 1))}>-</SvRepeatButton>
-<span>{qty}</span>
-<SvRepeatButton ariaLabel="Increase" onclick={() => (qty += 1)}>+</SvRepeatButton>
+<script lang="ts">
+  // SvRepeatButton - a button that keeps firing while held. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-repeat-button
+  import { SvRepeatButton } from '@svgrid/grid'
+
+  let qty = $state(1)
+</script>
+
+<SvRepeatButton ariaLabel="Decrease" onclick={() => (qty = Math.max(0, qty - 1))}>-</SvRepeatButton>
+<span>{qty}</span>
+<SvRepeatButton ariaLabel="Increase" onclick={() => (qty += 1)}>+</SvRepeatButton>

package/recipes/buttons/segmented.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  // SvSegmented - a compact single-select track. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-segmented
+  import { SvSegmented } from '@svgrid/grid'
+  let view = $state('board')
+</script>
+
+<SvSegmented
+  bind:value={view}
+  options={[
+    { value: 'board', label: 'Board' },
+    { value: 'table', label: 'Table' },
+    { value: 'calendar', label: 'Calendar' },
+  ]}
+/>

package/recipes/buttons/switch-button.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  // SvSwitchButton - an on/off sliding switch for immediate settings. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-switch-button
-  import { SvSwitchButton } from '@svgrid/grid'
-
-  let notify = $state(true)
-</script>
-
-<SvSwitchButton
-  label="Email notifications"
-  checked={notify}
-  onChange={(v) => (notify = v)}
-/>
+<script lang="ts">
+  // SvSwitchButton - an on/off sliding switch for immediate settings. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-switch-button
+  import { SvSwitchButton } from '@svgrid/grid'
+
+  let notify = $state(true)
+</script>
+
+<SvSwitchButton
+  label="Email notifications"
+  checked={notify}
+  onChange={(v) => (notify = v)}
+/>

package/recipes/buttons/toggle-button.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">
-  // SvToggleButton - a button with a sticky pressed on/off state. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-toggle-button
-  import { SvToggleButton } from '@svgrid/grid'
-
-  let bold = $state(false)
-</script>
-
-<SvToggleButton pressed={bold} onChange={(v) => (bold = v)}>Bold</SvToggleButton>
+<script lang="ts">
+  // SvToggleButton - a button with a sticky pressed on/off state. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-toggle-button
+  import { SvToggleButton } from '@svgrid/grid'
+
+  let bold = $state(false)
+</script>
+
+<SvToggleButton pressed={bold} onChange={(v) => (bold = v)}>Bold</SvToggleButton>

package/recipes/date-time/calendar.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-  // SvCalendar - a themeable month / year / decade calendar. This is your copy,
-  // edit it freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-calendar
-  import { SvCalendar } from '@svgrid/grid'
-
-  let value = $state<Date[]>([new Date()])
-</script>
-
-<SvCalendar
-  {value}
-  selectionMode="range"
-  firstDayOfWeek={1}
-  footer
-  onChange={(dates) => (value = dates)}
-/>
+<script lang="ts">
+  // SvCalendar - a themeable month / year / decade calendar. This is your copy,
+  // edit it freely. Docs: https://svgrid.com/docs/help/ui-components/sv-calendar
+  import { SvCalendar } from '@svgrid/grid'
+
+  let value = $state<Date[]>([new Date()])
+</script>
+
+<SvCalendar
+  {value}
+  selectionMode="range"
+  firstDayOfWeek={1}
+  footer
+  onChange={(dates) => (value = dates)}
+/>

package/recipes/date-time/date-range-input.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-  // SvDateRangeInput - a compact start/end field over a two-month range calendar.
-  // This is your copy, edit it freely.
-  // Docs: https://www.svgrid.com/docs/help/ui-components/sv-date-range-input
-  import { SvDateRangeInput } from '@svgrid/grid'
-
-  let range = $state<[Date, Date] | null>(null)
-</script>
-
-<SvDateRangeInput
-  value={range}
-  formatString="yyyy-MM-dd"
-  months={2}
-  onChange={(v) => (range = v)}
-/>
+<script lang="ts">
+  // SvDateRangeInput - a compact start/end field over a two-month range calendar.
+  // This is your copy, edit it freely.
+  // Docs: https://svgrid.com/docs/help/ui-components/sv-date-range-input
+  import { SvDateRangeInput } from '@svgrid/grid'
+
+  let range = $state<[Date, Date] | null>(null)
+</script>
+
+<SvDateRangeInput
+  value={range}
+  formatString="yyyy-MM-dd"
+  months={2}
+  onChange={(v) => (range = v)}
+/>

package/recipes/date-time/date-time-picker.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-  // SvDateTimePicker - a masked text field with DATE / TIME dropdown tabs. This
-  // is your copy, edit it freely.
-  // Docs: https://www.svgrid.com/docs/help/ui-components/sv-date-time-picker
-  import { SvDateTimePicker } from '@svgrid/grid'
-
-  let value = $state<Date | null>(new Date())
-</script>
-
-<SvDateTimePicker
-  {value}
-  formatString="yyyy-MM-dd HH:mm"
-  dropDownDisplayMode="both"
-  nullable
-  onChange={(d) => (value = d)}
-/>
+<script lang="ts">
+  // SvDateTimePicker - a masked text field with DATE / TIME dropdown tabs. This
+  // is your copy, edit it freely.
+  // Docs: https://svgrid.com/docs/help/ui-components/sv-date-time-picker
+  import { SvDateTimePicker } from '@svgrid/grid'
+
+  let value = $state<Date | null>(new Date())
+</script>
+
+<SvDateTimePicker
+  {value}
+  formatString="yyyy-MM-dd HH:mm"
+  dropDownDisplayMode="both"
+  nullable
+  onChange={(d) => (value = d)}
+/>

package/recipes/date-time/time-picker.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-  // SvTimePicker - an analog clock-dial time picker. This is your copy, edit it
-  // freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-time-picker
-  import { SvTimePicker } from '@svgrid/grid'
-
-  let time = $state(new Date())
-</script>
-
-<SvTimePicker
-  value={time}
-  format="12-hour"
-  minuteInterval={5}
-  footer
-  onChange={(d) => (time = d)}
-/>
+<script lang="ts">
+  // SvTimePicker - an analog clock-dial time picker. This is your copy, edit it
+  // freely. Docs: https://svgrid.com/docs/help/ui-components/sv-time-picker
+  import { SvTimePicker } from '@svgrid/grid'
+
+  let time = $state(new Date())
+</script>
+
+<SvTimePicker
+  value={time}
+  format="12-hour"
+  minuteInterval={5}
+  footer
+  onChange={(d) => (time = d)}
+/>

package/recipes/feedback/alert.svelte

@@ -1,11 +1,11 @@
-<script lang="ts">
-  // SvAlert - an inline contextual message with icon and actions. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-alert
-  import { SvAlert, SvButton } from '@svgrid/grid'
-</script>
-
-<SvAlert variant="success" title="Saved">Your changes are live.</SvAlert>
-
-<SvAlert variant="danger" title="Payment failed" dismissible>
-  We could not charge your card.
-  {#snippet actions()}<SvButton size="sm" variant="danger">Retry</SvButton>{/snippet}
-</SvAlert>
+<script lang="ts">
+  // SvAlert - an inline contextual message with icon and actions. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-alert
+  import { SvAlert, SvButton } from '@svgrid/grid'
+</script>
+
+<SvAlert variant="success" title="Saved">Your changes are live.</SvAlert>
+
+<SvAlert variant="danger" title="Payment failed" dismissible>
+  We could not charge your card.
+  {#snippet actions()}<SvButton size="sm" variant="danger">Retry</SvButton>{/snippet}
+</SvAlert>

package/recipes/feedback/avatar-group.svelte

@@ -1,11 +1,11 @@
-<script lang="ts">
-  // SvAvatarGroup - overlapping avatars with a "+N" overflow pill. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-avatar-group
-  import { SvAvatarGroup } from '@svgrid/grid'
-</script>
-
-<SvAvatarGroup max={3} avatars={[
-  { name: 'Ada Lovelace' },
-  { name: 'Alan Turing' },
-  { name: 'Grace Hopper' },
-  { name: 'Ken Thompson' },
-]} />
+<script lang="ts">
+  // SvAvatarGroup - overlapping avatars with a "+N" overflow pill. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-avatar-group
+  import { SvAvatarGroup } from '@svgrid/grid'
+</script>
+
+<SvAvatarGroup max={3} avatars={[
+  { name: 'Ada Lovelace' },
+  { name: 'Alan Turing' },
+  { name: 'Grace Hopper' },
+  { name: 'Ken Thompson' },
+]} />

package/recipes/feedback/avatar.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">
-  // SvAvatar - a user avatar with initials-and-color fallback. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-avatar
-  import { SvAvatar } from '@svgrid/grid'
-</script>
-
-<SvAvatar name="Ada Lovelace" src="/ada.jpg" status="online" />
-<SvAvatar name="Grace Hopper" />
-<SvAvatar name="Alan Turing" size="lg" shape="square" />
+<script lang="ts">
+  // SvAvatar - a user avatar with initials-and-color fallback. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-avatar
+  import { SvAvatar } from '@svgrid/grid'
+</script>
+
+<SvAvatar name="Ada Lovelace" src="/ada.jpg" status="online" />
+<SvAvatar name="Grace Hopper" />
+<SvAvatar name="Alan Turing" size="lg" shape="square" />

package/recipes/feedback/badge.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">
-  // SvBadge - a small status pill or count label. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-badge
-  import { SvBadge } from '@svgrid/grid'
-</script>
-
-<SvBadge variant="success">Active</SvBadge>
-<SvBadge variant="warning">Pending</SvBadge>
-<SvBadge variant="danger" dot>Failed</SvBadge>
+<script lang="ts">
+  // SvBadge - a small status pill or count label. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-badge
+  import { SvBadge } from '@svgrid/grid'
+</script>
+
+<SvBadge variant="success">Active</SvBadge>
+<SvBadge variant="warning">Pending</SvBadge>
+<SvBadge variant="danger" dot>Failed</SvBadge>

package/recipes/feedback/carousel.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-  // SvCarousel - a sliding slideshow with arrows, dots, and autoplay. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-carousel
-  import { SvCarousel } from '@svgrid/grid'
-
-  const imgs = ['/a.jpg', '/b.jpg', '/c.jpg']
-</script>
-
-<SvCarousel count={imgs.length} autoplay={4000}>
-  {#snippet slide(i)}<img src={imgs[i]} alt="" />{/snippet}
-</SvCarousel>
+<script lang="ts">
+  // SvCarousel - a sliding slideshow with arrows, dots, and autoplay. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-carousel
+  import { SvCarousel } from '@svgrid/grid'
+
+  const imgs = ['/a.jpg', '/b.jpg', '/c.jpg']
+</script>
+
+<SvCarousel count={imgs.length} autoplay={4000}>
+  {#snippet slide(i)}<img src={imgs[i]} alt="" />{/snippet}
+</SvCarousel>

package/recipes/feedback/chip.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-  // SvChip - a compact interactive pill for tags and filter tokens. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-chip
-  import { SvChip } from '@svgrid/grid'
-
-  let tags = $state(['design', 'urgent'])
-</script>
-
-{#each tags as tag (tag)}
-  <SvChip removable onRemove={() => (tags = tags.filter((t) => t !== tag))}>{tag}</SvChip>
-{/each}
+<script lang="ts">
+  // SvChip - a compact interactive pill for tags and filter tokens. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-chip
+  import { SvChip } from '@svgrid/grid'
+
+  let tags = $state(['design', 'urgent'])
+</script>
+
+{#each tags as tag (tag)}
+  <SvChip removable onRemove={() => (tags = tags.filter((t) => t !== tag))}>{tag}</SvChip>
+{/each}

package/recipes/feedback/empty-state.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">
-  // SvEmptyState - a centered placeholder for empty or no-results screens. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-empty-state
-  import { SvEmptyState, SvButton } from '@svgrid/grid'
-</script>
-
-<SvEmptyState title="No orders yet" description="Create your first order to get going.">
-  <SvButton variant="primary">New order</SvButton>
-</SvEmptyState>
+<script lang="ts">
+  // SvEmptyState - a centered placeholder for empty or no-results screens. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-empty-state
+  import { SvEmptyState, SvButton } from '@svgrid/grid'
+</script>
+
+<SvEmptyState title="No orders yet" description="Create your first order to get going.">
+  <SvButton variant="primary">New order</SvButton>
+</SvEmptyState>

package/recipes/feedback/loading-overlay.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  // SvLoadingOverlay - a cover-a-container loading scrim. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-loading-overlay
+  import { SvLoadingOverlay, SvButton } from '@svgrid/grid'
+  let loading = $state(false)
+  function run() {
+    loading = true
+    setTimeout(() => (loading = false), 1200)
+  }
+</script>
+
+<div style="position: relative; padding: 24px; border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;">
+  <SvLoadingOverlay visible={loading} label="Saving…" />
+  <SvButton onclick={run} disabled={loading}>Run task</SvButton>
+</div>

package/recipes/feedback/result.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  // SvResult - a full result page (success / error / notfound). Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-result
+  import { SvResult, SvButton } from '@svgrid/grid'
+</script>
+
+<SvResult
+  status="success"
+  title="Payment complete"
+  description="Your receipt is on its way to ada@example.com."
+>
+  {#snippet actions()}
+    <SvButton variant="primary">Back to dashboard</SvButton>
+    <SvButton variant="ghost">View receipt</SvButton>
+  {/snippet}
+</SvResult>

package/recipes/feedback/skeleton.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">
-  // SvSkeleton - a shimmering loading placeholder. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-skeleton
-  import { SvSkeleton } from '@svgrid/grid'
-</script>
-
-<SvSkeleton variant="text" lines={3} />
-<SvSkeleton variant="circle" width="40px" height="40px" />
-<SvSkeleton variant="rect" height="160px" />
+<script lang="ts">
+  // SvSkeleton - a shimmering loading placeholder. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-skeleton
+  import { SvSkeleton } from '@svgrid/grid'
+</script>
+
+<SvSkeleton variant="text" lines={3} />
+<SvSkeleton variant="circle" width="40px" height="40px" />
+<SvSkeleton variant="rect" height="160px" />

package/recipes/feedback/spinner.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  // SvSpinner - an indeterminate loading ring. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-spinner
+  import { SvSpinner } from '@svgrid/grid'
+</script>
+
+<SvSpinner size="sm" />
+<SvSpinner />
+<SvSpinner size="lg" label="Loading results" />

package/recipes/feedback/timeline.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-  // SvTimeline - a vertical activity or history feed. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-timeline
-  import { SvTimeline } from '@svgrid/grid'
-</script>
-
-<SvTimeline items={[
-  { title: 'Order placed', time: '09:12', color: '#16a34a', icon: '✓' },
-  { title: 'Shipped', time: '14:40', description: 'Left the warehouse' },
-  { title: 'Out for delivery', time: '08:05' },
-]} />
+<script lang="ts">
+  // SvTimeline - a vertical activity or history feed. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-timeline
+  import { SvTimeline } from '@svgrid/grid'
+</script>
+
+<SvTimeline items={[
+  { title: 'Order placed', time: '09:12', color: '#16a34a', icon: '✓' },
+  { title: 'Shipped', time: '14:40', description: 'Left the warehouse' },
+  { title: 'Out for delivery', time: '08:05' },
+]} />