@heyramzi/ui 1.54.2 → 2.0.1

package/src/tasks/gantt/gantt-bar.svelte

@@ -0,0 +1,243 @@
+<script lang="ts">
+	import { cn } from "../../lib/utils.js";
+	import { isoFromDay } from "../dates.js";
+	import type { GanttChange } from "../task-types.js";
+	import { barWidth, dayX, type Drag, type Layout, type Span } from "./logic.js";
+	import "./gantt.css";
+
+	interface Props {
+		id: string;
+		title: string;
+		/** The task's own dates, with a live drag applied. */
+		span: Span;
+		hue: string;
+		progress: number;
+		order: number;
+		layout: Layout;
+		staggerCap: number;
+		/** A bar narrower than this shows its title outside, to the right. */
+		inlineTitleMin: number;
+		/** The first row has no room above it, so its drag tip opens below. */
+		tipBelow: boolean;
+		drag: Drag | null;
+		setDrag: (drag: Drag | null) => void;
+		onhover: (id: string, on: boolean) => void;
+		onChange?: (id: string, change: GanttChange) => void | Promise<void>;
+		onSelect?: (id: string) => void;
+		describe: (span: Span) => string;
+	}
+
+	let {
+		id,
+		title,
+		span,
+		hue,
+		progress,
+		order,
+		layout,
+		staggerCap,
+		inlineTitleMin,
+		tipBelow,
+		drag,
+		setDrag,
+		onhover,
+		onChange,
+		onSelect,
+		describe,
+	}: Props = $props();
+
+	let editable = $derived(!!onChange);
+	let dragging = $derived(drag?.id === id);
+	let width = $derived(barWidth(span, layout));
+	let left = $derived(dayX(layout, span.start) + layout.inset);
+
+	function onPointerDown(e: PointerEvent, mode: Drag["mode"]): void {
+		if (!editable || e.button !== 0) return;
+		e.stopPropagation();
+		(e.currentTarget as HTMLElement).closest<HTMLElement>("[data-bar]")?.setPointerCapture(e.pointerId);
+		setDrag({ id, mode, originX: e.clientX, dx: 0 });
+	}
+
+	function onPointerMove(e: PointerEvent): void {
+		if (!drag) return;
+		const dx = Math.round((e.clientX - drag.originX) / layout.dayWidth);
+		if (dx !== drag.dx) setDrag({ ...drag, dx });
+	}
+
+	function onPointerUp(): void {
+		if (!drag || drag.id !== id) return;
+		const moved = drag.dx !== 0;
+		setDrag(null);
+		if (moved) void onChange?.(id, { start: isoFromDay(span.start), end: isoFromDay(span.end) });
+		else onSelect?.(id);
+	}
+
+	/** Arrow keys move a bar a day. Shift plus an arrow moves its end, so the task grows or shrinks. */
+	function onKeyDown(e: KeyboardEvent): void {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			onSelect?.(id);
+			return;
+		}
+		if (!editable || (e.key !== "ArrowLeft" && e.key !== "ArrowRight")) return;
+		e.preventDefault();
+		const step = e.key === "ArrowRight" ? 1 : -1;
+		const next = e.shiftKey
+			? { start: span.start, end: Math.max(span.start, span.end + step) }
+			: { start: span.start + step, end: span.end + step };
+		if (next.start === span.start && next.end === span.end) return;
+		void onChange?.(id, { start: isoFromDay(next.start), end: isoFromDay(next.end) });
+	}
+</script>
+
+<div
+	data-bar
+	role="button"
+	tabindex="0"
+	aria-roledescription="task bar"
+	aria-label="{title}, {describe(span)}.{editable ? ' Arrow keys move it a day, Shift plus arrow keys change its end.' : ''}"
+	class={cn(
+		"g-bar g-enter absolute top-1/2 flex -translate-y-1/2 items-center rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
+		editable && "cursor-grab",
+		dragging && "g-bar-dragging cursor-grabbing",
+	)}
+	style:--g-hue={hue}
+	style:--g-i={Math.min(order, staggerCap)}
+	style:left="{left}px"
+	style:width="{width}px"
+	style:height="{layout.rowHeight - 14}px"
+	onpointerdown={(e) => onPointerDown(e, "move")}
+	onpointermove={onPointerMove}
+	onpointerup={onPointerUp}
+	onpointercancel={() => setDrag(null)}
+	onpointerenter={() => onhover(id, true)}
+	onpointerleave={() => onhover(id, false)}
+	onkeydown={onKeyDown}
+>
+	{#if progress > 0}
+		<!-- The clip keeps the bar's rounded corners while the fill scales. -->
+		<span class="absolute inset-0 overflow-hidden rounded-lg" aria-hidden="true">
+			<span class="g-progress absolute inset-0 origin-left" style:transform="scaleX({progress})"></span>
+		</span>
+	{/if}
+	{#if width >= inlineTitleMin}
+		<span class="relative truncate px-2.5 text-xs font-medium text-foreground">{title}</span>
+	{/if}
+	{#if editable}
+		<span class="g-handle left-0" aria-hidden="true" onpointerdown={(e) => onPointerDown(e, "start")}></span>
+		<span class="g-handle right-0" aria-hidden="true" onpointerdown={(e) => onPointerDown(e, "end")}></span>
+	{/if}
+	{#if dragging && drag && drag.dx !== 0}
+		<span
+			class={cn(
+				"g-tip pointer-events-none absolute left-0 z-20 rounded-md bg-foreground px-2 py-1 text-[11px] font-medium whitespace-nowrap text-background tabular-nums shadow-md",
+				tipBelow ? "top-full mt-1.5" : "bottom-full mb-1.5",
+			)}
+		>
+			{describe(span)}
+		</span>
+	{/if}
+</div>
+{#if width < inlineTitleMin}
+	<span
+		class="pointer-events-none absolute top-1/2 -translate-y-1/2 truncate rounded-sm bg-card/90 px-1 text-xs text-muted-foreground"
+		style:left="{dayX(layout, span.end + 1) + 16}px"
+		style:max-width="200px"
+	>
+		{title}
+	</span>
+{/if}
+
+<style>
+	.g-bar {
+		touch-action: pan-y;
+		background: color-mix(in oklab, var(--g-hue) 16%, var(--color-card, white));
+		box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 34%, transparent);
+		/* Snapping to whole days reads as a glide, not a jump. */
+		transition:
+			left var(--duration-quick, 150ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
+			width var(--duration-quick, 150ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
+			box-shadow var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+	}
+
+	@media (hover: hover) and (pointer: fine) {
+		.g-bar:hover {
+			box-shadow:
+				inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 55%, transparent),
+				0 1px 2px rgb(0 0 0 / 0.06),
+				0 4px 12px color-mix(in oklab, var(--g-hue) 18%, transparent);
+		}
+	}
+
+	.g-bar-dragging {
+		box-shadow:
+			inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 55%, transparent),
+			0 1px 2px rgb(0 0 0 / 0.06),
+			0 4px 12px color-mix(in oklab, var(--g-hue) 18%, transparent);
+	}
+
+	.g-bar-dragging {
+		z-index: 15;
+	}
+
+	.g-progress {
+		background: color-mix(in oklab, var(--g-hue) 32%, var(--color-card, white));
+		transition: transform var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+	}
+
+	/* Resize grips: a wide invisible hit area, a slim pill that shows on hover. */
+	.g-handle {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 12px;
+		cursor: ew-resize;
+		touch-action: none;
+	}
+
+	.g-handle::after {
+		content: "";
+		position: absolute;
+		top: 25%;
+		bottom: 25%;
+		left: 50%;
+		width: 3px;
+		translate: -50% 0;
+		border-radius: 999px;
+		background: color-mix(in oklab, var(--g-hue) 70%, var(--color-foreground, black));
+		opacity: 0;
+		transition: opacity var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+	}
+
+	@media (hover: hover) and (pointer: fine) {
+		.g-bar:hover .g-handle::after {
+			opacity: 0.6;
+		}
+	}
+
+	.g-bar:focus-visible .g-handle::after,
+	.g-bar-dragging .g-handle::after {
+		opacity: 0.6;
+	}
+
+	.g-tip {
+		animation: g-tip-in var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out) both;
+	}
+
+	@keyframes g-tip-in {
+		from {
+			opacity: 0;
+			translate: 0 var(--distance-micro, 4px);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.g-tip {
+			animation: none;
+		}
+		.g-bar,
+		.g-progress {
+			transition: none;
+		}
+	}
+</style>

package/src/tasks/gantt/gantt-grid.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { dayX, type Arrow, type GanttDay, type Layout } from "./logic.js";
+
+	interface Props {
+		layout: Layout;
+		days: GanttDay[];
+		arrows: Arrow[];
+		rowCount: number;
+		/** The row id the pointer is over, so its arrows light up. */
+		hoveredId: string | null;
+		/** The id being dragged. */
+		draggingId: string | null;
+	}
+
+	let { layout, days, arrows, rowCount, hoveredId, draggingId }: Props = $props();
+</script>
+
+<!-- The layer behind every row: weekends, week lines, the today line and arrows. -->
+<div class="pointer-events-none absolute inset-y-0 left-(--g-label)" style:width="{layout.timelineWidth}px" aria-hidden="true">
+	{#each days as d (d.day)}
+		{#if d.weekend}
+			<div class="absolute inset-y-0 bg-foreground/[0.025]" style:left="{d.i * layout.dayWidth}px" style:width="{layout.dayWidth}px"></div>
+		{/if}
+		{#if d.wd === 1}
+			<div class="absolute inset-y-0 w-px bg-border/70" style:left="{d.i * layout.dayWidth}px"></div>
+		{/if}
+	{/each}
+	{#if layout.todayDay >= layout.first && layout.todayDay <= layout.last}
+		<div class="g-today absolute inset-y-0 w-px bg-primary" style:left="{dayX(layout, layout.todayDay) + layout.dayWidth / 2}px">
+			<span class="absolute -top-1 -left-[3px] size-[7px] rounded-full bg-primary"></span>
+		</div>
+	{/if}
+	<svg class="absolute inset-0 overflow-visible" width={layout.timelineWidth} height={rowCount * layout.rowHeight}>
+		{#each arrows as arrow (arrow.key)}
+			{@const lit = hoveredId === arrow.from || hoveredId === arrow.to || draggingId === arrow.from || draggingId === arrow.to}
+			<g class="g-arrow" class:g-arrow-lit={lit}>
+				<path d={arrow.d} pathLength="1" fill="none" stroke-width="1.5" class="g-arrow-line"></path>
+				<path d={arrow.head} fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="g-arrow-head"></path>
+			</g>
+		{/each}
+	</svg>
+</div>
+
+<style>
+	.g-today {
+		transform-origin: top;
+		animation: g-today-in var(--duration-very-slow, 500ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
+	}
+
+	.g-arrow {
+		stroke: color-mix(in oklab, var(--color-muted-foreground, gray) 55%, transparent);
+		transition: stroke var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+	}
+
+	.g-arrow-lit {
+		stroke: var(--color-foreground, currentColor);
+	}
+
+	.g-arrow-line {
+		stroke-dasharray: 1;
+		stroke-dashoffset: 0;
+		animation: g-draw var(--duration-very-slow, 500ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) 300ms backwards;
+	}
+
+	.g-arrow-head {
+		animation: g-fade var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out) 700ms backwards;
+	}
+
+	@keyframes g-today-in {
+		from {
+			transform: scaleY(0);
+		}
+	}
+
+	@keyframes g-draw {
+		from {
+			stroke-dashoffset: 1;
+		}
+	}
+
+	@keyframes g-fade {
+		from {
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.g-today,
+		.g-arrow-line,
+		.g-arrow-head {
+			animation: none;
+		}
+	}
+</style>

package/src/tasks/gantt/gantt-group-row.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { barWidth, dayX, type GroupRow, type Layout } from "./logic.js";
+	import "./gantt.css";
+
+	interface Props {
+		row: GroupRow;
+		/** The row's position, which sets how late its summary bar enters. */
+		index: number;
+		layout: Layout;
+		staggerCap: number;
+	}
+
+	let { row, index, layout, staggerCap }: Props = $props();
+
+	let hue = $derived(row.group.hue ?? "var(--color-primary)");
+</script>
+
+<div role="listitem" class="relative flex border-b border-border/60 bg-muted/30" style:height="{layout.rowHeight}px">
+	<!-- Opaque card under the row's muted tint, so bars never show through the pinned column. -->
+	<div class="sticky left-0 z-10 w-(--g-label) shrink-0 border-r border-border bg-card">
+		<div class="flex h-full items-center gap-2 bg-muted/30 px-3">
+			<span class="size-2 shrink-0 rounded-full" style:background={hue}></span>
+			<span class="truncate text-sm font-medium text-foreground">{row.group.label}</span>
+			<span class="grid h-5 min-w-5 place-items-center rounded-sm bg-foreground/5 px-1 text-xs font-medium text-muted-foreground tabular-nums">
+				{row.count}
+			</span>
+		</div>
+	</div>
+	<div class="relative shrink-0" style:width="{layout.timelineWidth}px">
+		{#if row.span}
+			<div
+				class="g-summary g-enter absolute top-1/2 h-1.5 -translate-y-1/2 rounded-full"
+				style:--g-hue={hue}
+				style:--g-i={Math.min(index, staggerCap)}
+				style:left="{dayX(layout, row.span.start) + layout.inset}px"
+				style:width="{barWidth(row.span, layout)}px"
+			></div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.g-summary {
+		background: color-mix(in oklab, var(--g-hue) 45%, transparent);
+		transition:
+			left var(--duration-quick, 150ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
+			width var(--duration-quick, 150ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.g-summary {
+			transition: none;
+		}
+	}
+</style>

package/src/tasks/gantt/gantt-header.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { cn } from "../../lib/utils.js";
+	import type { GanttDay, Layout } from "./logic.js";
+
+	interface Props {
+		layout: Layout;
+		days: GanttDay[];
+		months: { key: string; label: string; i: number; length: number }[];
+		labelHeading: string;
+		locale: string;
+		corner?: HTMLDivElement;
+	}
+
+	let { layout, days, months, labelHeading, locale, corner = $bindable() }: Props = $props();
+
+	let weekdayFormat = $derived(new Intl.DateTimeFormat(locale, { weekday: "narrow", timeZone: "UTC" }));
+</script>
+
+<!-- Months over days, pinned to the top. -->
+<div class="sticky top-0 z-30 flex border-b border-border bg-card/90 backdrop-blur-sm">
+	<div
+		bind:this={corner}
+		class="sticky left-0 z-10 flex w-(--g-label) shrink-0 items-end border-r border-border bg-card px-3 pb-2 text-xs font-medium text-muted-foreground"
+	>
+		{labelHeading}
+	</div>
+	<div class="relative shrink-0" style:width="{layout.timelineWidth}px">
+		<div class="relative h-7 border-b border-border/60">
+			{#each months as month (month.key)}
+				<div
+					class="absolute inset-y-0 border-l border-border/60 first:border-l-0"
+					style:left="{month.i * layout.dayWidth}px"
+					style:width="{month.length * layout.dayWidth}px"
+				>
+					<span class="sticky left-(--g-label) inline-block px-2 pt-1.5 text-xs font-medium whitespace-nowrap text-foreground">
+						{month.label}
+					</span>
+				</div>
+			{/each}
+		</div>
+		<div class="flex h-8">
+			{#each days as d (d.day)}
+				{@const isToday = d.day === layout.todayDay}
+				{@const showNumber = layout.dayWidth >= 18 || d.wd === 1}
+				<div
+					class={cn(
+						"relative flex shrink-0 flex-col items-center justify-center text-[10px] leading-none tabular-nums",
+						d.weekend ? "text-muted-foreground/50" : "text-muted-foreground",
+						layout.dayWidth < 18 && d.wd === 1 && "border-l border-border/60",
+					)}
+					style:width="{layout.dayWidth}px"
+				>
+					{#if layout.dayWidth >= 26}
+						<span class="mb-0.5 opacity-70">{weekdayFormat.format(new Date(d.day * 86_400_000))}</span>
+					{/if}
+					{#if showNumber}
+						<span
+							class={cn(
+								"grid h-4 min-w-4 place-items-center rounded-full px-1 font-medium",
+								layout.dayWidth < 18 && "absolute left-1 whitespace-nowrap",
+								isToday && "bg-primary text-primary-foreground",
+							)}
+						>
+							{d.date}
+						</span>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>

package/src/tasks/gantt/gantt-task-row.svelte

@@ -0,0 +1,186 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from "svelte";
+	import { CaretRight, FlagPennant } from "phosphor-svelte";
+	import type { GanttChange, GanttLabelContext } from "../task-types.js";
+	import GanttBar from "./gantt-bar.svelte";
+	import { barWidth, dayX, type Drag, type Layout, type Span, type TaskRow } from "./logic.js";
+	import "./gantt.css";
+
+	interface Props<T> {
+		row: TaskRow<T>;
+		layout: Layout;
+		title: string;
+		hue: string;
+		progress: number;
+		milestone: boolean;
+		/** Set when tasks nest: the label column indents and shows a fold button. */
+		nested: boolean;
+		indent: number;
+		staggerCap: number;
+		inlineTitleMin: number;
+		noDatesLabel: string;
+		hovered: boolean;
+		tipBelow: boolean;
+		drag: Drag | null;
+		setDrag: (drag: Drag | null) => void;
+		onhover: (id: string, on: boolean) => void;
+		onToggle: (id: string) => void;
+		onChange?: (id: string, change: GanttChange) => void | Promise<void>;
+		onSelect?: (id: string) => void;
+		renderLabel?: Snippet<[T, GanttLabelContext]>;
+		describe: (span: Span) => string;
+	}
+
+	let {
+		row,
+		layout,
+		title,
+		hue,
+		progress,
+		milestone,
+		nested,
+		indent,
+		staggerCap,
+		inlineTitleMin,
+		noDatesLabel,
+		hovered,
+		tipBelow,
+		drag,
+		setDrag,
+		onhover,
+		onToggle,
+		onChange,
+		onSelect,
+		renderLabel,
+		describe,
+	}: Props<T> = $props();
+
+	let ctx = $derived({ depth: row.depth, hasChildren: row.hasChildren, open: row.open });
+	let span = $derived(row.span);
+	let hot = $derived(hovered || drag?.id === row.id);
+</script>
+
+<div role="listitem" class="g-row relative flex border-b border-border/40 last:border-b-0" class:g-row-hot={hot} style:height="{layout.rowHeight}px">
+	<div
+		class="sticky left-0 z-10 flex w-(--g-label) shrink-0 items-center gap-2 border-r border-border bg-card px-3 text-sm"
+		style:padding-inline-start={nested ? `${row.depth * indent + 12}px` : undefined}
+	>
+		{#if nested}
+			{#if row.hasChildren}
+				<button
+					type="button"
+					aria-expanded={row.open}
+					aria-label="{row.open ? 'Fold' : 'Unfold'} {title}"
+					onclick={() => onToggle(row.id)}
+					class="-ml-1 grid size-5 shrink-0 place-items-center rounded-md text-muted-foreground outline-none transition-colors duration-[var(--duration-quick,150ms)] hover:bg-foreground/5 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/60"
+				>
+					<span class="g-chevron size-3.5 [&>svg]:size-full" class:g-chevron-open={row.open} aria-hidden="true">
+						<CaretRight weight="bold" />
+					</span>
+				</button>
+			{:else}
+				<span class="-ml-1 size-5 shrink-0" aria-hidden="true"></span>
+			{/if}
+		{/if}
+		{#if renderLabel}
+			{@render renderLabel(row.item, ctx)}
+		{:else}
+			<span class="truncate text-foreground">{title}</span>
+		{/if}
+	</div>
+	<div class="relative shrink-0" style:width="{layout.timelineWidth}px">
+		{#if !span}
+			<span
+				class="pointer-events-none absolute top-1/2 -translate-y-1/2 text-xs whitespace-nowrap text-muted-foreground/70"
+				style:left="{Math.max(dayX(layout, layout.todayDay) - 40, 0) + 8}px"
+			>
+				{noDatesLabel}
+			</span>
+		{:else if milestone && row.own}
+			<button
+				type="button"
+				aria-label="{title}, {describe(span)}"
+				title="{title}, {describe(span)}"
+				class="g-flag absolute top-1/2 grid size-6 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+				style:--g-hue={hue}
+				style:left="{dayX(layout, span.end) + layout.dayWidth / 2}px"
+				onclick={() => onSelect?.(row.id)}
+				onpointerenter={() => onhover(row.id, true)}
+				onpointerleave={() => onhover(row.id, false)}
+			>
+				<span class="size-5 [&>svg]:size-full" aria-hidden="true"><FlagPennant weight="fill" /></span>
+			</button>
+		{:else if !row.own}
+			<!-- A parent with no dates of its own: the span of what is below it. Not draggable. -->
+			<div
+				role="button"
+				tabindex="0"
+				aria-label="{title}, {describe(span)}"
+				title="{title}, {describe(span)}"
+				class="g-derived g-enter absolute top-1/2 -translate-y-1/2 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+				style:--g-hue={hue}
+				style:--g-i={Math.min(row.order, staggerCap)}
+				style:left="{dayX(layout, span.start) + layout.inset}px"
+				style:width="{barWidth(span, layout)}px"
+				style:height="{Math.max(layout.rowHeight - 24, 10)}px"
+				onclick={() => onSelect?.(row.id)}
+				onkeydown={(e) => (e.key === "Enter" || e.key === " ") && (e.preventDefault(), onSelect?.(row.id))}
+				onpointerenter={() => onhover(row.id, true)}
+				onpointerleave={() => onhover(row.id, false)}
+			></div>
+		{:else}
+			<GanttBar
+				id={row.id}
+				{title}
+				{span}
+				{hue}
+				{progress}
+				order={row.order}
+				{layout}
+				{staggerCap}
+				{inlineTitleMin}
+				{tipBelow}
+				{drag}
+				{setDrag}
+				{onhover}
+				{onChange}
+				{onSelect}
+				{describe}
+			/>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.g-row {
+		transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+	}
+
+	.g-row-hot {
+		background: color-mix(in oklab, var(--color-foreground, currentColor) 3%, transparent);
+	}
+
+	.g-chevron {
+		transition: rotate var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+	}
+
+	.g-chevron-open {
+		rotate: 90deg;
+	}
+
+	/* A summary of what is below: an outline, so it never reads as a task you can drag. */
+	.g-derived {
+		background: color-mix(in oklab, var(--g-hue) 10%, transparent);
+		box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 45%, transparent);
+	}
+
+	.g-flag {
+		color: var(--g-hue);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.g-chevron {
+			transition: none;
+		}
+	}
+</style>

package/src/tasks/gantt/gantt.css

@@ -0,0 +1,22 @@
+/* Shared by the bar, the derived bar and the group summary: they all slide in the same way. */
+.g-enter {
+  animation: g-bar-in var(--duration-slow, 400ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
+  animation-delay: calc(var(--g-i, 0) * var(--duration-stagger, 40ms));
+}
+
+@keyframes g-bar-in {
+  from {
+    opacity: 0;
+    clip-path: inset(0 100% 0 0 round 8px);
+  }
+  to {
+    opacity: 1;
+    clip-path: inset(0 0 0 0 round 8px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .g-enter {
+    animation: none;
+  }
+}