@heyramzi/ui 2.24.0 → 3.0.0

package/src/work/kanban-board.svelte

@@ -1,6 +1,8 @@
 <script lang="ts" generics="T, C extends KanbanColumnDef = KanbanColumnDef">
 	import type { Snippet } from "svelte";
 	import { slide } from "svelte/transition";
+	import LiveRegion from "../lib/live-region.svelte";
+	import { focusAfterRender } from "../lib/focus.js";
 	import KanbanColumn from "./kanban-column.svelte";
 	import KanbanColumnHead from "./kanban-column-head.svelte";
 	import KanbanFoldChevron from "./kanban-fold-chevron.svelte";
@@ -51,8 +53,10 @@
 		wrapColumn?: Snippet<[C, Snippet<[Record<string, unknown>]>]>;
 		/** Enter or Space on a focused card. Leave out when the card holds its own links and buttons. */
 		onSelect?: (id: string) => void;
-		/** The screen-reader name of a card. Defaults to a hint about the keyboard move. */
+		/** The screen-reader name of a card. Defaults to the card's own text. */
 		getLabel?: (item: T) => string;
+		/** Read after a card's name, as its description. */
+		moveHint?: string;
 		emptyLabel?: string;
 		/** Shows a plus in each default column head that adds a card to that column. */
 		onAdd?: (columnId: string) => void;
@@ -93,6 +97,8 @@
 		 * preventDefault, so it is not a drop target.
 		 */
 		isDroppable?: (columnId: string) => boolean;
+		/** What a screen reader hears after a card moves with the keyboard. */
+		movedLabel?: (column: C) => string;
 		class?: string;
 	}
 
@@ -111,6 +117,7 @@
 		columnFooter,
 		wrapColumn,
 		getLabel,
+		moveHint = "Press Alt plus Left or Right arrow to move between columns.",
 		onSelect,
 		emptyLabel = "Nothing here yet",
 		onAdd,
@@ -129,6 +136,7 @@
 		hiddenItem,
 		dropAtTop,
 		isDroppable,
+		movedLabel = (column) => `Moved to ${column.label}`,
 		class: className,
 	}: Props<T, C> = $props();
 
@@ -155,6 +163,19 @@
 	const rail = board.rail;
 
 	type ColumnView = KanbanColumnView<T, C>;
+
+	const uid = $props.id();
+	const hintId = `${uid}-hint`;
+	let boardEl: HTMLDivElement | undefined = $state();
+	let live: LiveRegion | undefined = $state();
+
+	async function onCardKeyDown(e: KeyboardEvent, id: string) {
+		const moved = board.onCardKeyDown(e, id);
+		if (!moved) return;
+		await moved.done;
+		void live?.announce(movedLabel(moved.column));
+		await focusAfterRender(boardEl, `[data-kanban-card="${CSS.escape(id)}"]`);
+	}
 </script>
 
 <!-- The slot keeps the drag state where it is, or hovering it would bubble to the column and jump it to the end. -->
