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

package/components/norn-notice.webc

@@ -0,0 +1,94 @@
+<!---
+/*
+ * 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 SEVERITIES = { info: ["Note", "info"], success: ["Success", "success"], warning: ["Warning", "warning"], danger: ["Error", "error"] };
+
+/** A known severity, else `info`. */
+const level = (severity) => (Object.hasOwn(SEVERITIES, severity) ? severity : "info");
+
+/** The live role: `alert` interrupts, for a warning or a danger; `status` waits. */
+const liveRole = (severity) => (["warning", "danger"].includes(level(severity)) ? "alert" : "status");
+</script>
+<div :data-severity="level(severity)" :role="live === true || live === '' || live === 'true' ? liveRole(severity) : undefined">
+	<norn-icon :@name="SEVERITIES[level(severity)][1]" @size="m"></norn-icon>
+	<div>
+		<span data-prefix><slot name="prefix"><span webc:nokeep @text="nornComponentStrings?.('norn-notice', level(severity), $data.page) || SEVERITIES[level(severity)][0] + ': '"></span></slot></span>
+		<slot></slot>
+	</div>
+	<div><slot name="action"></slot></div>
+</div>
+<style>
+	@layer norn.components {
+		norn-notice {
+			--_color: var(--norn-status-info, light-dark(#1b4fc4, #8fb0ff));
+			display: block;
+
+			&:has(> [data-severity="success"]) {
+				--_color: var(--norn-status-success, light-dark(#0b6b3a, #7ed6a1));
+			}
+
+			&:has(> [data-severity="warning"]) {
+				--_color: var(--norn-status-warning, light-dark(#9a4a00, #ffb36b));
+			}
+
+			&:has(> [data-severity="danger"]) {
+				--_color: var(--norn-status-danger, light-dark(#b42318, #ff8a80));
+			}
+
+			/* A tint and a bar, as in norn-callout. */
+			& > div {
+				display: flex;
+				flex-wrap: wrap;
+				align-items: center;
+				gap: var(--norn-space-s, 0.75rem) var(--norn-space-m, 1.25rem);
+				overflow-wrap: anywhere;
+				padding: var(--norn-space-s, 0.75rem) var(--norn-space-m, 1.25rem);
+				border-inline-start: 3px solid var(--_color);
+				border-start-end-radius: var(--norn-ui-border-radius, 6px);
+				border-end-end-radius: var(--norn-ui-border-radius, 6px);
+				background: color-mix(in oklab, var(--_color) 8%, var(--norn-surface-base, light-dark(#ffffff, #101216)));
+			}
+
+			& > div > norn-icon {
+				flex: none;
+				align-self: start;
+				margin-block-start: calc((1lh - var(--norn-ui-icon-m, 1.25rem)) / 2);
+				color: var(--_color);
+			}
+
+			& > div > div:first-of-type {
+				flex: 1 1 16rem;
+				min-inline-size: 0;
+			}
+
+			& > div > div:first-of-type > :is(p, ul, ol) {
+				margin: 0;
+			}
+
+			& > div > div:last-child:not(:has(*)) {
+				display: none;
+			}
+
+			& > div > div > [data-prefix] {
+				position: absolute;
+				inline-size: 1px;
+				block-size: 1px;
+				overflow: hidden;
+				clip-path: inset(50%);
+				white-space: nowrap;
+			}
+
+			@media (forced-colors: active) {
+				& > div {
+					border-inline-start-color: CanvasText;
+				}
+			}
+		}
+	}
+</style>

package/components/norn-pager.webc

@@ -0,0 +1,67 @@
+<!---
+/*
+ * 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/.
+ */
+--->
+<nav :aria-labelledby="'norn-pager-' + uid" webc:if="prev || next">
+	<span data-label :id="'norn-pager-' + uid"><slot name="label"><span webc:nokeep @text="nornComponentStrings?.('norn-pager', 'label', $data.page) || 'Pager'"></span></slot></span>
+	<a webc:if="prev" rel="prev" :href="prev.href"><norn-icon @name="arrow-start"></norn-icon><span @text="prev.title"></span></a>
+	<a webc:if="next" rel="next" :href="next.href"><span @text="next.title"></span><norn-icon @name="arrow-end"></norn-icon></a>
+</nav>
+<style>
+	@layer norn.components {
+		norn-pager {
+			display: block;
+
+			& nav {
+				display: flex;
+				justify-content: space-between;
+				gap: var(--norn-space-m, 1.25rem);
+			}
+
+			& nav > [data-label] {
+				position: absolute;
+				inline-size: 1px;
+				block-size: 1px;
+				overflow: hidden;
+				clip-path: inset(50%);
+				white-space: nowrap;
+			}
+
+			& nav > a {
+				--_state: 0%;
+				display: inline-flex;
+				align-items: center;
+				gap: var(--norn-space-xs, 0.5rem);
+				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), transparent);
+				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: none;
+				overflow-wrap: break-word;
+
+				&:hover {
+					--_state: var(--norn-ui-state-hover, 8%);
+				}
+
+				&:active {
+					--_state: var(--norn-ui-state-press, 12%);
+				}
+
+				&[rel="next"] {
+					margin-inline-start: auto;
+					text-align: end;
+				}
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				& nav > a {
+					transition: background-color var(--norn-ui-motion-duration, 150ms) var(--norn-ui-motion-easing, cubic-bezier(0.2, 0, 0, 1));
+				}
+			}
+		}
+	}
+</style>

package/components/norn-rich-text.webc

@@ -0,0 +1,105 @@
+<!---
+/*
+ * 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-rich-text webc:root="override" :data-measure="measure === 'none' ? 'none' : undefined"><slot></slot></norn-rich-text>
+<style>
+	@layer norn.components {
+		norn-rich-text {
+			display: grid;
+			grid-template-columns: minmax(0, 1fr);
+			align-content: start;
+			gap: var(--norn-space-m, 1.25rem);
+			max-inline-size: var(--norn-text-measure, 40em);
+
+			&[data-measure="none"] {
+				max-inline-size: none;
+			}
+		}
+
+		/* Prose styles stop at the components that style all their own markup. A callout, a notice, a card, or a table holds prose of its own (a list, a code span), so it stays in scope. */
+		@scope (norn-rich-text) to (norn-code-block, norn-code-tabs, norn-fact-list) {
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				margin: var(--norn-space-s, 0.75rem) 0 0;
+				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;
+			}
+
+			/* norn-heading-anchor zeroes its heading's margin, so the space goes on its tag. */
+			norn-heading-anchor:has(> :is(h2, h3, h4, h5, h6)) {
+				margin-block-start: var(--norn-space-s, 0.75rem);
+			}
+
+			h2 {
+				font-size: var(--norn-font-size-xl, 1.5rem);
+			}
+
+			h3 {
+				font-size: var(--norn-font-size-l, 1.25rem);
+			}
+
+			h4,
+			h5,
+			h6 {
+				font-size: var(--norn-font-size-m, 1rem);
+			}
+
+			p {
+				margin: 0;
+				text-wrap: pretty;
+			}
+
+			ul,
+			ol {
+				display: grid;
+				gap: var(--norn-space-xs, 0.5rem);
+				margin: 0;
+				padding-inline-start: var(--norn-space-m, 1.25rem);
+				list-style: revert;
+			}
+
+			blockquote {
+				margin: 0;
+				padding-inline-start: var(--norn-space-m, 1.25rem);
+				border-inline-start: 3px solid var(--norn-ui-border-color, light-dark(#d3d8e2, #2d323e));
+				color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+			}
+
+			table {
+				border-collapse: collapse;
+				border-block-end: 1px solid var(--norn-ui-border-color, light-dark(#d3d8e2, #2d323e));
+			}
+
+			th,
+			td {
+				padding: var(--norn-space-xs, 0.5rem) var(--norn-space-s, 0.75rem);
+				border-block-end: 1px solid var(--norn-ui-border-color, light-dark(#d3d8e2, #2d323e));
+				text-align: start;
+			}
+
+			hr {
+				box-sizing: border-box;
+				width: 100%;
+				border: 0;
+				border-block-start: 1px solid var(--norn-ui-border-color, light-dark(#d3d8e2, #2d323e));
+			}
+
+			:not(pre) > code {
+				padding: 0.1em 0.35em;
+				border-radius: var(--norn-ui-radius-s, 4px);
+				background: var(--norn-surface-code, light-dark(hsl(40, 14%, 94%), #2c313b));
+				font-family: var(--norn-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+				font-size: 0.875em;
+			}
+		}
+	}
+</style>

package/components/norn-search.webc

@@ -0,0 +1,303 @@
+<!---
+/*
+ * 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/.
+ */
+--->
+<search :aria-labelledby="'norn-search-' + uid" :data-bundle="bundle || '/pagefind/pagefind.js'">
+	<form :action="action || 'https://duckduckgo.com/'" method="get">
+		<label>
+			<span :id="'norn-search-' + uid"><slot name="label"><span webc:nokeep @text="nornComponentStrings?.('norn-search', 'label', $data.page) || 'Search'"></span></slot></span>
+			<norn-icon @name="search"></norn-icon>
+			<input type="search" name="q" autocomplete="off" spellcheck="false" />
+		</label>
+		<input webc:if="site" type="hidden" name="sites" :value="site" />
+		<button type="submit"><norn-icon @name="search"></norn-icon><span><slot name="label"><span webc:nokeep @text="nornComponentStrings?.('norn-search', 'label', $data.page) || 'Search'"></span></slot></span></button>
+	</form>
+	<p role="status"></p>
+	<ol role="list" hidden></ol>
+	<span hidden>
+		<span data-string="none"><slot name="none"><span webc:nokeep @text="nornComponentStrings?.('norn-search', 'none', $data.page) || 'No results'"></span></slot></span>
+		<span data-string="results-zero"><slot name="results-zero"><span webc:nokeep @text="nornComponentStrings?.('norn-search', 'results-zero', $data.page) || ''"></span></slot></span>
+		<span data-string="results-one"><slot name="results-one"><span webc:nokeep @text="nornComponentStrings?.('norn-search', 'results-one', $data.page) || (nornComponentStrings?.('norn-search', 'results-other', $data.page) ? '' : '{count} result')"></span></slot></span>
+		<span data-string="results-two"><slot name="results-two"><span webc:nokeep @text="nornComponentStrings?.('norn-search', 'results-two', $data.page) || ''"></span></slot></span>
+		<span data-string="results-few"><slot name="results-few"><span webc:nokeep @text="nornComponentStrings?.('norn-search', 'results-few', $data.page) || ''"></span></slot></span>
+		<span data-string="results-many"><slot name="results-many"><span webc:nokeep @text="nornComponentStrings?.('norn-search', 'results-many', $data.page) || ''"></span></slot></span>
+		<span data-string="results-other"><slot name="results-other"><span webc:nokeep @text="nornComponentStrings?.('norn-search', 'results-other', $data.page) || '{count} results'"></span></slot></span>
+	</span>
+</search>
+<style>
+	@layer norn.components {
+		norn-search {
+			display: block;
+			container-type: inline-size;
+
+			& search {
+				position: relative;
+				display: grid;
+				grid-template-columns: minmax(0, 1fr);
+				gap: var(--norn-space-xs, 0.5rem);
+				overflow-wrap: anywhere;
+			}
+
+			& form {
+				display: flex;
+				gap: var(--norn-space-xs, 0.5rem);
+			}
+
+			& label {
+				position: relative;
+				display: grid;
+				flex: 1;
+				min-inline-size: 0;
+			}
+
+			& label > span {
+				position: absolute;
+				inline-size: 1px;
+				block-size: 1px;
+				overflow: hidden;
+				clip-path: inset(50%);
+				white-space: nowrap;
+			}
+
+			/* The magnifier sits in the field, at its start, and lets a click through to it. */
+			& label > norn-icon {
+				position: absolute;
+				inset-block-start: 50%;
+				inset-inline-start: var(--norn-space-xs, 0.5rem);
+				translate: 0 -50%;
+				color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+				pointer-events: none;
+			}
+
+			& :is(input, button) {
+				box-sizing: border-box;
+				min-block-size: var(--norn-ui-control-height, 2.25rem);
+				border: 0;
+				border-radius: var(--norn-ui-border-radius, 6px);
+				color: var(--norn-text-base, light-dark(#16181d, #eceef3));
+				font: inherit;
+			}
+
+			& input {
+				inline-size: 100%;
+				padding: 0 var(--norn-space-s, 0.75rem) 0 calc(var(--norn-space-xs, 0.5rem) + var(--norn-ui-icon-s, 1em) + var(--norn-space-xs, 0.5rem));
+				border: 1px solid var(--norn-ui-border-strong, light-dark(#7a8194, #6f7789));
+				background: var(--norn-surface-base, light-dark(#ffffff, #101216));
+			}
+
+			& input:dir(rtl) {
+				padding: 0 calc(var(--norn-space-xs, 0.5rem) + var(--norn-ui-icon-s, 1em) + var(--norn-space-xs, 0.5rem)) 0 var(--norn-space-s, 0.75rem);
+			}
+
+			& button {
+				--_state: 0%;
+				display: inline-flex;
+				align-items: center;
+				gap: var(--norn-space-2xs, 0.25rem);
+				padding: 0 var(--norn-space-s, 0.75rem);
+				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%);
+				}
+			}
+
+			/* The button's own icon is for a field too narrow for its text. */
+			& button > norn-icon {
+				display: none;
+			}
+
+			/* With live results, the button is only a fallback. */
+			&[data-live] button {
+				display: none;
+			}
+
+			@container (max-width: 16rem) {
+				& button > norn-icon {
+					display: inline-flex;
+				}
+
+				& button > span {
+					position: absolute;
+					inline-size: 1px;
+					block-size: 1px;
+					overflow: hidden;
+					clip-path: inset(50%);
+					white-space: nowrap;
+				}
+			}
+
+			& [role="status"] {
+				margin: 0;
+				color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+				font-size: var(--norn-font-size-s, 0.875rem);
+			}
+
+			/* The results float over what is below the field. */
+			& ol {
+				position: absolute;
+				inset-inline: 0;
+				inset-block-start: calc(100% + var(--norn-space-2xs, 0.25rem));
+				z-index: 10;
+				display: grid;
+				grid-template-columns: minmax(0, 1fr);
+				gap: var(--norn-space-s, 0.75rem);
+				max-block-size: min(60dvh, 24rem);
+				margin: 0;
+				padding: var(--norn-space-s, 0.75rem);
+				overflow-y: auto;
+				border-radius: var(--norn-ui-border-radius, 6px);
+				background: var(--norn-surface-raised, light-dark(hsl(40, 14%, 96%), #242932));
+				box-shadow: var(--norn-ui-shadow, 0 6px 20px light-dark(rgb(22 24 29 / 0.08), rgb(0 0 0 / 0.4)));
+				list-style: none;
+
+				&[hidden] {
+					display: none;
+				}
+			}
+
+			& li {
+				display: grid;
+				grid-template-columns: minmax(0, 1fr);
+				gap: var(--norn-space-2xs, 0.25rem);
+			}
+
+			& li p {
+				margin: 0;
+				color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+				font-size: var(--norn-font-size-s, 0.875rem);
+			}
+
+			& mark {
+				background: none;
+				color: var(--norn-text-base, light-dark(#16181d, #eceef3));
+				font-weight: 700;
+			}
+
+			@media (pointer: coarse) {
+				& :is(input, button) {
+					min-block-size: 2.75rem;
+				}
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				& button {
+					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) {
+				& ol {
+					border: 1px solid CanvasText;
+				}
+			}
+		}
+	}
+</style>
+<script>
+	{
+		const LIMIT = 8;
+		const DELAY_MS = 200;
+
+		/** Pagefind's excerpt as nodes: text, and `<mark>` for its highlights. Anything else stays text. */
+		const excerpt = (html) =>
+			html.split(/(<mark>.*?<\/mark>)/).map((part) => {
+				const holder = document.createElement("template");
+				holder.innerHTML = part.replace(/<\/?mark>/g, "");
+				const text = holder.content.textContent;
+				if (!part.startsWith("<mark>")) return document.createTextNode(text);
+				const mark = document.createElement("mark");
+				mark.textContent = text;
+				return mark;
+			});
+
+		/** Live results from a Pagefind index. Without one, the form searches the web. */
+		class SiteSearch extends HTMLElement {
+			#wired = false;
+			#pagefind;
+			#latest = 0;
+
+			async connectedCallback() {
+				if (this.#wired) return;
+				this.#wired = true;
+				// The label names the field, and the placeholder says the same in the field.
+				const input = this.querySelector('input[type="search"]');
+				input.placeholder = this.querySelector("label > span")?.textContent.trim() ?? "";
+				const search = this.querySelector("search");
+				try {
+					this.#pagefind = await import(new URL(search.dataset.bundle, document.baseURI).href);
+					await this.#pagefind.options?.({ excerptLength: 20 });
+				} catch {
+					return;
+				}
+				this.dataset.live = "";
+				input.addEventListener("input", () => this.#search(input.value));
+				this.querySelector("form").addEventListener("submit", (event) => {
+					event.preventDefault();
+					this.querySelector("ol a")?.focus();
+				});
+			}
+
+			async #search(query) {
+				const run = ++this.#latest;
+				const list = this.querySelector("ol");
+				const status = this.querySelector('[role="status"]');
+				if (!query.trim()) {
+					list.hidden = true;
+					list.replaceChildren();
+					status.textContent = "";
+					return;
+				}
+				const found = await this.#pagefind.debouncedSearch(query, {}, DELAY_MS);
+				if (found === null || run !== this.#latest) return;
+				const pages = await Promise.all(found.results.slice(0, LIMIT).map((result) => result.data()));
+				if (run !== this.#latest) return;
+				list.replaceChildren(
+					...pages.map((page) => {
+						const item = document.createElement("li");
+						const link = document.createElement("a");
+						link.href = page.url;
+						link.textContent = page.meta?.title || page.url;
+						const text = document.createElement("p");
+						text.append(...excerpt(page.excerpt ?? ""));
+						item.append(link, text);
+						return item;
+					}),
+				);
+				list.hidden = !pages.length;
+				const total = found.results.length;
+				status.textContent = total ? this.#count(total) : this.#string("none");
+			}
+
+			/** One of the status texts the page holds, or "" when its slot and fallback are empty. */
+			#string(key) {
+				return this.querySelector(`search > [hidden] > [data-string="${key}"]`)?.textContent.trim() ?? "";
+			}
+
+			/** The status for a count, in the plural form and number format of the nearest `lang`. */
+			#count(total) {
+				const lang = this.closest("[lang]")?.lang || undefined;
+				let category = "other";
+				let number = String(total);
+				try {
+					category = new Intl.PluralRules(lang).select(total);
+					number = new Intl.NumberFormat(lang).format(total);
+				} catch {
+					// An invalid lang keeps the defaults.
+				}
+				return (this.#string(`results-${category}`) || this.#string("results-other")).replaceAll("{count}", number);
+			}
+		}
+
+		if (!customElements.get("norn-search")) customElements.define("norn-search", SiteSearch);
+	}
+</script>