@svgrid/ui 0.3.3 → 0.4.0

package/recipes/layout/splitter.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">
-  // SvSplitter - two resizable panes with a draggable separator. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-splitter
-  import { SvSplitter } from '@svgrid/grid'
-
-  let fraction = $state(0.3)
-</script>
-
-<div style="height: 320px">
-  <SvSplitter {fraction} onChange={(f) => (fraction = f)} ariaLabel="Sidebar width">
-    {#snippet start()}<nav style="padding: 12px">Sidebar</nav>{/snippet}
-    {#snippet end()}<main style="padding: 12px">Content</main>{/snippet}
-  </SvSplitter>
-</div>
+<script lang="ts">
+  // SvSplitter - two resizable panes with a draggable separator. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-splitter
+  import { SvSplitter } from '@svgrid/grid'
+
+  let fraction = $state(0.3)
+</script>
+
+<div style="height: 320px">
+  <SvSplitter {fraction} onChange={(f) => (fraction = f)} ariaLabel="Sidebar width">
+    {#snippet start()}<nav style="padding: 12px">Sidebar</nav>{/snippet}
+    {#snippet end()}<main style="padding: 12px">Content</main>{/snippet}
+  </SvSplitter>
+</div>

package/recipes/layout/tabs.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-  // SvTabs - WAI-ARIA tab strip with roving arrow-key nav. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-tabs
-  import { SvTabs, type TabItem } from '@svgrid/grid'
-
-  const tabs: TabItem[] = [
-    { id: 'overview', label: 'Overview' },
-    { id: 'activity', label: 'Activity' },
-    { id: 'settings', label: 'Settings' },
-  ]
-  let tab = $state('overview')
-</script>
-
-<SvTabs {tabs} value={tab} onChange={(id) => (tab = id)} variant="line">
-  {#snippet panel(active)}
-    <p>Content for the {active} tab.</p>
-  {/snippet}
-</SvTabs>
+<script lang="ts">
+  // SvTabs - WAI-ARIA tab strip with roving arrow-key nav. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-tabs
+  import { SvTabs, type TabItem } from '@svgrid/grid'
+
+  const tabs: TabItem[] = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'activity', label: 'Activity' },
+    { id: 'settings', label: 'Settings' },
+  ]
+  let tab = $state('overview')
+</script>
+
+<SvTabs {tabs} value={tab} onChange={(id) => (tab = id)} variant="line">
+  {#snippet panel(active)}
+    <p>Content for the {active} tab.</p>
+  {/snippet}
+</SvTabs>

package/recipes/layout/typography.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  // Typography primitives - SvTitle / SvText / SvAnchor / SvBlockquote / SvMark / SvList.
+  // Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-typography
+  import { SvTitle, SvText, SvAnchor, SvBlockquote, SvMark, SvList } from '@svgrid/grid'
+</script>
+
+<SvTitle order={1}>Dashboard</SvTitle>
+<SvText tone="muted">Last synced 2 minutes ago.</SvText>
+
+<SvText>
+  A <SvMark>highlighted</SvMark> phrase and an
+  <SvAnchor href="https://svelte.dev" external>external link</SvAnchor>.
+</SvText>
+
+<SvBlockquote cite="Ada Lovelace">The Analytical Engine weaves algebraic patterns.</SvBlockquote>
+
+<SvList type="ordered" items={['Install', 'Import', 'Render']} />

package/recipes/navigation/breadcrumb.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  // SvBreadcrumb - a navigation trail to the current page. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-breadcrumb
-  import { SvBreadcrumb } from '@svgrid/grid'
-
-  const items = [
-    { label: 'Home', href: '/' },
-    { label: 'Orders', href: '/orders' },
-    { label: '#1024' },
-  ]
-</script>
-
-<SvBreadcrumb {items} separator="›" maxItems={4} />
+<script lang="ts">
+  // SvBreadcrumb - a navigation trail to the current page. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-breadcrumb
+  import { SvBreadcrumb } from '@svgrid/grid'
+
+  const items = [
+    { label: 'Home', href: '/' },
+    { label: 'Orders', href: '/orders' },
+    { label: '#1024' },
+  ]
+</script>
+
+<SvBreadcrumb {items} separator="›" maxItems={4} />

package/recipes/navigation/command.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  // SvCommand - a Cmd+K fuzzy command palette. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-command
-  import { SvCommand, type CommandItem } from '@svgrid/grid'
-
-  const commands: CommandItem[] = [
-    { id: 'new', label: 'New record', group: 'Actions', shortcut: '⌘N', onRun: () => console.log('new') },
-    { id: 'export', label: 'Export CSV', group: 'Actions', onRun: () => console.log('export') },
-  ]
-</script>
-
-<!-- Cmd/Ctrl+K opens it -->
-<SvCommand {commands} onRun={(c) => console.log(c.id)} />
+<script lang="ts">
+  // SvCommand - a Cmd+K fuzzy command palette. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-command
+  import { SvCommand, type CommandItem } from '@svgrid/grid'
+
+  const commands: CommandItem[] = [
+    { id: 'new', label: 'New record', group: 'Actions', shortcut: '⌘N', onRun: () => console.log('new') },
+    { id: 'export', label: 'Export CSV', group: 'Actions', onRun: () => console.log('export') },
+  ]
+</script>
+
+<!-- Cmd/Ctrl+K opens it -->
+<SvCommand {commands} onRun={(c) => console.log(c.id)} />

package/recipes/navigation/nav-pane.svelte

@@ -1,14 +1,14 @@
-<script lang="ts">
-  // SvNavPane - an Outlook-style app-shell navigation sidebar. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-nav-pane
-  import { SvNavPane, type NavSection } from '@svgrid/grid'
-
-  let value = $state<string | null>('inbox')
-  const sections: NavSection[] = [
-    { id: 'mail', label: 'Mail', items: [
-      { id: 'inbox', label: 'Inbox', badge: 12 },
-      { id: 'sent', label: 'Sent' },
-    ] },
-  ]
-</script>
-
-<SvNavPane {sections} bind:value onSelect={(id) => console.log(id)} />
+<script lang="ts">
+  // SvNavPane - an Outlook-style app-shell navigation sidebar. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-nav-pane
+  import { SvNavPane, type NavSection } from '@svgrid/grid'
+
+  let value = $state<string | null>('inbox')
+  const sections: NavSection[] = [
+    { id: 'mail', label: 'Mail', items: [
+      { id: 'inbox', label: 'Inbox', badge: 12 },
+      { id: 'sent', label: 'Sent' },
+    ] },
+  ]
+</script>
+
+<SvNavPane {sections} bind:value onSelect={(id) => console.log(id)} />

package/recipes/navigation/pagination.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">
-  // SvPagination - a standalone pager with prev/next and page numbers. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-pagination
-  import { SvPagination } from '@svgrid/grid'
-
-  let page = $state(1)
-</script>
-
-<SvPagination
-  {page}
-  pageCount={20}
-  showFirstLast
-  onChange={(n) => (page = n)}
-/>
+<script lang="ts">
+  // SvPagination - a standalone pager with prev/next and page numbers. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-pagination
+  import { SvPagination } from '@svgrid/grid'
+
+  let page = $state(1)
+</script>
+
+<SvPagination
+  {page}
+  pageCount={20}
+  showFirstLast
+  onChange={(n) => (page = n)}
+/>

package/recipes/navigation/rich-text.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">
-  // SvRichText - a lightweight WYSIWYG editor emitting HTML. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-rich-text
-  import { SvRichText } from '@svgrid/grid'
-
-  let html = $state('<p>Hello</p>')
-</script>
-
-<SvRichText bind:value={html} placeholder="Write something…" />
+<script lang="ts">
+  // SvRichText - a lightweight WYSIWYG editor emitting HTML. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-rich-text
+  import { SvRichText } from '@svgrid/grid'
+
+  let html = $state('<p>Hello</p>')
+</script>
+
+<SvRichText bind:value={html} placeholder="Write something…" />

package/recipes/navigation/stepper.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">
-  // SvStepper - a progress stepper for wizards and multi-step forms. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-stepper
-  import { SvStepper } from '@svgrid/grid'
-
-  let current = $state(0)
-  const steps = [
-    { label: 'Cart' },
-    { label: 'Shipping', description: 'Where to send it' },
-    { label: 'Payment', optional: true },
-  ]
-</script>
-
-<SvStepper {steps} {current} onChange={(n) => (current = n)} />
+<script lang="ts">
+  // SvStepper - a progress stepper for wizards and multi-step forms. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-stepper
+  import { SvStepper } from '@svgrid/grid'
+
+  let current = $state(0)
+  const steps = [
+    { label: 'Cart' },
+    { label: 'Shipping', description: 'Where to send it' },
+    { label: 'Payment', optional: true },
+  ]
+</script>
+
+<SvStepper {steps} {current} onChange={(n) => (current = n)} />

package/recipes/navigation/tour.svelte

@@ -1,14 +1,14 @@
-<script lang="ts">
-  // SvTour - a guided, spotlighted product tour overlay. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-tour
-  import { SvTour, SvButton } from '@svgrid/grid'
-
-  let open = $state(false)
-  const steps = [
-    { target: '#new-btn', title: 'Create', content: 'Start a record here.' },
-    { target: '.grid', title: 'Your data', content: 'It shows up in the grid.' },
-  ]
-</script>
-
-<SvButton onclick={() => (open = true)}>Take the tour</SvButton>
-
-<SvTour bind:open {steps} />
+<script lang="ts">
+  // SvTour - a guided, spotlighted product tour overlay. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-tour
+  import { SvTour, SvButton } from '@svgrid/grid'
+
+  let open = $state(false)
+  const steps = [
+    { target: '#new-btn', title: 'Create', content: 'Start a record here.' },
+    { target: '.grid', title: 'Your data', content: 'It shows up in the grid.' },
+  ]
+</script>
+
+<SvButton onclick={() => (open = true)}>Take the tour</SvButton>
+
+<SvTour bind:open {steps} />

package/recipes/navigation/tree.svelte

@@ -1,14 +1,14 @@
-<script lang="ts">
-  // SvTree - a WAI-ARIA tree view with expand/select/checkboxes. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-tree
-  import { SvTree, type SvTreeNode } from '@svgrid/grid'
-
-  let selected = $state<string | null>(null)
-  const nodes: SvTreeNode[] = [
-    { id: 'src', label: 'src', children: [
-      { id: 'app', label: 'App.svelte' },
-      { id: 'main', label: 'main.ts' },
-    ] },
-  ]
-</script>
-
-<SvTree {nodes} {selected} onSelect={(id) => (selected = id)} />
+<script lang="ts">
+  // SvTree - a WAI-ARIA tree view with expand/select/checkboxes. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-tree
+  import { SvTree, type SvTreeNode } from '@svgrid/grid'
+
+  let selected = $state<string | null>(null)
+  const nodes: SvTreeNode[] = [
+    { id: 'src', label: 'src', children: [
+      { id: 'app', label: 'App.svelte' },
+      { id: 'main', label: 'main.ts' },
+    ] },
+  ]
+</script>
+
+<SvTree {nodes} {selected} onSelect={(id) => (selected = id)} />

package/recipes/overlays/context-menu.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-  // SvContextMenu - opens a menu at the pointer on right-click. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-context-menu
-  import { SvContextMenu, type MenuItem } from '@svgrid/grid'
-
-  const items: MenuItem[] = [
-    { label: 'Copy', shortcut: 'Ctrl+C', onSelect: () => {} },
-    { label: 'Duplicate', onSelect: () => {} },
-    { separator: true },
-    { label: 'Delete', onSelect: () => {} },
-  ]
-</script>
-
-<SvContextMenu {items} onSelect={(i) => console.log(i.label)}>
-  <div class="drop-zone">Right-click me</div>
-</SvContextMenu>
+<script lang="ts">
+  // SvContextMenu - opens a menu at the pointer on right-click. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-context-menu
+  import { SvContextMenu, type MenuItem } from '@svgrid/grid'
+
+  const items: MenuItem[] = [
+    { label: 'Copy', shortcut: 'Ctrl+C', onSelect: () => {} },
+    { label: 'Duplicate', onSelect: () => {} },
+    { separator: true },
+    { label: 'Delete', onSelect: () => {} },
+  ]
+</script>
+
+<SvContextMenu {items} onSelect={(i) => console.log(i.label)}>
+  <div class="drop-zone">Right-click me</div>
+</SvContextMenu>

package/recipes/overlays/drawer.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">
-  // SvDrawer - an edge-anchored side sheet with backdrop. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-drawer
-  import { SvDrawer, SvButton } from '@svgrid/grid'
-
-  let open = $state(false)
-</script>
-
-<SvButton onclick={() => (open = true)}>Filters</SvButton>
-
-<SvDrawer bind:open side="right" title="Filters">
-  <p>Body content.</p>
-  {#snippet footer()}<SvButton variant="primary" onclick={() => (open = false)}>Apply</SvButton>{/snippet}
-</SvDrawer>
+<script lang="ts">
+  // SvDrawer - an edge-anchored side sheet with backdrop. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-drawer
+  import { SvDrawer, SvButton } from '@svgrid/grid'
+
+  let open = $state(false)
+</script>
+
+<SvButton onclick={() => (open = true)}>Filters</SvButton>
+
+<SvDrawer bind:open side="right" title="Filters">
+  <p>Body content.</p>
+  {#snippet footer()}<SvButton variant="primary" onclick={() => (open = false)}>Apply</SvButton>{/snippet}
+</SvDrawer>

package/recipes/overlays/hover-card.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  // SvHoverCard - a rich preview card that opens on hover. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-hover-card
+  import { SvHoverCard, SvAvatar } from '@svgrid/grid'
+</script>
+
+<SvHoverCard>
+  {#snippet anchor()}<a href="/u/ada">@ada</a>{/snippet}
+  <div style="display:flex; gap:12px; align-items:center">
+    <SvAvatar name="Ada Lovelace" />
+    <div>
+      <strong>Ada Lovelace</strong>
+      <div style="color:var(--sg-muted); font-size:12.5px">Analyst - first programmer</div>
+    </div>
+  </div>
+</SvHoverCard>

package/recipes/overlays/menu.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-  // SvMenu - a trigger-opened dropdown / actions menu. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-menu
-  import { SvMenu, SvButton, type MenuItem } from '@svgrid/grid'
-
-  const items: MenuItem[] = [
-    { label: 'New', shortcut: 'Ctrl+N', onSelect: () => {} },
-    { label: 'Duplicate', onSelect: () => {} },
-    { separator: true },
-    { label: 'Delete', onSelect: () => {} },
-  ]
-</script>
-
-<SvMenu {items} onSelect={(i) => console.log(i.label)}>
-  {#snippet anchor()}<SvButton>Actions</SvButton>{/snippet}
-</SvMenu>
+<script lang="ts">
+  // SvMenu - a trigger-opened dropdown / actions menu. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-menu
+  import { SvMenu, SvButton, type MenuItem } from '@svgrid/grid'
+
+  const items: MenuItem[] = [
+    { label: 'New', shortcut: 'Ctrl+N', onSelect: () => {} },
+    { label: 'Duplicate', onSelect: () => {} },
+    { separator: true },
+    { label: 'Delete', onSelect: () => {} },
+  ]
+</script>
+
+<SvMenu {items} onSelect={(i) => console.log(i.label)}>
+  {#snippet anchor()}<SvButton>Actions</SvButton>{/snippet}
+</SvMenu>

package/recipes/overlays/menubar.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  // SvMenubar - an app-style row of dropdown menus. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-menubar
+  import { SvMenubar, type MenubarMenu, type MenuItem } from '@svgrid/grid'
+
+  const menus: MenubarMenu[] = [
+    { label: 'File', items: [
+      { label: 'New', shortcut: 'Ctrl+N', onSelect: () => {} },
+      { label: 'Open...', shortcut: 'Ctrl+O', onSelect: () => {} },
+      { separator: true },
+      { label: 'Export', children: [
+        { label: 'CSV', onSelect: () => {} },
+        { label: 'PDF', onSelect: () => {} },
+      ] },
+    ] },
+    { label: 'Edit', items: [
+      { label: 'Undo', shortcut: 'Ctrl+Z', onSelect: () => {} },
+      { label: 'Redo', shortcut: 'Ctrl+Y', onSelect: () => {} },
+    ] },
+    { label: 'View', items: [{ label: 'Zoom in', onSelect: () => {} }, { label: 'Zoom out', onSelect: () => {} }] },
+  ]
+
+  function onSelect(item: MenuItem) {
+    console.log('chose', item.label)
+  }
+</script>
+
+<SvMenubar {menus} {onSelect} />

package/recipes/overlays/modal.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">
-  // SvModal - an accessible modal dialog with focus trap. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-modal
-  import { SvModal, SvButton } from '@svgrid/grid'
-
-  let open = $state(false)
-</script>
-
-<SvButton onclick={() => (open = true)}>Edit row</SvButton>
-
-<SvModal bind:open title="Edit row">
-  <p>Body content.</p>
-  {#snippet footer()}<SvButton variant="primary" onclick={() => (open = false)}>Save</SvButton>{/snippet}
-</SvModal>
+<script lang="ts">
+  // SvModal - an accessible modal dialog with focus trap. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-modal
+  import { SvModal, SvButton } from '@svgrid/grid'
+
+  let open = $state(false)
+</script>
+
+<SvButton onclick={() => (open = true)}>Edit row</SvButton>
+
+<SvModal bind:open title="Edit row">
+  <p>Body content.</p>
+  {#snippet footer()}<SvButton variant="primary" onclick={() => (open = false)}>Save</SvButton>{/snippet}
+</SvModal>

package/recipes/overlays/popconfirm.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  // SvPopconfirm - a quick confirm step in a popover. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-popconfirm
+  import { SvPopconfirm, SvButton } from '@svgrid/grid'
+
+  function remove() {
+    // ...delete the thing
+  }
+</script>
+
+<SvPopconfirm
+  title="Delete this row?"
+  description="This cannot be undone."
+  confirmLabel="Delete"
+  confirmVariant="danger"
+  onConfirm={remove}
+>
+  {#snippet anchor()}<SvButton size="sm" variant="danger">Delete</SvButton>{/snippet}
+</SvPopconfirm>

package/recipes/overlays/popover.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">
-  // SvPopover - a floating panel anchored to a trigger. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-popover
-  import { SvPopover, SvButton } from '@svgrid/grid'
-</script>
-
-<SvPopover>
-  {#snippet anchor()}<SvButton>Open</SvButton>{/snippet}
-  <p>Panel content, portalled out of any scroll container.</p>
-</SvPopover>
+<script lang="ts">
+  // SvPopover - a floating panel anchored to a trigger. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-popover
+  import { SvPopover, SvButton } from '@svgrid/grid'
+</script>
+
+<SvPopover>
+  {#snippet anchor()}<SvButton>Open</SvButton>{/snippet}
+  <p>Panel content, portalled out of any scroll container.</p>
+</SvPopover>

package/recipes/overlays/toaster.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">
-  // SvToaster - host that renders the shared toast queue. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-toaster
-  import { SvToaster, SvButton, toast } from '@svgrid/grid'
-</script>
-
-<!-- Mount once, near the app root -->
-<SvToaster position="bottom-right" />
-
-<SvButton onclick={() => toast.success('Saved')}>Save</SvButton>
+<script lang="ts">
+  // SvToaster - host that renders the shared toast queue. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-toaster
+  import { SvToaster, SvButton, toast } from '@svgrid/grid'
+</script>
+
+<!-- Mount once, near the app root -->
+<SvToaster position="bottom-right" />
+
+<SvButton onclick={() => toast.success('Saved')}>Save</SvButton>

package/recipes/overlays/tooltip.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">
-  // SvTooltip - a hover and focus tooltip anchored to its child. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-tooltip
-  import { SvTooltip, SvButton } from '@svgrid/grid'
-</script>
-
-<SvTooltip text="Delete row">
-  <SvButton ariaLabel="Delete">🗑</SvButton>
-</SvTooltip>
+<script lang="ts">
+  // SvTooltip - a hover and focus tooltip anchored to its child. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-tooltip
+  import { SvTooltip, SvButton } from '@svgrid/grid'
+</script>
+
+<SvTooltip text="Delete row">
+  <SvButton ariaLabel="Delete">🗑</SvButton>
+</SvTooltip>

package/recipes/range/circular-progress.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">
-  // SvCircularProgress - ring progress indicator. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-circular-progress
-  import { SvCircularProgress } from '@svgrid/grid'
-
-  let value = $state(72)
-</script>
-
-<SvCircularProgress {value} size={72} thickness={7} showLabel />
-<SvCircularProgress indeterminate size={28} color="accent" />
+<script lang="ts">
+  // SvCircularProgress - ring progress indicator. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-circular-progress
+  import { SvCircularProgress } from '@svgrid/grid'
+
+  let value = $state(72)
+</script>
+
+<SvCircularProgress {value} size={72} thickness={7} showLabel />
+<SvCircularProgress indeterminate size={28} color="accent" />

package/recipes/range/gauge.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-  // SvGauge - radial arc gauge for a single KPI. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-gauge
-  import { SvGauge } from '@svgrid/grid'
-
-  let value = $state(72)
-</script>
-
-<SvGauge
-  {value}
-  unit="%"
-  bands={[
-    { from: 0, to: 60, color: '#16a34a' },
-    { from: 60, to: 85, color: '#f59e0b' },
-    { from: 85, to: 100, color: '#dc2626' },
-  ]}
-/>
+<script lang="ts">
+  // SvGauge - radial arc gauge for a single KPI. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-gauge
+  import { SvGauge } from '@svgrid/grid'
+
+  let value = $state(72)
+</script>
+
+<SvGauge
+  {value}
+  unit="%"
+  bands={[
+    { from: 0, to: 60, color: '#16a34a' },
+    { from: 60, to: 85, color: '#f59e0b' },
+    { from: 85, to: 100, color: '#dc2626' },
+  ]}
+/>

package/recipes/range/progress.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-  // SvProgress - linear determinate/indeterminate progress bar. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-progress
-  import { SvProgress } from '@svgrid/grid'
-
-  let value = $state(64)
-</script>
-
-<SvProgress {value} showLabel />
-<SvProgress value={30} color="warning" striped />
-<SvProgress indeterminate color="accent" />
+<script lang="ts">
+  // SvProgress - linear determinate/indeterminate progress bar. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-progress
+  import { SvProgress } from '@svgrid/grid'
+
+  let value = $state(64)
+</script>
+
+<SvProgress {value} showLabel />
+<SvProgress value={30} color="warning" striped />
+<SvProgress indeterminate color="accent" />