@spaethtech/svelte-ui 0.21.1-dev.118.553a240 → 0.21.1-dev.121.3e3f7cf

package/MIGRATION.md

@@ -0,0 +1,89 @@
+# Migration guide
+
+This file tracks **breaking or behaviour-changing** moves between versions — anything a consumer must
+act on. Non-breaking additions live in `CHANGELOG.md`; only things that can bite a downstream app on
+upgrade are documented here, each with a dated heading and a concrete before/after.
+
+---
+
+## The `*2` native-first variants (transitional)
+
+Several components are getting a **native-first, no-JS / SSR-correct** rebuild so SSR apps (e.g. a
+PHP-rendered front end) render and submit them with **no client JavaScript**. Rather than change the
+existing components in place and risk the apps that already depend on them, each rebuild ships
+**alongside** the original under a `2` suffix (`Select` → `Select2`, …):
+
+- **Nothing breaks on arrival.** The `2` components are purely additive new exports. Existing
+  components are untouched; your current code keeps working.
+- **Try them on `@dev`.** Import the `2` variant (`import { Select2 } from '@spaethtech/svelte-ui'`
+  or the `@spaethtech/svelte-ui/select2` subpath) and A/B it against the original in the same app.
+- **The eventual swap is deliberate and versioned.** Once a `2` variant proves out, its
+  implementation replaces the original's (`Select2` → `Select`), the `2` export is removed, and that
+  single swap is documented here with its compatibility delta and a MINOR version bump. The only
+  thing that can break at that point is a **direct `Select2` import** — which should only ever exist
+  in the test bed, never in shipped app code.
+
+The `2` variants aim to be a **drop-in prop-superset** of the original: props the native element
+can't honour are still *accepted* (so swapping the component name type-checks) but ignored, and are
+listed per component below. Behavioural differences that a native element imposes are also listed —
+those are the parts you verify before adopting.
+
+### `Select2` vs `Select`
+
+`Select2` renders a real `<select>`. The **closed control is pixel-identical** to `Select` (same
+FieldChrome + bordered field box + chevron). Differences:
+
+| `Select` prop | `Select2` behaviour |
+| --- | --- |
+| `options`, `value`, `placeholder`, `disabled`, `size`, `variant`, `borderless`, `name`, `class`, `label`, `aside`, `error`, `description`, `required`, `onSelection` | ✅ Honoured (identical semantics). `name` now sits on the `<select>` itself — it submits natively, so no hidden input. |
+| `inputClass` | ✅ Applied to the `<select>` (alias of the new `selectClass`). |
+| `multiSelect` | ⚠️ Maps to native `<select multiple>` — a **listbox**, not the dropdown trigger. Single-select is the pixel-perfect path; the multi appearance intentionally diverges. |
+| `itemSnippet`, `itemClass`, `dropdownClass` | ❌ **Accepted but ignored** — the open list is the OS dropdown and can't be styled/custom-rendered. |
+| `maxVisibleItems`, `itemHeight`, `autoAdvance` | ❌ Accepted but ignored — the OS controls the dropdown. |
+| `url`, `searchParam`, `transform`, `debounceMs`, `maxResults`, `headers`, `searchTerm`, `onError`, `onLoadStart`, `onLoadEnd` | ❌ Accepted but ignored — **no remote search** (a native `<select>` has no type-to-search box). Load options yourself and pass `options`. |
+| `methods.openDropdown()` | ❌ No-op — the OS owns the open/close of a native `<select>`. |
+
+**When NOT to swap to `Select2`:** if you rely on remote search, custom option rendering, or the
+multi-select trigger look, stay on `Select`. `Select2` targets the common case: a static list that
+must work server-side / without JS.
+
+**Codemod (when you choose to adopt it in an app):**
+
+```bash
+# Swap the import + tag. Review each hit — drop any ignored props (url/transform/itemSnippet/…) by hand.
+grep -rl 'Select' src | xargs sed -i \
+  -e 's/\bimport { Select }/import { Select2 }/g' \
+  -e 's/<Select\b/<Select2/g' -e 's/<\/Select>/<\/Select2>/g'
+```
+
+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/Select2.svelte

