@spaethtech/svelte-ui 0.5.1-dev.27.5011e8e → 0.5.1-dev.29.9ae5ffe

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

@@ -166,6 +166,9 @@ examples):
 - **Feedback:** `Alert` `Banner` `Badge` `Toaster` + `toast`
 - **Layout:** `Card` `CardHeader` `CardBody` `CardFooter` · **`Grid`** (auto-placed equal-cell grid;
   `columns` + `gap`)
+- **Disclosure:** **`Disclosure`** (one expand/collapse section; `title`/`header`, `bind:open`, panel
+  stays mounted so state is preserved) · **`Accordion`** (coordinated group — `multiple` single/multi,
+  `bind:value`; children are `<Disclosure value="…">`, no per-item `bind:open`)
 - **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/Accordion.svelte

@@ -0,0 +1,69 @@
+<!--
+/**
+ * Accordion — groups `Disclosure`s under coordinated open/close rules. `multiple={false}` (default) is
+ * single-open (opening one closes the rest); `multiple` lets each toggle independently. Bind `value`
+ * (a string for single, string[] for multiple); child `<Disclosure value="…">`s report through
+ * context — no per-item `bind:open`. `size`/`variant`/`disabled` propagate to children.
+ */
+-->
+<script lang="ts">
+  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 { setDisclosureGroup } from "./disclosure.js";
+
+  let {
+    multiple = false,
+    value = $bindable(),
+    collapsible = true,
+    size = "md",
+    variant,
+    disabled = false,
+    class: cls = "",
+    children,
+  }: {
+    /** false (default) = single-open; true = independent multi-open. */
+    multiple?: boolean;
+    /** Open key (single) or keys (multiple). Bindable. */
+    value?: string | string[];
+    /** Single mode: may the open panel be closed to none? Default true. */
+    collapsible?: boolean;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    disabled?: boolean;
+    class?: string;
+    children: Snippet;
+  } = $props();
+
+  setDisclosureGroup({
+    inGroup: true,
+    isOpen(v) {
+      return multiple ? Array.isArray(value) && value.includes(v) : value === v;
+    },
+    toggle(v) {
+      if (multiple) {
+        const arr = Array.isArray(value) ? value : [];
+        value = arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v];
+      } else {
+        // open a new panel, or (if re-clicking the open one) close it when collapsible
+        value = value === v ? (collapsible ? "" : v) : v;
+      }
+    },
+    get size() {
+      return size;
+    },
+    get variant() {
+      return variant;
+    },
+    get disabled() {
+      return disabled;
+    },
+  });
+</script>
+
+<div
+  class="flex flex-col [&>*:not(:last-child)]:border-b [&>*]:[border-color:var(--ui-border-color)] {cls}"
+>
+  {@render children()}
+</div>

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

@@ -0,0 +1,20 @@
+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";
+type $$ComponentProps = {
+    /** false (default) = single-open; true = independent multi-open. */
+    multiple?: boolean;
+    /** Open key (single) or keys (multiple). Bindable. */
+    value?: string | string[];
+    /** Single mode: may the open panel be closed to none? Default true. */
+    collapsible?: boolean;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    disabled?: boolean;
+    class?: string;
+    children: Snippet;
+};
+declare const Accordion: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/Disclosure.svelte

