@sepale/components 0.0.0-stage → 0.1.0

package/dist/components/Hero.svelte

@@ -0,0 +1,62 @@
+<script module lang="ts">
+	/** What .hero is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'hero';
+
+	export const AXES = {
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		size: ['xs', 'sm', 'md', 'lg', 'xl']
+	} as const;
+
+	export const FLAGS = {
+		center: 'Centre the text; best without media.',
+		reverse: 'Put the media first.'
+	} as const;
+	export const PARTS = ['content', 'title', 'body', 'actions', 'media'] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * The large opening block of a page: a title, a sentence, a call to action,
+	 * and optionally an image beside them — stacked when there is no room.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLElement>, 'color' | 'title'> {
+		title?: string;
+		/** The heading level of the title. */
+		level?: 1 | 2 | 3;
+		actions?: Snippet;
+		/** An image, a video, an illustration. */
+		media?: Snippet;
+		class?: string;
+		/** The sentence under the title. */
+		children?: Snippet;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		title,
+		level = 1,
+		actions,
+		media,
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+<section {...applied.rest} class={classes}>
+	<div class="hero-content">
+		{#if title}<svelte:element this={`h${level}`} class="hero-title">{title}</svelte:element>{/if}
+		{#if children}<p class="hero-body">{@render children()}</p>{/if}
+		{#if actions}<div class="hero-actions">{@render actions()}</div>{/if}
+	</div>
+	{#if media}<div class="hero-media">{@render media()}</div>{/if}
+</section>

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

@@ -0,0 +1,33 @@
+/** What .hero is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "hero";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+};
+export declare const FLAGS: {
+    readonly center: "Centre the text; best without media.";
+    readonly reverse: "Put the media first.";
+};
+export declare const PARTS: readonly ["content", "title", "body", "actions", "media"];
+/**
+     * The large opening block of a page: a title, a sentence, a call to action,
+     * and optionally an image beside them — stacked when there is no room.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLElement>, 'color' | 'title'> {
+    title?: string;
+    /** The heading level of the title. */
+    level?: 1 | 2 | 3;
+    actions?: Snippet;
+    /** An image, a video, an illustration. */
+    media?: Snippet;
+    class?: string;
+    /** The sentence under the title. */
+    children?: Snippet;
+}
+declare const Hero: import("svelte").Component<Props, {}, "">;
+type Hero = ReturnType<typeof Hero>;
+export default Hero;

package/dist/components/Input.svelte

@@ -0,0 +1,184 @@
+<script module lang="ts">
+	/** What .input is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'input';
+
+	export const AXES = {
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		variant: ['ghost']
+	} as const;
+
+	export const FLAGS = {
+		nospinner: 'Hide the step arrows of a number field.'
+	} as const;
+	export const PARTS = [] as const;
+
+</script>
+
+<script lang="ts">
+	/**
+	 * A text field. Plain by default — one `<input class="input">` — and a
+	 * frame around the field (`<label class="input">`) as soon as it needs one:
+	 * something drawn before or after the text (`start`, `end`). Suggestions
+	 * are a Combobox's job.
+	 *
+	 * Validation stays the browser's: `required`, `pattern`, `min`… are plain
+	 * attributes, and the message shown is the browser's own `validationMessage`,
+	 * in the visitor's language. `error` forces one from outside.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { ClassValue, HTMLInputAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	// `size` is ours — the HTML attribute of the same name is a character count
+	// our CSS overrides anyway.
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLInputAttributes, 'size' | 'color'> {
+		/**
+		 * Colour the field by its own validity and reveal `hint` once the
+		 * browser marks it invalid. The CSS drives this off `:user-invalid`,
+		 * so it only fires after the visitor has actually had a go.
+		 */
+		validator?: boolean;
+		/**
+		 * Shown under the field when it is invalid. It has to be the field's
+		 * next sibling for the CSS to reach it, which is the whole reason this
+		 * is a prop and not something you write yourself. Without it, the
+		 * message is the browser's own.
+		 */
+		hint?: Snippet;
+		/**
+		 * An error from outside (the server said no): marks the field invalid and
+		 * shows this, for as long as it is given. The parent owns it — it knows
+		 * the value and is the one able to test it — so the field never clears it.
+		 */
+		error?: string | null;
+		/** The message of the last check, `false` when the field passed. Bindable. */
+		invalid?: string | false;
+		/** Drawn inside the frame, before the text: an icon, a label, a unit. */
+		start?: Snippet;
+		/** Drawn inside the frame, after the text. */
+		end?: Snippet;
+		/** The field grows with its text. A number adds that many characters of room. */
+		autowidth?: boolean | number;
+		/** The `<input>` itself. Bindable. */
+		element?: HTMLInputElement;
+		class?: string;
+		value?: any;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		validator = false,
+		hint,
+		error = null,
+		invalid = $bindable(false),
+		start,
+		end,
+		autowidth = false,
+		element = $bindable(),
+		value = $bindable(''),
+		class: klass = '',
+		disabled = false,
+		autocomplete,
+		oninput,
+		onfocus,
+		onblur,
+		onkeydown,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+
+	/* ── Validity ─────────────────────────────────────────────────────── */
+
+	/** What is shown under the field. A disabled field shows nothing. */
+	let message = $derived(disabled ? '' : error || (typeof invalid === 'string' ? invalid : ''));
+
+	/* An error from outside is the field's validity too: a form holding it
+	   does not submit. */
+	$effect(() => {
+		element?.setCustomValidity(disabled || !error ? '' : error);
+	});
+
+	let classes = $derived(
+		cx(PREFIX, applied.classes, (validator || !!message) && 'validator', klass)
+	);
+
+	/** Check the field now and show the browser's message if it fails. */
+	export function isValid(): boolean {
+		if (!element || disabled) return !error;
+		invalid = element.validity.valid ? false : element.validationMessage;
+		return !error && !invalid;
+	}
+
+	export function focus() {
+		element?.focus();
+	}
+
+	/** Empty the field. */
+	export function clear() {
+		value = '';
+	}
+
+	/* ── Width ────────────────────────────────────────────────────────── */
+
+	let width = $derived(
+		autowidth
+			? `${Math.max(`${value ?? ''}`.length, 5) + (typeof autowidth === 'number' ? autowidth : 0) + 2}ch`
+			: undefined
+	);
+
+	/* ── Events ───────────────────────────────────────────────────────── */
+
+	function handleInput(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		// A field shown invalid is re-checked as it is corrected.
+		if (invalid) invalid = e.currentTarget.validity.valid ? false : e.currentTarget.validationMessage;
+		oninput?.(e);
+	}
+
+	function handleBlur(e: FocusEvent & { currentTarget: EventTarget & HTMLInputElement }) {
+		if (validator) isValid();
+		onblur?.(e);
+	}
+
+	let framed = $derived(!!(start || end));
+</script>
+
+{#snippet field(cls: ClassValue | undefined, style: string | undefined)}
+	<!-- Ours first: what the caller writes in the spread still wins. -->
+	<input
+		aria-invalid={message ? 'true' : undefined}
+		{...applied.rest}
+		bind:this={element}
+		bind:value
+		class={cls}
+		style:width={style}
+		{disabled}
+		{autocomplete}
+		oninput={handleInput}
+		{onfocus}
+		onblur={handleBlur}
+		{onkeydown}
+	/>
+{/snippet}
+
+{#if framed}
+	<label class={classes} style:width>
+		{@render start?.()}
+		{@render field(undefined, undefined)}
+		{@render end?.()}
+	</label>
+{:else}
+	{@render field(classes, width)}
+{/if}
+<!-- An error from outside first, then the caller's hint, then the browser's
+     own message. -->
+{#if error && !disabled}
+	<p class="validator-hint">{error}</p>
+{:else if hint}
+	<p class="validator-hint">{@render hint()}</p>
+{:else if message}
+	<p class="validator-hint">{message}</p>
+{/if}

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

@@ -0,0 +1,65 @@
+/** What .input is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "input";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly variant: readonly ["ghost"];
+};
+export declare const FLAGS: {
+    readonly nospinner: "Hide the step arrows of a number field.";
+};
+export declare const PARTS: readonly [];
+/**
+     * A text field. Plain by default — one `<input class="input">` — and a
+     * frame around the field (`<label class="input">`) as soon as it needs one:
+     * something drawn before or after the text (`start`, `end`). Suggestions
+     * are a Combobox's job.
+     *
+     * Validation stays the browser's: `required`, `pattern`, `min`… are plain
+     * attributes, and the message shown is the browser's own `validationMessage`,
+     * in the visitor's language. `error` forces one from outside.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLInputAttributes, 'size' | 'color'> {
+    /**
+     * Colour the field by its own validity and reveal `hint` once the
+     * browser marks it invalid. The CSS drives this off `:user-invalid`,
+     * so it only fires after the visitor has actually had a go.
+     */
+    validator?: boolean;
+    /**
+     * Shown under the field when it is invalid. It has to be the field's
+     * next sibling for the CSS to reach it, which is the whole reason this
+     * is a prop and not something you write yourself. Without it, the
+     * message is the browser's own.
+     */
+    hint?: Snippet;
+    /**
+     * An error from outside (the server said no): marks the field invalid and
+     * shows this, for as long as it is given. The parent owns it — it knows
+     * the value and is the one able to test it — so the field never clears it.
+     */
+    error?: string | null;
+    /** The message of the last check, `false` when the field passed. Bindable. */
+    invalid?: string | false;
+    /** Drawn inside the frame, before the text: an icon, a label, a unit. */
+    start?: Snippet;
+    /** Drawn inside the frame, after the text. */
+    end?: Snippet;
+    /** The field grows with its text. A number adds that many characters of room. */
+    autowidth?: boolean | number;
+    /** The `<input>` itself. Bindable. */
+    element?: HTMLInputElement;
+    class?: string;
+    value?: any;
+}
+declare const Input: import("svelte").Component<Props, {
+    isValid: () => boolean;
+    focus: () => void;
+    clear: () => void;
+}, "value" | "invalid" | "element">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/Join.svelte

@@ -0,0 +1,38 @@
+<script module lang="ts">
+	/** What .join is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015).
+
+	    Each child must carry `join-item` for the seams to land; that class is
+	    a part of this component, not a component of its own. */
+	export const PREFIX = 'join';
+
+	export const AXES = {
+		/* Which way the seams run. */
+		direction: ['horizontal', 'vertical']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['item'] as const;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLDivElement> {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+<div {...applied.rest} class={classes}>{@render children?.()}</div>

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

@@ -0,0 +1,21 @@
+/** What .join is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015).
+
+    Each child must carry `join-item` for the seams to land; that class is
+    a part of this component, not a component of its own. */
+export declare const PREFIX = "join";
+export declare const AXES: {
+    readonly direction: readonly ["horizontal", "vertical"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["item"];
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+}
+declare const Join: import("svelte").Component<Props, {}, "">;
+type Join = ReturnType<typeof Join>;
+export default Join;

package/dist/components/Kanban.svelte

@@ -0,0 +1,284 @@
+<script module lang="ts">
+	/** What .kanban is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'kanban';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		/* Space between the columns. */
+		gap: ['none', 'tight', 'loose']
+	} as const;
+
+	export const FLAGS = {
+		loading: 'Fade the columns while new items are on their way.'
+	} as const;
+	export const PARTS = [
+		'column',
+		'column-over',
+		'column-head',
+		'column-title',
+		'column-count',
+		'column-body',
+		'column-foot',
+		'column-empty',
+		'item',
+		'item-selected',
+		'item-dirty',
+		'item-dragged',
+		'marker'
+	] as const;
+
+	export type KanbanColumn = {
+		id: string;
+		/** Defaults to the id. */
+		title?: string;
+	};
+
+	export type KanbanMove<Item> = {
+		item: Item;
+		/** The column it leaves. */
+		from: string;
+		/** The column it lands in: `from` when it only changed places. */
+		to: string;
+		/** Its place in `to`, counted without the item itself. */
+		index: number;
+	};
+</script>
+
+<script lang="ts" generics="Item">
+	/**
+	 * Items in columns, one column per state they can be in. Like a table or a
+	 * grid it knows nothing of where its items come from, and it moves nothing:
+	 * dragging a card, or Shift + an arrow key on it, calls `onMove`, and the
+	 * items only change when the caller changes them. Without `onMove` the board
+	 * is read-only.
+	 *
+	 * The drag is the browser's own, which brings the drag image, Escape to
+	 * cancel and the scrolling at the edges. An item naming a column that is not
+	 * in `columns` is not drawn.
+	 */
+	import { tick, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLDivElement> {
+		/** The items: your data, as is, each column keeping their order. */
+		items?: Item[];
+		/** The columns, in order. */
+		columns: KanbanColumn[];
+		/** The id of the column an item belongs to. */
+		columnOf: (item: Item) => string;
+		/** How one item is drawn, given its place in its column. */
+		item: Snippet<[Item, number]>;
+		/** An item's identity, for `selected`, `dirty` and keyed rendering. Defaults to its index. */
+		key?: (item: Item, index: number) => string;
+		/** Replaces a column's title and count. */
+		head?: Snippet<[KanbanColumn, Item[]]>;
+		/** Drawn under a column's items: an add button, usually. */
+		foot?: Snippet<[KanbanColumn]>;
+		/** Drawn in a column with no items. */
+		empty?: Snippet<[KanbanColumn]>;
+		/** Keys of the items to draw as selected. */
+		selected?: Iterable<string>;
+		/** Keys of the items to draw as changed and not yet saved. */
+		dirty?: Iterable<string>;
+		/** An item was dropped somewhere new. Given, it makes the items movable. */
+		onMove?: (move: KanbanMove<Item>) => void;
+		class?: string;
+	}
+
+	let {
+		items = [],
+		columns,
+		columnOf,
+		item,
+		key = (_item: Item, i: number) => String(i),
+		head,
+		foot,
+		empty,
+		selected,
+		dirty,
+		onMove,
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+
+	let selectedSet = $derived(new Set(selected ?? []));
+	let dirtySet = $derived(new Set(dirty ?? []));
+
+	type Entry = { item: Item; key: string };
+
+	let lanes = $derived.by(() => {
+		const byColumn = new Map<string, Entry[]>(columns.map((c) => [c.id, []]));
+		items.forEach((it, i) => byColumn.get(columnOf(it))?.push({ item: it, key: key(it, i) }));
+		return columns.map((column) => ({ column, entries: byColumn.get(column.id)! }));
+	});
+
+	let root: HTMLDivElement | undefined = $state();
+
+	/* What is in flight. Read by the drag handlers, so it is set at once; what
+	   the page shows follows a frame later, because restyling the source during
+	   `dragstart` would end up in the drag image. */
+	let flight: { entry: Entry; from: string } | null = null;
+	let draggedKey = $state<string | null>(null);
+	let over = $state<{ column: string; index: number } | null>(null);
+
+	/* Where the drop would land, or null when it would change nothing. */
+	let marker = $derived.by(() => {
+		if (!over || draggedKey === null) return null;
+		const entries = lanes.find((lane) => lane.column.id === over!.column)?.entries ?? [];
+		if (entries.findIndex((e) => e.key === draggedKey) === over.index) return null;
+		const before = entries.filter((e) => e.key !== draggedKey)[over.index];
+		return { column: over.column, before: before?.key ?? null };
+	});
+
+	function dragstart(e: DragEvent, entry: Entry, from: string) {
+		flight = { entry, from };
+		if (e.dataTransfer) {
+			e.dataTransfer.effectAllowed = 'move';
+			/* Firefox starts no drag without data. */
+			e.dataTransfer.setData('text/plain', entry.key);
+		}
+		requestAnimationFrame(() => {
+			if (flight) draggedKey = entry.key;
+		});
+	}
+
+	/* The place under the pointer, counted without the item in flight. */
+	function placeAt(e: DragEvent & { currentTarget: HTMLElement }) {
+		const others = [...e.currentTarget.querySelectorAll<HTMLElement>('[data-kanban-key]')].filter(
+			(el) => el.dataset.kanbanKey !== flight!.entry.key
+		);
+		const next = others.findIndex((el) => {
+			const box = el.getBoundingClientRect();
+			return e.clientY < box.top + box.height / 2;
+		});
+		return next < 0 ? others.length : next;
+	}
+
+	function dragover(e: DragEvent & { currentTarget: HTMLElement }, column: string) {
+		/* Anything else dragged over the board is not ours to accept. */
+		if (!flight) return;
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+		const index = placeAt(e);
+		if (over?.column !== column || over.index !== index) over = { column, index };
+	}
+
+	/* By the pointer, not `relatedTarget`, which not every browser fills in. */
+	function dragleave(e: DragEvent & { currentTarget: HTMLElement }) {
+		const box = e.currentTarget.getBoundingClientRect();
+		const inside =
+			e.clientX > box.left && e.clientX < box.right && e.clientY > box.top && e.clientY < box.bottom;
+		if (!inside) over = null;
+	}
+
+	/* The place is read again rather than taken from `over`: a drop must not
+	   depend on the last dragover having been drawn. */
+	function drop(e: DragEvent & { currentTarget: HTMLElement }, column: string) {
+		if (!flight) return;
+		e.preventDefault();
+		const index = placeAt(e);
+		const { entry, from } = flight;
+		const stays =
+			from === column &&
+			lanes.find((lane) => lane.column.id === column)?.entries.findIndex((other) => other.key === entry.key) === index;
+		if (!stays) onMove?.({ item: entry.item, from, to: column, index });
+		dragend();
+	}
+
+	function dragend() {
+		flight = null;
+		draggedKey = null;
+		over = null;
+	}
+
+	/* Shift + an arrow: the same move as a drop, then the focus follows the
+	   item, whose element the move may have replaced. */
+	function keydown(
+		e: KeyboardEvent & { currentTarget: HTMLElement },
+		entry: Entry,
+		laneIndex: number,
+		index: number
+	) {
+		if (!onMove || !e.shiftKey || e.target !== e.currentTarget) return;
+		const lane = lanes[laneIndex]!;
+		const rtl = getComputedStyle(e.currentTarget).direction === 'rtl';
+		let to = laneIndex;
+		let place = index;
+		if (e.key === 'ArrowUp') place = index - 1;
+		else if (e.key === 'ArrowDown') place = index + 1;
+		else if (e.key === 'ArrowLeft') to = laneIndex + (rtl ? 1 : -1);
+		else if (e.key === 'ArrowRight') to = laneIndex + (rtl ? -1 : 1);
+		else return;
+		e.preventDefault();
+		const target = lanes[to];
+		if (!target || place < 0) return;
+		if (to === laneIndex && place >= lane.entries.length) return;
+		onMove({
+			item: entry.item,
+			from: lane.column.id,
+			to: target.column.id,
+			index: Math.min(place, target.entries.length)
+		});
+		tick().then(() =>
+			root?.querySelector<HTMLElement>(`[data-kanban-key="${CSS.escape(entry.key)}"]`)?.focus()
+		);
+	}
+</script>
+
+<div {...applied.rest} bind:this={root} class={classes}>
+	{#each lanes as lane, laneIndex (lane.column.id)}
+		{@const title = lane.column.title ?? lane.column.id}
+		<section
+			class={cx(`${PREFIX}-column`, over?.column === lane.column.id && `${PREFIX}-column-over`)}
+			aria-label={title}
+			ondragover={(e) => dragover(e, lane.column.id)}
+			ondragleave={dragleave}
+			ondrop={(e) => drop(e, lane.column.id)}
+		>
+			<header class={`${PREFIX}-column-head`}>
+				{#if head}
+					{@render head(lane.column, lane.entries.map((e) => e.item))}
+				{:else}
+					<span class={`${PREFIX}-column-title`}>{title}</span>
+					<span class={`${PREFIX}-column-count`}>{lane.entries.length}</span>
+				{/if}
+			</header>
+			<ul class={`${PREFIX}-column-body`}>
+				{#each lane.entries as entry, i (entry.key)}
+					{#if marker?.column === lane.column.id && marker.before === entry.key}
+						<li class={`${PREFIX}-marker`} aria-hidden="true"></li>
+					{/if}
+					<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+					<li
+						class={cx(
+							`${PREFIX}-item`,
+							selectedSet.has(entry.key) && `${PREFIX}-item-selected`,
+							dirtySet.has(entry.key) && `${PREFIX}-item-dirty`,
+							draggedKey === entry.key && `${PREFIX}-item-dragged`
+						)}
+						data-kanban-key={entry.key}
+						draggable={onMove ? 'true' : undefined}
+						tabindex={onMove ? 0 : undefined}
+						aria-keyshortcuts={onMove ? 'Shift+ArrowUp Shift+ArrowDown Shift+ArrowLeft Shift+ArrowRight' : undefined}
+						ondragstart={(e) => dragstart(e, entry, lane.column.id)}
+						ondragend={dragend}
+						onkeydown={(e) => keydown(e, entry, laneIndex, i)}
+					>
+						{@render item(entry.item, i)}
+					</li>
+				{:else}
+					{#if empty && !marker}<li class={`${PREFIX}-column-empty`}>{@render empty(lane.column)}</li>{/if}
+				{/each}
+				{#if marker?.column === lane.column.id && marker.before === null}
+					<li class={`${PREFIX}-marker`} aria-hidden="true"></li>
+				{/if}
+			</ul>
+			{#if foot}<footer class={`${PREFIX}-column-foot`}>{@render foot(lane.column)}</footer>{/if}
+		</section>
+	{/each}
+</div>