Some additional markup behaviour

src/system-selectors.css

@@ -43,6 +43,9 @@
 			}
 		}
 	}
+	body > footer {
+		border-block-start: thin solid currentcolor;
+	}
 
 	body > :is(header, main, footer):not(:has(*)) {
 		display: none;
@@ -302,12 +305,13 @@
 	}
 
 	table {
+		display: block;
+		overflow-x: auto;
 		border-collapse: collapse;
 		width: 100%;
 		font-family: var(--system-font-family-data);
 		font-size: smaller;
 	}
-
 	td,
 	th {
 		border: var(--system-stroke-thin) solid var(--system-stroke-color);
@@ -386,7 +390,17 @@
 		max-inline-size: 100%;
 		block-size: auto;
 	}
-
+	main :is(img, picture, svg) {
+		float: inline-end;
+		margin-inline-start: var(--system-spacing-main-inline);
+		max-inline-size: 30cqw;
+	}
+	@container --content (width < 42ch) {
+		main :is(img, picture, svg) {
+			width: 100%;
+			max-inline-size: unset;
+		}
+	}
 	@media (prefers-reduced-motion: reduce) {
 		*,
 		*::before,

style-api.html

@@ -24,11 +24,8 @@ <h1>A style api to make system.css your own</h1>
 			<!-- <pre><code>--system-cs-state</code></pre> -->
 			<details>
 				<summary>System Colors</summary>
-				<h3>heading</h3>
-				<p>
-					A number of system values don't work well in dark mode. With <code>color-mix()</code> we create
-					overrides that are easy to maintain.
-				</p>
+				<h3>Colour mixing</h3>
+				<p>With <code>color-mix()</code> we create light and dark mode overrides that are easy to maintain.</p>
 
 				<pre><code>--system-canvas: color-mix(
   in oklab, 
@@ -74,7 +71,7 @@ <h3>heading</h3>
 						</tr>
 						<tr>
 							<td>--system-canvas-text</td>
-							<td>--system-field</td>
+							<td>CanvasText</td>
 						</tr>
 						<tr>
 							<td>--system-field</td>
@@ -122,6 +119,8 @@ <h3>heading</h3>
 						</tr>
 					</tbody>
 				</table>
+				<h3>Browser Bugs</h3>
+				<p>A number of system values don't work well in dark mode.</p>
 			</details>
 			<!--
 			<details>