@spaethtech/svelte-ui 0.21.1-dev.120.d0d8cfa → 0.21.1-dev.121.3e3f7cf

package/MIGRATION.md

@@ -58,3 +58,32 @@ grep -rl 'Select' src | xargs sed -i \
 
 Verify: the field lines up with its siblings, submits in your form with JS disabled, and shows the
 right option on first paint (view source — the `selected` attribute is server-rendered).
+
+### `Disclosure2` / `Accordion2` vs `Disclosure` / `Accordion`
+
+`Disclosure2` is a real `<details>/<summary>`; `Accordion2` groups them with a shared native
+`<details name>`. The **header is pixel-identical** to `Disclosure`'s `Button` header. Differences:
+
+| `Disclosure`/`Accordion` prop | `*2` behaviour |
+| --- | --- |
+| `title`, `header`, `icon`, `size`, `variant`, `disabled`, `id`, `class`, `children` | ✅ Honoured (identical look). `disabled` makes the summary non-interactive + `aria-disabled` (a native `<details>` has no real disabled state). |
+| `open` (Disclosure) | ✅ Sets the initial `open` attribute (SSR-correct) and is kept in sync on `toggle`. With JS off, the browser owns subsequent toggles. |
+| `value` (Disclosure, Accordion) | ✅ Used to compute which panel starts open inside `Accordion2`. In `Accordion2` the group `value` is **initial state only** — with JS off the binding doesn't track user toggles (the browser does, via `name`). |
+| `multiple` (Accordion) | ✅ `false` → shared `<details name>` (browser single-open); `true` → no name (independent). |
+| panel height **animation** (`grid-template-rows: 0fr→1fr`) | ⚠️ Open/close is **instant** — a native `<details>` doesn't height-animate (pre-`::details-content`). The chevron still rotates. Matches reduced-motion behaviour. |
+| `collapsible={false}` (Accordion single mode) | ❌ Best-effort — "never zero open" can't be enforced without JS. |
+| panel stays **mounted when closed** (`inert`) | ⚠️ A closed `<details>` hides its content natively; it is not kept in the a11y tree the same way. Don't rely on closed-panel DOM state. |
+
+`Disclosure2` adds one prop over `Disclosure`: **`name`** (the native `<details name>` — set it
+yourself for a no-JS group without `Accordion2`, or let `Accordion2` provide it).
+
+**When NOT to swap:** if you depend on the height animation or on reading open state back through the
+binding without JS, stay on `Disclosure`/`Accordion`.
+
+**Codemod (per app, when adopting):**
+
+```bash
+grep -rl 'Disclosure\|Accordion' src | xargs sed -i \
+  -e 's/\b\(Disclosure\|Accordion\)\b/\12/g'
+# Review: this also rewrites import specifiers and any prose; check each hit.
+```

package/dist/components/Accordion2.svelte

