@marianmeres/stuic 3.187.0 → 3.189.0

package/API.md

@@ -467,6 +467,10 @@ File upload input.
 
 Form-wrapped switch toggle.
 
+#### `FieldColorPicker`
+
+Form-wrapped `ColorPicker`: visible label (names the swatch group via `aria-labelledby`), description, validation box, label-left layout.
+
 #### `FieldOptions`
 
 Multi-select options field.
@@ -1226,6 +1230,49 @@ Responsive data table with paging, row selection, batch actions, and mobile card
 />
 ```
 
+#### `Gantt`
+
+Horizontal schedule chart — project plans (task per row, progress, milestones) and resource lanes (many bars per row). Whole-day ranges, inclusive at both ends; day, week or month columns.
+
+| Prop          | Type                            | Default    | Description                                                |
+| ------------- | ------------------------------- | ---------- | ---------------------------------------------------------- |
+| `rows`        | `GanttRow[]`                    | required   | The lanes, in display order                                |
+| `from` / `to` | `IsoDate \| Date`               | bar extent | The window, inclusive at both ends                         |
+| `unit`        | `"day" \| "week" \| "month"`    | `"day"`    | Column granularity                                         |
+| `unitWidth`   | `number \| "fit"`               | `2.5rem`   | **Minimum** column width in px; `"fit"` drops the minimum  |
+| `today`       | `IsoDate \| Date \| null`       | today      | The marker line's day; `null` removes it                   |
+| `labels`      | `boolean`                       | auto       | Left label column — on when any row has a `label`          |
+| `barLabels`   | `"inside" \| "after" \| "none"` | `"inside"` | Where a bar's own label is drawn                           |
+| `onSelect`    | `(detail) => void`              | —          | Bar click; also what turns bars into focusable `<button>`s |
+
+```svelte
+<Gantt
+	rows={[
+		{
+			label: "Design",
+			bars: [
+				{
+					from: "2026-09-07",
+					to: "2026-09-18",
+					label: "Wireframes",
+					intent: "primary",
+					progress: 0.65,
+				},
+			],
+		},
+		{
+			label: "Launch",
+			bars: [
+				{ from: "2026-10-15", milestone: true, label: "Go live", intent: "success" },
+			],
+		},
+	]}
+	onSelect={(d) => console.log(d.row.label, d.bar.from)}
+/>
+```
+
+The geometry is exported separately for axis-aligned overlays: `buildGanttAxis`, `placeRange`, `placePoint`, `dayToFraction`, `boundsOf`.
+
 #### `ImageCycler`
 
 Auto-cycling image carousel with fade transitions. Preloads next image before displaying. Supports custom title/description snippets.

package/README.md

@@ -175,11 +175,11 @@ AppShell, Accordion, Backdrop, Modal, ModalDialog, Drawer, Collapsible, Header,
 
 ### Forms & Inputs
 
-FieldInput, FieldMoney, FieldDate, FieldDateRange, Calendar, FieldTextarea, FieldSelect, FieldCheckbox, FieldRadios, FieldFile, FieldAssets, FieldSingleAsset, FieldOptions, FieldKeyValues, FieldTable, FieldObject, FieldSwitch, FieldInputLocalized, FieldLikeButton, FieldPhoneNumber, FieldCountry, CronInput, Fieldset, LoginForm, LoginFormModal, RegisterForm, RegisterFormModal, LoginOrRegisterForm, LoginOrRegisterFormModal, EmailVerifyForm, OtpInput
+FieldInput, FieldMoney, FieldDate, FieldDateRange, Calendar, FieldTextarea, FieldSelect, FieldCheckbox, FieldRadios, FieldFile, FieldAssets, FieldSingleAsset, FieldOptions, FieldKeyValues, FieldTable, FieldObject, FieldSwitch, FieldColorPicker, FieldInputLocalized, FieldLikeButton, FieldPhoneNumber, FieldCountry, CronInput, Fieldset, LoginForm, LoginFormModal, RegisterForm, RegisterFormModal, LoginOrRegisterForm, LoginOrRegisterFormModal, EmailVerifyForm, OtpInput
 
 ### Buttons & Controls
 
-Button, ButtonGroupRadio, Switch, Slider, RangeSlider, TwCheck, ListItemButton, X
+Button, ButtonGroupRadio, Switch, ColorPicker, Slider, RangeSlider, TwCheck, ListItemButton, X
 
 ### Feedback & Notifications
 

package/dist/README.md

@@ -46,6 +46,7 @@ npm install @marianmeres/stuic
 - **FieldOptions** - Modal-based multi-select picker (optional inline `chips` display)
 - **FieldKeyValues** - Key-value pairs editor with JSON serialization
 - **FieldSwitch** - Toggle switch within a form
+- **FieldColorPicker** - Color picker (swatches + custom color) within a form
 - **Fieldset** - Group of form fields with legend
 
 ### Buttons & Controls

package/dist/components/ColorPicker/ColorPicker.svelte

@@ -49,6 +49,13 @@
 		disabled?: boolean;
 		/** Accessible name of the swatch group (default `t("color")`, "Color") */
 		label?: string;
+		/**
+		 * Id of an element that names the swatch group (`aria-labelledby`). When set,
+		 * it replaces the group's `aria-label` — what `FieldColorPicker` uses to let
+		 * its visible label name the swatches. `...rest` cannot do this: it lands on
+		 * the root, not on the radiogroup.
+		 */
+		labelledby?: string;
 		/** Form field name (hidden input) */
 		name?: string;
 		/** Require a non-empty value (enforced by the built-in validator) */
@@ -92,6 +99,7 @@
 		allowClear = true,
 		disabled = false,
 		label,
+		labelledby,
 		name,
 		required = false,
 		t = t_default,
@@ -323,6 +331,22 @@
 	export function getValidation(): ValidationResult | undefined {
 		return _validation;
 	}
+
+	/**
+	 * Focus the group's tab stop (the checked swatch, or the first one), or —
+	 * with no swatches rendered — the first custom-color control.
+	 */
+	export function focus(): void {
+		(
+			el?.querySelector<HTMLElement>(`[role="radiogroup"] [tabindex="0"]`) ??
+			el?.querySelector<HTMLElement>(`input:not([type="hidden"])`)
+		)?.focus();
+	}
+
+	/** Scroll the picker into view. Defaults to smooth + center. */
+	export function scrollIntoView(opts?: ScrollIntoViewOptions): void {
+		el?.scrollIntoView?.({ behavior: "smooth", block: "center", ...opts });
+	}
 </script>
 
 <div
@@ -340,7 +364,8 @@
 		<div
 			class={unstyled ? undefined : "stuic-color-picker-swatches"}
 			role="radiogroup"
-			aria-label={label || t("color", null, "Color")}
+			aria-labelledby={labelledby || undefined}
+			aria-label={labelledby ? undefined : label || t("color", null, "Color")}
 			aria-required={required ? "true" : undefined}
 			aria-disabled={disabled ? "true" : undefined}
 			aria-invalid={_validation && !_validation.valid ? "true" : undefined}

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

@@ -40,6 +40,13 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" |
     disabled?: boolean;
     /** Accessible name of the swatch group (default `t("color")`, "Color") */
     label?: string;
+    /**
+     * Id of an element that names the swatch group (`aria-labelledby`). When set,
+     * it replaces the group's `aria-label` — what `FieldColorPicker` uses to let
+     * its visible label name the swatches. `...rest` cannot do this: it lands on
+     * the root, not on the radiogroup.
+     */
+    labelledby?: string;
     /** Form field name (hidden input) */
     name?: string;
     /** Require a non-empty value (enforced by the built-in validator) */
@@ -70,6 +77,8 @@ declare const ColorPicker: import("svelte").Component<Props, {
     validate: () => ValidationResult | undefined;
     clearValidation: () => void;
     getValidation: () => ValidationResult | undefined;
+    focus: () => void;
+    scrollIntoView: (opts?: ScrollIntoViewOptions) => void;
 }, "el" | "value" | "inputEl">;
 type ColorPicker = ReturnType<typeof ColorPicker>;
 export default ColorPicker;

package/dist/components/ColorPicker/README.md

@@ -16,8 +16,12 @@ own full-screen color UI, so there is no anchored popover to fight the on-screen
 keyboard. Swatches grow to a ~44px hit target on a coarse pointer, and the hex field
 carries the iOS zoom guard.
 
+In a form layout, use [`FieldColorPicker`](../Input/README.md#color-picker): this picker
+inside the standard field shell (visible label, description, validation box, label-left
+layout).
+
 Adjacent but different: `Rating` (the same input-with-hidden-input shape),
-`FieldSelect` (a labeled field wrapper), `ThemePreview` (theme token swatches).
+`ThemePreview` (theme token swatches).
 
 ## Props
 
@@ -29,7 +33,8 @@ Adjacent but different: `Rating` (the same input-with-hidden-input shape),
 | `custom`              | `"both" \| "native" \| "text" \| false` | `"both"`               | Which custom-color controls to render under the palette                                                          |
 | `allowClear`          | `boolean`                               | `true`                 | A crossed-out "no color" swatch, Delete / Backspace, and an emptied hex field all set `""`                       |
 | `disabled`            | `boolean`                               | `false`                | No interaction; the hidden input is disabled too (nothing submits)                                               |
-| `label`               | `string`                                | `"Color"`              | Accessible name of the swatch group (via `t("color")` by default)                                                |
+| `label`               | `string`                                | `"Color"`              | Accessible name of the swatch group (via `t("color")` by default). Not a visible label — see `FieldColorPicker`  |
+| `labelledby`          | `string`                                | —                      | Id of the element naming the swatch group (`aria-labelledby`); when set, replaces `label`'s `aria-label`         |
 | `name`                | `string`                                | —                      | Form field name of the hidden input                                                                              |
 | `required`            | `boolean`                               | `false`                | Require a non-empty value — enforced by the built-in validator (hidden inputs skip native constraint validation) |
 | `t`                   | `TranslateFn`                           | English                | i18n translate function (see below)                                                                              |
@@ -46,11 +51,13 @@ Other attributes (`id`, `style`, `data-*`, …) are passed to the root `div`.
 
 ### Imperative API (via `bind:this`)
 
-| Method              | Description                                                          |
-| ------------------- | -------------------------------------------------------------------- |
-| `validate()`        | Trigger validation now; returns the `ValidationResult`               |
-| `clearValidation()` | Clear the stored result and the hidden input's custom validity       |
-| `getValidation()`   | The last validation result (also reported via `setValidationResult`) |
+| Method              | Description                                                             |
+| ------------------- | ----------------------------------------------------------------------- |
+| `validate()`        | Trigger validation now; returns the `ValidationResult`                  |
+| `clearValidation()` | Clear the stored result and the hidden input's custom validity          |
+| `getValidation()`   | The last validation result (also reported via `setValidationResult`)    |
+| `focus()`           | Focus the checked swatch (the group's tab stop), else the first control |
+| `scrollIntoView()`  | Scroll the picker into view (defaults: `smooth` + `center`)             |
 
 ## Usage
 
@@ -114,6 +121,9 @@ resolve to near-identical greys.
 </form>
 ```
 
