# SortableGroup

Connects two or more `Sortable` lists so items can move between them.

## Usage

Wrap two or more `Sortable` children to connect them.
```svelte
<SortableGroup {...props}>
  <Sortable {...props} />
  <Sortable {...props} />
</SortableGroup>
```

## Anatomy

The `class` attribute values represent part names. Other attributes represent their corresponding props.

```svelte
<div class="whole" {...rest} role="group">
  {children}
</div>
```

## Props

| Name | Type | Default | Description |
|---|---|---|---|
| `children*` | `Snippet` | - | Child content; render two or more `<Sortable>` children inside it |
| `group` | `SortableGroupController` | - | Reuses an external controller created by `createSortableGroup(...)`; omitted groups create and provide their own controller |
| `duration` | `number` | `300` | Group motion duration in milliseconds; reduced motion resolves the duration to `0` |
| `easing` | `EasingFunction` | `cubicOut` | Group motion easing function |
| `styling` | `SVSClass` | - | Styling inherited by neutral descendant Sortables when `group` is omitted |
| `variant` | `SVSVariant` | `NEUTRAL` | Variant inherited by neutral descendant Sortables when `group` is omitted |
`*` required. Other `<div>` attributes are passed via rest props; `class` is merged onto the group.

`SortableGroup` is children-only: render two or more `<Sortable>` children inside it. Descendant Sortables without a `group` prop resolve the shared controller from context. When `group` is omitted, neutral descendant Sortables inherit the group's `variant` and `styling`; when `group` is provided, that controller's own presentation is used.

## Styling

To learn more, see [Styling](/docs/styling).

### Variant Management

No automatic switching.

### Default Class Name

`svs-sortable-group`

## Accessibility

### ARIA Roles and Attributes

The component applies these automatically:

- Group (`whole` `<div>`): `role="group"`.

Name the group with `aria-label` or `aria-labelledby` through rest props.

Each child `Sortable` provides keyboard reordering within its own list, and connected lists share the group controller's live-region announcements; see [`Sortable`](/docs/sortable) accessibility for the keyboard model.

## Exports

### Types

```ts
interface SortableGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> {
  children: Snippet;
  group?: SortableGroupController; // reuse an externally created controller
  duration?: number; // (300) group motion duration
  easing?: EasingFunction; // (cubicOut) group motion easing
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
  // other div attributes are passed to the group <div> via ...rest; `class` is merged
  // aria-label / aria-labelledby name the group
}
type SortableGroupReqdProps = "children";
type SortableGroupBindProps = never;
```

### Others

See [`Sortable`](/docs/sortable) for `createSortableGroup` and `SortableGroupController`.

## Examples

The example code uses Tailwind CSS along with `SVSClass`.

### Basic

**Code**

```svelte src=SortableGroupBasic.svelte
<script lang="ts">
  import { Sortable, SortableGroup } from "svseeds";

  type Card = {
    id: string;
    title: string;
  };

  let todo = $state<Card[]>([
    { id: "scope", title: "Scope sortable docs" },
    { id: "copy", title: "Write copy" },
  ]);
  let doing = $state<Card[]>([{ id: "demo", title: "Build examples" }]);
  let done = $state<Card[]>([{ id: "api", title: "Verify API" }]);
  const styling = {
    whole: "grid w-full max-w-3xl grid-cols-1 gap-3 sm:grid-cols-3",
  };
  const childStyle = {
    whole: "flex min-h-32 flex-col gap-2 rounded-md border border-dashed border-gray-500 p-3 select-none",
    main: {
      base: "rounded-sm border bg-white px-3 py-2 text-sm shadow-sm dark:bg-black",
      neutral: "border-gray-300 dark:border-gray-700",
      active: "border-teal-600 ring-2 ring-teal-200 dark:ring-teal-900",
    },
  };
</script>

<!---------------------------------------->

<SortableGroup {styling}>
  <section class="space-y-2">
    <h3 class="text-sm font-semibold">Todo</h3>
    <Sortable id="todo" bind:items={todo} appendable key={(card) => card.id} styling={childStyle}>
      {#snippet item(card)}
        {card.title}
      {/snippet}
    </Sortable>
  </section>
  <section class="space-y-2">
    <h3 class="text-sm font-semibold">Doing</h3>
    <Sortable id="doing" bind:items={doing} appendable key={(card) => card.id} styling={childStyle}>
      {#snippet item(card)}
        {card.title}
      {/snippet}
    </Sortable>
  </section>
  <section class="space-y-2">
    <h3 class="text-sm font-semibold">Done</h3>
    <Sortable id="done" bind:items={done} appendable key={(card) => card.id} styling={childStyle}>
      {#snippet item(card)}
        {card.title}
      {/snippet}
    </Sortable>
  </section>
</SortableGroup>
```
### With Interactive Variant