@@ -0,0 +1,115 @@
+<!--
+/**
+ * Disclosure — a single expand/collapse section: a `<Button>` header (title + rotating chevron) over
+ * a content panel. Standalone it owns `bind:open`; inside an `Accordion` it reports to the group via
+ * context (keyed by `value`) and the group owns which panel(s) are open.
+ *
+ * The panel animates with `grid-template-rows: 0fr → 1fr` (smooth for unknown heights, pure CSS), and
+ * stays MOUNTED when closed — panel state is preserved. Collapsed, it's `inert` + `aria-hidden` (out
+ * of the tab order + a11y tree). The transition is `motion-safe:` (reduced-motion → instant).
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import ChevronDown from "~icons/mdi/chevron-down";
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import type { Variant } from "../types/variants.js";
+  import Button from "./Button.svelte";
+  import { nextFieldId } from "./FieldChrome.svelte";
+  import { getDisclosureGroup } from "./disclosure.js";
+
+  let {
+    title = null,
+    header,
+    open = $bindable(false),
+    value,
+    disabled = false,
+    size,
+    variant,
+    icon,
+    id,
+    class: cls = "",
+    children,
+  }: {
+    /** Header text. Use the `header` snippet instead for full custom header content. */
+    title?: string | null;
+    header?: Snippet;
+    /** Bindable open state — standalone only (ignored inside an Accordion, which owns it). */
+    open?: boolean;
+    /** This panel's key. Required inside an `Accordion`; ignored standalone. */
+    value?: string;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    /** Header hover/accent (default `ghost`; inherits the Accordion's variant). */
+    variant?: Variant;
+    /** Optional leading icon in the header. */
+    icon?: Snippet;
+    id?: string;
+    class?: string;
+    children: Snippet;
+  } = $props();
+
+  const grp = getDisclosureGroup();
+  const inGroup = $derived(!!grp?.inGroup && value != null);
+  const effSize = $derived(size ?? grp?.size ?? "md");
+  const effVariant = $derived(variant ?? grp?.variant ?? "ghost");
+  const effDisabled = $derived(disabled || !!grp?.disabled);
+
+  const isOpen = $derived(inGroup ? grp!.isOpen(value!) : open);
+  function handleToggle() {
+    if (inGroup) grp!.toggle(value!);
+    else open = !open;
+  }
+
+  const uid = nextFieldId();
+  const headerId = $derived(id ?? uid);
+  const panelId = $derived(`${headerId}-panel`);
+
+  const textMap: Record<Size, string> = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+  const labelText = $derived(responsiveClasses(effSize, textMap));
+</script>
+
+<section class={cls}>
+  <Button
+    variant={effVariant}
+    size={effSize}
+    disabled={effDisabled}
+    onclick={handleToggle}
+    class="w-full [&>div]:w-full"
+    id={headerId}
+    aria-expanded={isOpen}
+    aria-controls={panelId}
+  >
+    {#if icon}<span class="inline-flex shrink-0">{@render icon()}</span>{/if}
+    {#if header}
+      <span class="flex-1 text-left">{@render header()}</span>
+    {:else}
+      <span class="flex-1 text-left font-medium {labelText}">{title}</span>
+    {/if}
+    <ChevronDown
+      class="shrink-0 motion-safe:transition-transform motion-safe:duration-200 {isOpen
+        ? 'rotate-180'
+        : ''}"
+    />
+  </Button>
+
+  <div
+    class="grid motion-safe:transition-[grid-template-rows] motion-safe:duration-200 {isOpen
+      ? '[grid-template-rows:1fr]'
+      : '[grid-template-rows:0fr]'}"
+  >
+    <div
+      class="overflow-hidden [min-height:0]"
+      id={panelId}
+      role="region"
+      aria-labelledby={headerId}
+      inert={!isOpen || undefined}
+      aria-hidden={!isOpen || undefined}
+    >
+      <div class="px-1 pt-1 pb-3 {labelText} [color:var(--ui-color-text)]">
+        {@render children()}
+      </div>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from "svelte";
+import type { Size } from "../types/sizes.js";
+import { type Responsive } from "../types/responsive.js";
+import type { Variant } from "../types/variants.js";
+type $$ComponentProps = {
+    /** Header text. Use the `header` snippet instead for full custom header content. */
+    title?: string | null;
+    header?: Snippet;
+    /** Bindable open state — standalone only (ignored inside an Accordion, which owns it). */
+    open?: boolean;
+    /** This panel's key. Required inside an `Accordion`; ignored standalone. */
+    value?: string;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    /** Header hover/accent (default `ghost`; inherits the Accordion's variant). */
+    variant?: Variant;
+    /** Optional leading icon in the header. */
+    icon?: Snippet;
+    id?: string;
+    class?: string;
+    children: Snippet;
+};
+declare const Disclosure: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Disclosure = ReturnType<typeof Disclosure>;
+export default Disclosure;

package/dist/components/FieldsetChrome.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import type { Size } from "../types/sizes.js";
-  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import { responsiveClasses, resolveScalar, type Responsive } from "../types/responsive.js";
   import { gridColsClass, gapClass, type Columns, type Gap } from "./field-group.js";
 
   /**
@@ -47,8 +47,16 @@
   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)} ${gapClass(gap, { x: 6, y: 1 })}`);
+  // per-child prop. `columns` sets the equal-width tracks; `gap` is the single density knob and, when
+  // unset, scales with `size` (controls grow h-6/h-8/h-10, so the gap tracks them).
+  const sizeGap: Record<Size, Gap> = {
+    sm: { x: 4, y: 0.5 },
+    md: { x: 6, y: 1 },
+    lg: { x: 8, y: 2 },
+  };
+  const itemsClass = $derived(
+    `grid ${gridColsClass(columns)} ${gapClass(gap, sizeGap[resolveScalar(size, "md")])}`,
+  );
 </script>
 
 <fieldset class="m-0 flex min-w-0 flex-col gap-1 border-0 p-0 {cls}">

package/dist/components/disclosure.d.ts

@@ -0,0 +1,13 @@
+import type { Size } from "../types/sizes.js";
+import type { Variant } from "../types/variants.js";
+import type { Responsive } from "../types/responsive.js";
+export interface DisclosureGroupContext {
+    inGroup: true;
+    isOpen(value: string): boolean;
+    toggle(value: string): void;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    disabled?: boolean;
+}
+export declare function setDisclosureGroup(ctx: DisclosureGroupContext): void;
+export declare function getDisclosureGroup(): DisclosureGroupContext | undefined;

package/dist/components/disclosure.js

@@ -0,0 +1,13 @@
+/**
+ * Shared context for `Accordion` → `Disclosure` (mirrors `field-group.ts`). A `Disclosure` inside an
+ * `Accordion` reads its open-state from the group (keyed by `value`) and toggles through it, so the
+ * group owns single-open / multi-open rules; it also inherits the group's `size`/`variant`/`disabled`.
+ */
+import { getContext, setContext } from "svelte";
+const KEY = Symbol("svelte-ui-disclosure-group");
+export function setDisclosureGroup(ctx) {
+    setContext(KEY, ctx);
+}
+export function getDisclosureGroup() {
+    return getContext(KEY);
+}