@@ -0,0 +1,76 @@
+<!--
+/**
+ * Accordion2 — a native-first, no-JS sibling of `Accordion` (transitional `*2`, see MIGRATION.md).
+ * It groups `Disclosure2` (`<details>`) children. In single-open mode (`multiple={false}`, default)
+ * it hands every child the SAME `<details name>`, so the BROWSER enforces "opening one closes the
+ * rest" — with no JavaScript, no context callbacks, correct in SSR. `multiple` drops the shared name
+ * so each panel toggles independently. `size`/`variant`/`disabled` propagate to children; the group's
+ * `value` sets which panel(s) start open.
+ *
+ * Differences from `Accordion` (see MIGRATION.md): `value` is INITIAL state only — with JS off the
+ * browser owns subsequent open/close, so the binding doesn't track user toggles. `collapsible={false}`
+ * (never allow zero open) can't be enforced without JS and is treated as best-effort.
+ */
+-->
+<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 { nextFieldId } from "./FieldChrome.svelte";
+  import { setDisclosure2Group } from "./disclosure2.js";
+
+  let {
+    multiple = false,
+    value = $bindable(),
+    collapsible: _collapsible = true,
+    size = "md",
+    variant,
+    disabled = false,
+    class: cls = "",
+    children,
+  }: {
+    /** false (default) = single-open (native `<details name>`); true = independent multi-open. */
+    multiple?: boolean;
+    /** Open key (single) or keys (multiple). INITIAL state only in the native variant. Bindable. */
+    value?: string | string[];
+    /** Accepted for Accordion compatibility; not enforceable without JS (best-effort). */
+    collapsible?: boolean;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    disabled?: boolean;
+    class?: string;
+    children: Snippet;
+  } = $props();
+
+  // One shared <details name> per Accordion2 instance → browser-enforced single-open.
+  const groupName = nextFieldId();
+
+  setDisclosure2Group({
+    inGroup: true,
+    get name() {
+      return multiple ? undefined : groupName;
+    },
+    get value() {
+      return value;
+    },
+    get multiple() {
+      return multiple;
+    },
+    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/Accordion2.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 (native `<details name>`); true = independent multi-open. */
+    multiple?: boolean;
+    /** Open key (single) or keys (multiple). INITIAL state only in the native variant. Bindable. */
+    value?: string | string[];
+    /** Accepted for Accordion compatibility; not enforceable without JS (best-effort). */
+    collapsible?: boolean;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    disabled?: boolean;
+    class?: string;
+    children: Snippet;
+};
+declare const Accordion2: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Accordion2 = ReturnType<typeof Accordion2>;
+export default Accordion2;

package/dist/components/Disclosure2.svelte

@@ -0,0 +1,198 @@
+<!--
+/**
+ * Disclosure2 — a native-first, no-JS/SSR-correct sibling of `Disclosure` (transitional `*2`, see
+ * MIGRATION.md). It is a real `<details>/<summary>`: it expands/collapses with NO JavaScript, is
+ * open on first paint when `open` is set (SSR-correct), and gets correct button/expanded semantics
+ * from the browser for free. The `<summary>` wears `Button`'s exact ghost-header classes (copied
+ * verbatim), so the header is pixel-identical to `Disclosure`'s `<Button>` header — including the
+ * resting look, hover tint (native `:hover`), focus ring, and the chevron that rotates on open (pure
+ * CSS via `details[open]`).
+ *
+ * Differences from `Disclosure` (inherent to `<details>`, see MIGRATION.md):
+ *  - The open/close is INSTANT (no `grid-template-rows` height animation) except on browsers with
+ *    `::details-content` + `interpolate-size` support, where it eases. Reduced-motion → instant,
+ *    same as `Disclosure`.
+ *  - Grouping is native: pass the same `name` to several `Disclosure2`s (what `Accordion2` does) for
+ *    a browser-enforced single-open accordion — no context/JS. `value` is accepted but unused.
+ *  - `disabled` makes the summary non-interactive (pointer-events-none + aria-disabled); a native
+ *    `<details>` has no real disabled state.
+ */
+-->
+<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 { nextFieldId } from "./FieldChrome.svelte";
+  import { getDisclosure2Group } from "./disclosure2.js";
+
+  let {
+    title = null,
+    header,
+    open = $bindable(false),
+    value,
+    disabled = false,
+    size,
+    variant,
+    name,
+    icon,
+    id,
+    class: cls = "",
+    children,
+  }: {
+    /** Header text. Use the `header` snippet instead for full custom header content. */
+    title?: string | null;
+    header?: Snippet;
+    /** Initial + bindable open state. Sets the `open` attribute (SSR-correct); kept in sync on toggle.
+        Inside an `Accordion2`, the group's `value` matching this panel's `value` also opens it. */
+    open?: boolean;
+    /** This panel's key — matched against an `Accordion2` group's `value` to set the initial open. */
+    value?: string;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    /** Header hover/accent (default `ghost`; inherits the Accordion2's variant). */
+    variant?: Variant;
+    /** Native `<details name>` — same `name` across siblings = browser-enforced single-open group. */
+    name?: string;
+    icon?: Snippet;
+    id?: string;
+    class?: string;
+    children: Snippet;
+  } = $props();
+
+  const grp = getDisclosure2Group();
+  // Resolve axes: explicit prop → group → default (mirrors Disclosure's precedence).
+  const effSize = $derived(size ?? grp?.size ?? "md");
+  const effVariant = $derived(variant ?? grp?.variant ?? "ghost");
+  const effDisabled = $derived(disabled || !!grp?.disabled);
+  // Single-open group → share the browser-enforced `<details name>`; multiple/standalone → own name.
+  const effName = $derived(name ?? (grp && !grp.multiple ? grp.name : undefined));
+  // Initial open: explicit `open`, or (in a group) this panel's `value` matching the group value.
+  const groupOpen = $derived(
+    grp == null || value == null
+      ? false
+      : grp.multiple
+        ? Array.isArray(grp.value) && grp.value.includes(value)
+        : grp.value === value,
+  );
+  const effOpen = $derived(open || groupOpen);
+
+  const uid = nextFieldId();
+  const headerId = $derived(id ?? uid);
+  const panelId = $derived(`${headerId}-panel`);
+
+  // ── Header chrome — mirrors a <Button variant size> (borderless=true, the Disclosure default). ──
+  const baseClasses =
+    "flex w-full items-center [border-radius:var(--ui-border-radius)] font-medium transition-colors cursor-pointer border focus-visible:[outline:2px_solid_color-mix(in_srgb,var(--ui-color-text)_70%,transparent)] focus-visible:[outline-offset:0px]";
+  const padMap: Record<Size, string> = { sm: "h-6 px-2.5", md: "h-8 px-4", lg: "h-10 px-6" };
+  const textMap: Record<Size, string> = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+  const svgMap: Record<Size, string> = {
+    sm: "[&_svg]:w-3.5 [&_svg]:h-3.5",
+    md: "[&_svg]:w-4 [&_svg]:h-4",
+    lg: "[&_svg]:w-5 [&_svg]:h-5",
+  };
+  // FILL — copied VERBATIM from Button.fillClasses.
+  const fillClasses: Record<Variant, string> = {
+    primary:
+      "[background-color:var(--ui-color-primary)] text-white hover:[background-color:color-mix(in_srgb,var(--ui-color-primary)_90%,black)] [&_svg]:fill-current",
+    secondary:
+      "[background-color:var(--ui-color-secondary)] text-white hover:[background-color:color-mix(in_srgb,var(--ui-color-secondary)_90%,black)] [&_svg]:fill-current",
+    danger:
+      "[background-color:var(--ui-color-error)] text-white hover:[background-color:color-mix(in_srgb,var(--ui-color-error)_90%,black)] [&_svg]:fill-current",
+    info: "[background-color:var(--ui-color-info)] text-white hover:[background-color:color-mix(in_srgb,var(--ui-color-info)_90%,black)] [&_svg]:fill-current",
+    success:
+      "[background-color:var(--ui-color-success)] text-white hover:[background-color:color-mix(in_srgb,var(--ui-color-success)_90%,black)] [&_svg]:fill-current",
+    warning:
+      "[background-color:var(--ui-color-warning)] text-white hover:[background-color:color-mix(in_srgb,var(--ui-color-warning)_90%,black)] [&_svg]:fill-current",
+    ghost:
+      "bg-transparent [color:var(--ui-color-text)] hover:[background-color:var(--ui-color-hover)] [&_svg]:fill-current",
+    neutral:
+      "[background-color:var(--ui-color-text)] [color:var(--ui-color-background)] hover:[background-color:color-mix(in_srgb,var(--ui-color-text)_85%,var(--ui-color-background))] [&_svg]:fill-current",
+  };
+  // BORDER (borderless=true: tracks the fill) — copied VERBATIM from Button.borderMatchClasses.
+  const borderMatchClasses: Record<Variant, string> = {
+    primary:
+      "[border-color:var(--ui-color-primary)] hover:[border-color:color-mix(in_srgb,var(--ui-color-primary)_90%,black)]",
+    secondary:
+      "[border-color:var(--ui-color-secondary)] hover:[border-color:color-mix(in_srgb,var(--ui-color-secondary)_90%,black)]",
+    danger:
+      "[border-color:var(--ui-color-error)] hover:[border-color:color-mix(in_srgb,var(--ui-color-error)_90%,black)]",
+    info: "[border-color:var(--ui-color-info)] hover:[border-color:color-mix(in_srgb,var(--ui-color-info)_90%,black)]",
+    success:
+      "[border-color:var(--ui-color-success)] hover:[border-color:color-mix(in_srgb,var(--ui-color-success)_90%,black)]",
+    warning:
+      "[border-color:var(--ui-color-warning)] hover:[border-color:color-mix(in_srgb,var(--ui-color-warning)_90%,black)]",
+    ghost: "border-transparent hover:[border-color:var(--ui-color-hover)]",
+    neutral:
+      "[border-color:var(--ui-color-text)] hover:[border-color:color-mix(in_srgb,var(--ui-color-text)_85%,var(--ui-color-background))]",
+  };
+
+  const labelText = $derived(responsiveClasses(effSize, textMap));
+  const svgClass = $derived(responsiveClasses(effSize, svgMap));
+  const summaryClasses = $derived(
+    [
+      baseClasses,
+      responsiveClasses(effSize, padMap),
+      labelText,
+      responsiveClasses(effVariant, fillClasses),
+      responsiveClasses(effVariant, borderMatchClasses),
+      effDisabled ? "pointer-events-none opacity-50 cursor-not-allowed" : "",
+      "ui-disc2-summary",
+    ]
+      .filter(Boolean)
+      .join(" "),
+  );
+
+  // Keep `open` in sync for JS consumers (harmless with JS off — the browser toggles natively).
+  function onToggle(event: Event & { currentTarget: HTMLDetailsElement }) {
+    open = event.currentTarget.open;
+  }
+</script>
+
+<details class="ui-disc2 {cls}" name={effName} open={effOpen} ontoggle={onToggle}>
+  <summary
+    class={summaryClasses}
+    id={headerId}
+    aria-controls={panelId}
+    aria-disabled={effDisabled || undefined}
+  >
+    {#if icon}<span class="inline-flex shrink-0 {svgClass}">{@render icon()}</span>{/if}
+    {#if header}
+      <span class="flex-1 text-left">{@render header()}</span>
+    {:else}
+      <span class="flex-1 text-left">{title}</span>
+    {/if}
+    <ChevronDown class="ui-disc2-chevron shrink-0 {svgClass}" />
+  </summary>
+
+  <div
+    id={panelId}
+    role="region"
+    aria-labelledby={headerId}
+    class="ui-disc2-panel px-1 pt-1 pb-3 {labelText} [color:var(--ui-color-text)]"
+  >
+    {@render children()}
+  </div>
+</details>
+
+<style>
+  /* Hide the native disclosure triangle — we draw our own chevron. */
+  .ui-disc2 > summary {
+    list-style: none;
+  }
+  .ui-disc2 > summary::-webkit-details-marker {
+    display: none;
+  }
+  /* Chevron rotates on open — pure CSS, so it's correct with JS off and in SSR. Open/close itself is
+     instant (a native <details> doesn't height-animate pre-`::details-content`); documented in
+     MIGRATION.md. Reduced-motion skips the chevron transition, matching Disclosure. */
+  .ui-disc2[open] > summary :global(.ui-disc2-chevron) {
+    transform: rotate(180deg);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .ui-disc2 :global(.ui-disc2-chevron) {
+      transition: transform 200ms;
+    }
+  }
+</style>

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

@@ -0,0 +1,27 @@
+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;
+    /** Initial + bindable open state. Sets the `open` attribute (SSR-correct); kept in sync on toggle.
+        Inside an `Accordion2`, the group's `value` matching this panel's `value` also opens it. */
+    open?: boolean;
+    /** This panel's key — matched against an `Accordion2` group's `value` to set the initial open. */
+    value?: string;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    /** Header hover/accent (default `ghost`; inherits the Accordion2's variant). */
+    variant?: Variant;
+    /** Native `<details name>` — same `name` across siblings = browser-enforced single-open group. */
+    name?: string;
+    icon?: Snippet;
+    id?: string;
+    class?: string;
+    children: Snippet;
+};
+declare const Disclosure2: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Disclosure2 = ReturnType<typeof Disclosure2>;
+export default Disclosure2;

package/dist/components/disclosure2.d.ts

@@ -0,0 +1,16 @@
+import type { Size } from "../types/sizes.js";
+import type { Variant } from "../types/variants.js";
+import type { Responsive } from "../types/responsive.js";
+export interface Disclosure2GroupContext {
+    inGroup: true;
+    /** Shared `<details name>` for single-open mode; `undefined` in multiple mode (independent). */
+    name?: string;
+    /** The group's open key (single) or keys (multiple) — used to compute each child's initial `open`. */
+    value?: string | string[];
+    multiple: boolean;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    disabled?: boolean;
+}
+export declare function setDisclosure2Group(ctx: Disclosure2GroupContext): void;
+export declare function getDisclosure2Group(): Disclosure2GroupContext | undefined;

package/dist/components/disclosure2.js

@@ -0,0 +1,15 @@
+/**
+ * Shared context for `Accordion2` → `Disclosure2` — the native-first sibling of `disclosure.ts`.
+ * Unlike the JS group (which owns `isOpen`/`toggle`), this one carries only STATIC data the child
+ * reads at render: a shared `<details name>` (single-open mode → the browser enforces exclusivity
+ * with no JS) and the group's initial `value`/axes. There is no runtime toggle callback — the native
+ * `<details>` elements coordinate themselves.
+ */
+import { getContext, setContext } from "svelte";
+const KEY = Symbol("svelte-ui-disclosure2-group");
+export function setDisclosure2Group(ctx) {
+    setContext(KEY, ctx);
+}
+export function getDisclosure2Group() {
+    return getContext(KEY);
+}

package/dist/index.d.ts

@@ -70,6 +70,8 @@ export { Stepper } from "./components/Stepper/index.js";
 export type { StepItem } from "./components/Stepper/index.js";
 export { default as Disclosure } from "./components/Disclosure.svelte";
 export { default as Accordion } from "./components/Accordion.svelte";
+export { default as Disclosure2 } from "./components/Disclosure2.svelte";
+export { default as Accordion2 } from "./components/Accordion2.svelte";
 export { default as SideBarMenu } from "./components/SideBarMenu/SideBarMenu.svelte";
 export type { SideBarMenuItem, SideBarMenuBadge, SideBarMenuBadgeVariant, SideBarMenuApi, SideBarMenuMode, SideBarMenuActiveRule, } from "./components/SideBarMenu/SideBarMenu.svelte";
 export { Breadcrumbs } from "./components/Breadcrumbs/index.js";

package/dist/index.js

@@ -68,6 +68,9 @@ export { Carousel } from "./components/Carousel/index.js";
 export { Stepper } from "./components/Stepper/index.js";
 export { default as Disclosure } from "./components/Disclosure.svelte";
 export { default as Accordion } from "./components/Accordion.svelte";
+// Native-first, no-JS/SSR-correct variants (transitional `*2` — see MIGRATION.md).
+export { default as Disclosure2 } from "./components/Disclosure2.svelte";
+export { default as Accordion2 } from "./components/Accordion2.svelte";
 // Navigation Components
 export { default as SideBarMenu } from "./components/SideBarMenu/SideBarMenu.svelte";
 export { Breadcrumbs } from "./components/Breadcrumbs/index.js";

package/docs/components.md

@@ -308,6 +308,24 @@ independent. Propagates `size`/`variant`/`disabled` to children.
 - **Props**: `multiple` (default `false`), `value` (bindable — `string` single / `string[]` multiple),
   `collapsible` (single mode, default `true`), `size`, `variant`, `disabled`, `class`, `children`.
 
+### Disclosure2 / Accordion2 (native-first)
+
+**No-JS / SSR-correct** siblings built on real `<details>/<summary>`: they expand, rotate the chevron,
+and (via `Accordion2`'s shared `<details name>`) enforce single-open **with no JavaScript**, correct
+in SSR. The `<summary>` wears `Button`'s ghost-header classes, so the header is **pixel-identical** to
+`Disclosure` at every `size`/`variant`.
+
+- **Location**: `src/lib/components/Disclosure2.svelte`, `src/lib/components/Accordion2.svelte`
+- **Props**: a drop-in **superset** of `Disclosure`/`Accordion` — same `title`/`header`/`open`/`value`/
+  `size`/`variant`/`disabled`/`icon`/`class`/`children` and `multiple`/`value`. `Disclosure2` also
+  takes a native `name` (shared → browser single-open group).
+- **Intentional divergences** (native `<details>`): open/close is **instant** (no height animation —
+  reduced-motion parity), the group `value` is **initial state only** (with JS off the browser owns
+  toggles, so the binding doesn't track), and `collapsible={false}` is best-effort. Full matrix:
+  `MIGRATION.md`.
+- **Use when**: expandable content must work server-side / without JS (FAQs, nav sections).
+- **Transitional**: ships alongside the originals under the `2` suffix; see `MIGRATION.md`.
+
 ### Rating
 
 Star rating in two modes: a read-only display, or an interactive picker.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.21.1-dev.120.d0d8cfa",
+  "version": "0.21.1-dev.121.3e3f7cf",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"
@@ -301,6 +301,14 @@
       "types": "./dist/components/Accordion.svelte.d.ts",
       "svelte": "./dist/components/Accordion.svelte"
     },
+    "./disclosure2": {
+      "types": "./dist/components/Disclosure2.svelte.d.ts",
+      "svelte": "./dist/components/Disclosure2.svelte"
+    },
+    "./accordion2": {
+      "types": "./dist/components/Accordion2.svelte.d.ts",
+      "svelte": "./dist/components/Accordion2.svelte"
+    },
     "./side-bar-menu": {
       "types": "./dist/components/SideBarMenu/SideBarMenu.svelte.d.ts",
       "svelte": "./dist/components/SideBarMenu/SideBarMenu.svelte"