@svgrid/ui 0.3.3 → 0.4.0

package/recipes/range/slider.svelte

@@ -1,19 +1,19 @@
-<script lang="ts">
-  // SvSlider - single or dual-thumb range slider. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-slider
-  import { SvSlider } from '@svgrid/grid'
-
-  let price = $state<[number, number]>([20, 80])
-</script>
-
-<SvSlider
-  label="Price range"
-  range
-  value={price}
-  min={0}
-  max={200}
-  step={5}
-  ticks={5}
-  labels="endpoints"
-  formatValue={(v) => `$${v}`}
-  onChange={(v) => (price = v)}
-/>
+<script lang="ts">
+  // SvSlider - single or dual-thumb range slider. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-slider
+  import { SvSlider } from '@svgrid/grid'
+
+  let price = $state<[number, number]>([20, 80])
+</script>
+
+<SvSlider
+  label="Price range"
+  range
+  value={price}
+  min={0}
+  max={200}
+  step={5}
+  ticks={5}
+  labels="endpoints"
+  formatValue={(v) => `$${v}`}
+  onChange={(v) => (price = v)}
+/>

package/recipes/range/sparkline.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">
-  // SvSparkline - tiny inline line/area/bar/winloss chart. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-sparkline
-  import { SvSparkline } from '@svgrid/grid'
-
-  let data = $state([3, 7, 4, 9, 6, 11, 8])
-</script>
-
-<SvSparkline {data} type="area" />
-<SvSparkline data={[5, -2, 4, -1, 3, 6, -3]} type="winloss" />
+<script lang="ts">
+  // SvSparkline - tiny inline line/area/bar/winloss chart. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-sparkline
+  import { SvSparkline } from '@svgrid/grid'
+
+  let data = $state([3, 7, 4, 9, 6, 11, 8])
+</script>
+
+<SvSparkline {data} type="area" />
+<SvSparkline data={[5, -2, 4, -1, 3, 6, -3]} type="winloss" />

package/recipes/range/stat.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">
-  // SvStat - KPI metric card with delta trend. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-stat
-  import { SvStat } from '@svgrid/grid'
-
-  let value = $state('$48.2k')
-</script>
-
-<SvStat label="Revenue" {value} delta={12.4} hint="vs last month" />
-<SvStat label="Error rate" value="0.8%" delta={-1.2} invert hint="vs last week" />
+<script lang="ts">
+  // SvStat - KPI metric card with delta trend. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-stat
+  import { SvStat } from '@svgrid/grid'
+
+  let value = $state('$48.2k')
+</script>
+
+<SvStat label="Revenue" {value} delta={12.4} hint="vs last month" />
+<SvStat label="Error rate" value="0.8%" delta={-1.2} invert hint="vs last week" />

package/recipes/registry.json

@@ -20,7 +20,8 @@
         "switch-button",
         "check-box",
         "radio-group",
-        "rating"
+        "rating",
+        "segmented"
       ]
     },
     "inputs": {
@@ -71,7 +72,10 @@
         "drawer",
         "toaster",
         "context-menu",
-        "menu"
+        "menu",
+        "hover-card",
+        "popconfirm",
+        "menubar"
       ]
     },
     "layout": {
@@ -88,7 +92,11 @@
         "grid-chart",
         "form",
         "field",
-        "file-upload"
+        "file-upload",
+        "collapsible",
+        "layout",
+        "typography",
+        "display"
       ]
     },
     "feedback": {
@@ -102,7 +110,10 @@
         "timeline",
         "avatar",
         "avatar-group",
-        "carousel"
+        "carousel",
+        "spinner",
+        "loading-overlay",
+        "result"
       ]
     },
     "navigation": {
@@ -927,6 +938,60 @@
       ],
       "group": "overlays"
     },
+    {
+      "id": "hover-card",
+      "title": "Hover card",
+      "description": "A rich preview card that opens on hover, positioned by the shared engine.",
+      "aliases": [
+        "svhovercard"
+      ],
+      "deps": [
+        "@svgrid/grid"
+      ],
+      "files": [
+        {
+          "write": "hover-card.svelte",
+          "from": "overlays/hover-card.svelte"
+        }
+      ],
+      "group": "overlays"
+    },
+    {
+      "id": "popconfirm",
+      "title": "Popconfirm",
+      "description": "A quick confirm step in a popover for low-stakes destructive actions.",
+      "aliases": [
+        "svpopconfirm"
+      ],
+      "deps": [
+        "@svgrid/grid"
+      ],
+      "files": [
+        {
+          "write": "popconfirm.svelte",
+          "from": "overlays/popconfirm.svelte"
+        }
+      ],
+      "group": "overlays"
+    },
+    {
+      "id": "menubar",
+      "title": "Menubar",
+      "description": "An app-style row of dropdown menus with roving focus and full keyboard support.",
+      "aliases": [
+        "svmenubar"
+      ],
+      "deps": [
+        "@svgrid/grid"
+      ],
+      "files": [
+        {
+          "write": "menubar.svelte",
+          "from": "overlays/menubar.svelte"
+        }
+      ],
+      "group": "overlays"
+    },
     {
       "id": "tabs",
       "title": "Tabs",
@@ -1148,6 +1213,99 @@
       ],
       "group": "layout"
     },
