@heyramzi/ui 2.24.0 → 3.1.0

package/src/components/star-rating-input/star-rating-input.svelte

@@ -12,8 +12,9 @@
 		lg: "size-7",
 	};
 
+	// Side by side stars can't overlap, so a 24px target (WCAG 2.5.8) means a 24px pitch.
 	const HIT_SIZE: Record<StarRatingSize, string> = {
-		sm: "p-0.5",
+		sm: "p-1",
 		lg: "p-1",
 	};
 
@@ -22,6 +23,7 @@
 </script>
 
 <script lang="ts">
+	import { RatingGroup } from "bits-ui";
 	import { Star } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
 
@@ -38,14 +40,15 @@
 		disabled?: boolean;
 		/** Form field name for native submission. When set, a hidden input is rendered. */
 		name?: string;
-		/** ARIA label for the radiogroup. */
+		/** What is rated, like "Rate the delivery". The value is added for a screen reader. */
 		ariaLabel?: string;
 		/** Per-step descriptive labels (length must equal max). */
 		labels?: readonly string[];
 		/** Show the label of the currently hovered/selected step beside the stars. */
 		showLabel?: boolean;
 		class?: string;
-		onchange?: (value: number) => void;
+		/** Called with the new rating after a pick. */
+		onValueChange?: (value: number) => void;
 	}
 
 	let {
@@ -59,31 +62,24 @@
 		labels,
 		showLabel = false,
 		class: className,
-		onchange,
+		onValueChange,
 	}: Props = $props();
 
-	let hover = $state(0);
 	/** Held for the length of the pop, then dropped so the next pick can replay it. */
 	let popping = $state(false);
 	let popTimer: ReturnType<typeof setTimeout> | undefined;
-	let displayed = $derived(hover || value);
 	let starSize = $derived(STAR_SIZE[size]);
 	let hitSize = $derived(HIT_SIZE[size]);
-	let groupAriaLabel = $derived(ariaLabel ?? `Rating, ${max} stars`);
-	let labelText = $derived(
-		displayed > 0 && labels && labels.length >= displayed ? labels[displayed - 1] : "",
-	);
-
-	function buttonAriaLabel(step: number): string {
-		const stepLabel = labels?.[step - 1];
-		const base = `${step} of ${max}`;
-		return stepLabel ? `${base} (${stepLabel})` : base;
+	let subject = $derived(ariaLabel ?? "Rating");
+
+	function valueText(rating: number): string {
+		if (rating <= 0) return "No rating";
+		const label = labels?.[rating - 1];
+		return `${rating} of ${max} stars${label ? `, ${label}` : ""}`;
 	}
 
-	function setRating(step: number) {
-		if (readonly || disabled) return;
-		value = step;
-		onchange?.(step);
+	function picked(next: number) {
+		onValueChange?.(next);
 
 		// Drop the class before re-adding it, or a second pick inside the animation
 		// window finds it already set and nothing replays.
@@ -94,134 +90,168 @@
 			popTimer = setTimeout(() => (popping = false), POP_WINDOW_MS);
 		});
 	}
-
-	function handleEnter(step: number) {
-		if (readonly || disabled) return;
-		hover = step;
-	}
-
-	function handleLeave() {
-		if (readonly || disabled) return;
-		hover = 0;
-	}
 </script>
 
 <!-- One star, drawn once. It used to be written twice, once per branch, and the
      two copies had already drifted apart on the glow. -->
