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

package/components/norn-theme-toggle.webc

@@ -0,0 +1,127 @@
+<!---
+/*
+ * 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/.
+ */
+--->
+<norn-segmented-control
+	:@icon-only="true"
+	@name="color-scheme"
+	:@options="[
+		{ value: 'light', label: '', icon: 'sun' },
+		{ value: '', label: '', icon: 'system', checked: true },
+		{ value: 'dark', label: '', icon: 'moon' }
+	]"
+>
+	<span slot="legend" @text="nornComponentStrings?.('norn-theme-toggle', 'label', $data.page) || 'Color scheme'"></span>
+</norn-segmented-control>
+<span hidden>
+	<span data-string="label"><slot name="label"><span webc:nokeep @text="nornComponentStrings?.('norn-theme-toggle', 'label', $data.page) || 'Color scheme'"></span></slot></span>
+	<span data-string="light"><slot name="light"><span webc:nokeep @text="nornComponentStrings?.('norn-theme-toggle', 'light', $data.page) || 'Light'"></span></slot></span>
+	<span data-string="system"><slot name="system"><span webc:nokeep @text="nornComponentStrings?.('norn-theme-toggle', 'system', $data.page) || 'System'"></span></slot></span>
+	<span data-string="dark"><slot name="dark"><span webc:nokeep @text="nornComponentStrings?.('norn-theme-toggle', 'dark', $data.page) || 'Dark'"></span></slot></span>
+</span>
+<style>
+	@layer norn.components {
+		norn-theme-toggle {
+			display: inline-flex;
+
+			&:not(:defined) {
+				display: none;
+			}
+		}
+	}
+</style>
+<script>
+	{
+		const KEY = "color-scheme";
+		const SCHEMES = ["light", "dark"];
+		let toggles = 0;
+
+		/** The saved choice, or "" for the system. Storage can be blocked: then there is no saved choice. */
+		const saved = () => {
+			try {
+				const value = localStorage.getItem(KEY);
+				return SCHEMES.includes(value) ? value : "";
+			} catch {
+				return "";
+			}
+		};
+
+		const save = (value) => {
+			try {
+				if (value) localStorage.setItem(KEY, value);
+				else localStorage.removeItem(KEY);
+			} catch {
+				// Not saved: the choice holds for this page only.
+			}
+		};
+
+		const apply = (value) => {
+			if (value) document.documentElement.style.colorScheme = value;
+			else document.documentElement.style.removeProperty("color-scheme");
+		};
+
+		/** The option each input stands for, by value. */
+		const OPTIONS = { light: "light", "": "system", dark: "dark" };
+
+		/** Keeps the page's color scheme and every toggle in step with the visitor's choice. */
+		class ThemeToggle extends HTMLElement {
+			#wired = false;
+			#sync = () => this.#show(saved());
+			#onStorage = (event) => {
+				if (event.key !== KEY && event.key !== null) return;
+				apply(saved());
+				this.#show(saved());
+			};
+
+			connectedCallback() {
+				document.addEventListener("themetogglechange", this.#sync);
+				window.addEventListener("storage", this.#onStorage);
+				if (!this.#wired) {
+					this.#wired = true;
+					// A radio group is shared by name across the page, so each toggle names its own.
+					const name = `${KEY}-${++toggles}`;
+					for (const input of this.querySelectorAll("input")) input.name = name;
+					this.#name();
+					this.addEventListener("change", (event) => {
+						const value = SCHEMES.includes(event.target.value) ? event.target.value : "";
+						save(value);
+						apply(value);
+						document.dispatchEvent(new CustomEvent("themetogglechange"));
+					});
+				}
+				apply(saved());
+				this.#show(saved());
+			}
+
+			disconnectedCallback() {
+				document.removeEventListener("themetogglechange", this.#sync);
+				window.removeEventListener("storage", this.#onStorage);
+			}
+
+			/** Show the names the page holds: the group's in the legend, each option's as its text and title. */
+			#name() {
+				const text = (key) => this.querySelector(`:scope > [hidden] > [data-string="${key}"]`)?.textContent.trim() ?? "";
+				const legend = this.querySelector("legend");
+				if (legend) legend.textContent = text("label");
+				for (const input of this.querySelectorAll("input")) {
+					const label = input.closest("label");
+					const words = text(OPTIONS[input.value]);
+					if (!label || !words) continue;
+					label.title = words;
+					const span = label.querySelector(":scope > span");
+					if (span) span.textContent = words;
+				}
+			}
+
+			#show(value) {
+				for (const input of this.querySelectorAll("input")) input.checked = input.value === value;
+			}
+		}
+
+		if (!customElements.get("norn-theme-toggle")) customElements.define("norn-theme-toggle", ThemeToggle);
+	}
+</script>

package/components/norn-toc.webc

@@ -0,0 +1,260 @@
+<!---
+/*
+ * 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 escape = (text) => String(text).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+/** Renders the flat headings as nested `<li>` elements, one inner `<ol>` per level of depth. */
+function outline(items) {
+	const root = { level: 0, nodes: [] };
+	const trail = [root];
+	for (const item of items) {
+		while (trail.length > 1 && trail.at(-1).level >= item.level) trail.pop();
+		const node = { level: item.level, item, nodes: [] };
+		trail.at(-1).nodes.push(node);
+		trail.push(node);
+	}
+	const list = (nodes) => '<ol>' + nodes.map((node) => '<li><a href="#' + escape(node.item.id) + '">' + escape(node.item.text) + '</a>' + (node.nodes.length ? list(node.nodes) : '') + '</li>').join('') + '</ol>';
+	return list(root.nodes);
+}
+</script>
+<nav webc:if="items && items.length > 1" :aria-labelledby="'norn-toc-' + uid" :data-fold="['always', 'narrow'].includes(fold) ? fold : undefined">
+	<details>
+		<summary><span :id="'norn-toc-' + uid"><slot name="label"><span webc:nokeep @text="nornComponentStrings?.('norn-toc', 'label', $data.page) || 'On this page'"></span></slot></span></summary>
+		<template webc:nokeep @raw="outline(items)"></template>
+	</details>
+</nav>
+<style>
+	@layer norn.components {
+		norn-toc {
+			display: block;
+			font-size: var(--norn-font-size-s, 0.875rem);
+
+			& > nav > details > summary {
+				--_state: 0%;
+				--_fold: none;
+				box-sizing: border-box;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: var(--norn-space-xs, 0.5rem);
+				margin-block-end: var(--norn-space-xs, 0.5rem);
+				color: var(--norn-text-base, light-dark(#16181d, #eceef3));
+				font-weight: 700;
+				list-style: none;
+
+				&::-webkit-details-marker {
+					display: none;
+				}
+
+				/* A chevron drawn with two borders, shown only while the list folds. */
+				&::after {
+					box-sizing: border-box;
+					content: "";
+					display: var(--_fold);
+					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;
+				}
+			}
+
+			& > nav > details[open] > summary::after {
+				rotate: 225deg;
+			}
+
+			/* Open or not, the list shows, so the title is only a title. */
+			@supports selector(::details-content) {
+				& > nav > details::details-content {
+					content-visibility: visible;
+				}
+			}
+
+			& > nav > details > ol,
+			& > nav > details > ol ol {
+				display: grid;
+				gap: var(--norn-space-2xs, 0.25rem);
+				margin: 0;
+				padding: 0;
+				list-style: none;
+			}
+
+			& > nav > details > ol {
+				border-inline-start: 1px solid var(--norn-ui-border-color, light-dark(#d3d8e2, #2d323e));
+			}
+
+			& > nav > details > ol ol {
+				padding-inline-start: var(--norn-space-s, 0.75rem);
+			}
+
+			& > nav > details > ol li > a {
+				--_state: 0%;
+				box-sizing: border-box;
+				display: flex;
+				align-items: center;
+				min-block-size: 1.5rem;
+				margin-inline-start: -1px;
+				padding: var(--norn-space-2xs, 0.25rem) var(--norn-space-s, 0.75rem);
+				border-inline-start: 2px solid transparent;
+				border-start-end-radius: var(--norn-ui-radius-s, 4px);
+				border-end-end-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-inline-start-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-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)));
+				}
+			}
+
+			/* The fold prop turns the fold on, always or while the nearest container is narrow. */
+			& > nav[data-fold="always"] {
+				--_folded: on;
+			}
+
+			@container (width < 60rem) {
+				& > nav[data-fold="narrow"] {
+					--_folded: on;
+				}
+			}
+
+			/* Folded, the title is a control that opens the list. */
+			@container style(--_folded: on) {
+				& > nav > details > summary {
+					--_fold: block;
+					padding: var(--norn-space-xs, 0.5rem) var(--norn-space-s, 0.75rem);
+					border-radius: var(--norn-ui-radius-s, 4px);
+					background-color: color-mix(in oklab, currentcolor var(--_state), var(--norn-surface-raised, light-dark(hsl(40, 14%, 96%), #242932)));
+					cursor: pointer;
+
+					&: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));
+					}
+				}
+
+				@supports selector(::details-content) {
+					& > nav > details:not([open])::details-content {
+						content-visibility: hidden;
+					}
+				}
+			}
+
+			/* Without ::details-content a closed fold can't show its list, so the title always works as a control. */
+			@supports not selector(::details-content) {
+				& > nav > details > summary {
+					--_fold: block;
+					cursor: pointer;
+				}
+			}
+
+			@media (pointer: coarse) {
+				& > nav > details > ol li > a {
+					min-block-size: 2.75rem;
+				}
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				& > nav > details > ol li > a,
+				& > nav > details > summary {
+					transition: background-color var(--norn-ui-motion-duration, 150ms) var(--norn-ui-motion-easing, cubic-bezier(0.2, 0, 0, 1));
+				}
+			}
+
+			@media (forced-colors: active) {
+				& > nav > details > summary::after {
+					border-color: CanvasText;
+				}
+
+				/* A clear border would be drawn in the text color, so only the current link has one. */
+				& > nav > details > ol li > a {
+					border-inline-start-width: 0;
+					padding-inline-start: calc(var(--norn-space-s, 0.75rem) + 2px);
+				}
+
+				& > nav > details > ol li > a[aria-current] {
+					border-inline-start-width: 2px;
+					border-inline-start-color: Highlight;
+					padding-inline-start: var(--norn-space-s, 0.75rem);
+				}
+			}
+
+			@media print {
+				display: none;
+			}
+		}
+	}
+</style>
+<script>
+	{
+		/** Marks the link to the last section heading scrolled past, or the first one. */
+		class Toc extends HTMLElement {
+			#observer;
+			#onScroll;
+
+			connectedCallback() {
+				const links = [...this.querySelectorAll('a[href^="#"]')];
+				// A link's hash is percent-encoded and an id is not, but an id may hold a literal `%`: try the decoded hash, then the hash as written.
+				const heading = (link) => {
+					const hash = link.hash.slice(1);
+					try {
+						return document.getElementById(decodeURIComponent(hash)) ?? document.getElementById(hash);
+					} catch {
+						return document.getElementById(hash);
+					}
+				};
+				const sections = links.map((link) => [link, heading(link)]).filter(([, target]) => target);
+				if (!sections.length) return;
+				const mark = () => {
+					const line = innerHeight * 0.25;
+					const [current] = sections.findLast(([, target]) => target.getBoundingClientRect().top <= line) ?? sections[0];
+					for (const link of links) {
+						if (link === current) link.setAttribute("aria-current", "location");
+						else link.removeAttribute("aria-current");
+					}
+				};
+				this.#teardown();
+				this.#onScroll = () => requestAnimationFrame(mark);
+				addEventListener("scroll", this.#onScroll, { passive: true });
+				this.#observer = new ResizeObserver(this.#onScroll);
+				this.#observer.observe(document.documentElement);
+				mark();
+			}
+
+			disconnectedCallback() {
+				this.#teardown();
+			}
+
+			#teardown() {
+				if (this.#onScroll) removeEventListener("scroll", this.#onScroll);
+				this.#observer?.disconnect();
+			}
+		}
+
+		if (!customElements.get("norn-toc")) customElements.define("norn-toc", Toc);
+	}
+</script>

package/css/base.css

@@ -0,0 +1,75 @@
+/*
+ * Base styles for the page, in the norn.base layer: color-scheme and base typography.
+ * It defines no design tokens: every component carries each shared token as the fallback of its custom property, compiled from `tokens.json`.
+ * Adds one utility class, `.visually-hidden`: text that is read but not shown, and shows while it or a child has focus.
+ */
+@layer norn.base {
+	:root {
+		color-scheme: light dark;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		html {
+			scroll-behavior: smooth;
+		}
+	}
+
+	body {
+		min-block-size: 100dvh;
+		margin: 0;
+		background: var(--norn-surface-base, light-dark(#ffffff, #101216));
+		color: var(--norn-text-base, light-dark(#16181d, #eceef3));
+		font-family: var(--norn-font-body, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+		font-size: var(--norn-font-size-m, 1rem);
+		line-height: 1.5;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-family: var(--norn-font-heading, var(--norn-font-body, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
+		line-height: 1.15;
+		text-wrap: balance;
+	}
+
+	p,
+	li {
+		text-wrap: pretty;
+	}
+
+	a {
+		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)));
+		text-decoration: underline dotted;
+		text-decoration-color: currentcolor;
+		text-decoration-thickness: 1px;
+		text-underline-offset: 0.2em;
+		overflow-wrap: break-word;
+
+		&:is(:hover, :focus-visible) {
+			text-decoration-style: solid;
+		}
+	}
+
+	/* The one focus ring. A component that the ring would clip draws it inset, at the negative of the offset. */
+	:focus-visible {
+		outline: var(--norn-ui-focus-width, 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)));
+		outline-offset: var(--norn-ui-focus-offset, 2px);
+	}
+
+	main:focus {
+		outline: none;
+	}
+
+	/* Off screen but still read. Shows while it, or a child, has focus. */
+	.visually-hidden:not(:focus-within, :active) {
+		position: absolute;
+		inline-size: 1px;
+		block-size: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+}

package/css/print.css

@@ -0,0 +1,8 @@
+/* Print rules for the page, in the norn.print layer. Each component keeps its own in its `@media print` block. */
+@layer norn.print {
+	@media print {
+		html {
+			font-size: 12px;
+		}
+	}
+}

package/css/reset.css

@@ -0,0 +1,45 @@
+/*
+ * An optional reset, in the norn.reset layer. Norn's components and layouts look the same without it.
+ * Copy or link it from `@allons-y/webc-patterns/css/reset.css`, or read its path from the plugin's `reset` export.
+ */
+@layer norn.reset {
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	html {
+		-webkit-text-size-adjust: 100%;
+		text-size-adjust: 100%;
+	}
+
+	body,
+	h1,
+	h2,
+	h3,
+	p,
+	figure,
+	pre,
+	ul {
+		margin: 0;
+	}
+
+	ul {
+		padding: 0;
+		list-style: none;
+	}
+
+	img,
+	picture,
+	svg {
+		display: block;
+		max-inline-size: 100%;
+		block-size: auto;
+	}
+
+	button {
+		font: inherit;
+		color: inherit;
+	}
+}

package/fallback/norn-code-block.webc

@@ -0,0 +1,13 @@
+<!---
+/*
+ * 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/.
+ */
+--->
+<figure webc:if="typeof caption === 'string' && caption" webc:root="override"
+	><pre dir="ltr" :data-language="typeof language === 'string' && language ? language : undefined"><code @text="typeof code === 'string' ? code : ''"></code></pre
+	><figcaption @text="caption"></figcaption
+></figure>
+<pre webc:else webc:root="override" dir="ltr" :data-language="typeof language === 'string' && language ? language : undefined"><code @text="typeof code === 'string' ? code : ''"></code></pre>