**Code**

```svelte src=SortableGroupPract.svelte
<script lang="ts">
  import { Sortable, SortableGroup } from "svseeds";

  let { variant = $bindable() } = $props();
  let planned = $state(["Brief", "Mockup", "Copy"]);
  let shipped = $state(["Prototype", "QA"]);
  const variantStyle1 = {
    neutral: "border-gray-400",
    active: "border-teal-500",
    inactive: "border-red-500",
    blue: "border-blue-500",
    yellow: "border-yellow-500",
    sky: "border-sky-500",
  };
  const variantStyle2 = {
    neutral: "border-gray-300 bg-white dark:border-gray-700 dark:bg-black",
    active: "border-teal-600 bg-teal-50 text-teal-900 dark:bg-teal-950 dark:text-teal-100",
    inactive: "border-red-600 bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-100",
    blue: "border-blue-600 bg-blue-50 text-blue-900 dark:bg-blue-950 dark:text-blue-100",
    yellow: "border-yellow-600 bg-yellow-50 text-yellow-900 dark:bg-yellow-950 dark:text-yellow-100",
    sky: "border-sky-600 bg-sky-50 text-sky-900 dark:bg-sky-950 dark:text-sky-100",
  };
  const styling = {
    whole: {
      base: "flex flex-col gap-3 rounded-md border p-4 select-none",
      ...variantStyle1,
    },
    main: {
      base: "rounded-sm border px-3 py-2 text-sm font-medium",
      ...variantStyle2,
    },
  };
</script>

<!---------------------------------------->

<SortableGroup {variant} {styling}>
  <div class="grid gap-3 sm:grid-cols-2">
    <section class="space-y-2">
      <h3 class="text-sm font-semibold">Planned</h3>
      <Sortable id="planned" bind:items={planned} appendable>
        {#snippet item(value)}
          {value}
        {/snippet}
      </Sortable>
    </section>
    <section class="space-y-2">
      <h3 class="text-sm font-semibold">Shipped</h3>
      <Sortable id="shipped" bind:items={shipped} appendable>
        {#snippet item(value)}
          {value}
        {/snippet}
      </Sortable>
    </section>
  </div>
</SortableGroup>
```
### Clone Mode

**Code**

```svelte src=SortableGroupClone.svelte
<script lang="ts">
  import { Sortable, SortableGroup } from "svseeds";

  type Block = {
    id: string;
    label: string;
  };

  const palette: Block[] = [
    { id: "heading", label: "Heading" },
    { id: "image", label: "Image" },
    { id: "button", label: "Button" },
  ];
  let canvas = $state<Block[]>([{ id: "intro", label: "Intro text" }]);
  let nextId = 1;
  const styling = {
    whole: "flex min-h-32 flex-col gap-2 rounded-md border border-gray-600 p-3 select-none",
    main: {
      base: "rounded-sm border bg-white px-3 py-2 text-sm shadow-sm dark:bg-black",
      neutral: "border-gray-300 dark:border-gray-700",
      active: "border-teal-600 ring-2 ring-teal-200 dark:ring-teal-900",
    },
  };
  const childStyle = {
    whole: "grid w-full max-w-xl grid-cols-1 gap-3 sm:grid-cols-2",
  };
</script>

<!---------------------------------------->

<SortableGroup styling={childStyle}>
  <section class="space-y-2">
    <h3 class="text-sm font-semibold">Palette</h3>
    <Sortable
      items={palette}
      id="palette"
      mode="clone"
      key={(block) => block.id}
      clone={(block) => ({ ...block, id: `${block.id}-${nextId++}` })}
      {styling}
    >
      {#snippet item(block)}
        {block.label}
      {/snippet}
    </Sortable>
  </section>
  <section class="space-y-2">
    <h3 class="text-sm font-semibold">Canvas</h3>
    <Sortable bind:items={canvas} id="canvas" appendable key={(block) => block.id} {styling}>
      {#snippet item(block)}
        {block.label}
      {/snippet}
    </Sortable>
  </section>
</SortableGroup>
```