@allons-y/webc-patterns 0.0.0-stage → 0.1.0-beta.1

package/components/norn-head.webc

@@ -0,0 +1,59 @@
+<!---
+/*
+ * SPDX-License-Identifier: MPL-2.0
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+--->
+<script webc:setup>
+/** The default theme colors: `surface.base` from tokens.json, written out because a `<meta>` can't read a custom property. */
+const SURFACE = { light: "#ffffff", dark: "#101216" };
+
+/** Whether the page sets a share image. Checked with `typeof`: a missing `og-image` prop can resolve to page data. */
+function hasImage(src) {
+	return typeof src === "string" && src !== "";
+}
+
+/**
+ * The absolute URL for `og:image`: the image resolved against the canonical URL.
+ * A relative image with no absolute canonical URL logs a warning and returns `''`, because Open Graph readers ignore a relative one.
+ * Call it once per render: it warns each time.
+ */
+function absoluteImage(src, base) {
+	if (!hasImage(src)) return "";
+	try {
+		return new URL(src, typeof base === "string" && base ? base : undefined).href;
+	} catch {
+		console.warn(`norn-head: og-image "${src}" is relative, so the canonical url must be absolute to resolve it against. The og:image and og:image:alt tags are left out. Pass an absolute og-image or url.`);
+		return "";
+	}
+}
+</script>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<style webc:keep>@layer norn.reset, norn.base, norn.layout, norn.components, norn.oss, norn.print;</style>
+<title @text="title"></title>
+<meta webc:if="description" name="description" :content="description" />
+<link webc:if="typeof url === 'string'" rel="canonical" :href="url" />
+<meta name="color-scheme" content="light dark" />
+<script webc:if="themeToggle === true || themeToggle === '' || themeToggle === 'true'" webc:keep>
+	try {
+		const scheme = localStorage.getItem("color-scheme");
+		if (scheme === "light" || scheme === "dark") document.documentElement.style.colorScheme = scheme;
+	} catch {}
+</script>
+<meta webc:if="themeColor" name="theme-color" :content="themeColor" />
+<meta webc:if="!themeColor" name="theme-color" :content="SURFACE.light" media="(prefers-color-scheme: light)" />
+<meta webc:if="!themeColor" name="theme-color" :content="SURFACE.dark" media="(prefers-color-scheme: dark)" />
+<meta property="og:type" content="website" />
+<meta property="og:title" :content="ogTitle || title" />
+<meta webc:if="description" property="og:description" :content="description" />
+<meta webc:if="typeof url === 'string'" property="og:url" :content="url" />
+<template webc:for="image of [absoluteImage(ogImage, url)]" webc:nokeep>
+<meta webc:if="image" property="og:image" :content="image" />
+<meta webc:if="image && typeof ogImageAlt === 'string' && ogImageAlt" property="og:image:alt" :content="ogImageAlt" />
+<meta name="twitter:card" :content="image ? 'summary_large_image' : 'summary'" />
+</template>
+<link rel="stylesheet" :href="getBundleFileUrl('css')" webc:keep />
+<script :src="getBundleFileUrl('js')" defer webc:keep></script>

package/components/norn-header.webc

