@atom-forge/brickee 0.0.2 → 0.0.3

package/dist/plugins/MapPreview.svelte

@@ -14,13 +14,11 @@
 	<iframe class="map" title={tr('Map: {place}', { place: String(props.q ?? '') })} {src} loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
 {/if}
 
-<style>
-	.map {
-		display: block;
-		width: 100%;
-		height: 300px;
-		margin: 0 0 1em;
-		border: 0;
-		border-radius: 10px;
-	}
-</style>
+<style>.map {
+  display: block;
+  width: 100%;
+  height: 300px;
+  margin: 0 0 1em;
+  border: 0;
+  border-radius: 10px;
+}</style>

package/dist/plugins/Table.svelte

@@ -62,6 +62,7 @@
 		Trash2
 	} from '@lucide/svelte';
 	import { tick } from 'svelte';
+	import { inline } from '../markdown';
 	import type { PluginViewProps } from '../types';
 
 	let { props = $bindable(), readonly }: PluginViewProps<TableProps> = $props();
@@ -110,7 +111,14 @@
 		};
 		addEventListener('pointermove', move);
 		addEventListener('pointerup', up);
+		stopDrag = () => {
+			removeEventListener('pointermove', move);
+			removeEventListener('pointerup', up);
+		};
 	}
+	// A table removed in the middle of a drag leaves no listener behind.
+	let stopDrag = () => {};
+	$effect(() => () => stopDrag());
 	/** The drop line of a row or column: before it, after it (the last one), or none. */
 	function dropMark(kind: 'row' | 'col', i: number, count: number) {
 		if (drag?.kind !== kind || drag.to === drag.from || drag.to === drag.from + 1) return null;
@@ -151,9 +159,38 @@
 	}
 	const setAlign = (c: number, a: Align) => set({ align: align.map((x, j) => (j === c ? a : x)) });
 