+    {
+      "id": "collapsible",
+      "title": "Collapsible",
+      "description": "Single animated show/hide section with accessible trigger and inert closed region.",
+      "aliases": [
+        "svcollapsible",
+        "disclosure"
+      ],
+      "deps": [
+        "@svgrid/grid"
+      ],
+      "files": [
+        {
+          "write": "collapsible.svelte",
+          "from": "layout/collapsible.svelte"
+        }
+      ],
+      "group": "layout"
+    },
+    {
+      "id": "layout",
+      "title": "Layout primitives",
+      "description": "SvStack (column), SvGroup (row), and SvSimpleGrid (responsive grid) - gap-based flex/grid wrappers.",
+      "aliases": [
+        "svstack",
+        "svgroup",
+        "svsimplegrid",
+        "stack",
+        "group",
+        "simple-grid"
+      ],
+      "deps": [
+        "@svgrid/grid"
+      ],
+      "files": [
+        {
+          "write": "layout.svelte",
+          "from": "layout/layout.svelte"
+        }
+      ],
+      "group": "layout"
+    },
+    {
+      "id": "typography",
+      "title": "Typography",
+      "description": "Prose primitives - SvTitle, SvText, SvAnchor, SvBlockquote, SvMark, SvList - on one type scale.",
+      "aliases": [
+        "svtitle",
+        "svtext",
+        "svanchor",
+        "svblockquote",
+        "svmark",
+        "svlist",
+        "title",
+        "text",
+        "prose"
+      ],
+      "deps": [
+        "@svgrid/grid"
+      ],
+      "files": [
+        {
+          "write": "typography.svelte",
+          "from": "layout/typography.svelte"
+        }
+      ],
+      "group": "layout"
+    },
+    {
+      "id": "display",
+      "title": "Display primitives",
+      "description": "Small display helpers - SvKbd, SvCode, SvAspectRatio, SvVisuallyHidden.",
+      "aliases": [
+        "svkbd",
+        "svcode",
+        "svaspectratio",
+        "svvisuallyhidden",
+        "kbd",
+        "code",
+        "aspect-ratio",
+        "visually-hidden"
+      ],
+      "deps": [
+        "@svgrid/grid"
+      ],
+      "files": [
+        {
+          "write": "display.svelte",
+          "from": "layout/display.svelte"
+        }
+      ],
+      "group": "layout"
+    },
     {
       "id": "badge",
       "title": "Badge",
@@ -1166,6 +1324,81 @@
       ],
       "group": "feedback"
     },