-{#snippet star(step: number)}
+{#snippet star(filled: boolean)}
 	<Star
-		class={cn("star", starSize, step <= displayed && "is-filled")}
-		weight={step <= displayed ? "fill" : "regular"}
+		aria-hidden="true"
+		class={cn("star", starSize, filled && "is-filled")}
+		weight={filled ? "fill" : "regular"}
 	/>
 {/snippet}
 
-<div class={cn("rating", `rating-${size}`, className)}>
-	<div
-		class={cn("stars", popping && "is-popping")}
-		role={readonly ? "img" : "radiogroup"}
-		aria-label={groupAriaLabel}
-		onmouseleave={handleLeave}
-	>
-		{#each Array(max) as _, i (i)}
-			{@const step = i + 1}
-			{#if readonly}
-				<span class={cn("hit", hitSize)}>{@render star(step)}</span>
-			{:else}
-				<button
-					type="button"
-					role="radio"
-					aria-checked={value === step}
-					aria-label={buttonAriaLabel(step)}
-					{disabled}
-					data-on={step <= value}
-					onclick={() => setRating(step)}
-					onmouseenter={() => handleEnter(step)}
-					onfocus={() => handleEnter(step)}
-					onblur={handleLeave}
-					style:--pop-delay="{i * 40}ms"
-					class={cn("hit hit-button", hitSize, disabled && "is-disabled")}
-				>
-					{@render star(step)}
-				</button>
-			{/if}
-		{/each}
-	</div>
-
-	{#if showLabel && labelText}
-		<span class="rating-caption">{labelText}</span>
+{#snippet caption(shown: number)}
+	{#if showLabel && shown > 0 && labels?.[shown - 1]}
+		<span class="rating-caption">{labels[shown - 1]}</span>
 	{/if}
+{/snippet}
 
-	{#if name}
-		<input type="hidden" {name} {value} />
+<!-- Bits UI's RatingGroup is the WAI-ARIA rating slider: one Tab stop, arrows, Home to clear, End, digits. -->
+<div class={cn("rating", `rating-${size}`, className)}>
+	{#if readonly}
+		<div class="stars" role="img" aria-label="{subject}, {valueText(value)}">
+			{#each Array(max) as _, i (i)}
+				<span class={cn("hit", hitSize)}>{@render star(i < value)}</span>
+			{/each}
+		</div>
+		{@render caption(value)}
+		{#if name}
+			<input type="hidden" {name} {value} />
+		{/if}
+	{:else}
+		<RatingGroup.Root
+			bind:value
+			{max}
+			{disabled}
+			{name}
+			aria-label={subject}
+			aria-valuetext={valueText}
+			onValueChange={picked}
+			class={cn("stars stars-input", popping && "is-popping", disabled && "is-disabled")}
+		>
+			{#snippet children({ items })}
+				{#each items as item (item.index)}
+					<RatingGroup.Item
+						index={item.index}
+						data-on={item.index < value}
+						style="--pop-delay: {item.index * 40}ms"
+						class={cn("hit hit-button", hitSize)}
+					>
+						{@render star(item.state === "active")}
+					</RatingGroup.Item>
+				{/each}
+				{@render caption(items.filter((item) => item.state === "active").length)}
+			{/snippet}
+		</RatingGroup.Root>
 	{/if}
 </div>
 
 <style>
-	.rating {
-		--like-pop: var(--duration-medium);
-		--like-pop-ease: var(--ease-smooth-out);
-		--like-fill: var(--duration-quick);
-		--like-ease: var(--ease-smooth-out);
-
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-	}
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.rating {
+			--like-pop: var(--duration-medium);
+			--like-pop-ease: var(--ease-smooth-out);
+			--like-fill: var(--duration-quick);
+			--like-ease: var(--ease-smooth-out);
+
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+		}
 
-	.stars {
-		display: flex;
-		align-items: center;
-	}
+		.rating :global(.stars) {
+			display: flex;
+			align-items: center;
+		}
 
-	.hit {
-		display: inline-flex;
-		border-radius: var(--radius-sm);
-	}
+		.rating :global(.hit) {
+			display: inline-flex;
+			border-radius: var(--radius-sm);
+		}
 
-	.hit-button {
-		transition: transform var(--duration-quick, 150ms) var(--ease-smooth-out, ease);
-	}
+		.rating :global(.hit-button) {
+			transition: transform var(--duration-quick, 150ms) var(--ease-smooth-out, ease);
+		}
 
-	.hit-button:focus-visible {
-		outline: none;
-		box-shadow: 0 0 0 2px var(--color-ring);
-	}
+		.rating :global(.stars-input) {
+			border-radius: var(--radius-sm);
+		}
 
-	@media (hover: hover) and (pointer: fine) {
-		.hit-button:not(.is-disabled):hover {
-			transform: scale(1.1);
+		.rating :global(.stars-input:focus-visible) {
+			outline: none;
+			box-shadow: 0 0 0 2px var(--color-ring);
 		}
-	}
 
-	.hit-button:not(.is-disabled):active {
-		transform: scale(0.95);
-	}
+		@media (hover: hover) and (pointer: fine) {
+			.rating :global(.stars-input:not(.is-disabled) .hit-button:hover) {
+				transform: scale(1.1);
+			}
+		}
 
-	.is-disabled {
-		cursor: not-allowed;
-		opacity: 0.6;
-	}
+		.rating :global(.stars-input:not(.is-disabled) .hit-button:active) {
+			transform: scale(0.95);
+		}
 
-	.rating :global(.star) {
-		color: var(--color-border);
-		transition: color var(--like-fill) var(--like-ease);
-	}
+		.rating :global(.is-disabled) {
+			cursor: not-allowed;
+			opacity: 0.6;
+		}
 
-	.rating :global(.star.is-filled) {
-		color: var(--color-warning-400);
-	}
+		.rating :global(.star) {
+			color: var(--color-border);
+			transition: color var(--like-fill) var(--like-ease);
+		}
 
-	/* The glow is the size's business, not a prop: it belongs to the ask, where
-	   the stars are large enough to carry it, and it turned to mud at 16px. */
-	.rating-lg :global(.star.is-filled) {
-		filter: drop-shadow(0 0 4px color-mix(in oklab, var(--color-warning-400) 45%, transparent));
-	}
+		.rating :global(.star.is-filled) {
+			color: var(--color-warning-400);
+		}
+
+		/* The glow is the size's business, not a prop: it belongs to the ask, where
+		   the stars are large enough to carry it, and it turned to mud at 16px. */
+		.rating-lg :global(.star.is-filled) {
+			filter: drop-shadow(0 0 4px color-mix(in oklab, var(--color-warning-400) 45%, transparent));
+		}
+
+		/* transitions.dev like-button pop. Every selected star pops, left to right,
+		   as one gesture. A class on the group drives it, since rebuilding the row
+		   would drop keyboard focus. */
+		.rating :global(.is-popping .hit-button[data-on="true"]) {
+			animation: t-like-pop var(--like-pop) var(--like-pop-ease) var(--pop-delay, 0ms);
+		}
+
+		/* Inside the slider the caption sits in the stars' row, so it keeps the outer gap itself. */
+		.rating :global(.stars-input .rating-caption) {
+			margin-inline-start: 0.25rem;
+		}
+
+		.rating-caption {
+			font-size: 0.75rem;
+			font-weight: 500;
+			font-variant-numeric: tabular-nums;
+			color: var(--color-muted-foreground);
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.rating :global(.hit-button),
+			.rating :global(.is-popping .hit-button[data-on="true"]) {
+				animation: none;
+				transition: none;
+			}
+
+			.rating :global(.stars-input:not(.is-disabled) .hit-button:active) {
+				transform: none;
+			}
 
-	/* transitions.dev like-button pop. Every selected star pops, left to right,
-	   as one gesture. A class on the group drives it, since rebuilding the row
-	   would drop keyboard focus. */
-	.is-popping .hit-button[data-on="true"] {
-		animation: t-like-pop var(--like-pop) var(--like-pop-ease) var(--pop-delay, 0ms);
+			@media (hover: hover) and (pointer: fine) {
+				.rating :global(.stars-input:not(.is-disabled) .hit-button:hover) {
+					transform: none;
+				}
+			}
+		}
 	}
 
 	@keyframes t-like-pop {
@@ -235,29 +265,4 @@
 			transform: scale(1);
 		}
 	}
-
-	.rating-caption {
-		font-size: 0.75rem;
-		font-weight: 500;
-		font-variant-numeric: tabular-nums;
-		color: var(--color-muted-foreground);
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.hit-button,
-		.is-popping .hit-button[data-on="true"] {
-			animation: none;
-			transition: none;
-		}
-
-		.hit-button:not(.is-disabled):active {
-			transform: none;
-		}
-
-		@media (hover: hover) and (pointer: fine) {
-			.hit-button:not(.is-disabled):hover {
-				transform: none;
-			}
-		}
-	}
 </style>

package/src/components/star-rating-input/star-rating-input.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Two sizes, picked by the job: `sm` reads a value back in a row or cell,
+ * `lg` is the ask.
+ */
+export type StarRatingSize = "sm" | "lg";
+interface Props {
+    /** Current rating value (0 = unrated). */
+    value: number;
+    /** Maximum rating. Defaults to 5. */
+    max?: number;
+    /** Visual size of each star. `sm` reads back, `lg` asks. */
+    size?: StarRatingSize;
+    /** Render as static display, no hover or click. */
+    readonly?: boolean;
+    /** Disable interaction. */
+    disabled?: boolean;
+    /** Form field name for native submission. When set, a hidden input is rendered. */
+    name?: string;
+    /** What is rated, like "Rate the delivery". The value is added for a screen reader. */
+    ariaLabel?: string;
+    /** Per-step descriptive labels (length must equal max). */
+    labels?: readonly string[];
+    /** Show the label of the currently hovered/selected step beside the stars. */
+    showLabel?: boolean;
+    class?: string;
+    /** Called with the new rating after a pick. */
+    onValueChange?: (value: number) => void;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "value">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/star-rating-input/star-rating-input.test.ts

@@ -0,0 +1,90 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it, vi } from "vite-plus/test";
+import StarRatingInput from "./star-rating-input.svelte";
+
+function render(props: Record<string, unknown> = {}) {
+  const onValueChange = vi.fn();
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(StarRatingInput, { target, props: { value: 0, onValueChange, ...props } });
+  flushSync();
+  const stars = target.querySelector<HTMLElement>(".stars");
+  if (!stars) throw new Error("StarRatingInput rendered no stars");
+  const key = (k: string) => {
+    stars.dispatchEvent(new KeyboardEvent("keydown", { key: k, bubbles: true, cancelable: true }));
+    flushSync();
+  };
+  return {
+    stars,
+    onValueChange,
+    key,
+    done: () => {
+      void unmount(app);
+      target.remove();
+    },
+  };
+}
+
+// The 10 Nov audit: arrows did nothing, zero was out of reach, and a read-only name left out the value.
+describe("StarRatingInput keyboard", () => {
+  it("is one slider from 0 to max that arrows step through", () => {
+    const { stars, onValueChange, key, done } = render({ value: 2 });
+    expect(stars.getAttribute("role")).toBe("slider");
+    expect(stars.tabIndex).toBe(0);
+    expect(stars.getAttribute("aria-valuemin")).toBe("0");
+    expect(stars.getAttribute("aria-valuemax")).toBe("5");
+    key("ArrowRight");
+    expect(stars.getAttribute("aria-valuenow")).toBe("3");
+    key("ArrowLeft");
+    key("ArrowDown");
+    expect(stars.getAttribute("aria-valuenow")).toBe("1");
+    expect(onValueChange.mock.calls.map(([v]) => v)).toEqual([3, 2, 1]);
+    done();
+  });
+
+  it("clears to zero with Home, and End goes to max", () => {
+    const { stars, onValueChange, key, done } = render({ value: 4 });
+    key("Home");
+    expect(stars.getAttribute("aria-valuenow")).toBe("0");
+    expect(stars.getAttribute("aria-valuetext")).toBe("No rating");
+    expect(onValueChange).toHaveBeenLastCalledWith(0);
+    key("End");
+    expect(stars.getAttribute("aria-valuenow")).toBe("5");
+    done();
+  });
+
+  it("clears to zero when the only lit star is clicked again", () => {
+    const { stars, onValueChange, done } = render({ value: 1 });
+    stars.querySelector<HTMLElement>("[data-value='1']")?.click();
+    flushSync();
+    expect(stars.getAttribute("aria-valuenow")).toBe("0");
+    expect(onValueChange).toHaveBeenLastCalledWith(0);
+    done();
+  });
+
+  it("reads the value and its label as the value text", () => {
+    const labels = ["Poor", "Fair", "Good", "Very good", "Excellent"];
+    const { stars, key, done } = render({ value: 3, labels, ariaLabel: "Rate the delivery" });
+    expect(stars.getAttribute("aria-label")).toBe("Rate the delivery");
+    expect(stars.getAttribute("aria-valuetext")).toBe("3 of 5 stars, Good");
+    key("4");
+    expect(stars.getAttribute("aria-valuetext")).toBe("4 of 5 stars, Very good");
+    done();
+  });
+
+  it("ignores keys while disabled and leaves the Tab order", () => {
+    const { stars, onValueChange, key, done } = render({ value: 2, disabled: true });
+    expect(stars.tabIndex).toBe(-1);
+    expect(stars.getAttribute("aria-disabled")).toBe("true");
+    key("ArrowRight");
+    expect(onValueChange).not.toHaveBeenCalled();
+    done();
+  });
+
+  it("names a read-only rating with its value", () => {
+    const { stars, done } = render({ value: 3, readonly: true });
+    expect(stars.getAttribute("role")).toBe("img");
+    expect(stars.getAttribute("aria-label")).toBe("Rating, 3 of 5 stars");
+    done();
+  });
+});

package/src/components/svg/svg.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    src: string;
+    class?: string;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/table-view/table-view.svelte

@@ -18,6 +18,7 @@
 	import { Checkbox } from "../../shadcn/checkbox/index.js";
 	import { SortableHead, TableSkeleton } from "../data-table/index.js";
 	import { toggleSort, type SortState } from "../data-table/data-table.js";
+	import { MENU_KEYS, openMenuFromKey } from "../data-table/menu-key.js";
 
 	// =========================
 	// TYPES
@@ -55,7 +56,7 @@
 		selected?: Set<string>;
 		selectAllLabel?: string;
 		selectRowLabel?: (row: Row) => string;
-		/** The items of a right-click menu for one row: `ContextMenu.Item`s. */
+		/** The items of a row menu: `ContextMenu.Item`s. Right-click, a long press, Shift+F10 or the ContextMenu key opens it. */
 		rowMenu?: Snippet<[Row]>;
 		/** Rows that return the same key sit under one header row, and `null` rows sit with no header. Order `rows` so a group is contiguous. */
 		group?: (row: Row) => string | null;
@@ -67,7 +68,7 @@
 		collapsed?: Set<string>;
 		/** Draws a column head its own way, an icon or a colour. Print `column.label` for the plain case. */
 		head?: Snippet<[TableColumn<Row>]>;
-		/** The row opens in place. Click or Enter on the row, unless the target is a link, button or input inside it. */
+		/** The row opens in place, from a button over the row named like the row link. */
 		onRowClick?: (row: Row) => void;
 		/** Whether a row shows its `subRow`. */
 		expanded?: (row: Row) => boolean;
@@ -121,7 +122,9 @@
 	// =========================
 	// DERIVED
 	// =========================
-	let span = $derived(columns.length + (selectable ? 1 : 0));
+	// A row that opens has a last cell for its link or button.
+	let opens = $derived(Boolean(rowHref || onRowClick));
+	let span = $derived(columns.length + (selectable ? 1 : 0) + (opens ? 1 : 0));
 	// WHY a floor from the columns: with none, a 390px panel squeezed a text column until it broke
 	// "Handover" mid-word. A column hidden on small screens doesn't count, since it's gone there.
 	let floor = $derived.by(() => {
@@ -212,13 +215,6 @@
 		onRowClick?.(row);
 	}
 
-	function rowKeydown(event: KeyboardEvent, row: Row) {
-		if (event.target !== event.currentTarget) return;
-		if (event.key !== "Enter" && event.key !== " ") return;
-		event.preventDefault();
-		onRowClick?.(row);
-	}
-
 	function linkClick(event: MouseEvent, row: Row) {
 		if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
 			return;
@@ -268,7 +264,13 @@
 		<ContextMenu.Root>
 			<ContextMenu.Trigger>
 				{#snippet child({ props })}
-					{@render dataRow(row, props)}
+					<!-- A row with no link or button of its own takes focus itself, so the menu keys reach it. -->
+					{@render dataRow(row, {
+						...props,
+						tabindex: rowHref?.(row) || onRowClick ? props.tabindex : 0,
+						onkeydown: openMenuFromKey,
+						"aria-keyshortcuts": MENU_KEYS,
+					})}
 				{/snippet}
 			</ContextMenu.Trigger>
 			<ContextMenu.Content class="w-48">
@@ -286,16 +288,14 @@
 	<Table.Row
 		{...triggerProps}
 		data-state={isSelected ? "selected" : undefined}
-		tabindex={onRowClick ? 0 : undefined}
 		onclick={onRowClick ? (event: MouseEvent) => rowClick(event, row) : undefined}
-		onkeydown={onRowClick ? (event: KeyboardEvent) => rowKeydown(event, row) : undefined}
 		class={cn(
 			// Rows, not a card per row (DESIGN.md rule 19): a hairline under each and a flat
 			// hover tint. The atom's row lifts; this one does not.
 			"border-b border-border/70 last:border-b-0 hover:translate-y-0 hover:bg-foreground/3 hover:shadow-none",
-			href && "relative t-press active:bg-foreground/6",
-			onRowClick &&
-				"t-press active:bg-foreground/6 cursor-pointer outline-none focus-visible:shadow-(--ring-focus-inset)",
+			(href || onRowClick) && "relative t-press active:bg-foreground/6",
+			onRowClick && "cursor-pointer",
+			rowMenu && "outline-none focus-visible:shadow-(--ring-focus-inset)",
 			rowClass?.(row),
 		)}
 	>
@@ -319,11 +319,23 @@
 					class="absolute inset-0 z-0 outline-none focus-visible:shadow-(--ring-focus-inset)"
 				></a>
 			</td>
+		{:else if onRowClick}
+			<!-- The same overlay as a button, so a screen reader calls the row a control. -->
+			<td class="p-0">
+				<button
+					type="button"
+					aria-label={linkName(row)}
+					onclick={() => onRowClick(row)}
+					class="absolute inset-0 z-0 cursor-pointer outline-none focus-visible:shadow-(--ring-focus-inset)"
+				></button>
+			</td>
+		{:else if opens}
+			<td class="p-0"></td>
 		{/if}
 	</Table.Row>
 	{#if subRow && expanded?.(row)}
 		<Table.Row class="bg-foreground/2 hover:bg-foreground/2 hover:translate-y-0 hover:shadow-none">
-			<Table.Cell colspan={span + (rowHref ? 1 : 0)} class="whitespace-normal">
+			<Table.Cell colspan={span} class="whitespace-normal">
 				{@render subRow(row)}
 			</Table.Cell>
 		</Table.Row>
@@ -382,7 +394,7 @@
 						</Table.Head>
 					{/if}
 				{/each}
-				{#if rowHref}
+				{#if opens}
 					<th class="w-0 p-0"><span class="sr-only">Open</span></th>
 				{/if}
 			</Table.Row>
@@ -399,11 +411,7 @@
 							<Table.Row
 								class="bg-foreground/4 hover:translate-y-0 hover:bg-foreground/4 hover:shadow-none"
 							>
-								<Table.Head
-									colspan={span + (rowHref ? 1 : 0)}
-									scope="colgroup"
-									class="text-foreground h-8 p-0"
-								>
+								<Table.Head colspan={span} scope="colgroup" class="text-foreground h-8 p-0">
 									{#if collapsible}
 										<button
 											type="button"
@@ -442,16 +450,14 @@
 					{/each}
 					{#if rows.length === 0 && empty}
 						<Table.Row class="hover:bg-transparent hover:translate-y-0 hover:shadow-none">
-							<Table.Cell colspan={span + (rowHref ? 1 : 0)} class="whitespace-normal"
-								>{@render empty()}</Table.Cell
-							>
+							<Table.Cell colspan={span} class="whitespace-normal">{@render empty()}</Table.Cell>
 						</Table.Row>
 					{/if}
 				</Table.Body>
 			{/if}
 			{#if trailing}
 				<tbody>
-					<tr><td colspan={span + (rowHref ? 1 : 0)} class="p-0">{@render trailing()}</td></tr>
+					<tr><td colspan={span} class="p-0">{@render trailing()}</td></tr>
 				</tbody>
 			{/if}
 		{/if}
@@ -460,7 +466,7 @@
 				<Table.Row>
 					{#if selectable}<Table.Cell></Table.Cell>{/if}
 					{@render body(footer)}
-					{#if rowHref}<td></td>{/if}
+					{#if opens}<td></td>{/if}
 				</Table.Row>
 			</Table.Footer>
 		{/if}