+A bare picker only reports the result (`setValidationResult`, `aria-invalid`); it renders no
+message. `FieldColorPicker` shows it in the field's validation box.
+
 ## Preview vs commit
 
 `value` updates **live** while the native picker is being dragged and while a valid
@@ -144,6 +154,8 @@ value when `allowClear` is on.
   Up / Down step by one **rendered** row (measured from the layout, so it stays right
   when a narrow screen wraps to fewer per row) and stop at the edges.
   `aria-required` / `aria-invalid` sit on the group.
+- The group is named by `label` (an `aria-label`, default "Color") or, when `labelledby`
+  is set, by that element instead — never both.
 - Every swatch is named: an entry's `label` (through `t`) or, without one, its color
   string. The clear swatch is "No color".
 - Selection is signalled by a ring drawn outside the swatch, not only by color.

package/dist/components/Gantt/Gantt.svelte

@@ -0,0 +1,451 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import type { Weekday } from "@marianmeres/calendar-utils";
+	import type { THC } from "../Thc/Thc.svelte";
+	import type { IntentColorKey } from "../../utils/design-tokens.js";
+	import type {
+		GanttAxis,
+		GanttColumn,
+		GanttDateInput,
+		GanttGroup,
+		GanttPlacement,
+		GanttUnit,
+	} from "./gantt-geometry.js";
+
+	/** Where a bar's own label is drawn. */
+	export type GanttBarLabels = "inside" | "after" | "none";
+
+	/** One bar (or milestone) on a row's track. */
+	export interface GanttBar {
+		/** Stable key — falls back to the index, which is fine for a static list. */
+		id?: string;
+		/** First day, inclusive. `YYYY-MM-DD`, or a `Date` (its **local** calendar date). */
+		from: GanttDateInput;
+		/** Last day, **inclusive**. Omitted = a single day. */
+		to?: GanttDateInput;
+		/** Text on the bar (see `barLabels`) */
+		label?: THC;
+		/** Semantic color */
+		intent?: IntentColorKey;
+		/** `0`–`1` — a darker fill from the bar's start ("% complete") */
+		progress?: number;
+		/** Draw a diamond at `from` instead of a bar (`to` is ignored) */
+		milestone?: boolean;
+		/** Draw thinner and on top — an emphasis range inside a wider bar of the same row */
+		inset?: boolean;
+		/** Renders the bar as a link */
+		href?: string;
+		/** Native tooltip (`title`) — the cheap way to show the detail a bar has no room for */
+		title?: string;
+		/** Not clickable, dimmed */
+		disabled?: boolean;
+		/** Additional classes for this bar */
+		class?: string;
+		/** Anything of yours — handed back by `onSelect` */
+		data?: unknown;
+	}
+
+	/** One lane of the chart: a label on the left, any number of bars on its track. */
+	export interface GanttRow {
+		/** Stable key — falls back to the index */
+		id?: string;
+		/** The left column's primary line */
+		label?: THC;
+		/** Secondary line under the label */
+		description?: THC;
+		/** The row's bars — one for a classic task, several for a resource lane */
+		bars: GanttBar[];
+		/** Renders the row label as a link */
+		href?: string;
+		/** Anything of yours — handed back by `onSelect` */
+		data?: unknown;
+	}
+
+	/** What `onSelect` (and the `renderBar` snippet) receives. */
+	export interface GanttSelectDetail {
+		bar: GanttBar;
+		row: GanttRow;
+		rowIndex: number;
+		barIndex: number;
+		/** The bar's track geometry, or `null` for a milestone (see `point`) */
+		placement: GanttPlacement | null;
+		/** A milestone's 0..1 position on the track, or `null` for a bar */
+		point: number | null;
+	}
+
+	export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+		/** The lanes, in display order (sort them yourself) */
+		rows: GanttRow[];
+		/** Window start, inclusive. Default: the earliest date in `rows` */
+		from?: GanttDateInput;
+		/** Window end, inclusive. Default: the latest date in `rows` */
+		to?: GanttDateInput;
+		/** Column granularity. `week`/`month` snap the window outwards to whole units */
+		unit?: GanttUnit;
+		/** First day of a week for `unit="week"` (1 = Monday … 7 = Sunday) */
+		weekStartsOn?: Weekday;
+		/** BCP 47 tag for month/weekday names and the default `aria-label`s */
+		locale?: string;
+		/** The day the marker line sits on. `null` removes it. Default: today */
+		today?: GanttDateInput | null;
+		/**
+		 * MINIMUM column width in px (the horizontal zoom). The chart always fills its
+		 * parent; when the axis needs less than that, the columns share out the rest.
+		 * When it needs more, the frame scrolls horizontally.
+		 *
+		 * `"fit"` drops the minimum: the columns always divide the available width, so
+		 * the chart never scrolls horizontally however many of them there are.
+		 *
+		 * Default: the `--stuic-gantt-unit-width` token.
+		 */
+		unitWidth?: number | "fit";
+		/** Show the left label column. Default: whenever any row has a label */
+		labels?: boolean;
+		/** Where a bar's own `label` is drawn */
+		barLabels?: GanttBarLabels;
+		/** Fires on a bar click (and Enter/Space) — also what makes bars focusable */
+		onSelect?: (detail: GanttSelectDetail) => void;
+		/** Override a unit cell's header text */
+		formatColumn?: (column: GanttColumn, axis: GanttAxis) => string;
+		/** Override a group cell's header text (the month over its days, the year over its months) */
+		formatGroup?: (group: GanttGroup, axis: GanttAxis) => string;
+		/** Override a bar's accessible name */
+		formatBarAria?: (detail: GanttSelectDetail) => string;
+		/** Override the whole bar body (progress, label) */
+		renderBar?: Snippet<[GanttSelectDetail]>;
+		/** Override the left column's cell */
+		renderRowLabel?: Snippet<[{ row: GanttRow; index: number }]>;
+		/** The header's top-left cell (above the labels) */
+		renderCorner?: Snippet<[{ axis: GanttAxis }]>;
+		/** Shown in place of the rows when `rows` is empty (the axis still renders) */
+		empty?: Snippet;
+		/** Skip all default styling */
+		unstyled?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Class for the sticky header */
+		classHeader?: string;
+		/** Class for every row */
+		classRow?: string;
+		/** Class for every left-column cell */
+		classRowLabel?: string;
+		/** Class for every row's track */
+		classTrack?: string;
+		/** Class for every bar */
+		classBar?: string;
+		/** Bindable element reference */
+		el?: HTMLElement;
+	}
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Thc from "../Thc/Thc.svelte";
+	import {
+		formatIsoDate,
+		formatIsoDateRange,
+		normalizeIsoDate,
+		todayIso,
+		addDaysIso,
+	} from "../Calendar/iso-date.js";
+	import { boundsOf, buildGanttAxis, placePoint, placeRange } from "./gantt-geometry.js";
+
+	let {
+		rows,
+		from,
+		to,
+		unit = "day",
+		weekStartsOn = 1,
+		locale,
+		today,
+		unitWidth,
+		labels,
+		barLabels = "inside",
+		onSelect,
+		formatColumn,
+		formatGroup,
+		formatBarAria,
+		renderBar,
+		renderRowLabel,
+		renderCorner,
+		empty,
+		unstyled = false,
+		class: classProp,
+		classHeader: classHeaderProp,
+		classRow: classRowProp,
+		classRowLabel: classRowLabelProp,
+		classTrack: classTrackProp,
+		classBar: classBarProp,
+		el = $bindable(),
+		...rest
+	}: Props = $props();
+
+	const cx = (base: string, extra?: string) => (unstyled ? extra : twMerge(base, extra));
+
+	let _class = $derived(cx("stuic-gantt", classProp));
+	let _classHeader = $derived(cx("stuic-gantt-head", classHeaderProp));
+	let _classRow = $derived(cx("stuic-gantt-row", classRowProp));
+	let _classRowLabel = $derived(cx("stuic-gantt-row-label", classRowLabelProp));
+	let _classTrack = $derived(cx("stuic-gantt-track", classTrackProp));
+
+	let _today = $derived(
+		today === null ? null : (normalizeIsoDate(today ?? todayIso()) ?? null)
+	);
+
+	// The window: explicit ends win, the rows' own extent fills the rest, and with
+	// neither (no rows at all) a month from today — an axis is still a useful answer.
+	let _window = $derived.by(() => {
+		const explicitFrom = from === undefined ? null : normalizeIsoDate(from);
+		const explicitTo = to === undefined ? null : normalizeIsoDate(to);
+		if (explicitFrom && explicitTo) return { from: explicitFrom, to: explicitTo };
+		const bounds = boundsOf(rows.flatMap((r) => r.bars ?? []));
+		const fallback = _today ?? todayIso();
+		return {
+			from: explicitFrom ?? bounds?.from ?? fallback,
+			to: explicitTo ?? bounds?.to ?? addDaysIso(fallback, 29),
+		};
+	});
+
+	let axis = $derived(
+		buildGanttAxis(_window.from, _window.to, {
+			unit,
+			weekStartsOn,
+			locale,
+			today: _today,
+		})
+	);
+
+	let todayAt = $derived(_today ? placePoint(_today, axis) : null);
+
+	let showLabels = $derived(labels ?? rows.some((r) => r.label !== undefined));
+
+	interface PlacedBar extends GanttSelectDetail {
+		key: string | number;
+	}
+
+	let placed = $derived.by(() =>
+		rows.map((row, rowIndex) => ({
+			row,
+			rowIndex,
+			key: row.id ?? rowIndex,
+			bars: (row.bars ?? []).reduce<PlacedBar[]>((acc, bar, barIndex) => {
+				const point = bar.milestone ? placePoint(bar.from, axis) : null;
+				const placement = bar.milestone
+					? null
+					: placeRange(bar.from, bar.to ?? bar.from, axis);
+				// Off-window (or undatable) bars are dropped rather than pinned to an
+				// edge, where a hairline reads as "starts today".
+				if (point === null && placement === null) return acc;
+				acc.push({
+					bar,
+					row,
+					rowIndex,
+					barIndex,
+					placement,
+					point,
+					key: bar.id ?? barIndex,
+				});
+				return acc;
+			}, []),
+		}))
+	);
+
+	// 4 decimals is sub-pixel at any realistic track width; the unary + drops the
+	// trailing zeros so the style attribute stays readable ("20%", not "20.0000%").
+	const pct = (n: number) => `${+(n * 100).toFixed(4)}%`;
+
+	function columnLabel(c: GanttColumn) {
+		return formatColumn ? formatColumn(c, axis) : c.label;
+	}
+
+	function groupLabel(g: GanttGroup) {
+		return formatGroup ? formatGroup(g, axis) : g.label;
+	}
+
+	function barAria(d: PlacedBar): string {
+		if (formatBarAria) return formatBarAria(d);
+		// Only plain-string labels can become an accessible name; an html/component
+		// THC is markup, and `title` is the documented way out of that.
+		const name = [d.row.label, d.bar.label]
+			.filter((v): v is string => typeof v === "string" && v !== "")
+			.join(" – ");
+		const a = normalizeIsoDate(d.bar.from);
+		const b = normalizeIsoDate(d.bar.to ?? d.bar.from);
+		const when = !a
+			? ""
+			: !b || a === b || d.bar.milestone
+				? formatIsoDate(a, locale)
+				: formatIsoDateRange(a, b, locale);
+		return [name, when].filter(Boolean).join(": ");
+	}
+
+	function barTag(bar: GanttBar) {
+		if (bar.disabled) return "span";
+		if (bar.href) return "a";
+		return onSelect ? "button" : "span";
+	}
+</script>
+
+{#snippet barBody(d: PlacedBar)}
+	{#if renderBar}
+		{@render renderBar(d)}
+	{:else}
+		{#if !d.bar.milestone && d.bar.progress !== undefined}
+			<span
+				class={unstyled ? undefined : "stuic-gantt-bar-progress"}
+				style:width={pct(Math.min(1, Math.max(0, d.bar.progress)))}
+			></span>
+		{/if}
+		{#if d.bar.label !== undefined && barLabels !== "none"}
+			<span class={unstyled ? undefined : "stuic-gantt-bar-label"}>
+				<Thc thc={d.bar.label} />
+			</span>
+		{/if}
+	{/if}
+{/snippet}
+
+<div
+	bind:this={el}
+	class={_class}
+	data-unit={unit}
+	data-fit={unitWidth === "fit" ? "" : undefined}
+	data-labels={showLabels ? "" : undefined}
+	data-bar-labels={barLabels}
+	style:--stuic-gantt-unit-width={typeof unitWidth === "number"
+		? `${unitWidth}px`
+		: undefined}
+	style:--_gantt-columns={axis.columns.length}
+	{...rest}
+>
+	<div class={unstyled ? undefined : "stuic-gantt-viewport"}>
+		<div class={unstyled ? undefined : "stuic-gantt-inner"}>
+			<div class={_classHeader}>
+				{#if showLabels}
+					<div class={unstyled ? undefined : "stuic-gantt-corner"}>
+						{@render renderCorner?.({ axis })}
+					</div>
+				{/if}
+				<div class={unstyled ? undefined : "stuic-gantt-axis"}>
+					<div class={unstyled ? undefined : "stuic-gantt-groups"}>
+						{#each axis.groups as group (group.key)}
+							<div
+								class={unstyled ? undefined : "stuic-gantt-group"}
+								style:--_gantt-span={group.span}
+								data-group={group.key}
+							>
+								<span>{groupLabel(group)}</span>
+							</div>
+						{/each}
+					</div>
+					<div class={unstyled ? undefined : "stuic-gantt-units"}>
+						{#each axis.columns as column (column.date)}
+							<div
+								class={unstyled ? undefined : "stuic-gantt-unit"}
+								data-date={column.date}
+								data-weekend={column.isWeekend ? "" : undefined}
+								data-today={column.isToday ? "" : undefined}
+							>
+								<span class={unstyled ? undefined : "stuic-gantt-unit-label"}>
+									{columnLabel(column)}
+								</span>
+								{#if column.subLabel && !formatColumn}
+									<span class={unstyled ? undefined : "stuic-gantt-unit-sub"}>
+										{column.subLabel}
+									</span>
+								{/if}
+							</div>
+						{/each}
+					</div>
+				</div>
+			</div>
+
+			<div class={unstyled ? undefined : "stuic-gantt-body"}>
+				<!-- One grid layer for the whole body: the alternative is a cell per
+				     row per column, which is rows×columns nodes for the same pixels. -->
+				<div class={unstyled ? undefined : "stuic-gantt-grid"} aria-hidden="true">
+					{#each axis.columns as column (column.date)}
+						<div
+							class={unstyled ? undefined : "stuic-gantt-gridline"}
+							data-weekend={column.isWeekend ? "" : undefined}
+							data-today={column.isToday ? "" : undefined}
+						></div>
+					{/each}
+					{#if todayAt !== null}
+						<div
+							class={unstyled ? undefined : "stuic-gantt-today"}
+							style:left={pct(todayAt)}
+							data-today-marker
+						></div>
+					{/if}
+				</div>
+
+				{#each placed as line (line.key)}
+					<div class={_classRow} data-row-id={line.row.id}>
+						{#if showLabels}
+							<div class={_classRowLabel}>
+								{#if renderRowLabel}
+									{@render renderRowLabel({ row: line.row, index: line.rowIndex })}
+								{:else}
+									{#if line.row.label !== undefined}
+										<span class={unstyled ? undefined : "stuic-gantt-row-title"}>
+											{#if line.row.href}
+												<a
+													href={line.row.href}
+													class={unstyled ? undefined : "stuic-gantt-row-link"}
+												>
+													<Thc thc={line.row.label} />
+												</a>
+											{:else}
+												<Thc thc={line.row.label} />
+											{/if}
+										</span>
+									{/if}
+									{#if line.row.description !== undefined}
+										<span class={unstyled ? undefined : "stuic-gantt-row-description"}>
+											<Thc thc={line.row.description} />
+										</span>
+									{/if}
+								{/if}
+							</div>
+						{/if}
+						<div class={_classTrack}>
+							{#each line.bars as d (d.key)}
+								{@const tag = barTag(d.bar)}
+								<svelte:element
+									this={tag}
+									class={cx("stuic-gantt-bar", twMerge(classBarProp, d.bar.class))}
+									href={tag === "a" ? d.bar.href : undefined}
+									type={tag === "button" ? "button" : undefined}
+									role={tag === "span" ? "img" : undefined}
+									aria-label={barAria(d)}
+									aria-disabled={d.bar.disabled ? "true" : undefined}
+									title={d.bar.title}
+									data-kind={d.bar.milestone ? "milestone" : "bar"}
+									data-intent={d.bar.intent}
+									data-inset={d.bar.inset ? "" : undefined}
+									data-disabled={d.bar.disabled ? "" : undefined}
+									data-clipped-start={d.placement?.clippedStart ? "" : undefined}
+									data-clipped-end={d.placement?.clippedEnd ? "" : undefined}
+									style:left={pct(d.point ?? d.placement!.start)}
+									style:width={d.placement
+										? pct(d.placement.end - d.placement.start)
+										: undefined}
+									onclick={d.bar.disabled || !onSelect ? undefined : () => onSelect(d)}
+								>
+									{@render barBody(d)}
+								</svelte:element>
+							{/each}
+						</div>
+					</div>
+				{:else}
+					{#if empty}
+						<div class={unstyled ? undefined : "stuic-gantt-empty"}>
+							{@render empty()}
+						</div>
+					{/if}
+				{/each}
+			</div>
+		</div>
+	</div>
+</div>