@spaethtech/svelte-ui 0.5.1-dev.26.4a7da0b → 0.5.1-dev.27.5011e8e

package/.claude/skills/svelte-ui/SKILL.md

@@ -100,7 +100,9 @@ prop is the inline row. Both flip the field's error border.
 
 **Groups:** for a set of radios/checkboxes/toggles under one legend, wrap them in **`FieldGroup`**
 (same `label`/`description`/`error`/`required` vocab on a `<fieldset>`, plus `columns` — a number or
-responsive map; default 1 = stacked, higher lays items across equal auto-placed columns). Inside a
+responsive map; default 1 = stacked, higher lays items across equal auto-placed columns — and `gap`,
+a number or `{ x, y }`). For non-field content, **`Grid`** is the same auto-placement as a plain
+primitive (`columns` + `gap`, any children). Inside a
 group, item labels render **inline** (right of the control). For a radio group, `bind:value` on the
 `FieldGroup` (+ optional `name`) and the child `<Radio>`s share it automatically — no `bind:group`:
 
@@ -162,7 +164,8 @@ examples):
   · `Popup` `Menu` · `tooltip` (a Svelte `use:` action) · `anchored` (positioning engine)
 - **Navigation:** `TabStrip` `SideBarMenu`
 - **Feedback:** `Alert` `Banner` `Badge` `Toaster` + `toast`
-- **Layout:** `Card` `CardHeader` `CardBody` `CardFooter`
+- **Layout:** `Card` `CardHeader` `CardBody` `CardFooter` · **`Grid`** (auto-placed equal-cell grid;
+  `columns` + `gap`)
 - **Display / theme:** `NotesEditor` · `ThemeSelector` (Auto/Light/Dark Select) · `ThemeToggle`
   (compact ☀/☾ icon button, same persisted state)
 - **Types / utils:** `Variant` `Size` `TabDefinition` (types), `responsiveClasses` / `resolveScalar`,

package/dist/components/FieldGroup.svelte

@@ -15,7 +15,7 @@
   import type { Variant } from "../types/variants.js";
   import type { Responsive } from "../types/responsive.js";
   import FieldsetChrome from "./FieldsetChrome.svelte";
-  import { setFieldGroup, type Columns } from "./field-group.js";
+  import { setFieldGroup, type Columns, type Gap } from "./field-group.js";
 
   let {
     value = $bindable(),
@@ -26,6 +26,7 @@
     description = null,
     required = false,
     columns = 1,
+    gap,
     size = "md",
     variant,
     disabled = false,
@@ -43,6 +44,8 @@
     required?: boolean;
     /** Grid track count (default 1 = stacked vertical). Set >1 (or a responsive map) for columns. */
     columns?: Columns;
+    /** Cell gap. Default `{ x: 6, y: 1 }` (wide columns, tight rows). Number = symmetric. */
+    gap?: Gap;
     size?: Responsive<Size>;
     variant?: Variant;
     disabled?: boolean;
@@ -74,6 +77,6 @@
   });
 </script>
 
-<FieldsetChrome {label} {aside} {error} {description} {required} {columns} {size} class={cls}>
+<FieldsetChrome {label} {aside} {error} {description} {required} {columns} {gap} {size} class={cls}>
   {@render children()}
 </FieldsetChrome>

package/dist/components/FieldGroup.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from "svelte";
 import type { Size } from "../types/sizes.js";
 import type { Variant } from "../types/variants.js";
 import type { Responsive } from "../types/responsive.js";