package/dist/components/field-group.js

@@ -27,15 +27,15 @@ export function gridColsClass(columns) {
 }
 // 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",
+    "0": "gap-0", "0.5": "gap-0.5", "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",
+    "0": "gap-x-0", "0.5": "gap-x-0.5", "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",
+    "0": "gap-y-0", "0.5": "gap-y-0.5", "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. */

package/dist/index.d.ts

@@ -37,6 +37,8 @@ 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 Disclosure } from "./components/Disclosure.svelte";
+export { default as Accordion } from "./components/Accordion.svelte";
 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

@@ -41,6 +41,8 @@ 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 { default as Disclosure } from "./components/Disclosure.svelte";
+export { default as Accordion } from "./components/Accordion.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,7 +130,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), `columns` (`number | { base, md, … }`, default `1` = stacked; higher = that many
-  equal auto-placed columns), `gap` (`number | { x, y }`, default `{ x: 6, y: 1 }`), `size`,
+  equal auto-placed columns), `gap` (`number | { x, y }`; default scales with `size` —
+  `sm {x:4,y:0.5}` · `md {x:6,y:1}` · `lg {x:8,y:2}`), `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.
 
@@ -144,6 +145,27 @@ per-child prop). Works with any content. Uniform cells only (for variable widths
 - **Props**: `columns` (`number | { base, md, … }`, 1–6, default `1`), `gap` (`number | { x, y }`,
   default `4`), `class`, `children`. Shares `gridColsClass`/`gapClass` with `FieldGroup`.
 
+### Disclosure
+
+A single expand/collapse section — a `<Button>` header (title + rotating chevron) over a content
+panel. The panel animates via `grid-template-rows` and **stays mounted when collapsed** (panel state
+preserved), `inert` + `aria-hidden` when closed. Standalone `bind:open`; inside an `Accordion` it
+reports via context (keyed by `value`).
+
+- **Location**: `src/lib/components/Disclosure.svelte`
+- **Axes**: `size`, `variant` (header; default `ghost`)
+- **Props**: `title` (or `header` Snippet), `open` (bindable, standalone), `value` (key — required in
+  an Accordion), `disabled`, `icon` (Snippet), `id`, `class`, `children` (panel).
+
+### Accordion
+
+Groups Disclosures under coordinated rules. `multiple={false}` (default) = single-open; `multiple` =
+independent. Propagates `size`/`variant`/`disabled` to children.
+
+- **Location**: `src/lib/components/Accordion.svelte`
+- **Props**: `multiple` (default `false`), `value` (bindable — `string` single / `string[]` multiple),
+  `collapsible` (single mode, default `true`), `size`, `variant`, `disabled`, `class`, `children`.
+
 ### Rating
 
 Read-only star-rating display (5-star, from a 10-point average).

package/docs/usage.md

@@ -160,6 +160,34 @@ responsive; `gap` is symmetric (a number) or per-axis (`{ x, y }`).
 
 For variable-width cells, use your own grid + `col-span-*`; `Grid` is uniform cells by design.
 
+### Disclosure & Accordion
+
+A `Disclosure` is one expand/collapse section (`bind:open`); an `Accordion` coordinates a set
+(single-open by default). The panel stays mounted when collapsed, so its state is preserved.
+
+```svelte
+<script>
+  import { Disclosure, Accordion } from "@spaethtech/svelte-ui";
+  let open = $state(false);
+  let section = $state("shipping"); // the open panel's key (single-open)
+</script>
+
+<!-- Standalone -->
+<Disclosure title="Advanced options" bind:open>
+  …panel content…
+</Disclosure>
+
+<!-- Coordinated group (single-open) -->
+<Accordion bind:value={section}>
+  <Disclosure value="shipping" title="Shipping">…</Disclosure>
+  <Disclosure value="returns" title="Returns">…</Disclosure>
+  <Disclosure value="warranty" title="Warranty">…</Disclosure>
+</Accordion>
+
+<!-- Multi-open: bind an array -->
+<!-- <Accordion multiple bind:value={openKeys}> … </Accordion> -->
+```
+
 ### Button
 
 ```svelte

package/package.json

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