@@ -0,0 +1,238 @@
+<!---
+/*
+ * SPDX-License-Identifier: MPL-2.0
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+--->
+<header :style="typeof logoHeight === 'string' && logoHeight ? '--_logo: ' + logoHeight : ''">
+	<slot name="brand"></slot>
+	<details>
+		<summary><slot name="summary"><span webc:nokeep @text="nornComponentStrings?.('norn-header', 'summary', $data.page) || 'Menu'"></span></slot></summary>
+		<nav :aria-labelledby="'norn-header-' + uid"><span data-label :id="'norn-header-' + uid"><slot name="label"><span webc:nokeep @text="nornComponentStrings?.('norn-header', 'label', $data.page) || 'Primary'"></span></slot></span><slot></slot></nav>
+	</details>
+</header>
+<style>
+	@layer norn.components {
+		norn-header {
+			display: block;
+			container-type: inline-size;
+
+			& > header {
+				position: relative;
+				display: flex;
+				flex-wrap: wrap;
+				align-items: center;
+				justify-content: space-between;
+				gap: var(--norn-space-xs, 0.5rem) var(--norn-space-m, 1.25rem);
+				padding: var(--norn-space-s, 0.75rem) var(--norn-space-m, 1.25rem);
+				background: var(--norn-surface-raised, light-dark(hsl(40, 14%, 96%), #242932));
+			}
+
+			& > header > a[rel="home"] {
+				display: inline-flex;
+				align-items: center;
+				gap: var(--norn-space-xs, 0.5rem);
+				color: var(--norn-text-base, light-dark(#16181d, #eceef3));
+				font-family: var(--norn-font-heading, var(--norn-font-body, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
+				font-size: var(--norn-font-size-l, 1.25rem);
+				font-weight: 700;
+				text-decoration: none;
+			}
+
+			& > header > [rel="home"] img {
+				display: block;
+				inline-size: auto;
+				max-inline-size: 100%;
+				block-size: var(--_logo, 2rem);
+			}
+
+			/* Wide, the details is only a wrapper: its summary is hidden, and the navigation sits in the row. */
+			& > header > details {
+				display: contents;
+
+				&::details-content {
+					content-visibility: visible;
+					display: contents;
+				}
+			}
+
+			& > header > details > summary {
+				display: none;
+			}
+
+			& > header > details > nav {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--norn-space-2xs, 0.25rem) var(--norn-space-xs, 0.5rem);
+				font-size: var(--norn-font-size-m, 1rem);
+			}
+
+			& > header > details > nav > [data-label] {
+				position: absolute;
+				inline-size: 1px;
+				block-size: 1px;
+				overflow: hidden;
+				clip-path: inset(50%);
+				white-space: nowrap;
+			}
+
+			& > header > details > nav > a {
+				--_state: 0%;
+				box-sizing: border-box;
+				display: inline-flex;
+				align-items: center;
+				gap: var(--norn-space-2xs, 0.25rem);
+				min-block-size: var(--norn-ui-control-height, 2.25rem);
+				padding-inline: var(--norn-space-xs, 0.5rem);
+				border-block-end: 2px solid transparent;
+				border-radius: var(--norn-ui-radius-s, 4px);
+				background-color: color-mix(in oklab, currentcolor var(--_state), transparent);
+				color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+				text-decoration: none;
+
+				&:hover {
+					--_state: var(--norn-ui-state-hover, 8%);
+					color: var(--norn-text-base, light-dark(#16181d, #eceef3));
+				}
+
+				&:active {
+					--_state: var(--norn-ui-state-press, 12%);
+				}
+
+				&[aria-current] {
+					border-block-end-color: var(--norn-text-accent, light-dark(oklch(from color-mix(in oklch, var(--norn-ui-accent, #2346d4) 82%, black) min(l, 0.5) c h), oklch(from color-mix(in oklch, var(--norn-ui-accent, #2346d4) 55%, white) max(l, 0.72) c h)));
+					color: var(--norn-text-base, light-dark(#16181d, #eceef3));
+				}
+			}
+
+			/* Narrow, the links fold into a control at the end of the brand's row. Open, they take the full width below it. */
+			@container (max-width: 40rem) {
+				& > header {
+					row-gap: 0;
+				}
+
+				& > header > details:not([open])::details-content {
+					content-visibility: hidden;
+				}
+
+				& > header > details::details-content {
+					display: block;
+					flex: 1 0 100%;
+				}
+
+				& > header > details > nav {
+					flex-direction: column;
+					padding-block-start: var(--norn-space-xs, 0.5rem);
+					flex-wrap: nowrap;
+					gap: 0;
+				}
+
+				& > header > details > nav > a {
+					padding-inline: var(--norn-space-s, 0.75rem);
+				}
+
+				& > header > details > summary {
+					--_state: 0%;
+					box-sizing: border-box;
+					display: flex;
+					align-items: center;
+					gap: var(--norn-space-s, 0.75rem);
+					min-block-size: var(--norn-ui-control-height, 2.25rem);
+					margin-inline-start: auto;
+					padding-inline: var(--norn-space-s, 0.75rem);
+					border-radius: var(--norn-ui-radius-s, 4px);
+					background-color: color-mix(in oklab, currentcolor var(--_state), transparent);
+					font-weight: 600;
+					list-style: none;
+					cursor: pointer;
+
+					&::-webkit-details-marker {
+						display: none;
+					}
+
+					&:hover {
+						--_state: var(--norn-ui-state-hover, 8%);
+					}
+
+					&:active {
+						--_state: var(--norn-ui-state-press, 12%);
+					}
+
+					&:focus-visible {
+						outline-offset: calc(-1 * var(--norn-ui-focus-offset, 2px));
+					}
+
+					/* A chevron drawn with two borders, pointing down when closed and up when open. */
+					&::after {
+						box-sizing: border-box;
+						content: "";
+						flex: none;
+						inline-size: 0.5em;
+						block-size: 0.5em;
+						border-block-end: 2px solid var(--norn-text-accent, light-dark(oklch(from color-mix(in oklch, var(--norn-ui-accent, #2346d4) 82%, black) min(l, 0.5) c h), oklch(from color-mix(in oklch, var(--norn-ui-accent, #2346d4) 55%, white) max(l, 0.72) c h)));
+						border-inline-end: 2px solid var(--norn-text-accent, light-dark(oklch(from color-mix(in oklch, var(--norn-ui-accent, #2346d4) 82%, black) min(l, 0.5) c h), oklch(from color-mix(in oklch, var(--norn-ui-accent, #2346d4) 55%, white) max(l, 0.72) c h)));
+						rotate: 45deg;
+					}
+				}
+
+				& > header > details[open] > summary::after {
+					rotate: 225deg;
+				}
+			}
+
+			@media (pointer: coarse) {
+				& > header > details > nav > a,
+				& > header > details > summary {
+					min-block-size: 2.75rem;
+				}
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				& > header > details > nav > a,
+				& > header > details > summary {
+					transition: background-color var(--norn-ui-motion-duration, 150ms) var(--norn-ui-motion-easing, cubic-bezier(0.2, 0, 0, 1));
+				}
+			}
+
+			/* A clear border would be drawn in the text color, so the links that aren't current take the page's. */
+			@media (forced-colors: active) {
+				& > header > details > nav > a {
+					border-block-end-color: Canvas;
+				}
+
+				& > header > details > nav > a[aria-current] {
+					border-block-end-color: Highlight;
+				}
+
+				& > header > details > summary::after {
+					border-color: CanvasText;
+				}
+			}
+
+			@media print {
+				& > header > details {
+					display: none;
+				}
+			}
+
+			/* Last, so a header with no links drops the whole control. */
+			& > header > details:not(:has(a)) {
+				display: none;
+			}
+		}
+
+		/* Without ::details-content a closed details can't show its links, so the control is always there. */
+		@supports not selector(::details-content) {
+			norn-header > header > details > summary {
+				display: flex;
+				align-items: center;
+				min-block-size: var(--norn-ui-control-height, 2.25rem);
+				margin-inline-start: auto;
+				font-weight: 600;
+				cursor: pointer;
+			}
+		}
+	}
+</style>

package/components/norn-heading-anchor.webc

@@ -0,0 +1,71 @@
+<!---
+/*
+ * SPDX-License-Identifier: MPL-2.0
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+--->
+<script webc:setup>
+/** The heading's id, after checking it was passed. An unpassed `slug` resolves to a helper of that name under Eleventy, so a type check comes first. */
+const required = (value) => {
+	if (typeof value !== "string" || !value) throw new Error("norn-heading-anchor: `@slug` is required. It is the heading's id and the link's fragment.");
+	return value;
+};
+</script>
+<h3 webc:if="level == 3" :id="required(slug)"><a :href="'#' + slug"><slot></slot></a></h3>
+<h4 webc:elseif="level == 4" :id="required(slug)"><a :href="'#' + slug"><slot></slot></a></h4>
+<h5 webc:elseif="level == 5" :id="required(slug)"><a :href="'#' + slug"><slot></slot></a></h5>
+<h6 webc:elseif="level == 6" :id="required(slug)"><a :href="'#' + slug"><slot></slot></a></h6>
+<h2 webc:else :id="required(slug)"><a :href="'#' + slug"><slot></slot></a></h2>
+<style>
+	@layer norn.components {
+		norn-heading-anchor {
+			display: block;
+
+			& > :is(h2, h3, h4, h5, h6) {
+				margin: 0;
+				scroll-margin-block-start: var(--norn-space-m, 1.25rem);
+
+				&::before {
+					content: "#" / "";
+					margin-inline-end: var(--norn-space-2xs, 0.25rem);
+					color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+				}
+			}
+
+			/* At least 24px tall, the WCAG 2.2 target size, even for a short heading. */
+			& a {
+				display: inline-block;
+				min-block-size: 1.5rem;
+				color: inherit;
+				text-decoration: none;
+				text-underline-offset: 0.1em;
+
+				&:is(:hover, :focus-visible) {
+					text-decoration: underline;
+				}
+			}
+
+			/* The page's margin is at least 1rem on a narrow screen and wider past the content width, so the mark hangs only where the margin holds it: 1.15ch is under 20px for a second-level heading. */
+			@media (hover: hover) and (min-width: 70rem) {
+				& > :is(h2, h3, h4, h5, h6)::before {
+					display: inline-block;
+					inline-size: 1ch;
+					margin-inline: -1.15ch 0.15ch;
+					opacity: 0;
+				}
+
+				& > :is(h2, h3, h4, h5, h6):is(:hover, :focus-within)::before {
+					opacity: 1;
+				}
+			}
+
+			@media (hover: hover) and (min-width: 70rem) and (prefers-reduced-motion: no-preference) {
+				& > :is(h2, h3, h4, h5, h6)::before {
+					transition: opacity var(--norn-ui-motion-duration, 150ms) var(--norn-ui-motion-easing, cubic-bezier(0.2, 0, 0, 1));
+				}
+			}
+		}
+	}
+</style>

package/components/norn-hero.webc

@@ -0,0 +1,81 @@
+<!---
+/*
+ * SPDX-License-Identifier: MPL-2.0
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+--->
+<header :data-width="width === 'measure' ? 'measure' : undefined"><slot></slot></header>
+<style>
+	@layer norn.components {
+		norn-hero {
+			display: block;
+
+			& > header {
+				--_width: var(--norn-layout-width, 64rem);
+				display: grid;
+				grid-auto-flow: row;
+				align-content: start;
+				gap: var(--norn-space-m, 1.25rem);
+				inline-size: min(100% - 2 * var(--norn-space-m, 1.25rem), var(--_width));
+				margin-inline: auto;
+				padding-block: var(--norn-space-xl, 4rem) var(--norn-space-l, 2rem);
+			}
+
+			& > header[data-width="measure"] {
+				--_width: var(--norn-text-measure, 40em);
+			}
+
+			& > header > h1 {
+				display: flex;
+				flex-direction: column;
+				gap: var(--norn-space-xs, 0.5rem);
+				margin: 0;
+				font-family: var(--norn-font-heading, var(--norn-font-body, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
+				font-size: clamp(2rem, 5vw, 3.25rem);
+				line-height: 1.15;
+				overflow-wrap: anywhere;
+				text-wrap: balance;
+			}
+
+			& > header > h1 > :first-child {
+				font-size: 1.15em;
+			}
+
+			& > header > h1 > :last-child:not(:first-child) {
+				color: var(--norn-text-accent, light-dark(oklch(from color-mix(in oklch, var(--norn-ui-accent, #2346d4) 82%, black) min(l, 0.5) c h), oklch(from color-mix(in oklch, var(--norn-ui-accent, #2346d4) 55%, white) max(l, 0.72) c h)));
+				font-size: 0.55em;
+				font-weight: 400;
+			}
+
+			& > header > p {
+				max-inline-size: var(--norn-text-measure, 40em);
+				margin: 0;
+				color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+				font-size: var(--norn-font-size-l, 1.25rem);
+				text-wrap: pretty;
+			}
+
+			& > header > nav ul {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--norn-space-s, 0.75rem);
+				margin: 0;
+				padding: 0;
+				list-style: none;
+			}
+
+			@media print {
+				& > header > nav {
+					display: none;
+				}
+
+				& > header {
+					gap: var(--norn-space-s, 0.75rem);
+					padding-block: var(--norn-space-m, 1.25rem);
+				}
+			}
+		}
+	}
+</style>

package/components/norn-icon.webc

@@ -0,0 +1,140 @@
+<!---
+/*
+ * SPDX-License-Identifier: MPL-2.0
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+--->
+<script webc:setup>
+const RING = "M21 12a9 9 0 1 1-18 0a9 9 0 1 1 18 0";
+
+/** Stroke paths on a 24-unit grid, plus an optional filled path. */
+const ICONS = {
+	accessibility: { d: `${RING}M12 7v.5M7.5 10l4.5 1l4.5-1M12 11v3M9.5 18l2.5-4l2.5 4` },
+	"arrow-end": { d: "M5 12h14M13 6l6 6l-6 6" },
+	"arrow-start": { d: "M19 12H5M11 6l-6 6l6 6" },
+	book: { d: "M2 5h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2zM22 5h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z" },
+	caution: { d: "M8 3h8l5 5v8l-5 5H8l-5-5V8zM12 8v5M12 16v.5" },
+	check: { d: "M5 12l5 5L20 7" },
+	"chevron-down": { d: "M6 9l6 6l6-6" },
+	"chevron-end": { d: "M9 6l6 6l-6 6" },
+	copy: { d: "M9 9h11v11H9zM15 9V4H4v11h5" },
+	desktop: { d: "M3 4h18v12H3zM8 20h8M12 16v4" },
+	error: { d: `${RING}M15 9l-6 6M9 9l6 6` },
+	external: { d: "M14 4h6v6M20 4l-9 9M18 14v6H4V6h6" },
+	fill: { d: "M3 12h18M7 8l-4 4l4 4M17 8l4 4l-4 4" },
+	hash: { d: "M5 9h14M5 15h14M10 4L8 20M16 4l-2 16" },
+	important: { d: "M4 4h16v12H9l-5 4zM12 7v4M12 13.5v.5" },
+	info: { d: `${RING}M12 11v6M12 7.5v.5` },
+	link: { d: "M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 0 0-5.66-5.66l-1 1M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 0 0 5.66 5.66l1-1" },
+	loading: { d: "M21 12a9 9 0 1 1-9-9" },
+	moon: { d: "M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" },
+	phone: { d: "M7 2h10v20H7zM11 18h2" },
+	search: { d: "M18 11a7 7 0 1 1-14 0a7 7 0 1 1 14 0M21 21l-5-5" },
+	success: { d: `${RING}M8 12l3 3l5-6` },
+	sun: { d: "M16 12a4 4 0 1 1-8 0a4 4 0 1 1 8 0M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M6.3 17.7l-1.4 1.4M19.1 4.9l-1.4 1.4" },
+	system: { d: RING, fill: "M12 3a9 9 0 0 1 0 18z" },
+	tablet: { d: "M4 3h16v18H4zM11 18h2" },
+	tip: { d: "M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.6.6 1 1.5 1 2.5h6c0-1 .4-1.9 1-2.5A6 6 0 0 0 12 3z" },
+	warning: { d: "M12 3L2 21h20zM12 10v5M12 18v.5" },
+};
+
+const MIRROR = ["arrow-end", "arrow-start", "chevron-end"];
+
+/** The sizes, each a shared icon token. */
+const SIZES = ["s", "m"];
+
+/** The project's icons from the Norn plugin, by name. None without the plugin. */
+const project = () => (typeof nornIcons === "function" ? nornIcons() : {});
+
+/**
+ * The icon for a name: a project icon, else a built-in. An unknown name fails the build rather than rendering nothing.
+ * @returns {{ mirror: boolean, viewBox?: string, body?: string, d?: string, fill?: string }}
+ */
+function icon(name) {
+	const own = project();
+	if (Object.hasOwn(own, name)) return own[name];
+	if (!Object.hasOwn(ICONS, name)) {
+		throw new Error(`norn-icon: no icon named "${name}". Built-in: ${Object.keys(ICONS).join(", ")}. Project: ${Object.keys(own).join(", ") || "none"}`);
+	}
+	return { ...ICONS[name], mirror: MIRROR.includes(name) };
+}
+
+/** An attribute value, escaped. */
+const attr = (value) => String(value).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+
+/**
+ * The size attribute: none for the default, `s`. An unknown size fails the build rather than drawing at the wrong size.
+ * @param {string} size
+ */
+function sized(size) {
+	if (!size || size === "s") return "";
+	if (!SIZES.includes(size)) throw new Error(`norn-icon: no size "${size}". Sizes: ${SIZES.join(", ")}`);
+	return ` data-size="${size}"`;
+}
+
+/**
+ * The whole `<svg>` for a name and a size, as markup, so the template has one expression to compile.
+ * A project icon keeps its own `viewBox` and body.
+ */
+function drawing(name, size) {
+	const { viewBox, mirror, body, d, fill } = icon(name);
+	const flip = mirror ? " data-mirror" : "";
+	const scale = sized(size);
+	if (body) return `<svg${viewBox ? ` viewBox="${attr(viewBox)}"` : ""} aria-hidden="true"${flip}${scale} data-project>\n\t${body}\n</svg>`;
+	const extra = fill ? `\n\t<path d="${attr(fill)}" data-fill></path>` : "";
+	return `<svg viewBox="0 0 24 24" aria-hidden="true"${flip}${scale}>\n\t<path d="${attr(d)}"></path>${extra}\n</svg>`;
+}
+</script>
+<template webc:nokeep @raw="drawing(name, typeof size === 'string' ? size : '')"></template>
+<slot name="label"></slot>
+<style>
+	@layer norn.components {
+		norn-icon {
+			display: inline-flex;
+			flex: none;
+			vertical-align: -0.125em;
+
+			& svg {
+				inline-size: var(--norn-ui-icon-s, 1em);
+				block-size: var(--norn-ui-icon-s, 1em);
+
+				&[data-size="m"] {
+					inline-size: var(--norn-ui-icon-m, 1.25rem);
+					block-size: var(--norn-ui-icon-m, 1.25rem);
+				}
+
+				&:not([data-project]) {
+					fill: none;
+					stroke: currentcolor;
+					stroke-linecap: round;
+					stroke-linejoin: round;
+					stroke-width: 2;
+				}
+
+				&[data-project] {
+					fill: currentcolor;
+				}
+			}
+
+			& > :not(svg) {
+				position: absolute;
+				inline-size: 1px;
+				block-size: 1px;
+				overflow: hidden;
+				clip-path: inset(50%);
+				white-space: nowrap;
+			}
+
+			& [data-fill] {
+				fill: currentcolor;
+				stroke: none;
+			}
+
+			&:dir(rtl) [data-mirror] {
+				transform: scaleX(-1);
+			}
+		}
+	}
+</style>

package/components/norn-link-button.webc

@@ -0,0 +1,96 @@
+<!---
+/*
+ * SPDX-License-Identifier: MPL-2.0
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+--->
+<a :href="href" :data-variant="variant === 'secondary' || variant === 'quiet' ? variant : 'primary'" :data-tone="tone === 'current' ? 'current' : undefined"><slot></slot></a>
+<style>
+	@layer norn.components {
+		norn-link-button {
+			display: inline-flex;
+			max-inline-size: 100%;
+
+			& a[data-variant] {
+				--_state: 0%;
+				--_bg: transparent;
+				--_border: transparent;
+				box-sizing: border-box;
+				display: inline-flex;
+				align-items: center;
+				gap: var(--norn-space-xs, 0.5rem);
+				min-block-size: var(--norn-ui-control-height, 2.25rem);
+				padding: var(--norn-space-2xs, 0.25rem) var(--norn-space-m, 1.25rem);
+				border: 1px solid var(--_border);
+				border-radius: var(--norn-ui-border-radius, 6px);
+				background-color: color-mix(in oklab, currentcolor var(--_state), var(--_bg));
+				color: var(--norn-text-accent, light-dark(oklch(from color-mix(in oklch, var(--norn-ui-accent, #2346d4) 82%, black) min(l, 0.5) c h), oklch(from color-mix(in oklch, var(--norn-ui-accent, #2346d4) 55%, white) max(l, 0.72) c h)));
+				font-weight: 600;
+				line-height: 1.3;
+				overflow-wrap: anywhere;
+				text-decoration: none;
+
+				&:hover {
+					--_state: var(--norn-ui-state-hover, 8%);
+				}
+
+				&:active {
+					--_state: var(--norn-ui-state-press, 12%);
+				}
+			}
+
+			/* The surrounding text color, for a secondary or quiet button. The primary rule below keeps its own. */
+			& a[data-tone="current"] {
+				color: inherit;
+			}
+
+			& a[data-variant="primary"] {
+				--_bg: var(--norn-ui-accent, #2346d4);
+				color: var(--norn-text-on-accent, color(from var(--norn-ui-accent, #2346d4) xyz-d65 calc(0.95047 * clamp(0, calc((0.1791 - y) * 1000000), 1)) clamp(0, calc((0.1791 - y) * 1000000), 1) calc(1.08883 * clamp(0, calc((0.1791 - y) * 1000000), 1))));
+			}
+
+			& a[data-variant="secondary"] {
+				--_border: var(--norn-text-accent, light-dark(oklch(from color-mix(in oklch, var(--norn-ui-accent, #2346d4) 82%, black) min(l, 0.5) c h), oklch(from color-mix(in oklch, var(--norn-ui-accent, #2346d4) 55%, white) max(l, 0.72) c h)));
+			}
+
+			@media (pointer: coarse) {
+				& a[data-variant] {
+					min-block-size: 2.75rem;
+				}
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				& a[data-variant] {
+					transition: background-color var(--norn-ui-motion-duration, 150ms) var(--norn-ui-motion-easing, cubic-bezier(0.2, 0, 0, 1));
+				}
+			}
+
+			/* The primary button stays filled, since the browser would turn its fill into the page color. */
+			@media (forced-colors: active) {
+				& a[data-variant="primary"] {
+					border-color: LinkText;
+					background-color: LinkText;
+					color: Canvas;
+					forced-color-adjust: none;
+
+					&:focus-visible {
+						outline-color: CanvasText;
+					}
+				}
+
+				& a[data-variant="secondary"] {
+					border-color: LinkText;
+					color: LinkText;
+				}
+
+				/* A clear border would be drawn in the text color, so the quiet button's takes the page's. */
+				& a[data-variant="quiet"] {
+					border-color: Canvas;
+					color: LinkText;
+				}
+			}
+		}
+	}
+</style>