+	/**
+	 * Wraps the selected text of a cell in a mark (Ctrl+B and the like); then selects the text again, or, for a link,
+	 * the address to type over.
+	 */
+	async function mark(t: HTMLTextAreaElement, r: number, c: number, open: string, close: string, link = false) {
+		const { selectionStart: a, selectionEnd: b, value } = t;
+		const text = value.slice(a, b);
+		edit(r, c, value.slice(0, a) + open + text + close + value.slice(b));
+		await tick();
+		const cell = root.querySelector<HTMLTextAreaElement>(`textarea[data-cell="${r}:${c}"]`);
+		if (!cell) return;
+		cell.focus();
+		if (link) cell.setSelectionRange(a + open.length + text.length + 2, a + open.length + text.length + close.length - 1);
+		else cell.setSelectionRange(a + open.length, a + open.length + text.length);
+	}
+	const MARKS: Record<string, [string, string]> = { b: ['**', '**'], i: ['*', '*'], e: ['`', '`'] };
+
 	function onKey(e: KeyboardEvent, r: number, c: number) {
 		const t = e.currentTarget as HTMLTextAreaElement;
 		const last = r === rows.length - 1;
+		const k = e.key.toLowerCase();
+		if ((e.ctrlKey || e.metaKey) && !e.altKey) {
+			const m = e.shiftKey ? (k === 'x' ? (['~~', '~~'] as [string, string]) : null) : MARKS[k];
+			if (m) {
+				e.preventDefault();
+				return void mark(t, r, c, m[0], m[1]);
+			}
+			if (k === 'k' && !e.shiftKey) {
+				e.preventDefault();
+				return void mark(t, r, c, '[', '](https://)', true);
+			}
+		}
 		if (e.key === 'Enter' && !e.shiftKey) {
 			// Enter goes down a row (a new one after the last); Shift+Enter breaks the line inside the cell.
 			e.preventDefault();
@@ -199,6 +236,18 @@
 		return { update: fit, destroy: () => node.removeEventListener('input', fit) };
 	}
 
+	// The toolbar's look (Tailwind; whole class names, so Tailwind finds them): segments of small buttons.
+	const SEG = 'inline-flex items-center gap-px rounded-lg bg-muted p-0.5';
+	const LABEL = 'inline-grid place-items-center pr-1 pl-[5px] text-muted-contrast';
+	const TOOL =
+		'inline-grid h-6 min-w-[26px] cursor-pointer place-items-center rounded-md border-0 bg-transparent px-[5px] text-surface-contrast enabled:hover:bg-surface enabled:hover:shadow-[0_1px_2px_rgb(0_0_0/0.08)] disabled:cursor-default disabled:opacity-30';
+	const TOOL_ON =
+		'inline-grid h-6 min-w-[26px] cursor-pointer place-items-center rounded-md border-0 bg-surface px-[5px] text-accent shadow-[0_1px_2px_rgb(0_0_0/0.08)]';
+	const DANGER = `${TOOL} enabled:hover:text-[#dc2626]`;
+	const ADD = $derived(
+		`grid cursor-pointer place-items-center rounded-md border-0 bg-muted p-0 text-muted-contrast transition-[opacity,background] duration-[120ms] hover:bg-accent/12 hover:text-accent ${at ? 'opacity-100' : 'opacity-0 group-hover/table:opacity-100'}`
+	);
+
 	const ALIGNS: { value: Align; icon: typeof TextAlignStart; label: string }[] = [
 		{ value: 'left', icon: TextAlignStart, label: 'Align column left' },
 		{ value: 'center', icon: TextAlignCenter, label: 'Center column' },
@@ -207,41 +256,42 @@
 </script>
 
 <div
-	class="table"
-	class:editing={!!at}
+	class="table-editor group/table text-[15px] leading-[1.45]"
 	bind:this={root}
 	onfocusout={(e) => {
 		if (!root.contains(e.relatedTarget as Node)) at = null;
 	}}
 >
 	{#if !readonly}
-		<div class="bar" role="toolbar" aria-label={tr('Table')}>
+		<!-- The row and column tools of the cell being edited; when it wraps, it pushes the table down. -->
+		<div class="mb-2 flex min-h-7 flex-wrap items-center gap-1.5" role="toolbar" aria-label={tr('Table')}>
 			{#if at}
 				{@const { r, c } = at}
-				<div class="seg">
-					<span class="label" title={tr('Row')}><Rows3 size={14} /></span>
-					<button type="button" title={tr('Insert a row above')} onmousedown={(e) => e.preventDefault()} onclick={() => { insertRow(r); focusCell(r, c); }}><BetweenHorizontalStart size={15} /></button>
-					<button type="button" title={tr('Insert a row below')} onmousedown={(e) => e.preventDefault()} onclick={() => { insertRow(r + 1); focusCell(r + 1, c); }}><BetweenHorizontalEnd size={15} /></button>
-					<button type="button" class="danger" title={tr('Delete this row')} disabled={rows.length < 2} onclick={() => dropRow(r)}><Trash2 size={14} /></button>
+				<div class={SEG}>
+					<span class={LABEL} title={tr('Row')}><Rows3 size={14} /></span>
+					<button type="button" class={TOOL} title={tr('Insert a row above')} onmousedown={(e) => e.preventDefault()} onclick={() => { insertRow(r); focusCell(r, c); }}><BetweenHorizontalStart size={15} /></button>
+					<button type="button" class={TOOL} title={tr('Insert a row below')} onmousedown={(e) => e.preventDefault()} onclick={() => { insertRow(r + 1); focusCell(r + 1, c); }}><BetweenHorizontalEnd size={15} /></button>
+					<button type="button" class={DANGER} title={tr('Delete this row')} disabled={rows.length < 2} onclick={() => dropRow(r)}><Trash2 size={14} /></button>
 				</div>
-				<div class="seg">
-					<span class="label" title={tr('Column')}><Columns3 size={14} /></span>
-					<button type="button" title={tr('Insert a column left')} onmousedown={(e) => e.preventDefault()} onclick={() => { insertCol(c); focusCell(r, c); }}><BetweenVerticalStart size={15} /></button>
-					<button type="button" title={tr('Insert a column right')} onmousedown={(e) => e.preventDefault()} onclick={() => { insertCol(c + 1); focusCell(r, c + 1); }}><BetweenVerticalEnd size={15} /></button>
-					<button type="button" class="danger" title={tr('Delete this column')} disabled={width < 2} onclick={() => dropCol(c)}><Trash2 size={14} /></button>
+				<div class={SEG}>
+					<span class={LABEL} title={tr('Column')}><Columns3 size={14} /></span>
+					<button type="button" class={TOOL} title={tr('Insert a column left')} onmousedown={(e) => e.preventDefault()} onclick={() => { insertCol(c); focusCell(r, c); }}><BetweenVerticalStart size={15} /></button>
+					<button type="button" class={TOOL} title={tr('Insert a column right')} onmousedown={(e) => e.preventDefault()} onclick={() => { insertCol(c + 1); focusCell(r, c + 1); }}><BetweenVerticalEnd size={15} /></button>
+					<button type="button" class={DANGER} title={tr('Delete this column')} disabled={width < 2} onclick={() => dropCol(c)}><Trash2 size={14} /></button>
 				</div>
-				<div class="seg">
+				<div class={SEG}>
 					{#each ALIGNS as a (a.value)}
-						<button type="button" title={tr(a.label)} class:on={align[c] === a.value} onmousedown={(e) => e.preventDefault()} onclick={() => setAlign(c, a.value)}><a.icon size={15} /></button>
+						<button type="button" class={align[c] === a.value ? TOOL_ON : TOOL} title={tr(a.label)} onmousedown={(e) => e.preventDefault()} onclick={() => setAlign(c, a.value)}><a.icon size={15} /></button>
 					{/each}
 				</div>
 			{:else}
-				<span class="idle">{tr('Click a cell to edit its row and column')}</span>
+				<span class="text-[12px] text-muted-contrast">{tr('Click a cell to edit its row and column')}</span>
 			{/if}
 		</div>
 	{/if}
-	<div class="grid">
-		<div class="frame">
+	<!-- The table, with a + bar on the right (column) and below (row) that shows on hover. -->
+	<div class="grid grid-cols-[minmax(0,1fr)_18px] grid-rows-[auto_18px] gap-1">
+		<div class="overflow-x-auto rounded-[10px] border border-frame bg-surface">
 			<table class:dragging={!!drag}>
 				{#if !readonly}
 					<!-- the column grips -->
@@ -265,12 +315,16 @@
 								</td>
 							{/if}
 							{#each row as cell, c (c)}
+								{@const editing = at?.r === r && at?.c === c}
 								<td
 									class={dropMark('col', c, width) ? 'c-' + dropMark('col', c, width) : ''}
 									class:col-on={at?.c === c}
 									class:moving={drag?.kind === 'col' && drag.from === c}
 								>
+									<!-- Out of editing a cell shows its text formatted (sizing the cell, over its textarea); editing shows the
+									     markdown. -->
 									<textarea
+										class:hidden-text={!editing && !!cell.trim()}
 										rows="1"
 										value={cell}
 										{readonly}
@@ -284,6 +338,9 @@
 										onkeydown={(e) => onKey(e, r, c)}
 										onpaste={(e) => onPaste(e, r, c)}
 									></textarea>
+									{#if !editing && cell.trim()}
+										<div class="shown" style:text-align={align[c]} aria-hidden="true">{@html inline(cell)}</div>
+									{/if}
 								</td>
 							{/each}
 						</tr>
@@ -292,246 +349,166 @@
 			</table>
 		</div>
 		{#if !readonly}
-			<button type="button" class="add-col" title={tr('Add a column')} aria-label={tr('Add a column')} onclick={() => { insertCol(width); focusCell(0, width); }}><Plus size={14} /></button>
-			<button type="button" class="add-row" title={tr('Add a row')} aria-label={tr('Add a row')} onclick={() => { insertRow(rows.length); focusCell(rows.length, 0); }}><Plus size={14} /></button>
+			<button type="button" class={ADD} title={tr('Add a column')} aria-label={tr('Add a column')} onclick={() => { insertCol(width); focusCell(0, width); }}><Plus size={14} /></button>
+			<button type="button" class="col-start-1 {ADD}" title={tr('Add a row')} aria-label={tr('Add a row')} onclick={() => { insertRow(rows.length); focusCell(rows.length, 0); }}><Plus size={14} /></button>
 		{/if}
 	</div>
 </div>
 
-<style>
-	.table {
-		font: 15px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif;
-	}
-	/* The row and column tools of the cell being edited; when it wraps, it pushes the table down. */
-	.bar {
-		margin: 0 0 8px;
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 6px;
-		min-height: 28px;
-	}
-	.seg {
-		display: inline-flex;
-		align-items: center;
-		gap: 1px;
-		padding: 2px;
-		border-radius: 8px;
-		background: var(--color-muted, #f4f4f6);
-	}
-	.idle {
-		font-size: 12px;
-		color: var(--color-muted-contrast, #a0a0a8);
-	}
-	.label {
-		display: inline-grid;
-		place-items: center;
-		padding: 0 4px 0 5px;
-		color: var(--color-muted-contrast, #a0a0a8);
-	}
-	.bar button {
-		display: inline-grid;
-		place-items: center;
-		height: 24px;
-		min-width: 26px;
-		padding: 0 5px;
-		border: 0;
-		border-radius: 6px;
-		background: none;
-		color: var(--color-surface-contrast, #4b4b55);
-		cursor: pointer;
-	}
-	.bar button:hover:not(:disabled) {
-		background: var(--color-surface, #fff);
-		color: var(--color-surface-contrast, #1d1d1f);
-		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-	}
-	.bar button.on {
-		background: var(--color-surface, #fff);
-		color: #2563eb;
-		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-	}
-	.bar button.danger:hover:not(:disabled) {
-		color: #dc2626;
-	}
-	.bar button:disabled {
-		opacity: 0.3;
-		cursor: default;
-	}
-	.bar .toggle {
-		display: inline-flex;
-		gap: 5px;
-		height: 28px;
-		padding: 0 10px;
-		border: 1px solid var(--color-frame, #e5e5ea);
-		border-radius: 8px;
-		font-size: 12px;
-		font-weight: 500;
-	}
-	.bar .toggle.on {
-		border-color: color-mix(in srgb, #3b82f6 35%, transparent);
-		background: color-mix(in srgb, #3b82f6 8%, transparent);
-		box-shadow: none;
-	}
+<style>table {
+  width: 100%;
+  border-collapse: collapse;
+}
+table.dragging, table.dragging * {
+  cursor: grabbing !important;
+  user-select: none;
+}
 
-	/* The table, with a + bar on the right (column) and below (row) that shows on hover. */
-	.grid {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr) 18px;
-		grid-template-rows: auto 18px;
-		gap: 4px;
-	}
-	.frame {
-		overflow-x: auto;
-		border: 1px solid var(--color-frame, #e3e3e8);
-		border-radius: 10px;
-		background: var(--color-surface, #fff);
-	}
-	table {
-		width: 100%;
-		border-collapse: collapse;
-	}
-	/* The 1px height lets the editor inside fill the whole cell (height: 100% of the row's tallest cell). */
-	td {
-		height: 1px;
-		padding: 0;
-		border-right: 1px solid var(--color-frame, #ececf0);
-		border-bottom: 1px solid var(--color-frame, #ececf0);
-		vertical-align: top;
-		transition: background 0.1s;
-	}
-	td:last-child {
-		border-right: 0;
-	}
-	tr:last-child td {
-		border-bottom: 0;
-	}
-	tr.row-on td,
-	td.col-on {
-		background: color-mix(in srgb, #3b82f6 4%, transparent);
-	}
-	/* The header and the footer as on the site: a band above, the sums bold on grey behind a thicker line. */
-	tr.h-top td:not(.rgrip) {
-		background: var(--color-muted, #f1f1f4);
-		border-bottom: 2px solid var(--color-frame, #d8d8de);
-	}
-	tr.h-bottom td:not(.rgrip) {
-		background: var(--color-muted, #f1f1f4);
-		border-top: 2px solid var(--color-frame, #d8d8de);
-	}
-	textarea {
-		display: block;
-		width: 100%;
-		height: 100%;
-		min-width: 6em;
-		box-sizing: border-box;
-		padding: 8px 11px;
-		border: 0;
-		border-radius: 0;
-		background: none;
-		resize: none;
-		font: inherit;
-		color: inherit;
-		outline: none;
-	}
-	textarea::placeholder {
-		color: var(--color-muted-contrast, #b8b8c0);
-	}
-	textarea:focus {
-		background: var(--color-surface, #fff);
-		box-shadow: inset 0 0 0 2px #3b82f6;
-	}
-	tr.h-top textarea {
-		font-weight: 600;
-		font-size: 13px;
-		letter-spacing: 0.04em;
-		text-transform: uppercase;
-		color: var(--color-surface-contrast, #3a3a44);
-	}
-	tr.h-bottom textarea {
-		font-weight: 600;
-		color: var(--color-surface-contrast, #1d1d1f);
-	}
-	/* grips: a thin row above the columns and a thin column before the rows, shown on hover */
-	td.corner,
-	td.rgrip {
-		width: 14px;
-		border-right: 1px solid var(--color-frame, #ececf0);
-	}
-	tr.grips td {
-		height: 14px;
-		border-bottom: 1px solid var(--color-frame, #ececf0);
-	}
-	.grip {
-		display: grid;
-		place-items: center;
-		width: 100%;
-		height: 100%;
-		min-height: 14px;
-		padding: 0;
-		border: 0;
-		background: none;
-		color: var(--color-muted-contrast, #b0b0b8);
-		cursor: grab;
-		opacity: 0;
-		touch-action: none;
-		transition: opacity 0.12s;
-	}
-	.table:hover .grip,
-	table.dragging .grip {
-		opacity: 1;
-	}
-	.grip:hover {
-		color: #2563eb;
-		background: color-mix(in srgb, #3b82f6 9%, transparent);
-	}
-	table.dragging,
-	table.dragging * {
-		cursor: grabbing !important;
-		user-select: none;
-	}
-	.moving {
-		opacity: 0.45;
-	}
-	tr.before td {
-		box-shadow: inset 0 2px 0 #3b82f6;
-	}
-	tr.after td {
-		box-shadow: inset 0 -2px 0 #3b82f6;
-	}
-	td.before,
-	td.c-before {
-		box-shadow: inset 2px 0 0 #3b82f6;
-	}
-	td.after,
-	td.c-after {
-		box-shadow: inset -2px 0 0 #3b82f6;
-	}
-	.add-col,
-	.add-row {
-		display: grid;
-		place-items: center;
-		padding: 0;
-		border: 0;
-		border-radius: 6px;
-		background: var(--color-muted, #f4f4f6);
-		color: var(--color-muted-contrast, #8a8a94);
-		cursor: pointer;
-		opacity: 0;
-		transition: opacity 0.12s, background 0.12s;
-	}
-	.add-row {
-		grid-column: 1;
-	}
-	.table:hover .add-col,
-	.table:hover .add-row,
-	.table.editing .add-col,
-	.table.editing .add-row {
-		opacity: 1;
-	}
-	.add-col:hover,
-	.add-row:hover {
-		background: color-mix(in srgb, #3b82f6 12%, transparent);
-		color: #2563eb;
-	}
-</style>
+td {
+  height: 1px;
+  padding: 0;
+  border-right: 1px solid var(--color-frame, #ececf0);
+  border-bottom: 1px solid var(--color-frame, #ececf0);
+  vertical-align: top;
+  transition: background 0.1s;
+}
+td:last-child {
+  border-right: 0;
+}
+
+tr:last-child td {
+  border-bottom: 0;
+}
+tr.row-on td,
+tr td.col-on {
+  background: color-mix(in srgb, var(--color-accent, #3b82f6) 4%, transparent);
+}
+tr.h-top td:not(.rgrip) {
+  background: var(--color-muted, #f1f1f4);
+  border-bottom: 2px solid var(--color-frame, #d8d8de);
+}
+tr.h-bottom td:not(.rgrip) {
+  background: var(--color-muted, #f1f1f4);
+  border-top: 2px solid var(--color-frame, #d8d8de);
+}
+tr.h-top textarea, tr.h-top .shown {
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-surface-contrast, #3a3a44);
+}
+tr.h-bottom textarea, tr.h-bottom .shown {
+  font-weight: 600;
+  color: var(--color-surface-contrast, #1d1d1f);
+}
+
+td {
+  position: relative;
+}
+
+textarea {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 6em;
+  box-sizing: border-box;
+  padding: 8px 11px;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  resize: none;
+  font: inherit;
+  color: inherit;
+  outline: none;
+}
+textarea::placeholder {
+  color: var(--color-muted-contrast, #b8b8c0);
+}
+textarea:focus {
+  background: var(--color-surface, #fff);
+  box-shadow: inset 0 0 0 2px var(--color-accent, #3b82f6);
+}
+textarea.hidden-text {
+  position: absolute;
+  inset: 0;
+  min-height: 0 !important;
+  color: transparent;
+}
+
+.shown {
+  position: relative;
+  box-sizing: border-box;
+  min-width: 6em;
+  padding: 8px 11px;
+  overflow: hidden;
+  pointer-events: none;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.shown :global(code) {
+  padding: 0.1em 0.35em;
+  border-radius: 4px;
+  background: rgba(120, 120, 140, 0.14);
+  font: 0.88em ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.shown :global(a) {
+  color: var(--color-accent, #3b82f6);
+  text-decoration: underline;
+}
+
+td.corner,
+td.rgrip {
+  width: 14px;
+  border-right: 1px solid var(--color-frame, #ececf0);
+}
+
+tr.grips td {
+  height: 14px;
+  border-bottom: 1px solid var(--color-frame, #ececf0);
+}
+
+.grip {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  min-height: 14px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--color-muted-contrast, #b0b0b8);
+  cursor: grab;
+  opacity: 0;
+  touch-action: none;
+  transition: opacity 0.12s;
+}
+.table-editor:hover .grip, table.dragging .grip {
+  opacity: 1;
+}
+.grip:hover {
+  color: var(--color-accent, #3b82f6);
+  background: color-mix(in srgb, var(--color-accent, #3b82f6) 9%, transparent);
+}
+
+.moving {
+  opacity: 0.45;
+}
+
+tr.before td {
+  box-shadow: inset 0 2px 0 var(--color-accent, #3b82f6);
+}
+
+tr.after td {
+  box-shadow: inset 0 -2px 0 var(--color-accent, #3b82f6);
+}
+
+td.before,
+td.c-before {
+  box-shadow: inset 2px 0 0 var(--color-accent, #3b82f6);
+}
+
+td.after,
+td.c-after {
+  box-shadow: inset -2px 0 0 var(--color-accent, #3b82f6);
+}</style>

package/dist/plugins/TablePreview.svelte

@@ -32,31 +32,31 @@
 	</div>
 {/if}
 
-<style>
-	/* Wide tables scroll on their own instead of the page. */
-	.wrap {
-		margin: 0 0 1em;
-		overflow-x: auto;
-	}
-	table {
-		width: 100%;
-		border-collapse: collapse;
-		font: 15px/1.5 system-ui, sans-serif;
-	}
-	th,
-	td {
-		padding: 0.45em 0.7em;
-		border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
-		text-align: left;
-		vertical-align: top;
-	}
-	th {
-		font-weight: 600;
-	}
-	th.top {
-		border-bottom-width: 2px;
-	}
-	th.bottom {
-		border-top: 2px solid color-mix(in srgb, currentColor 22%, transparent);
-	}
-</style>
+<style>.wrap {
+  margin: 0 0 1em;
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font: 15px/1.5 system-ui, sans-serif;
+}
+
+th,
+td {
+  padding: 0.45em 0.7em;
+  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+  text-align: left;
+  vertical-align: top;
+}
+
+th {
+  font-weight: 600;
+}
+th.top {
+  border-bottom-width: 2px;
+}
+th.bottom {
+  border-top: 2px solid color-mix(in srgb, currentColor 22%, transparent);
+}</style>