@spaethtech/svelte-ui 0.5.1-dev.24.9a705e3 → 0.5.1-dev.27.5011e8e

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

@@ -99,7 +99,10 @@ surfaces through the **native validity tooltip** (shown on form submit); the con
 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 `orientation`). Inside a
+(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 — 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`:
 
@@ -161,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 } from "./field-group.js";
+  import { setFieldGroup, type Columns, type Gap } from "./field-group.js";
 
   let {
     value = $bindable(),
@@ -25,7 +25,8 @@
     error = null,
     description = null,
     required = false,
-    orientation = "vertical",
+    columns = 1,
+    gap,
     size = "md",
     variant,
     disabled = false,
@@ -41,7 +42,10 @@
     error?: string | Snippet | null;
     description?: string | Snippet | null;
     required?: boolean;
-    orientation?: "vertical" | "horizontal";
+    /** 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;
@@ -49,13 +53,11 @@
     children: Snippet;
   } = $props();
 
-  // Reactive context: getters keep size/variant/orientation/disabled live; getValue/select share the
-  // radio-group value. Set once (context is stable); the getters read current prop values.
+  // Reactive context: getters keep size/variant/disabled live; getValue/select share the radio-group
+  // value. Set once (context is stable); the getters read current prop values. Layout is the grid's
+  // job (columns), so items need no orientation awareness.
   setFieldGroup({
     inGroup: true,
-    get orientation() {
-      return orientation;
-    },
     get size() {
       return size;
     },
@@ -75,6 +77,6 @@
   });
 </script>
 
-<FieldsetChrome {label} {aside} {error} {description} {required} {orientation} {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,6 +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, type Gap } from "./field-group.js";
 type $$ComponentProps = {
     /** Radio groups: the selected value (bindable). Ignored by checkbox/toggle children. */
     value?: string | number;
@@ -12,7 +13,10 @@ type $$ComponentProps = {
     error?: string | Snippet | null;
     description?: string | Snippet | null;
     required?: boolean;
-    orientation?: "vertical" | "horizontal";
+    /** 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,11 +2,12 @@
   import type { Snippet } from "svelte";
   import type { Size } from "../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import { gridColsClass, gapClass, 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 an orientation-controlled slot for its
-   * child controls. Used by `RadioGroup` / `FieldGroup`. Same prop vocabulary as FieldChrome.
+   * group label) plus the same error/description rows, and a `columns`-driven CSS-grid slot. Child
+   * controls are auto-placed into cells (no per-child prop). Used by `FieldGroup`.
    */
   interface Props {
     label?: string | null;
@@ -14,7 +15,10 @@
     error?: string | Snippet | null;
     description?: string | Snippet | null;
     required?: boolean;
-    orientation?: "vertical" | "horizontal";
+    /** 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;
@@ -26,7 +30,8 @@
     error = null,
     description = null,
     required = false,
-    orientation = "vertical",
+    columns = 1,
+    gap,
     size = "md",
     class: cls = "",
     children,
@@ -41,9 +46,9 @@
   const hasError = $derived(isSnippet(error) ? true : !!(error && String(error).trim()));
   const hasDesc = $derived(isSnippet(description) ? true : !!(description && String(description).trim()));
 
-  const itemsClass = $derived(
-    orientation === "horizontal" ? "flex flex-wrap gap-x-6 gap-y-2" : "flex flex-col gap-2",
-  );
+  // 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)} ${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,10 +1,11 @@
 import type { Snippet } from "svelte";
 import type { Size } from "../types/sizes.js";
 import { type Responsive } from "../types/responsive.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 an orientation-controlled slot for its
- * child controls. Used by `RadioGroup` / `FieldGroup`. Same prop vocabulary as FieldChrome.
+ * group label) plus the same error/description rows, and a `columns`-driven CSS-grid slot. Child
+ * controls are auto-placed into cells (no per-child prop). Used by `FieldGroup`.
  */
 interface Props {
     label?: string | null;
@@ -12,7 +13,10 @@ interface Props {
     error?: string | Snippet | null;
     description?: string | Snippet | null;
     required?: boolean;
-    orientation?: "vertical" | "horizontal";
+    /** 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

@@ -1,17 +1,31 @@
+import type { Breakpoint } from "../types/breakpoints.js";
 import type { Size } from "../types/sizes.js";
 import type { Variant } from "../types/variants.js";
-import type { Responsive } from "../types/responsive.js";
+import { type Responsive } from "../types/responsive.js";
 export interface FieldGroupContext {
     /** Present ⇒ the item is inside a group and renders its label inline (right of the control). */
     inGroup: true;
-    orientation: "vertical" | "horizontal";
     size?: Responsive<Size>;
     variant?: Variant;
     disabled?: boolean;
-    /** RadioGroup only — the shared radio-group name + controlled value. */
+    /** Radio groups only — the shared radio-group name + controlled value. */
     name?: string;
     getValue?: () => string | number | undefined;
     select?: (v: string | number) => void;
 }
+/**
+ * FieldGroup `columns`: a track count (1–6) as a scalar or a per-breakpoint map. `1` (default) = a
+ * stacked vertical list; anything higher lays the auto-placed items across that many equal columns.
+ */
+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

@@ -5,6 +5,48 @@
  * the radio-group value + `name` so a child `<Radio>` needs no `bind:group`.
  */
 import { getContext, setContext } from "svelte";
+import { responsiveClasses } from "../types/responsive.js";
+// Static literal map so Tailwind's scanner emits the base classes; the bp:-prefixed variants are
+// safelisted in theme.css (`@source inline(... grid-cols-{1..6})`).
+const COLS_MAP = {
+    "1": "grid-cols-1",
+    "2": "grid-cols-2",
+    "3": "grid-cols-3",
+    "4": "grid-cols-4",
+    "5": "grid-cols-5",
+    "6": "grid-cols-6",
+};
+/** Resolve a `Columns` value to `grid-cols-*` classes (responsive-aware). */
+export function gridColsClass(columns) {
+    if (columns == null)
+        return COLS_MAP["1"];
+    const value = typeof columns === "number"
+        ? String(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/dist/theme.css

@@ -203,3 +203,5 @@ body {
 @source inline("{,4xs:,3xs:,2xs:,xs:,sm:,md:,lg:,xl:,2xl:,3xl:}gap-{1.5,2,3}");
 @source inline("{,4xs:,3xs:,2xs:,xs:,sm:,md:,lg:,xl:,2xl:,3xl:}text-{xs,sm,base,lg,2xl}");
 @source inline("{,4xs:,3xs:,2xs:,xs:,sm:,md:,lg:,xl:,2xl:,3xl:}[&_svg]:{w,h}-{3.5,4,5,6}");
+/* FieldGroup `columns` → responsive grid tracks (auto-placed cells). */
+@source inline("{,4xs:,3xs:,2xs:,xs:,sm:,md:,lg:,xl:,2xl:,3xl:}grid-cols-{1,2,3,4,5,6}");

package/docs/components.md

@@ -129,9 +129,20 @@ 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), `orientation` (`'vertical'` default | `'horizontal'`), `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.
+  vocabulary), `columns` (`number | { base, md, … }`, default `1` = stacked; higher = that many
+  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

@@ -135,12 +135,31 @@ inline. For radios, bind the group `value` — children need no `bind:group`.
   <Radio value="push" label="Push notification" />
 </FieldGroup>
 
-<FieldGroup label="Capabilities" orientation="horizontal">
+<FieldGroup label="Capabilities" columns={2}>
   <Checkbox label="Webhook triggers" bind:checked={caps.webhook} />
   <Checkbox label="Script actions" bind:checked={caps.script} />
 </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.24.9a705e3",
+  "version": "0.5.1-dev.27.5011e8e",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"