@@ -0,0 +1,288 @@
+<script lang="ts">
+  /**
+   * Select2 — a NATIVE-FIRST, no-JS/SSR-correct sibling of `Select`.
+   *
+   * This is a transitional `*2` variant (see MIGRATION.md): it renders a real `<select>` element, so
+   * it works with JavaScript disabled, submits in a plain `<form>` natively (its `name` carries the
+   * value — no hidden input needed), and shows the correct selected option in SSR / before hydration.
+   * The chrome (FieldChrome label/aside/error/description + the bordered field box + the right chevron)
+   * is drawn with the SAME classes as `Input`, so a closed `Select2` is pixel-identical to `Select`.
+   *
+   * What's intentionally DIFFERENT from `Select` (inherent to a native `<select>`, see MIGRATION.md):
+   *  - The open option list is the OS-rendered dropdown — not stylable, no `itemSnippet`/`itemClass`.
+   *  - No remote search (`url`/`searchParam`/`transform`/…), no `methods.openDropdown()`.
+   *  - `multiSelect` maps to native `<select multiple>` (a listbox) — the appearance diverges there;
+   *    single-select is the pixel-perfect path.
+   * Those Select props are still ACCEPTED (so this is a drop-in type-superset) but ignored; each is
+   * annotated below. When this variant graduates, the shared field box should be extracted from
+   * `Input` into a helper both consume (today the classes are copied verbatim to avoid touching Input).
+   */
+  import type { Snippet } from "svelte";
+  import type { HTMLSelectAttributes } from "svelte/elements";
+  import type { FieldChromeProps } from "./field-chrome.js";
+  import ChevronDown from "~icons/mdi/chevron-down";
+  import FieldChrome, { nextFieldId } from "./FieldChrome.svelte";
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import type { Variant } from "../types/variants.js";
+
+  type Option = Record<string, any> & {
+    value: string;
+    label: string;
+  };
+
+  let {
+    options = [],
+    value = $bindable(""),
+    multiSelect = false,
+    placeholder = "Select an option...",
+    disabled = false,
+    size = "md",
+    variant = "neutral",
+    borderless = false,
+    name,
+    class: className = "",
+    selectClass = "",
+    inputClass = "", // Select alias → applied to the <select> too (drop-in compat).
+    onSelection,
+    // Field chrome.
+    label = null,
+    aside,
+    error = null,
+    description = null,
+    id,
+    required = false,
+    // ── Accepted for drop-in compatibility with Select, but NO native equivalent (ignored). ──
+    maxVisibleItems: _maxVisibleItems,
+    itemHeight: _itemHeight,
+    autoAdvance: _autoAdvance,
+    dropdownClass: _dropdownClass,
+    itemClass: _itemClass,
+    itemSnippet: _itemSnippet,
+    methods = $bindable(),
+    url: _url,
+    searchParam: _searchParam,
+    transform: _transform,
+    debounceMs: _debounceMs,
+    maxResults: _maxResults,
+    headers: _headers,
+    searchTerm = $bindable(""),
+    onError: _onError,
+    onLoadStart: _onLoadStart,
+    onLoadEnd: _onLoadEnd,
+    ...restProps
+  }: {
+    options?: Option[];
+    value?: string | string[];
+    multiSelect?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Shared size axis — maps to the field height, text, chevron box (matches Input/Select). */
+    size?: Responsive<Size>;
+    /** Shared variant axis — tints the field border + placeholder (matches Input/Select). */
+    variant?: Variant;
+    /** Drop the visible frame while keeping the 1px box + focus outline (matches Input). */
+    borderless?: boolean;
+    /** Native form field name — the `<select>` carries it, so the value submits with no JS. */
+    name?: string;
+    class?: string;
+    /** Extra classes on the `<select>` element. */
+    selectClass?: string;
+    /** Select alias for `selectClass` (drop-in). */
+    inputClass?: string;
+    onSelection?: (option: Option) => void;
+    /** Native required flag — forwarded to the `<select>` + wired to the FieldChrome label `*`. */
+    required?: boolean;
+    // ── Accepted-but-ignored (no native equivalent) — see MIGRATION.md ──
+    maxVisibleItems?: number;
+    itemHeight?: number;
+    autoAdvance?: boolean;
+    dropdownClass?: string;
+    itemClass?: string;
+    itemSnippet?: Snippet<[Option, number, boolean, boolean]>;
+    methods?: any;
+    url?: string;
+    searchParam?: string;
+    transform?: (apiResponse: any) => Option[];
+    debounceMs?: number;
+    maxResults?: number;
+    headers?: Record<string, string>;
+    searchTerm?: string;
+    onError?: (error: Error) => void;
+    onLoadStart?: () => void;
+    onLoadEnd?: () => void;
+  } & Omit<
+    HTMLSelectAttributes,
+    "value" | "size" | "class" | "multiple" | "name" | "disabled" | "required"
+  > &
+    FieldChromeProps = $props();
+
+  // `methods.openDropdown()` can't drive a native <select> (the OS owns it); expose a no-op so a
+  // consumer binding `methods` doesn't crash. (Documented divergence — see MIGRATION.md.)
+  $effect(() => {
+    methods = { openDropdown: () => {} };
+  });
+
+  const generatedId = nextFieldId();
+  const controlId = $derived(id ?? generatedId);
+
+  // Is a real value selected (vs. resting on the placeholder)? Drives the muted placeholder colour.
+  const hasValue = $derived(
+    multiSelect
+      ? Array.isArray(value) && value.length > 0
+      : value !== "" && value !== null && value !== undefined,
+  );
+
+  const isSnippet = (v: unknown): v is Snippet => typeof v === "function";
+  const invalid = $derived(isSnippet(error) ? true : !!(error && String(error).trim()));
+
+  // ── Size axis — copied VERBATIM from Input so the field box is pixel-identical. ──
+  const heightMap: Record<Size, string> = { sm: "h-6", md: "h-8", lg: "h-10" };
+  const iconBoxMap: Record<Size, string> = { sm: "w-6 h-6", md: "w-8 h-8", lg: "w-10 h-10" };
+  const textMap: Record<Size, string> = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+  const svgMap: Record<Size, string> = { sm: "w-3.5 h-3.5", md: "w-4 h-4", lg: "w-5 h-5" };
+  // Right padding on the <select> = chevron box width, so text never underlaps the chevron.
+  const padRightMap: Record<Size, string> = { sm: "pr-6", md: "pr-8", lg: "pr-10" };
+
+  // ── Variant border colour — copied VERBATIM from Input. ──
+  const borderVariantClass: Record<Variant, string> = {
+    secondary:
+      "[border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border-hover),transparent)]",
+    primary:
+      "[border-color:color-mix(in_srgb,var(--ui-color-primary)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-primary)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-primary)_var(--ui-tint-border-hover),transparent)]",
+    danger:
+      "[border-color:color-mix(in_srgb,var(--ui-color-error)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-error)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-error)_var(--ui-tint-border-hover),transparent)]",
+    info: "[border-color:color-mix(in_srgb,var(--ui-color-info)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-info)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-info)_var(--ui-tint-border-hover),transparent)]",
+    success:
+      "[border-color:color-mix(in_srgb,var(--ui-color-success)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-success)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-success)_var(--ui-tint-border-hover),transparent)]",
+    warning:
+      "[border-color:color-mix(in_srgb,var(--ui-color-warning)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-warning)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-warning)_var(--ui-tint-border-hover),transparent)]",
+    neutral:
+      "[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border-hover),transparent)]",
+    ghost:
+      "[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border-hover),transparent)] focus-within:[border-color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border-hover),transparent)]",
+  };
+
+  // ── Placeholder colour by variant — copied VERBATIM from Input's placeholderVariantClass values. ──
+  const placeholderVariantColor: Record<Variant, string> = {
+    secondary:
+      "[color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)]",
+    primary: "[color:color-mix(in_srgb,var(--ui-color-primary)_var(--ui-tint-border),transparent)]",
+    danger: "[color:color-mix(in_srgb,var(--ui-color-error)_var(--ui-tint-border),transparent)]",
+    info: "[color:color-mix(in_srgb,var(--ui-color-info)_var(--ui-tint-border),transparent)]",
+    success: "[color:color-mix(in_srgb,var(--ui-color-success)_var(--ui-tint-border),transparent)]",
+    warning: "[color:color-mix(in_srgb,var(--ui-color-warning)_var(--ui-tint-border),transparent)]",
+    neutral: "[color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border),transparent)]",
+    ghost: "[color:color-mix(in_srgb,var(--ui-color-text)_var(--ui-tint-border),transparent)]",
+  };
+
+  const heightClass = $derived(responsiveClasses(size, heightMap));
+  const iconBoxClass = $derived(responsiveClasses(size, iconBoxMap));
+  const textClass = $derived(responsiveClasses(size, textMap));
+  const svgClass = $derived(responsiveClasses(size, svgMap));
+  const padRightClass = $derived(responsiveClasses(size, padRightMap));
+
+  // Field box — mirrors Input.wrapperClasses (icon on the right → pl-2 pr-0 on the frame).
+  const wrapperClasses = $derived.by(() => {
+    const base = `relative w-full ${heightClass} flex items-center [border-radius:var(--ui-border-radius)]`;
+    const frameStyles = borderless ? "[border-color:transparent]" : borderVariantClass[variant];
+    const fieldBg =
+      variant === "ghost" ? "bg-transparent" : "[background-color:var(--ui-color-background)]";
+    const themeStyles = [
+      fieldBg,
+      "border",
+      "pl-2 pr-0",
+      frameStyles,
+      "focus-within:[outline:2px_solid_color-mix(in_srgb,currentColor_70%,transparent)]",
+      "focus-within:[outline-offset:0px]",
+    ].join(" ");
+    const validationStyles = invalid
+      ? "[border-color:var(--ui-color-error)] focus-within:[ring-color:var(--ui-color-error)]"
+      : "";
+    const disabledStyles = disabled
+      ? "![background-color:color-mix(in_srgb,var(--ui-color-text)_5%,transparent)] [border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)] cursor-not-allowed"
+      : "";
+    return `${base} ${themeStyles} ${validationStyles} ${disabledStyles}`.trim();
+  });
+
+  // The <select> itself — mirrors Input's inner <input> (flex-1, transparent, no border/outline).
+  const selectClasses = $derived.by(() => {
+    const base = `flex-1 h-full bg-transparent border-none outline-none ${textClass} ${padRightClass} leading-tight p-0 min-w-0 appearance-none cursor-pointer`;
+    const color = hasValue ? "[color:var(--ui-color-text)]" : placeholderVariantColor[variant];
+    const disabledColor =
+      "disabled:[color:color-mix(in_srgb,var(--ui-color-text)_40%,transparent)] disabled:cursor-not-allowed disabled:bg-transparent";
+    return `${base} ${color} ${disabledColor} ${selectClass} ${inputClass} ui-select2`.trim();
+  });
+
+  function handleChange(event: Event & { currentTarget: EventTarget & HTMLSelectElement }) {
+    const el = event.currentTarget;
+    if (multiSelect) {
+      value = Array.from(el.selectedOptions).map((o) => o.value);
+    } else {
+      value = el.value;
+      const opt = options.find((o) => o.value === el.value);
+      if (opt) onSelection?.(opt);
+    }
+  }
+</script>
+
+<FieldChrome {label} {aside} {error} {description} required={!!required} {controlId} {size} class={className}>
+  {#snippet control({ describedBy })}
+    <div class={wrapperClasses}>
+      <!-- The real control: native <select>. We set `selected` per-option (rather than `bind:value`,
+           which forbids a dynamic `multiple`) so SSR emits the correct selected option — right text
+           before hydration / with JS off — and `onchange` keeps client state in sync. -->
+      <select
+        multiple={multiSelect}
+        {name}
+        {disabled}
+        {required}
+        id={controlId}
+        aria-describedby={describedBy}
+        aria-invalid={invalid || undefined}
+        aria-required={required || undefined}
+        onchange={handleChange}
+        {...restProps}
+        class={selectClasses}
+      >
+        <!-- Native placeholder: a disabled, hidden option shown while nothing real is picked. -->
+        {#if placeholder && !multiSelect}
+          <option value="" disabled hidden selected={!hasValue}>{placeholder}</option>
+        {/if}
+        {#each options as option (option.value)}
+          <option
+            value={option.value}
+            selected={multiSelect
+              ? Array.isArray(value) && value.includes(option.value)
+              : value === option.value}>{option.label}</option
+          >
+        {/each}
+      </select>
+
+      <!-- Decorative chevron — same box/colour/size as Input's right icon. pointer-events-none so a
+           click anywhere (incl. here) falls through to the <select> beneath. -->
+      <span
+        class="pointer-events-none absolute inset-y-0 right-0 {iconBoxClass} flex items-center justify-center select-none"
+      >
+        <span
+          class="inline-flex {svgClass} items-center justify-center [color:var(--ui-color-secondary)] [&_svg]:w-full [&_svg]:h-full"
+        >
+          <ChevronDown />
+        </span>
+      </span>
+    </div>
+  {/snippet}
+</FieldChrome>
+
+<style>
+  /* Kill the UA focus box-shadow on the select (we draw our own focus-within outline on the box). */
+  .ui-select2 {
+    box-shadow: none !important;
+  }
+  /* Render the dropdown option list in theme colours where the OS honours it (not guaranteed, but
+     harmless where it isn't — the closed control is what we pixel-match). */
+  .ui-select2 option {
+    color: var(--ui-color-text);
+    background-color: var(--ui-color-background);
+  }
+</style>

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

@@ -0,0 +1,71 @@
+/**
+   * Select2 — a NATIVE-FIRST, no-JS/SSR-correct sibling of `Select`.
+   *
+   * This is a transitional `*2` variant (see MIGRATION.md): it renders a real `<select>` element, so
+   * it works with JavaScript disabled, submits in a plain `<form>` natively (its `name` carries the
+   * value — no hidden input needed), and shows the correct selected option in SSR / before hydration.
+   * The chrome (FieldChrome label/aside/error/description + the bordered field box + the right chevron)
+   * is drawn with the SAME classes as `Input`, so a closed `Select2` is pixel-identical to `Select`.
+   *
+   * What's intentionally DIFFERENT from `Select` (inherent to a native `<select>`, see MIGRATION.md):
+   *  - The open option list is the OS-rendered dropdown — not stylable, no `itemSnippet`/`itemClass`.
+   *  - No remote search (`url`/`searchParam`/`transform`/…), no `methods.openDropdown()`.
+   *  - `multiSelect` maps to native `<select multiple>` (a listbox) — the appearance diverges there;
+   *    single-select is the pixel-perfect path.
+   * Those Select props are still ACCEPTED (so this is a drop-in type-superset) but ignored; each is
+   * annotated below. When this variant graduates, the shared field box should be extracted from
+   * `Input` into a helper both consume (today the classes are copied verbatim to avoid touching Input).
+   */
+import type { Snippet } from "svelte";
+import type { HTMLSelectAttributes } from "svelte/elements";
+import type { FieldChromeProps } from "./field-chrome.js";
+import type { Size } from "../types/sizes.js";
+import { type Responsive } from "../types/responsive.js";
+import type { Variant } from "../types/variants.js";
+type Option = Record<string, any> & {
+    value: string;
+    label: string;
+};
+type $$ComponentProps = {
+    options?: Option[];
+    value?: string | string[];
+    multiSelect?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Shared size axis — maps to the field height, text, chevron box (matches Input/Select). */
+    size?: Responsive<Size>;
+    /** Shared variant axis — tints the field border + placeholder (matches Input/Select). */
+    variant?: Variant;
+    /** Drop the visible frame while keeping the 1px box + focus outline (matches Input). */
+    borderless?: boolean;
+    /** Native form field name — the `<select>` carries it, so the value submits with no JS. */
+    name?: string;
+    class?: string;
+    /** Extra classes on the `<select>` element. */
+    selectClass?: string;
+    /** Select alias for `selectClass` (drop-in). */
+    inputClass?: string;
+    onSelection?: (option: Option) => void;
+    /** Native required flag — forwarded to the `<select>` + wired to the FieldChrome label `*`. */
+    required?: boolean;
+    maxVisibleItems?: number;
+    itemHeight?: number;
+    autoAdvance?: boolean;
+    dropdownClass?: string;
+    itemClass?: string;
+    itemSnippet?: Snippet<[Option, number, boolean, boolean]>;
+    methods?: any;
+    url?: string;
+    searchParam?: string;
+    transform?: (apiResponse: any) => Option[];
+    debounceMs?: number;
+    maxResults?: number;
+    headers?: Record<string, string>;
+    searchTerm?: string;
+    onError?: (error: Error) => void;
+    onLoadStart?: () => void;
+    onLoadEnd?: () => void;
+} & Omit<HTMLSelectAttributes, "value" | "size" | "class" | "multiple" | "name" | "disabled" | "required"> & FieldChromeProps;
+declare const Select2: import("svelte").Component<$$ComponentProps, {}, "value" | "searchTerm" | "methods">;
+type Select2 = ReturnType<typeof Select2>;
+export default Select2;

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

@@ -23,6 +23,7 @@ export { default as Input } from "./components/Input.svelte";
 export { default as NotesEditor } from "./components/NotesEditor.svelte";
 export { default as Rating } from "./components/Rating.svelte";
 export { default as Select } from "./components/Select.svelte";
+export { default as Select2 } from "./components/Select2.svelte";
 export { Combobox } from "./components/Combobox/index.js";
 export { TokenInput } from "./components/TokenInput/index.js";
 export { Slider } from "./components/Slider/index.js";
@@ -69,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

@@ -23,6 +23,8 @@ export { default as Input } from "./components/Input.svelte";
 export { default as NotesEditor } from "./components/NotesEditor.svelte";
 export { default as Rating } from "./components/Rating.svelte";
 export { default as Select } from "./components/Select.svelte";
+// Native-first, no-JS/SSR-correct variant of Select (transitional `*2` — see MIGRATION.md).
+export { default as Select2 } from "./components/Select2.svelte";
 export { Combobox } from "./components/Combobox/index.js";
 export { TokenInput } from "./components/TokenInput/index.js";
 export { Slider } from "./components/Slider/index.js";
@@ -66,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

@@ -91,6 +91,27 @@ Custom dropdown built on `Input` + `List`.
   `maxResults`, `headers`, `searchTerm`)
 - **Modes**: static `options` or search-as-you-type against `url`
 
+### Select2 (native-first)
+
+A **no-JS / SSR-correct** sibling of `Select` that renders a real `<select>` — it works with
+JavaScript disabled, submits in a plain `<form>` (its `name` carries the value, no hidden input), and
+shows the right option in SSR / before hydration. The **closed control is pixel-identical** to
+`Select` (same FieldChrome + bordered field box + chevron).
+
+- **Location**: `src/lib/components/Select2.svelte`
+- **Axes**: `size`, `variant`, `borderless`
+- **Props**: a drop-in **superset** of `Select` — `options`, `value` (bindable), `placeholder`,
+  `disabled`, `size`, `variant`, `borderless`, `name`, `multiSelect`, `onSelection`, `selectClass`,
+  plus the FieldChrome vocabulary (`label`/`aside`/`error`/`description`/`required`/`id`).
+- **Intentional divergences** (native `<select>` limits): the open list is the OS dropdown (no
+  `itemSnippet`/`itemClass`/`dropdownClass`), **no remote search** (`url`/`searchParam`/`transform`/…
+  are accepted but ignored — load `options` yourself), no `methods.openDropdown()`, and `multiSelect`
+  maps to a native `<select multiple>` listbox. Full matrix + codemod: `MIGRATION.md`.
+- **Use when**: a static choice must render/submit server-side without JS. Stay on `Select` for
+  remote search, custom option rendering, or the multi-select trigger look.
+- **Transitional**: ships alongside `Select` under the `2` suffix; see `MIGRATION.md` for the
+  swap-and-drop plan.
+
 ### Combobox
 
 Free-text autocomplete — a text input with a suggestion listbox. Unlike `Select` (a closed choice),
@@ -287,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.118.553a240",
+  "version": "0.21.1-dev.121.3e3f7cf",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"
@@ -35,6 +35,7 @@
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*",
     "CLAUDE.md",
+    "MIGRATION.md",
     "docs"
   ],
   "sideEffects": [
@@ -136,6 +137,10 @@
       "types": "./dist/components/Select.svelte.d.ts",
       "svelte": "./dist/components/Select.svelte"
     },
+    "./select2": {
+      "types": "./dist/components/Select2.svelte.d.ts",
+      "svelte": "./dist/components/Select2.svelte"
+    },
     "./combobox": {
       "types": "./dist/components/Combobox/index.d.ts",
       "svelte": "./dist/components/Combobox/index.js"
@@ -296,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"