+    {
+      "id": "segmented",
+      "title": "Segmented",
+      "description": "Compact single-select track for view switchers and small enum settings, on the radio-group core.",
+      "aliases": [
+        "svsegmented",
+        "segmented-control"
+      ],
+      "deps": [
+        "@svgrid/grid"
+      ],
+      "files": [
+        {
+          "write": "segmented.svelte",
+          "from": "buttons/segmented.svelte"
+        }
+      ],
+      "group": "buttons"
+    },
+    {
+      "id": "spinner",
+      "title": "Spinner",
+      "description": "Indeterminate loading ring that inherits text colour and respects reduced-motion.",
+      "aliases": [
+        "svspinner",
+        "loader"
+      ],
+      "deps": [
+        "@svgrid/grid"
+      ],
+      "files": [
+        {
+          "write": "spinner.svelte",
+          "from": "feedback/spinner.svelte"
+        }
+      ],
+      "group": "feedback"
+    },
+    {
+      "id": "loading-overlay",
+      "title": "Loading overlay",
+      "description": "Cover-a-container scrim with a centred spinner while content loads or saves.",
+      "aliases": [
+        "svloadingoverlay",
+        "loadingoverlay"
+      ],
+      "deps": [
+        "@svgrid/grid"
+      ],
+      "files": [
+        {
+          "write": "loading-overlay.svelte",
+          "from": "feedback/loading-overlay.svelte"
+        }
+      ],
+      "group": "feedback"
+    },
+    {
+      "id": "result",
+      "title": "Result",
+      "description": "Full result page (success / error / warning / info / not-found) with icon, title, and actions.",
+      "aliases": [
+        "svresult"
+      ],
+      "deps": [
+        "@svgrid/grid"
+      ],
+      "files": [
+        {
+          "write": "result.svelte",
+          "from": "feedback/result.svelte"
+        }
+      ],
+      "group": "feedback"
+    },
     {
       "id": "skeleton",
       "title": "Skeleton",

package/recipes/selection/auto-complete.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-  // SvAutoComplete - free-text input with a live suggestion list. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-auto-complete
-  import { SvAutoComplete } from '@svgrid/grid'
-
-  const cities = ['Amsterdam', 'Berlin', 'Copenhagen', 'Dublin']
-  let value = $state('')
-</script>
-
-<SvAutoComplete label="City" suggestions={cities}
-  {value} onChange={(v) => (value = v)} placeholder="Search a city" />
+<script lang="ts">
+  // SvAutoComplete - free-text input with a live suggestion list. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-auto-complete
+  import { SvAutoComplete } from '@svgrid/grid'
+
+  const cities = ['Amsterdam', 'Berlin', 'Copenhagen', 'Dublin']
+  let value = $state('')
+</script>
+
+<SvAutoComplete label="City" suggestions={cities}
+  {value} onChange={(v) => (value = v)} placeholder="Search a city" />

package/recipes/selection/combo-box.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">
-  // SvComboBox - searchable single-select combobox. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-combo-box
-  import { SvComboBox, type ListOption } from '@svgrid/grid'
-
-  const options: ListOption[] = [
-    { value: 'us', label: 'United States' },
-    { value: 'gb', label: 'United Kingdom' },
-    { value: 'de', label: 'Germany' },
-  ]
-  let value = $state<string | number | null>(null)
-</script>
-
-<SvComboBox label="Country" {options} {value} onChange={(v) => (value = v)} required />
+<script lang="ts">
+  // SvComboBox - searchable single-select combobox. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-combo-box
+  import { SvComboBox, type ListOption } from '@svgrid/grid'
+
+  const options: ListOption[] = [
+    { value: 'us', label: 'United States' },
+    { value: 'gb', label: 'United Kingdom' },
+    { value: 'de', label: 'Germany' },
+  ]
+  let value = $state<string | number | null>(null)
+</script>
+
+<SvComboBox label="Country" {options} {value} onChange={(v) => (value = v)} required />

package/recipes/selection/country-input.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">
-  // SvCountryInput - searchable country picker emitting an ISO code. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-country-input
-  import { SvCountryInput } from '@svgrid/grid'
-
-  let value = $state<string | null>(null)
-</script>
-
-<SvCountryInput label="Country" {value} onChange={(code) => (value = code)} required />
+<script lang="ts">
+  // SvCountryInput - searchable country picker emitting an ISO code. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-country-input
+  import { SvCountryInput } from '@svgrid/grid'
+
+  let value = $state<string | null>(null)
+</script>
+
+<SvCountryInput label="Country" {value} onChange={(code) => (value = code)} required />

package/recipes/selection/drop-down-list.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">
-  // SvDropDownList - single-select dropdown with no typing. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-drop-down-list
-  import { SvDropDownList, type ListOption } from '@svgrid/grid'
-
-  const options: ListOption[] = [
-    { value: 'open', label: 'Open' },
-    { value: 'wip', label: 'In progress' },
-    { value: 'done', label: 'Done' },
-  ]
-  let value = $state<string | number | null>(null)
-</script>
-
-<SvDropDownList label="Status" {options} {value} onChange={(v) => (value = v)} />
+<script lang="ts">
+  // SvDropDownList - single-select dropdown with no typing. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-drop-down-list
+  import { SvDropDownList, type ListOption } from '@svgrid/grid'
+
+  const options: ListOption[] = [
+    { value: 'open', label: 'Open' },
+    { value: 'wip', label: 'In progress' },
+    { value: 'done', label: 'Done' },
+  ]
+  let value = $state<string | number | null>(null)
+</script>
+
+<SvDropDownList label="Status" {options} {value} onChange={(v) => (value = v)} />

package/recipes/selection/grid-select.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-  // SvGridSelect - grid-in-a-dropdown multi-column single-select. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-grid-select
-  import { SvGridSelect, type GridSelectColumn } from '@svgrid/grid'
-
-  const columns: GridSelectColumn[] = [
-    { field: 'name', header: 'Name', width: '1.5fr' },
-    { field: 'email', header: 'Email' },
-    { field: 'role', header: 'Role', width: '80px' },
-  ]
-  const options = [
-    { id: 1, name: 'Ada Lovelace', email: 'ada@ex.com', role: 'Admin' },
-    { id: 2, name: 'Alan Turing', email: 'alan@ex.com', role: 'User' },
-  ]
-  let value = $state<string | number | null>(null)
-</script>
-
-<SvGridSelect label="Owner" {columns} {options} idField="id" bind:value />
+<script lang="ts">
+  // SvGridSelect - grid-in-a-dropdown multi-column single-select. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-grid-select
+  import { SvGridSelect, type GridSelectColumn } from '@svgrid/grid'
+
+  const columns: GridSelectColumn[] = [
+    { field: 'name', header: 'Name', width: '1.5fr' },
+    { field: 'email', header: 'Email' },
+    { field: 'role', header: 'Role', width: '80px' },
+  ]
+  const options = [
+    { id: 1, name: 'Ada Lovelace', email: 'ada@ex.com', role: 'Admin' },
+    { id: 2, name: 'Alan Turing', email: 'alan@ex.com', role: 'User' },
+  ]
+  let value = $state<string | number | null>(null)
+</script>
+
+<SvGridSelect label="Owner" {columns} {options} idField="id" bind:value />

package/recipes/selection/list-box.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">
-  // SvListBox - inline single/multi-select list picker. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-list-box
-  import { SvListBox, type ListOption } from '@svgrid/grid'
-
-  const options: ListOption[] = [
-    { value: 'eng', label: 'Engineering', group: 'Product' },
-    { value: 'des', label: 'Design', group: 'Product' },
-    { value: 'sal', label: 'Sales', group: 'Go-to-market' },
-  ]
-  let value = $state<string | null>(null)
-</script>
-
-<SvListBox label="Team" {options} {value} onChange={(v) => (value = v)} />
+<script lang="ts">
+  // SvListBox - inline single/multi-select list picker. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-list-box
+  import { SvListBox, type ListOption } from '@svgrid/grid'
+
+  const options: ListOption[] = [
+    { value: 'eng', label: 'Engineering', group: 'Product' },
+    { value: 'des', label: 'Design', group: 'Product' },
+    { value: 'sal', label: 'Sales', group: 'Go-to-market' },
+  ]
+  let value = $state<string | null>(null)
+</script>
+
+<SvListBox label="Team" {options} {value} onChange={(v) => (value = v)} />

package/recipes/selection/multi-select.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">
-  // SvMultiSelect - multi-select dropdown with a chip trigger. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-multi-select
-  import { SvMultiSelect, type MultiSelectOption } from '@svgrid/grid'
-
-  const options: MultiSelectOption[] = [
-    { value: 'ts', label: 'TypeScript' },
-    { value: 'svelte', label: 'Svelte' },
-    { value: 'rust', label: 'Rust' },
-  ]
-  let value = $state<Array<string | number>>([])
-</script>
-
-<SvMultiSelect label="Skills" {options} bind:value maxTagCount={2} />
+<script lang="ts">
+  // SvMultiSelect - multi-select dropdown with a chip trigger. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-multi-select
+  import { SvMultiSelect, type MultiSelectOption } from '@svgrid/grid'
+
+  const options: MultiSelectOption[] = [
+    { value: 'ts', label: 'TypeScript' },
+    { value: 'svelte', label: 'Svelte' },
+    { value: 'rust', label: 'Rust' },
+  ]
+  let value = $state<Array<string | number>>([])
+</script>
+
+<SvMultiSelect label="Skills" {options} bind:value maxTagCount={2} />

package/recipes/selection/tree-select.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-  // SvTreeSelect - single-select dropdown over a collapsible tree. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-tree-select
-  import { SvTreeSelect, type TreeSelectNode } from '@svgrid/grid'
-
-  const nodes: TreeSelectNode[] = [
-    { value: 'eng', label: 'Engineering', children: [
-      { value: 'fe', label: 'Frontend' },
-      { value: 'be', label: 'Backend' },
-    ] },
-    { value: 'design', label: 'Design' },
-  ]
-  let value = $state<string | number | null>(null)
-</script>
-
-<SvTreeSelect label="Team" {nodes} bind:value showPath />
+<script lang="ts">
+  // SvTreeSelect - single-select dropdown over a collapsible tree. Your copy, edit freely. Docs: https://svgrid.com/docs/help/ui-components/sv-tree-select
+  import { SvTreeSelect, type TreeSelectNode } from '@svgrid/grid'
+
+  const nodes: TreeSelectNode[] = [
+    { value: 'eng', label: 'Engineering', children: [
+      { value: 'fe', label: 'Frontend' },
+      { value: 'be', label: 'Backend' },
+    ] },
+    { value: 'design', label: 'Design' },
+  ]
+  let value = $state<string | number | null>(null)
+</script>
+
+<SvTreeSelect label="Team" {nodes} bind:value showPath />