@spaethtech/svelte-ui 0.5.1-dev.24.9a705e3 → 0.5.1-dev.26.4a7da0b

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

@@ -99,7 +99,8 @@ 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). 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`:
 

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 } from "./field-group.js";
 
   let {
     value = $bindable(),
@@ -25,7 +25,7 @@
     error = null,
     description = null,
     required = false,
-    orientation = "vertical",
+    columns = 1,
     size = "md",
     variant,
     disabled = false,
@@ -41,7 +41,8 @@
     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;
     size?: Responsive<Size>;
     variant?: Variant;
     disabled?: boolean;
@@ -49,13 +50,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 +74,6 @@
   });
 </script>
 
-<FieldsetChrome {label} {aside} {error} {description} {required} {orientation} {size} class={cls}>
+<FieldsetChrome {label} {aside} {error} {description} {required} {columns} {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 } from "./field-group.js";
 type $$ComponentProps = {
     /** Radio groups: the selected value (bindable). Ignored by checkbox/toggle children. */
     value?: string | number;
@@ -12,7 +13,8 @@ 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;
     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, type Columns } 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,8 @@
     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;
     size?: Responsive<Size>;
     class?: string;
     children: Snippet;
@@ -26,7 +28,7 @@
     error = null,
     description = null,
     required = false,
-    orientation = "vertical",
+    columns = 1,
     size = "md",
     class: cls = "",
     children,
@@ -41,9 +43,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)} gap-x-6 gap-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 } 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,8 @@ 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;
     size?: Responsive<Size>;
     class?: string;
     children: Snippet;

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

@@ -1,17 +1,24 @@
+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;
 export declare function setFieldGroup(ctx: FieldGroupContext): void;
 export declare function getFieldGroup(): FieldGroupContext | undefined;

package/dist/components/field-group.js

@@ -5,6 +5,26 @@
  * 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"];
+}
 const KEY = Symbol("svelte-ui-field-group");
 export function setFieldGroup(ctx) {
     setContext(KEY, ctx);

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,7 +129,8 @@ 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`
+  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.
 

package/docs/usage.md

@@ -135,7 +135,7 @@ 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>

package/package.json

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