@@ -173,6 +194,7 @@
 
 {#snippet card(column: C, item: T, index: number, list: T[])}
 	{@const id = getId(item)}
+	{@const cardId = `${uid}-card-${encodeURIComponent(id)}`}
 	{@const nextId = board.idAt(list, index + 1)}
 	{@const isSource = dnd.isDragSource(id)}
 	<!-- The slot right after the held card is its own spot, so the card's place shows it instead. -->
@@ -186,8 +208,11 @@
 	<div
 		role="listitem"
 		tabindex="0"
-		aria-label={getLabel?.(item) ??
-			"Card. Press Alt plus Left or Right arrow to move between columns."}
+		id={cardId}
+		data-kanban-card={id}
+		aria-label={getLabel?.(item)}
+		aria-labelledby={getLabel ? undefined : cardId}
+		aria-describedby={hintId}
 		aria-keyshortcuts="Alt+ArrowLeft Alt+ArrowRight"
 		draggable="true"
 		ondragstart={(e) => {
@@ -200,7 +225,7 @@
 			rail.dragOverHidden = null;
 		}}
 		ondragover={(e) => dnd.onItemDragOver(e, column.id, id, nextId)}
-		onkeydown={(e) => board.onCardKeyDown(e, id)}
+		onkeydown={(e) => void onCardKeyDown(e, id)}
 		class={cn(
 			"kanban-card cursor-grab outline-none focus-visible:shadow-(--ring-focus) active:cursor-grabbing",
 			workLooks.card,
@@ -244,14 +269,19 @@
 			/>
 		{/snippet}
 
-		{#each head as item, index (getId(item))}
-			{@render card(column, item, index, list)}
-		{/each}
+		<!-- contents: the list owns the cards for screen readers and leaves the column's flex gap alone. -->
+		{#if head.length > 0}
+			<div role="list" class="contents">
+				{#each head as item, index (getId(item))}
+					{@render card(column, item, index, list)}
+				{/each}
+			</div>
+		{/if}
 
 		{#if showTail}
 			<!-- The tail sits shut in a 0fr row, so opening and closing animate its height. -->
 			<div class="kanban-fold" data-open={open} inert={!open}>
-				<div class="kanban-fold-inner">
+				<div class="kanban-fold-inner" role="list">
 					{#each tail as item, index (getId(item))}
 						{@render card(column, item, head.length + index, list)}
 					{/each}
@@ -289,6 +319,7 @@
 {/snippet}
 
 <div
+	bind:this={boardEl}
 	class={cn(
 		"kanban-board @container/kanban-board flex min-h-0 flex-1 items-stretch gap-4 overflow-x-auto pb-2",
 		"max-sm:-mx-4 max-sm:snap-x max-sm:snap-proximity max-sm:scroll-px-4 max-sm:px-4",
@@ -319,75 +350,81 @@
 			{hiddenItem}
 		/>
 	{/if}
+
+	<LiveRegion bind:this={live} />
+	<p id={hintId} hidden>{moveHint}</p>
 </div>
 
 <style>
-	/* A grid row folds the card out of the column smoothly, so the cards below slide up. */
-	.kanban-card {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr);
-		grid-template-rows: 1fr;
-		transition:
-			grid-template-rows var(--duration-quick) var(--ease-smooth-out),
-			margin-top var(--duration-quick) var(--ease-smooth-out);
-	}
+	@layer theme, base, components, utilities;
 
-	.kanban-card > :global(*) {
-		min-height: 0;
-	}
+	@layer components {
+		/* A grid row folds the card out of the column smoothly, so the cards below slide up. */
+		.kanban-card {
+			display: grid;
+			grid-template-columns: minmax(0, 1fr);
+			grid-template-rows: 1fr;
+			transition:
+				grid-template-rows var(--duration-quick) var(--ease-smooth-out),
+				margin-top var(--duration-quick) var(--ease-smooth-out);
+		}
 
-	/* -0.375rem cancels the column's gap-1.5, so a folded card leaves no gap behind. */
-	.kanban-lifted-out {
-		grid-template-rows: 0fr;
-		margin-top: -0.375rem;
-	}
+		.kanban-card > :global(*) {
+			min-height: 0;
+		}
 
-	.kanban-lifted-out > :global(*) {
-		overflow: hidden;
-		visibility: hidden;
-	}
+		/* -0.375rem cancels the column's gap-1.5, so a folded card leaves no gap behind. */
+		.kanban-lifted-out {
+			grid-template-rows: 0fr;
+			margin-top: -0.375rem;
+		}
 
-	/* The fold: height rides grid-template-rows 0fr to 1fr, the fade runs shorter so it leads.
-	   Shut, -0.375rem cancels the well's gap-1.5, so a closed fold leaves no gap behind. */
-	.kanban-fold {
-		display: grid;
-		grid-template-rows: 0fr;
-		margin-top: -0.375rem;
-		opacity: 0;
-		transition:
-			grid-template-rows var(--duration-fast) var(--ease-smooth-out),
-			margin-top var(--duration-fast) var(--ease-smooth-out),
-			opacity var(--duration-quick) var(--ease-smooth-out);
-	}
+		.kanban-lifted-out > :global(*) {
+			overflow: hidden;
+			visibility: hidden;
+		}
 
-	.kanban-fold[data-open="true"] {
-		grid-template-rows: 1fr;
-		margin-top: 0;
-		opacity: 1;
-	}
+		/* The fold: height rides grid-template-rows 0fr to 1fr and the shorter fade leads.
+		   Shut, -0.375rem cancels the well's gap-1.5, so a closed fold leaves no gap. */
+		.kanban-fold {
+			display: grid;
+			grid-template-rows: 0fr;
+			margin-top: -0.375rem;
+			opacity: 0;
+			transition:
+				grid-template-rows var(--duration-fast) var(--ease-smooth-out),
+				margin-top var(--duration-fast) var(--ease-smooth-out),
+				opacity var(--duration-quick) var(--ease-smooth-out);
+		}
 
-	/* clip, not hidden: the margin lets a lifted card's shadow out while the fold stays shut.
-	   relative: a card's sr-only labels are absolute, and clip only cuts what this box contains.
-	   Without it they hang below a shut fold and the page scrolls past its last lane (TSK-1617). */
-	.kanban-fold-inner {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		gap: 0.375rem;
-		min-height: 0;
-		overflow: clip;
-		overflow-clip-margin: 0.375rem;
-	}
+		.kanban-fold[data-open="true"] {
+			grid-template-rows: 1fr;
+			margin-top: 0;
+			opacity: 1;
+		}
 
-	/* The held card's place keeps its hole, never its content. */
-	.kanban-origin-slot > :global(*) {
-		visibility: hidden;
-	}
+		/* clip, not hidden, lets a lifted card's shadow out. relative keeps cards' absolute
+		   sr-only labels clipped, or they hang below a shut fold and scroll the page (TSK-1617). */
+		.kanban-fold-inner {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			gap: 0.375rem;
+			min-height: 0;
+			overflow: clip;
+			overflow-clip-margin: 0.375rem;
+		}
 
-	@media (prefers-reduced-motion: reduce) {
-		.kanban-card,
-		.kanban-fold {
-			transition: none;
+		/* The held card's place keeps its hole, never its content. */
+		.kanban-origin-slot > :global(*) {
+			visibility: hidden;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.kanban-card,
+			.kanban-fold {
+				transition: none;
+			}
 		}
 	}
 </style>

package/src/work/kanban-board.svelte.d.ts

@@ -0,0 +1,107 @@
+import type { Snippet } from "svelte";
+import type { KanbanCardContext, KanbanColumn as KanbanColumnDef, KanbanColumnContext, KanbanMove, KanbanSortKey } from "./kanban-types.js";
+interface Props<T, C extends KanbanColumnDef> {
+    /** Plain column defs, or your own type that extends one. Snippets get it back as you passed it. */
+    columns: C[];
+    items: T[];
+    /** The stable id of a card. Used for keys, drag payloads and move events. */
+    getId: (item: T) => string;
+    /** The column id a card belongs to. */
+    getColumn: (item: T) => string;
+    /** Called on drop with what to persist. Awaited, so the caller can save. */
+    onMove: (id: string, move: KanbanMove) => void | Promise<void>;
+    renderCard: Snippet<[T, KanbanCardContext]>;
+    /** Reads a card's manual order key. Required for `sortKey="manual"` ordering. */
+    boardOrder?: (item: T) => string | null | undefined;
+    /** Breaks a tie in manual order: two cards with the same key, or both without one. */
+    manualTiebreak?: (a: T, b: T) => number;
+    /** Extra named sorts, e.g. by title or owner. `manual` is always available. */
+    sortKeys?: KanbanSortKey<T>[];
+    /** The active sort. `"manual"` (default) orders by `boardOrder`, else by the order of `items`. */
+    sortKey?: string;
+    /** Optional column header. Defaults to the label plus a count. */
+    columnHeader?: Snippet<[C, KanbanColumnContext]>;
+    /** Rendered under a column's cards, e.g. a "Show all 12" or an add button. */
+    columnFooter?: Snippet<[C, KanbanColumnContext]>;
+    /**
+     * Wraps a column for a context menu or tooltip: render `column` once and spread the
+     * `props` it hands you, so the trigger lands on the column.
+     */
+    wrapColumn?: Snippet<[C, Snippet<[Record<string, unknown>]>]>;
+    /** Enter or Space on a focused card. Leave out when the card holds its own links and buttons. */
+    onSelect?: (id: string) => void;
+    /** The screen-reader name of a card. Defaults to the card's own text. */
+    getLabel?: (item: T) => string;
+    /** Read after a card's name, as its description. */
+    moveHint?: string;
+    emptyLabel?: string;
+    /** Shows a plus in each default column head that adds a card to that column. */
+    onAdd?: (columnId: string) => void;
+    /** The plus button's accessible name, followed by the column label. */
+    addLabel?: string;
+    /**
+     * Cards a column shows before the rest fold behind "Show N more": a number for every
+     * column, or per column (undefined for no cap). `Infinity` turns the fold off.
+     */
+    limit?: number | ((columnId: string) => number | undefined);
+    /** The fold's open button, given how many cards it holds. */
+    moreLabel?: (hidden: number) => string;
+    /** The fold's close button. */
+    lessLabel?: string;
+    /** The header caret's open and close names, followed by the column label. */
+    expandColumnLabel?: string;
+    collapseColumnLabel?: string;
+    /**
+     * Column ids the header caret opened. Pass one array to every board in a stack of
+     * swimlanes, so the caret opens that column in each. "Show N more" stays per board.
+     */
+    expanded?: string[];
+    onExpandedChange?: (ids: string[]) => void;
+    /** Column ids folded into the rail on the right. Controlled; leave out to let the board remember. */
+    hidden?: string[];
+    onHiddenChange?: (ids: string[]) => void;
+    /** Heading over the rail of hidden columns. */
+    hiddenLabel?: string;
+    /** The rail's button that brings every hidden column back. */
+    showAllLabel?: string;
+    /** Content of one entry in the hidden rail. Defaults to the label and a count. */
+    hiddenItem?: Snippet<[C, {
+        count: number;
+        active: boolean;
+    }]>;
+    /** A capped column is one whose tail is hidden, so its empty space drops on top. Overrides `limit`. */
+    dropAtTop?: (columnId: string) => boolean;
+    /**
+     * Override per-column drop targets. Defaults to each column's `droppable`
+     * flag (true when unset). A column it returns false for never calls
+     * preventDefault, so it is not a drop target.
+     */
+    isDroppable?: (columnId: string) => boolean;
+    /** What a screen reader hears after a card moves with the keyboard. */
+    movedLabel?: (column: C) => string;
+    class?: string;
+}
+declare function $$render<T, C extends KanbanColumnDef = KanbanColumnDef>(): {
+    props: Props<T, C>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T, C extends KanbanColumnDef = KanbanColumnDef> {
+    props(): ReturnType<typeof $$render<T, C>>['props'];
+    events(): ReturnType<typeof $$render<T, C>>['events'];
+    slots(): ReturnType<typeof $$render<T, C>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T, C extends KanbanColumnDef = KanbanColumnDef>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, C>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, C>['props']>, ReturnType<__sveltets_Render<T, C>['events']>, ReturnType<__sveltets_Render<T, C>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, C>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, C>['exports']>;
+    <T, C extends KanbanColumnDef = KanbanColumnDef>(internal: unknown, props: ReturnType<__sveltets_Render<T, C>['props']> & {}): ReturnType<__sveltets_Render<T, C>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<T, C extends KanbanColumnDef = KanbanColumnDef> = InstanceType<typeof $$Component<T, C>>;
+export default $$Component;

package/src/work/kanban-board.svelte.test.ts

@@ -0,0 +1,89 @@
+import { createRawSnippet, flushSync, mount, tick, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import KanbanBoard from "./kanban-board.svelte";
+import type { KanbanMove } from "./kanban-types.js";
+
+type Task = { id: string; columnId: string; title: string; boardOrder: string };
+
+const columns = [
+  { id: "todo", label: "To do" },
+  { id: "doing", label: "In progress" },
+  { id: "done", label: "Done" },
+];
+
+const renderCard = createRawSnippet((task: () => Task) => ({
+  render: () => `<p>${task().title}</p>`,
+}));
+
+function render() {
+  const props = $state({
+    columns,
+    items: [
+      { id: "k1", columnId: "todo", title: "Draft notes", boardOrder: "a0" },
+      { id: "k2", columnId: "doing", title: "Ship flow", boardOrder: "a0" },
+    ] as Task[],
+    getId: (t: Task) => t.id,
+    getColumn: (t: Task) => t.columnId,
+    boardOrder: (t: Task) => t.boardOrder,
+    renderCard,
+    onMove: (id: string, move: KanbanMove) => {
+      props.items = props.items.map((t) =>
+        t.id === id ? { ...t, columnId: move.columnId, boardOrder: move.boardOrder ?? "" } : t,
+      );
+    },
+  });
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(KanbanBoard<Task>, { target, props });
+  flushSync();
+  return {
+    target,
+    card: (id: string) => target.querySelector<HTMLElement>(`[data-kanban-card="${id}"]`),
+    done: () => {
+      void unmount(app);
+      target.remove();
+    },
+  };
+}
+
+// Waits out the board's await of onMove and its tick, then Svelte's flush.
+async function settle() {
+  for (let i = 0; i < 4; i++) await tick();
+  flushSync();
+}
+
+describe("KanbanBoard keyboard move", () => {
+  it("keeps focus on the moved card in its new column and announces the move", async () => {
+    const { target, card, done } = render();
+    const before = card("k1");
+    before?.focus();
+    before?.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowRight", altKey: true, bubbles: true }),
+    );
+    await settle();
+
+    const moved = card("k1");
+    expect(moved?.closest('[aria-label="In progress"]')).not.toBeNull();
+    expect(document.activeElement).toBe(moved);
+    expect(target.querySelector('[role="status"]')?.textContent).toBe("Moved to In progress");
+    done();
+  });
+
+  it("names a card by its own text and describes it with the move hint", () => {
+    const { card, done } = render();
+    const el = card("k1");
+    expect(el?.hasAttribute("aria-label")).toBe(false);
+    expect(el?.getAttribute("aria-labelledby")).toBe(el?.id);
+    const hint = document.getElementById(el?.getAttribute("aria-describedby") ?? "");
+    expect(hint?.textContent).toBe("Press Alt plus Left or Right arrow to move between columns.");
+    done();
+  });
+
+  it("puts every card inside a list", () => {
+    const { target, done } = render();
+    for (const item of target.querySelectorAll('[role="listitem"]')) {
+      expect(item.parentElement?.getAttribute("role")).toBe("list");
+    }
+    done();
+  });
+});

package/src/work/kanban-column-head.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { Snippet } from "svelte";
+import type { KanbanColumn as KanbanColumnDef, KanbanColumnContext } from "./kanban-types.js";
+declare function $$render<C extends KanbanColumnDef>(): {
+    props: {
+        column: C;
+        context: KanbanColumnContext;
+        /** The board's `columnHeader`. Left out, the head is GroupHead. */
+        columnHeader?: Snippet<[C, KanbanColumnContext]>;
+        onAdd?: (columnId: string) => void;
+        addLabel: string;
+        /** The column holds more cards than its cap, so the caret shows. */
+        foldable: boolean;
+        /** The caret has the column open in every lane. */
+        columnOpen: boolean;
+        onToggle: () => void;
+        expandColumnLabel: string;
+        collapseColumnLabel: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<C extends KanbanColumnDef> {
+    props(): ReturnType<typeof $$render<C>>['props'];
+    events(): ReturnType<typeof $$render<C>>['events'];
+    slots(): ReturnType<typeof $$render<C>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <C extends KanbanColumnDef>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<C>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<C>['props']>, ReturnType<__sveltets_Render<C>['events']>, ReturnType<__sveltets_Render<C>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<C>['bindings']>;
+    } & ReturnType<__sveltets_Render<C>['exports']>;
+    <C extends KanbanColumnDef>(internal: unknown, props: ReturnType<__sveltets_Render<C>['props']> & {}): ReturnType<__sveltets_Render<C>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<C extends KanbanColumnDef> = InstanceType<typeof $$Component<C>>;
+export default $$Component;

package/src/work/kanban-column.svelte

@@ -65,40 +65,57 @@
 </div>
 
 <style>
-	/* Columns split the board's width equally, never under 240px (the board scrolls instead)
-	   nor over 420px (a 2-line card title stays near 55 characters a line). At 280px four
-	   columns needed 1168px, so a docs page at 1440 cut the Done column off; 240px fits four
-	   in the 1008px a 1440 page leaves, and a card's meta row still fits on one line. */
-	.kanban-column {
-		flex: 1 1 0;
-		min-width: var(--kanban-column-min, 240px);
-		max-width: var(--kanban-column-max, 420px);
-		transition: opacity var(--duration-quick) var(--ease-smooth-out);
-	}
+	@layer theme, base, components, utilities;
 
-	/* A board under 40rem wide (a phone, a side panel) shows one column and a peek of the next, as 82vw did on a phone. */
-	@container kanban-board (width < 40rem) {
+	@layer components {
+		/* Equal columns, 240px to 420px (the board scrolls below that): four fit the 1008px a
+		   1440 page leaves, and a 2-line title stays near 55 characters a line. */
 		.kanban-column {
-			flex: 0 0 88cqw;
-			min-width: 0;
-			max-width: 88cqw;
-			scroll-snap-align: start;
+			flex: 1 1 0;
+			min-width: var(--kanban-column-min, 240px);
+			max-width: var(--kanban-column-max, 420px);
+			transition: opacity var(--duration-quick) var(--ease-smooth-out);
 		}
-	}
 
-	.kanban-column-collapsing,
-	.kanban-column-expanding {
-		will-change: opacity;
-		overflow: hidden;
-	}
+		/* A board under 40rem wide (a phone, a side panel) shows one column and a peek of the next, as 82vw did on a phone. */
+		@container kanban-board (width < 40rem) {
+			.kanban-column {
+				flex: 0 0 88cqw;
+				min-width: 0;
+				max-width: 88cqw;
+				scroll-snap-align: start;
+			}
+		}
 
-	.kanban-column-collapsing {
-		pointer-events: none;
-		animation: column-fold var(--duration-slow) var(--ease-smooth-out) forwards;
-	}
+		.kanban-column-collapsing,
+		.kanban-column-expanding {
+			will-change: opacity;
+			overflow: hidden;
+		}
+
+		.kanban-column-collapsing {
+			pointer-events: none;
+			animation: column-fold var(--duration-slow) var(--ease-smooth-out) forwards;
+		}
+
+		.kanban-column-expanding {
+			animation: column-unfold var(--duration-slow) var(--ease-smooth-out) both;
+		}
 
-	.kanban-column-expanding {
-		animation: column-unfold var(--duration-slow) var(--ease-smooth-out) both;
+		@media (prefers-reduced-motion: reduce) {
+			.kanban-column-expanding {
+				animation: none;
+			}
+
+			.kanban-column-collapsing {
+				animation: none;
+				opacity: 0;
+				flex: 0 0 0;
+				min-width: 0;
+				max-width: 0;
+				margin-inline-end: -1rem;
+			}
+		}
 	}
 
 	/* One end only: the other is the column's resting width, whatever the container gave it.
@@ -124,19 +141,4 @@
 			margin-inline-end: -1rem;
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.kanban-column-expanding {
-			animation: none;
-		}
-
-		.kanban-column-collapsing {
-			animation: none;
-			opacity: 0;
-			flex: 0 0 0;
-			min-width: 0;
-			max-width: 0;
-			margin-inline-end: -1rem;
-		}
-	}
 </style>

package/src/work/kanban-column.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Any CSS color. Only shows while a card is held over the column. */
+    hue?: string;
+    active?: boolean;
+    collapsing?: boolean;
+    expanding?: boolean;
+    ariaLabel?: string;
+    header: Snippet;
+    children: Snippet;
+    ondragover?: (e: DragEvent) => void;
+    ondragleave?: (e: DragEvent) => void;
+    ondrop?: (e: DragEvent) => void;
+    class?: string;
+    bodyClass?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/kanban-fold-chevron.svelte

@@ -13,22 +13,26 @@
 
 <span
 	class={cn("kanban-fold-chevron [&>svg]:size-full", open && "kanban-fold-chevron-open", className)}
-	aria-hidden="true"><CaretDown weight="bold" /></span
+	aria-hidden="true"><CaretDown aria-hidden="true" weight="bold" /></span
 >
 
 <style>
-	.kanban-fold-chevron {
-		display: inline-flex;
-		transition: transform var(--duration-fast) var(--ease-smooth-out);
-	}
-
-	.kanban-fold-chevron-open {
-		transform: scaleY(-1);
-	}
+	@layer theme, base, components, utilities;
 
-	@media (prefers-reduced-motion: reduce) {
+	@layer components {
 		.kanban-fold-chevron {
-			transition: none;
+			display: inline-flex;
+			transition: transform var(--duration-fast) var(--ease-smooth-out);
+		}
+
+		.kanban-fold-chevron-open {
+			transform: scaleY(-1);
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.kanban-fold-chevron {
+				transition: none;
+			}
 		}
 	}
 </style>

package/src/work/kanban-fold-chevron.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    /** Flips the caret to point up. */
+    open: boolean;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;