@heyramzi/ui 2.24.0 → 3.0.0

package/src/work/kanban-hidden-rail.svelte

@@ -34,7 +34,7 @@
 				"size-2.5 transition-transform duration-fast ease-smooth-out motion-reduce:transition-none [&>svg]:size-full",
 				!rail.railOpen && "-rotate-90",
 			)}
-			aria-hidden="true"><CaretDown weight="bold" /></span
+			aria-hidden="true"><CaretDown aria-hidden="true" weight="bold" /></span
 		>
 		{hiddenLabel}
 	</Button>
@@ -96,6 +96,7 @@
 </div>
 
 <style>
+	/* Unlayered: the row's transition-[background-color,outline-color] utility would otherwise drop the fade out. */
 	.kanban-rail-item-leaving {
 		pointer-events: none;
 		opacity: 0;

package/src/work/kanban-hidden-rail.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { Snippet } from "svelte";
+import type { KanbanRailState } from "./kanban-rail-state.svelte.js";
+import type { KanbanColumn as KanbanColumnDef } from "./kanban-types.js";
+declare function $$render<C extends KanbanColumnDef>(): {
+    props: {
+        /** The columns folded into the rail, in board order. */
+        columns: C[];
+        rail: KanbanRailState;
+        /** How many cards a column holds. */
+        countOf: (columnId: string) => number;
+        hiddenLabel: string;
+        showAllLabel: string;
+        hiddenItem?: Snippet<[C, {
+            count: number;
+            active: boolean;
+        }]>;
+    };
+    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-keyboard.ts

@@ -11,6 +11,9 @@ export type KanbanKeyboardConfig<T, C extends KanbanColumnDef> = {
   moveAndPin: (id: string, move: KanbanMove) => void | Promise<void>;
 };
 
+/** A keyboard move: the column the card went to, and the caller's `onMove` result. */
+export type KanbanKeyboardMove<C> = { column: C; done: void | Promise<void> };
+
 /** The card's keydown handler: Enter or Space selects, Alt + arrow moves. */
 export function createCardKeyDown<T, C extends KanbanColumnDef>(
   config: KanbanKeyboardConfig<T, C>,
@@ -19,9 +22,9 @@ export function createCardKeyDown<T, C extends KanbanColumnDef>(
 
   /**
    * Alt + ArrowLeft/Right moves the focused card to the next droppable column, so
-   * keyboard and screen-reader users get drag's onMove contract.
+   * keyboard and screen-reader users get drag's onMove contract. Returns the move, if one ran.
    */
-  return function onCardKeyDown(e: KeyboardEvent, id: string): void {
+  return function onCardKeyDown(e: KeyboardEvent, id: string): KanbanKeyboardMove<C> | undefined {
     const { onSelect, items, getId, getColumn, columns, sortKey, dropAtTop, boardOrder } = input();
     if (onSelect && e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
       e.preventDefault();
@@ -45,7 +48,7 @@ export function createCardKeyDown<T, C extends KanbanColumnDef>(
         const index = atTop ? 0 : column.length;
         const before = column[index - 1];
         const after = column[index];
-        void moveAndPin(id, {
+        const done = moveAndPin(id, {
           columnId: target.id,
           ...(boardOrder
             ? { boardOrder: boardOrderAt(column, index, (entry) => boardOrder(entry)) }
@@ -53,10 +56,9 @@ export function createCardKeyDown<T, C extends KanbanColumnDef>(
           beforeId: before === undefined ? null : getId(before),
           afterId: after === undefined ? null : getId(after),
         });
-      } else {
-        void moveAndPin(id, { columnId: target.id });
+        return { column: target, done };
       }
-      return;
+      return { column: target, done: moveAndPin(id, { columnId: target.id }) };
     }
   };
 }

package/src/work/task-gantt.svelte

@@ -2,6 +2,8 @@
 	import { workLooks } from "../components/work-parts/looks.js";
 	import type { Snippet } from "svelte";
 	import { cn } from "../lib/utils.js";
+	import LiveRegion from "../lib/live-region.svelte";
+	import { focusAfterRender } from "../lib/focus.js";
 	import { dayNumber, isoFromDay, todayIso } from "./dates.js";
 	import GanttGrid from "./gantt/gantt-grid.svelte";
 	import GanttGroupRow from "./gantt/gantt-group-row.svelte";
@@ -54,9 +56,11 @@
 		groups?: KanbanColumnDef[];
 		getGroup?: (item: T) => string;
 		/** Called after a bar is dragged, resized or nudged. Leave it out for a read-only chart. */
-		onChange?: (id: string, change: GanttChange) => void | Promise<void>;
+		onDatesChange?: (id: string, change: GanttChange) => void | Promise<void>;
 		/** Called on a click or Enter that did not move the bar. */
 		onSelect?: (id: string) => void;
+		/** What a screen reader hears after an arrow key moves a bar, given its new dates. */
+		movedLabel?: (dates: string) => string;
 		/** The left column for a row. Defaults to the title. */
 		renderLabel?: Snippet<[T, GanttLabelContext]>;
 		/** First and last day shown. Default: the tasks' span, padded, starting on a Monday. */
@@ -90,8 +94,9 @@
 		getDependsOn,
 		groups,
 		getGroup,
-		onChange,
+		onDatesChange,
 		onSelect,
+		movedLabel = (dates) => `Now ${dates}`,
 		renderLabel,
 		from,
 		to,
@@ -115,6 +120,7 @@
 	let corner = $state<HTMLDivElement>();
 	let drag = $state<Drag | null>(null);
 	let hoveredId = $state<string | null>(null);
+	let live: LiveRegion | undefined = $state();
 	let scrolledToToday = false;
 	// svelte-ignore state_referenced_locally
 	let folded = $state(new Set(collapsed));
@@ -171,6 +177,12 @@
 		return rangeLabel(span, dayFormat);
 	}
 
+	// A chart sorted by date can reorder the moved bar, and a moved node loses focus.
+	async function onKeyMove(id: string, span: Span): Promise<void> {
+		void live?.announce(movedLabel(describe(span)));
+		await focusAfterRender(scroller, `[data-bar="${CSS.escape(id)}"]`);
+	}
+
 	// Open on today, a third of the way in, so past work and what's next both show.
 	$effect(() => {
 		if (!scroller || scrolledToToday) return;
@@ -236,10 +248,11 @@
 							tipBelow={row.order === 0 && !groups}
 							{drag}
 							setDrag={(next) => (drag = next)}
-							onhover={hover}
+							onHover={hover}
 							onToggle={toggle}
-							{onChange}
+							{onDatesChange}
 							{onSelect}
+							onKeyMove={(id, span) => void onKeyMove(id, span)}
 							{renderLabel}
 							{describe}
 						/>
@@ -248,4 +261,5 @@
 			</div>
 		</div>
 	</div>
+	<LiveRegion bind:this={live} />
 </div>

package/src/work/task-gantt.svelte.d.ts

@@ -0,0 +1,85 @@
+import type { Snippet } from "svelte";
+import type { KanbanColumn as KanbanColumnDef } from "./kanban-types.js";
+import type { GanttChange, GanttLabelContext } from "./task-types.js";
+interface Props<T> {
+    items: T[];
+    getId: (item: T) => string;
+    getTitle: (item: T) => string;
+    /**
+     * ISO date, inclusive. Null or empty means undated: with an end date alone the task
+     * starts the same day, and with neither it has no bar of its own.
+     */
+    getStart: (item: T) => string | null | undefined;
+    /** ISO date, inclusive. See `getStart`. */
+    getEnd: (item: T) => string | null | undefined;
+    /**
+     * The parent task's id; a parent with no dates of its own draws the span of the
+     * children nested under it.
+     */
+    getParent?: (item: T) => string | null | undefined;
+    /** Draws a flag at the end date instead of a bar. Milestones are not draggable. */
+    isMilestone?: (item: T) => boolean;
+    /** Parent ids that start folded. */
+    collapsed?: string[];
+    /** Shown in place of a bar for an undated task. */
+    noDatesLabel?: string;
+    /** Any CSS color for the bar. Falls back to the group hue, then the primary color. */
+    getHue?: (item: T) => string | undefined;
+    /** 0 to 1. Fills the bar from the left. */
+    getProgress?: (item: T) => number | undefined;
+    /** Ids this task waits on. Draws an arrow from each one's end to this one's start. */
+    getDependsOn?: (item: T) => string[] | undefined;
+    /** Group rows under a header, in the order given. Same shape as board columns. */
+    groups?: KanbanColumnDef[];
+    getGroup?: (item: T) => string;
+    /** Called after a bar is dragged, resized or nudged. Leave it out for a read-only chart. */
+    onDatesChange?: (id: string, change: GanttChange) => void | Promise<void>;
+    /** Called on a click or Enter that did not move the bar. */
+    onSelect?: (id: string) => void;
+    /** What a screen reader hears after an arrow key moves a bar, given its new dates. */
+    movedLabel?: (dates: string) => string;
+    /** The left column for a row. Defaults to the title. */
+    renderLabel?: Snippet<[T, GanttLabelContext]>;
+    /** First and last day shown. Default: the tasks' span, padded, starting on a Monday. */
+    from?: string;
+    to?: string;
+    /** The day the today line marks. Defaults to the viewer's today. */
+    today?: string;
+    dayWidth?: number;
+    rowHeight?: number;
+    /** Width of the task column in px. It never takes more than 40% of a narrow screen. */
+    labelWidth?: number;
+    labelHeading?: string;
+    locale?: string;
+    /** Drops the card chrome (border, radius, fill) so the chart sits flat on the page. */
+    flat?: boolean;
+    class?: string;
+}
+declare function $$render<T>(): {
+    props: Props<T>;
+    exports: {
+        scrollToToday: () => void;
+    };
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {
+        scrollToToday: () => void;
+    };
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<T> = InstanceType<typeof $$Component<T>>;
+export default $$Component;

package/src/work/task-list.svelte

@@ -1,5 +1,7 @@
 <script lang="ts" generics="T, C extends KanbanColumnDef = KanbanColumnDef">
 	import type { Snippet } from "svelte";
+	import LiveRegion from "../lib/live-region.svelte";
+	import { focusAfterRender } from "../lib/focus.js";
 	import { flip } from "svelte/animate";
 	import { cubicOut } from "svelte/easing";
 	import { durationMs } from "../lib/motion.js";
@@ -48,8 +50,12 @@
 		 * rows hold their own links and buttons.
 		 */
 		draggable?: boolean;
-		/** The screen-reader name of a row. Defaults to a hint about the keyboard move. */
+		/** The screen-reader name of a row. Defaults to the row's own text. */
 		getLabel?: (item: T) => string;
+		/** Read after a draggable row's name, as its description. */
+		moveHint?: string;
+		/** What a screen reader hears after a row moves with the keyboard. */
+		movedLabel?: (group: C) => string;
 		/** Fires when a group is folded or unfolded, with every folded id. */
 		onCollapsedChange?: (ids: string[]) => void;
 		sortKeys?: KanbanSortKey<T>[];
@@ -85,6 +91,8 @@
 		manualTiebreak,
 		draggable = true,
 		getLabel,
+		moveHint = "Press Alt plus Up or Down arrow to move between groups.",
+		movedLabel = (group) => `Moved to ${group.label}`,
 		onCollapsedChange,
 		sortKeys = [],
 		sortKey = "manual",
@@ -103,6 +111,10 @@
 
 	// svelte-ignore state_referenced_locally
 	let folded = $state(new Set(collapsed));
+	const uid = $props.id();
+	const hintId = `${uid}-hint`;
+	let listEl: HTMLDivElement | undefined = $state();
+	let live: LiveRegion | undefined = $state();
 
 	function compare(a: T, b: T): number {
 		if (sortKey === "manual") {
@@ -178,8 +190,36 @@
 		onCollapsedChange?.([...next]);
 	}
 
+	/** Unfolds a group and every group it sits in, so a row moved there can take focus. */
+	function reveal(groupId: string): void {
+		const next = new Set(folded);
+		const seen = new Set<string>();
+		let group = groups.find((g) => g.id === groupId);
+		while (group && !seen.has(group.id)) {
+			seen.add(group.id);
+			next.delete(group.id);
+			const parent = getParent?.(group);
+			group = parent ? groups.find((g) => g.id === parent) : undefined;
+		}
+		if (next.size === folded.size) return;
+		folded = next;
+		onCollapsedChange?.([...next]);
+	}
+
 	/** Alt + ArrowUp/Down sends the focused row to the end of the group above or below. */
-	function onRowKeyDown(e: KeyboardEvent, id: string): void {
+	async function onRowKeyDown(e: KeyboardEvent, id: string): Promise<void> {
+		const target = moveRow(e, id);
+		if (!target) return;
+		await target.done;
+		reveal(target.group.id);
+		void live?.announce(movedLabel(target.group));
+		await focusAfterRender(listEl, `[data-task-row="${CSS.escape(id)}"]`);
+	}
+
+	function moveRow(
+		e: KeyboardEvent,
+		id: string,
+	): { group: C; done: void | Promise<void> } | undefined {
 		if (!e.altKey || (e.key !== "ArrowUp" && e.key !== "ArrowDown")) return;
 		const item = items.find((entry) => getId(entry) === id);
 		if (!item) return;
@@ -191,21 +231,18 @@
 			const target = groups[i];
 			if (!canDrop(target.id)) continue;
 			e.preventDefault();
-			if (sortKey === "manual") {
-				const rows = sortedByGroup(target.id).filter((entry) => getId(entry) !== id);
-				const last = rows.at(-1);
-				void onMove(id, {
-					columnId: target.id,
-					...(boardOrder
-						? { boardOrder: boardOrderAt(rows, rows.length, (entry) => boardOrder(entry)) }
-						: {}),
-					beforeId: last === undefined ? null : getId(last),
-					afterId: null,
-				});
-			} else {
-				void onMove(id, { columnId: target.id });
-			}
-			return;
+			if (sortKey !== "manual") return { group: target, done: onMove(id, { columnId: target.id }) };
+			const rows = sortedByGroup(target.id).filter((entry) => getId(entry) !== id);
+			const last = rows.at(-1);
+			const done = onMove(id, {
+				columnId: target.id,
+				...(boardOrder
+					? { boardOrder: boardOrderAt(rows, rows.length, (entry) => boardOrder(entry)) }
+					: {}),
+				beforeId: last === undefined ? null : getId(last),
+				afterId: null,
+			});
+			return { group: target, done };
 		}
 	}
 </script>
@@ -254,7 +291,7 @@
 						class:tl-chevron-open={open}
 						aria-hidden="true"
 					>
-						<CaretRight weight="bold" />
+						<CaretRight aria-hidden="true" weight="bold" />
 					</span>
 				</Button>
 			{/if}
@@ -276,11 +313,13 @@
 			{/if}
 		</div>
 
-		<div class="tl-fold" class:tl-fold-open={open}>
+		<!-- inert: a folded group's rows leave the Tab order and the accessibility tree. -->
+		<div class="tl-fold" class:tl-fold-open={open} inert={!open}>
 			<div class="tl-fold-inner">
 				<div role="list" aria-label={group.label} class="flex flex-col pb-1.5">
 					{#each rows as item, index (getId(item))}
 						{@const id = getId(item)}
+						{@const rowId = `${uid}-row-${encodeURIComponent(id)}`}
 						{@const dropBefore =
 							dnd.showIndicatorBefore(group.id, id) &&
 							!dnd.isDragSource(id) &&
@@ -290,10 +329,11 @@
 						<div
 							role="listitem"
 							tabindex={draggable ? 0 : undefined}
-							aria-label={getLabel?.(item) ??
-								(draggable
-									? "Row. Press Alt plus Up or Down arrow to move between groups."
-									: undefined)}
+							id={rowId}
+							data-task-row={id}
+							aria-label={getLabel?.(item)}
+							aria-labelledby={draggable && !getLabel ? rowId : undefined}
+							aria-describedby={draggable ? hintId : undefined}
 							aria-keyshortcuts={draggable ? "Alt+ArrowUp Alt+ArrowDown" : undefined}
 							draggable={draggable ? "true" : undefined}
 							animate:flip={{ duration: () => durationMs("fast"), easing: cubicOut }}
@@ -307,7 +347,7 @@
 							ondragover={draggable
 								? (e) => dnd.onItemDragOver(e, group.id, id, idAt(rows, index + 1))
 								: undefined}
-							onkeydown={draggable ? (e) => onRowKeyDown(e, id) : undefined}
+							onkeydown={draggable ? (e) => void onRowKeyDown(e, id) : undefined}
 							style:--tl-i={Math.min(index, STAGGER_CAP)}
 							class={cn(
 								"tl-row relative mx-1.5 outline-none focus-visible:shadow-(--ring-focus)",
@@ -346,6 +386,7 @@
 {/snippet}
 
 <div
+	bind:this={listEl}
 	class={cn(
 		"task-list flex min-h-0 flex-1 flex-col overflow-y-auto",
 		flat ? "bg-card" : workLooks.panel,
@@ -366,102 +407,125 @@
 	{#each roots as group (group.id)}
 		{@render section(group, 0)}
 	{/each}
+
+	<LiveRegion bind:this={live} />
+	{#if draggable}
+		<p id={hintId} hidden>{moveHint}</p>
+	{/if}
 </div>
 
 <style>
-	.tl-group {
-		transition: background-color var(--duration-quick) var(--ease-smooth-out);
-	}
+	@layer theme, base, components, utilities;
 
-	.tl-group-active {
-		background: color-mix(in oklab, var(--tl-hue) 6%, transparent);
-	}
+	@layer components {
+		.tl-group {
+			transition: background-color var(--duration-quick) var(--ease-smooth-out);
+		}
 
-	.tl-chevron {
-		transition: rotate var(--duration-fast) var(--ease-smooth-out);
-	}
+		.tl-group-active {
+			background: color-mix(in oklab, var(--tl-hue) 6%, transparent);
+		}
 
-	.tl-chevron-open {
-		rotate: 90deg;
-	}
+		.tl-chevron {
+			transition: rotate var(--duration-fast) var(--ease-smooth-out);
+		}
 
-	/* A 0fr to 1fr track folds to any height. Padding lives inside, or 0fr never fully closes. */
-	.tl-fold {
-		display: grid;
-		grid-template-rows: 0fr;
-		opacity: 0;
-		transition:
-			grid-template-rows var(--duration-fast) var(--ease-smooth-out),
-			opacity var(--duration-quick) var(--ease-smooth-out);
-	}
+		.tl-chevron-open {
+			rotate: 90deg;
+		}
 
-	.tl-fold-open {
-		grid-template-rows: 1fr;
-		opacity: 1;
-	}
+		/* A 0fr to 1fr track folds to any height. Padding lives inside, or 0fr never fully closes. */
+		.tl-fold {
+			display: grid;
+			grid-template-rows: 0fr;
+			opacity: 0;
+			transition:
+				grid-template-rows var(--duration-fast) var(--ease-smooth-out),
+				opacity var(--duration-quick) var(--ease-smooth-out);
+		}
 
-	.tl-fold-inner {
-		min-height: 0;
-		overflow: hidden;
-	}
+		.tl-fold-open {
+			grid-template-rows: 1fr;
+			opacity: 1;
+		}
 
-	.tl-row {
-		animation: tl-row-in var(--duration-slow) var(--ease-smooth-out) backwards;
-		animation-delay: calc(var(--tl-i, 0) * var(--duration-stagger));
-		transition: background-color var(--duration-quick) var(--ease-smooth-out);
-	}
+		.tl-fold-inner {
+			min-height: 0;
+			overflow: hidden;
+		}
 
-	@media (hover: hover) and (pointer: fine) {
-		.tl-row:hover {
-			background: color-mix(in oklab, var(--color-foreground) 4%, transparent);
+		.tl-row {
+			animation: tl-row-in var(--duration-slow) var(--ease-smooth-out) backwards;
+			animation-delay: calc(var(--tl-i, 0) * var(--duration-stagger));
+			transition: background-color var(--duration-quick) var(--ease-smooth-out);
 		}
-	}
 
-	/* The drop line: a hairline in the group's hue with a dot where it starts. */
-	.tl-drop-before::before,
-	.tl-drop-end::before {
-		content: "";
-		position: absolute;
-		left: 0.5rem;
-		right: 0.5rem;
-		height: 2px;
-		background: var(--tl-hue);
-		animation: tl-line-in var(--duration-quick) var(--ease-smooth-out) both;
-	}
+		@media (hover: hover) and (pointer: fine) {
+			.tl-row:hover {
+				background: color-mix(in oklab, var(--color-foreground) 4%, transparent);
+			}
+		}
 
-	/* A ring where the line starts, so the drop point reads at a glance. */
-	.tl-drop-before::after,
-	.tl-drop-end::after {
-		content: "";
-		position: absolute;
-		left: 0.25rem;
-		width: 8px;
-		height: 8px;
-		/* A ring drawn as a gradient, so the line needs no radius or border of its own. */
-		background: radial-gradient(
-			circle closest-side,
-			var(--color-card) calc(50% - 0.5px),
-			var(--tl-hue) 50%,
-			var(--tl-hue) calc(100% - 0.5px),
-			transparent 100%
-		);
-		animation: tl-line-in var(--duration-quick) var(--ease-smooth-out) both;
-	}
+		/* The drop line: a hairline in the group's hue with a dot where it starts. */
+		.tl-drop-before::before,
+		.tl-drop-end::before {
+			content: "";
+			position: absolute;
+			left: 0.5rem;
+			right: 0.5rem;
+			height: 2px;
+			background: var(--tl-hue);
+			animation: tl-line-in var(--duration-quick) var(--ease-smooth-out) both;
+		}
 
-	.tl-drop-before::before {
-		top: -1px;
-	}
+		/* A ring where the line starts, so the drop point reads at a glance. */
+		.tl-drop-before::after,
+		.tl-drop-end::after {
+			content: "";
+			position: absolute;
+			left: 0.25rem;
+			width: 8px;
+			height: 8px;
+			/* A ring drawn as a gradient, so the line needs no radius or border of its own. */
+			background: radial-gradient(
+				circle closest-side,
+				var(--color-card) calc(50% - 0.5px),
+				var(--tl-hue) 50%,
+				var(--tl-hue) calc(100% - 0.5px),
+				transparent 100%
+			);
+			animation: tl-line-in var(--duration-quick) var(--ease-smooth-out) both;
+		}
 
-	.tl-drop-before::after {
-		top: -4px;
-	}
+		.tl-drop-before::before {
+			top: -1px;
+		}
 
-	.tl-drop-end::before {
-		top: 0;
-	}
+		.tl-drop-before::after {
+			top: -4px;
+		}
+
+		.tl-drop-end::before {
+			top: 0;
+		}
 
-	.tl-drop-end::after {
-		top: -3px;
+		.tl-drop-end::after {
+			top: -3px;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.tl-row,
+			.tl-drop-before::before,
+			.tl-drop-end::before,
+			.tl-drop-before::after,
+			.tl-drop-end::after {
+				animation: none;
+			}
+			.tl-fold,
+			.tl-chevron {
+				transition: none;
+			}
+		}
 	}
 
 	@keyframes tl-row-in {
@@ -478,18 +542,4 @@
 			transform: scaleX(0.6);
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.tl-row,
-		.tl-drop-before::before,
-		.tl-drop-end::before,
-		.tl-drop-before::after,
-		.tl-drop-end::after {
-			animation: none;
-		}
-		.tl-fold,
-		.tl-chevron {
-			transition: none;
-		}
-	}
 </style>