-import { type Columns } from "./field-group.js";
+import { type Columns, type Gap } from "./field-group.js";
 type $$ComponentProps = {
     /** Radio groups: the selected value (bindable). Ignored by checkbox/toggle children. */
     value?: string | number;
@@ -15,6 +15,8 @@ type $$ComponentProps = {
     required?: boolean;
     /** Grid track count (default 1 = stacked vertical). Set >1 (or a responsive map) for columns. */
     columns?: Columns;
+    /** Cell gap. Default `{ x: 6, y: 1 }` (wide columns, tight rows). Number = symmetric. */
+    gap?: Gap;
     size?: Responsive<Size>;
     variant?: Variant;
     disabled?: boolean;

package/dist/components/FieldsetChrome.svelte

@@ -2,7 +2,7 @@
   import type { Snippet } from "svelte";
   import type { Size } from "../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../types/responsive.js";
-  import { gridColsClass, type Columns } from "./field-group.js";
+  import { gridColsClass, gapClass, type Columns, type Gap } from "./field-group.js";
 
   /**
    * FieldsetChrome — the group counterpart of FieldChrome: a `<fieldset>` with a `<legend>` (the
@@ -17,6 +17,8 @@
     required?: boolean;
     /** Grid track count (default 1 = stacked). Items auto-flow into equal cells. */
     columns?: Columns;
+    /** Cell gap. Default `{ x: 6, y: 1 }` — wide columns, tight rows (the field-list look). */
+    gap?: Gap;
     size?: Responsive<Size>;
     class?: string;
     children: Snippet;
@@ -29,6 +31,7 @@
     description = null,
     required = false,
     columns = 1,
+    gap,
     size = "md",
     class: cls = "",
     children,
@@ -44,8 +47,8 @@
   const hasDesc = $derived(isSnippet(description) ? true : !!(description && String(description).trim()));
 
   // Auto-placed CSS grid: each direct child (a Radio/Checkbox/Toggle label) is one cell — no
-  // per-child prop. `columns` sets the equal-width tracks; gap is the single density knob.
-  const itemsClass = $derived(`grid ${gridColsClass(columns)} gap-x-6 gap-y-1`);
+  // per-child prop. `columns` sets the equal-width tracks; `gap` is the single density knob.
+  const itemsClass = $derived(`grid ${gridColsClass(columns)} ${gapClass(gap, { x: 6, y: 1 })}`);
 </script>
 
 <fieldset class="m-0 flex min-w-0 flex-col gap-1 border-0 p-0 {cls}">

package/dist/components/FieldsetChrome.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from "svelte";
 import type { Size } from "../types/sizes.js";
 import { type Responsive } from "../types/responsive.js";
-import { type Columns } from "./field-group.js";
+import { type Columns, type Gap } from "./field-group.js";
 /**
  * FieldsetChrome — the group counterpart of FieldChrome: a `<fieldset>` with a `<legend>` (the
  * group label) plus the same error/description rows, and a `columns`-driven CSS-grid slot. Child
@@ -15,6 +15,8 @@ interface Props {
     required?: boolean;
     /** Grid track count (default 1 = stacked). Items auto-flow into equal cells. */
     columns?: Columns;
+    /** Cell gap. Default `{ x: 6, y: 1 }` — wide columns, tight rows (the field-list look). */
+    gap?: Gap;
     size?: Responsive<Size>;
     class?: string;
     children: Snippet;

package/dist/components/Grid.svelte

@@ -0,0 +1,34 @@
+<!--
+/**
+ * Grid — a minimal auto-placed CSS-grid layout primitive. Sets `grid grid-cols-{columns}` and lets
+ * every direct child flow into an equal cell (no per-child prop). Works with any content — Cards,
+ * Buttons, arbitrary markup. `columns` is responsive; `gap` is a single symmetric step or `{ x, y }`.
+ *
+ * Uniform cells only (by design). For variable-width layouts, use a bespoke grid + `col-span-*` on
+ * the cells yourself. `FieldGroup` is the field-specific sibling (adds legend/error chrome).
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { gridColsClass, gapClass, type Columns, type Gap } from "./field-group.js";
+
+  let {
+    columns = 1,
+    gap = 4,
+    class: cls = "",
+    children,
+  }: {
+    /** Track count — a number (1–6) or a responsive map like `{ base: 1, md: 3 }`. Default 1. */
+    columns?: Columns;
+    /** Cell gap — a Tailwind step (symmetric) or `{ x, y }` per-axis. Default 4. */
+    gap?: Gap;
+    class?: string;
+    children: Snippet;
+  } = $props();
+
+  const gridClass = $derived(`grid ${gridColsClass(columns)} ${gapClass(gap, 4)}`);
+</script>
+
+<div class="{gridClass} {cls}">
+  {@render children()}
+</div>

package/dist/components/Grid.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import { type Columns, type Gap } from "./field-group.js";
+type $$ComponentProps = {
+    /** Track count — a number (1–6) or a responsive map like `{ base: 1, md: 3 }`. Default 1. */
+    columns?: Columns;
+    /** Cell gap — a Tailwind step (symmetric) or `{ x, y }` per-axis. Default 4. */
+    gap?: Gap;
+    class?: string;
+    children: Snippet;
+};
+declare const Grid: import("svelte").Component<$$ComponentProps, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;

package/dist/components/field-group.d.ts

@@ -20,5 +20,12 @@ export interface FieldGroupContext {
 export type Columns = number | Partial<Record<Breakpoint, number>>;
 /** Resolve a `Columns` value to `grid-cols-*` classes (responsive-aware). */
 export declare function gridColsClass(columns: Columns | undefined): string;
+/** Grid gap: a single Tailwind gap step (symmetric) or `{ x, y }` for per-axis (column/row) gaps. */
+export type Gap = number | {
+    x?: number;
+    y?: number;
+};
+/** Resolve a `Gap` (or the fallback when unset) to `gap-*` / `gap-x-* gap-y-*` classes. */
+export declare function gapClass(gap: Gap | undefined, fallback: Gap): string;
 export declare function setFieldGroup(ctx: FieldGroupContext): void;
 export declare function getFieldGroup(): FieldGroupContext | undefined;

package/dist/components/field-group.js

@@ -25,6 +25,28 @@ export function gridColsClass(columns) {
         : Object.fromEntries(Object.entries(columns).map(([bp, n]) => [bp, String(n)]));
     return responsiveClasses(value, COLS_MAP) || COLS_MAP["1"];
 }
+// Static literal maps (Tailwind-scannable via the shipped dist). Non-responsive — one gap per grid.
+const GAP = {
+    "0": "gap-0", "1": "gap-1", "1.5": "gap-1.5", "2": "gap-2", "3": "gap-3",
+    "4": "gap-4", "5": "gap-5", "6": "gap-6", "8": "gap-8",
+};
+const GAP_X = {
+    "0": "gap-x-0", "1": "gap-x-1", "1.5": "gap-x-1.5", "2": "gap-x-2", "3": "gap-x-3",
+    "4": "gap-x-4", "5": "gap-x-5", "6": "gap-x-6", "8": "gap-x-8",
+};
+const GAP_Y = {
+    "0": "gap-y-0", "1": "gap-y-1", "1.5": "gap-y-1.5", "2": "gap-y-2", "3": "gap-y-3",
+    "4": "gap-y-4", "5": "gap-y-5", "6": "gap-y-6", "8": "gap-y-8",
+};
+/** Resolve a `Gap` (or the fallback when unset) to `gap-*` / `gap-x-* gap-y-*` classes. */
+export function gapClass(gap, fallback) {
+    const g = gap ?? fallback;
+    if (typeof g === "number")
+        return GAP[String(g)] ?? "";
+    return [g.x != null ? GAP_X[String(g.x)] : "", g.y != null ? GAP_Y[String(g.y)] : ""]
+        .filter(Boolean)
+        .join(" ");
+}
 const KEY = Symbol("svelte-ui-field-group");
 export function setFieldGroup(ctx) {
     setContext(KEY, ctx);

package/dist/index.d.ts

@@ -35,6 +35,8 @@ export { default as Checkbox } from "./components/Checkbox.svelte";
 export { default as Toggle } from "./components/Toggle.svelte";
 export { default as Radio } from "./components/Radio.svelte";
 export { default as FieldGroup } from "./components/FieldGroup.svelte";
+export { default as Grid } from "./components/Grid.svelte";
+export type { Columns, Gap } from "./components/field-group.js";
 export { default as SideBarMenu } from "./components/SideBarMenu/SideBarMenu.svelte";
 export type { SideBarMenuItem, SideBarMenuBadge, SideBarMenuBadgeVariant, } from "./components/SideBarMenu/SideBarMenu.svelte";
 export { default as TabStrip } from "./components/TabStrip/TabStrip.svelte";

package/dist/index.js

@@ -40,6 +40,7 @@ export { default as Checkbox } from "./components/Checkbox.svelte";
 export { default as Toggle } from "./components/Toggle.svelte";
 export { default as Radio } from "./components/Radio.svelte";
 export { default as FieldGroup } from "./components/FieldGroup.svelte";
+export { default as Grid } from "./components/Grid.svelte";
 // Navigation Components
 export { default as SideBarMenu } from "./components/SideBarMenu/SideBarMenu.svelte";
 export { default as TabStrip } from "./components/TabStrip/TabStrip.svelte";

package/docs/components.md

@@ -130,9 +130,19 @@ One wrapper for a set of Radios, Checkboxes, or Toggles under a shared legend (a
 - **Location**: `src/lib/components/FieldGroup.svelte`
 - **Props**: `label` (legend), `aside`, `description`, `error`, `required` (the shared field-chrome
   vocabulary), `columns` (`number | { base, md, … }`, default `1` = stacked; higher = that many
-  equal auto-placed columns), `size`, `variant`, `disabled`
-  (propagate to children), and for radio groups `value` (bindable) + `name`. Children render their
-  label inline; radios auto-share the group value/name via context.
+  equal auto-placed columns), `gap` (`number | { x, y }`, default `{ x: 6, y: 1 }`), `size`,
+  `variant`, `disabled` (propagate to children), and for radio groups `value` (bindable) + `name`.
+  Children render their label inline; radios auto-share the group value/name via context.
+
+### Grid
+
+Minimal auto-placed CSS-grid layout primitive — every direct child flows into an equal cell (no
+per-child prop). Works with any content. Uniform cells only (for variable widths, use your own grid +
+`col-span-*`).
+
+- **Location**: `src/lib/components/Grid.svelte`
+- **Props**: `columns` (`number | { base, md, … }`, 1–6, default `1`), `gap` (`number | { x, y }`,
+  default `4`), `class`, `children`. Shares `gridColsClass`/`gapClass` with `FieldGroup`.
 
 ### Rating
 

package/docs/usage.md

@@ -141,6 +141,25 @@ inline. For radios, bind the group `value` — children need no `bind:group`.
 </FieldGroup>
 ```
 
+### Grid
+
+Auto-placed layout — direct children flow into equal cells, no per-child prop. `columns` is
+responsive; `gap` is symmetric (a number) or per-axis (`{ x, y }`).
+
+```svelte
+<script>
+  import { Grid, Card } from "@spaethtech/svelte-ui";
+</script>
+
+<Grid columns={{ base: 1, sm: 2, lg: 3 }} gap={4}>
+  <Card>One</Card>
+  <Card>Two</Card>
+  <Card>Three</Card>
+</Grid>
+```
+
+For variable-width cells, use your own grid + `col-span-*`; `Grid` is uniform cells by design.
+
 ### Button
 
 ```svelte

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.5.1-dev.26.4a7da0b",
+  "version": "0.5.1-dev.27.5011e8e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"