@allons-y/webc-patterns 0.1.0-beta.0 → 0.1.0-beta.3

package/components/norn-segmented-control.webc

@@ -0,0 +1,143 @@
+<!---
+/*
+ * 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 options, after checking they come with the name that makes their radios one group. */
+const grouped = (options, name) => {
+	if (options && (typeof name !== "string" || !name)) throw new Error("norn-segmented-control: `:@options` needs `@name`, or each radio is its own group and several can be checked at once.");
+	return options;
+};
+
+/** Reached only from the `legend` slot's fallback: a group without a name fails the build. */
+const unnamed = () => {
+	throw new Error('norn-segmented-control: the group needs a name. Put one element in the `legend` slot, such as `<span slot="legend">Size</span>`.');
+};
+</script>
+<fieldset :data-icon-only="iconOnly === true || iconOnly === '' || iconOnly === 'true' ? '' : undefined">
+	<legend><slot name="legend"><span webc:nokeep @text="unnamed()"></span></slot></legend>
+	<template webc:nokeep webc:if="grouped(options, name)">
+		<label webc:for="option of options" :title="option.label">
+			<input type="radio" :name="name" :value="option.value" :checked="option.checked ? '' : undefined" />
+			<norn-icon webc:if="option.icon" :@name="option.icon" @size="m"></norn-icon>
+			<span @text="option.label"></span>
+		</label>
+	</template>
+	<slot webc:else></slot>
+</fieldset>
+<style>
+	@layer norn.components {
+		norn-segmented-control {
+			--_gap: 2px;
+			--_current: 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)));
+			display: inline-flex;
+			max-inline-size: 100%;
+
+			& fieldset {
+				box-sizing: border-box;
+				display: grid;
+				grid-auto-columns: minmax(0, 1fr);
+				grid-auto-flow: column;
+				gap: var(--_gap);
+				min-inline-size: 0;
+				margin: 0;
+				padding: var(--_gap);
+				border: 0;
+				border-radius: var(--norn-ui-border-radius, 6px);
+				background: var(--norn-surface-raised, light-dark(hsl(40, 14%, 96%), #242932));
+			}
+
+			& legend,
+			& [data-icon-only] label > span {
+				box-sizing: border-box;
+				position: absolute;
+				inline-size: 1px;
+				block-size: 1px;
+				overflow: hidden;
+				clip-path: inset(50%);
+				white-space: nowrap;
+			}
+
+			/* The radio covers its label, so a click anywhere on the option selects it, and the native control keeps the focus. */
+			& label {
+				--_state: 0%;
+				--_tint: transparent;
+				box-sizing: border-box;
+				position: relative;
+				z-index: 0;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				gap: var(--norn-space-2xs, 0.25rem);
+				min-inline-size: 2.5rem;
+				min-block-size: calc(var(--norn-ui-control-height, 2.25rem) - 2 * var(--_gap));
+				padding-inline: var(--norn-space-s, 0.75rem);
+				border-radius: calc(var(--norn-ui-border-radius, 6px) - var(--_gap));
+				background-color: color-mix(in oklab, currentcolor var(--_state), var(--_tint));
+				color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+				cursor: pointer;
+				overflow-wrap: anywhere;
+				text-align: center;
+
+				&:hover {
+					--_state: var(--norn-ui-state-hover, 8%);
+				}
+
+				&:active {
+					--_state: var(--norn-ui-state-press, 12%);
+				}
+
+				&:has(input:checked) {
+					--_tint: color-mix(in oklab, var(--_current) 14%, transparent);
+					color: var(--_current);
+				}
+
+				/* The ring sits inside the option, clear of the track's edge. */
+				&:has(input: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: calc(-1 * var(--norn-ui-focus-offset, 2px));
+				}
+			}
+
+			& input {
+				box-sizing: border-box;
+				position: absolute;
+				inset: 0;
+				z-index: 1;
+				margin: 0;
+				opacity: 0;
+				cursor: pointer;
+			}
+
+			@media (pointer: coarse) {
+				& label {
+					min-block-size: 2.75rem;
+				}
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				& label {
+					transition: background-color var(--norn-ui-motion-duration, 150ms) var(--norn-ui-motion-easing, cubic-bezier(0.2, 0, 0, 1)),
+						color var(--norn-ui-motion-duration, 150ms) var(--norn-ui-motion-easing, cubic-bezier(0.2, 0, 0, 1));
+				}
+			}
+
+			/* The checked option fills itself, since the browser replaces the tint. */
+			@media (forced-colors: active) {
+				& label:has(input:checked) {
+					background-color: Highlight;
+					color: HighlightText;
+					forced-color-adjust: none;
+				}
+
+				& label:has(input:focus-visible) {
+					outline-color: CanvasText;
+				}
+			}
+		}
+	}
+</style>

package/components/norn-side-nav.webc

@@ -0,0 +1,149 @@
+<!---
+/*
+ * 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-side-nav-' + uid">
+	<span data-label :id="'norn-side-nav-' + uid"><slot name="label"><span webc:nokeep @text="nornComponentStrings?.('norn-side-nav', 'label', $data.page) || 'Pages'"></span></slot></span>
+	<slot name="search"></slot>
+	<ul>
+		<li webc:for="item of items">
+			<a
+				:href="item.href"
+				:aria-current="item.href === $data.page.url ? 'page' : (item.children || []).some((child) => child.href === $data.page.url) ? 'true' : undefined"
+			><norn-icon webc:if="item.icon" :@name="item.icon"></norn-icon><span @text="item.title"></span></a>
+			<ul webc:if="item.children && item.children.length">
+				<li webc:for="child of item.children">
+					<a :href="child.href" :aria-current="child.href === $data.page.url ? 'page' : undefined"><span @text="child.title"></span></a>
+				</li>
+			</ul>
+		</li>
+	</ul>
+</nav>
+<style>
+	@layer norn.components {
+		norn-side-nav {
+			display: flex;
+			flex-direction: column;
+			min-block-size: 0;
+			font-size: var(--norn-font-size-s, 0.875rem);
+
+			& nav {
+				display: flex;
+				flex-direction: column;
+				gap: var(--norn-space-s, 0.75rem);
+				min-block-size: 0;
+			}
+
+			& nav > [data-label] {
+				position: absolute;
+				inline-size: 1px;
+				block-size: 1px;
+				overflow: hidden;
+				clip-path: inset(50%);
+				white-space: nowrap;
+			}
+
+			& nav > ul,
+			& nav > ul ul {
+				display: flex;
+				flex-direction: column;
+				gap: var(--norn-space-2xs, 0.25rem);
+				margin: 0;
+				padding: 0;
+				list-style: none;
+			}
+
+			/* Padding with an equal negative margin keeps focus rings inside the scroll box, which would clip them. */
+			& nav > ul {
+				box-sizing: border-box;
+				min-block-size: 0;
+				margin: -6px;
+				padding: 6px;
+				overflow-y: auto;
+				overscroll-behavior: contain;
+			}
+
+			/* An item with a nested list stacks them with the list's gap, and keeps a little room below. */
+			& nav > ul li:has(> ul) {
+				display: flex;
+				flex-direction: column;
+				gap: var(--norn-space-2xs, 0.25rem);
+				padding-block-end: var(--norn-space-xs, 0.5rem);
+			}
+
+			& nav > ul ul {
+				margin-inline: var(--norn-space-s, 0.75rem) 0;
+			}
+
+			& nav > ul a {
+				--_state: 0%;
+				--_tint: transparent;
+				box-sizing: border-box;
+				display: flex;
+				align-items: center;
+				gap: var(--norn-space-xs, 0.5rem);
+				padding: var(--norn-space-2xs, 0.25rem) var(--norn-space-xs, 0.5rem);
+				border-radius: var(--norn-ui-radius-s, 4px);
+				background-color: color-mix(in oklab, currentcolor var(--_state), var(--_tint));
+				color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+				text-decoration: none;
+				overflow-wrap: anywhere;
+
+				&:hover {
+					--_state: var(--norn-ui-state-hover, 8%);
+				}
+
+				&:active {
+					--_state: var(--norn-ui-state-press, 12%);
+				}
+
+				&[aria-current="page"] {
+					--_tint: color-mix(in oklab, 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))) var(--norn-ui-state-press, 12%), 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)));
+				}
+			}
+
+			& nav > ul norn-icon {
+				flex: none;
+				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)));
+			}
+
+			@media (pointer: coarse) {
+				& nav > ul a {
+					min-block-size: 2.75rem;
+				}
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				& nav > ul a {
+					transition: background-color var(--norn-ui-motion-duration, 150ms) var(--norn-ui-motion-easing, cubic-bezier(0.2, 0, 0, 1));
+				}
+			}
+
+			/* The current page fills itself, since the browser replaces the tint. */
+			@media (forced-colors: active) {
+				& nav > ul a[aria-current="page"] {
+					background-color: Highlight;
+					color: HighlightText;
+					forced-color-adjust: none;
+
+					& norn-icon {
+						color: HighlightText;
+					}
+				}
+
+				& nav > ul a:focus-visible {
+					outline-color: CanvasText;
+				}
+			}
+
+			@media print {
+				display: none;
+			}
+		}
+	}
+</style>

package/components/norn-sidebar-layout.webc

@@ -0,0 +1,185 @@
+<!---
+/*
+ * 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/.
+ */
+--->
+<div
+	:style="[typeof navWidth === 'string' && navWidth ? '--_nav: ' + navWidth : '', typeof columns === 'string' && columns ? '--_columns: ' + columns : ''].filter(Boolean).join('; ')"
+	:data-gap="['s', 'm', 'l', 'xl'].includes(gap) ? gap : undefined"
+>
+	<details>
+		<summary><slot name="summary"><span webc:nokeep @text="nornComponentStrings?.('norn-sidebar-layout', 'summary', $data.page) || 'Menu'"></span></slot></summary>
+		<slot name="nav"></slot>
+	</details>
+	<article><slot></slot></article>
+</div>
+<style>
+	@layer norn.components {
+		norn-sidebar-layout {
+			display: block;
+			container-type: inline-size;
+			inline-size: min(100% - 2 * var(--norn-space-m, 1.25rem), var(--norn-layout-width, 64rem));
+			margin-inline: auto;
+			padding-block: var(--norn-space-l, 2rem);
+
+			& > div {
+				display: grid;
+				grid-template-columns: var(--_nav, 14rem) minmax(0, 1fr);
+				align-items: start;
+				gap: var(--norn-space-l, 2rem);
+
+				&[data-gap="s"] {
+					gap: var(--norn-space-s, 0.75rem);
+				}
+
+				&[data-gap="m"] {
+					gap: var(--norn-space-m, 1.25rem);
+				}
+
+				&[data-gap="xl"] {
+					gap: var(--norn-space-xl, 4rem);
+				}
+			}
+
+			/* The navigation stays in view; the norn-side-nav inside lets only its list scroll. The details is only a column here: its summary is hidden, and its content always shows. */
+			& > div > details {
+				position: sticky;
+				inset-block-start: var(--norn-space-m, 1.25rem);
+				display: flex;
+				flex-direction: column;
+				max-block-size: calc(100dvh - 2 * var(--norn-space-m, 1.25rem));
+
+				&::details-content {
+					content-visibility: visible;
+					display: contents;
+				}
+			}
+
+			& > div > details > summary {
+				display: none;
+			}
+
+			& > div > article {
+				display: grid;
+				grid-template-columns: var(--_columns, minmax(0, 1fr));
+				align-content: start;
+				gap: var(--norn-space-m, 1.25rem);
+				min-inline-size: 0;
+			}
+
+			& > div > article > :is(article, section) {
+				display: grid;
+				grid-template-columns: minmax(0, 1fr);
+				align-content: start;
+				gap: var(--norn-space-s, 0.75rem);
+				min-inline-size: 0;
+			}
+
+			/* Narrow, the columns stack and the navigation is a control that opens it. */
+			@container (max-width: 37.5rem) {
+				& > div {
+					grid-template-columns: minmax(0, 1fr);
+				}
+
+				& > div > details {
+					position: static;
+					display: block;
+					max-block-size: none;
+
+					&:not([open])::details-content {
+						content-visibility: hidden;
+					}
+
+					&::details-content {
+						display: block;
+					}
+				}
+
+				& > div > details > summary {
+					--_state: 0%;
+					box-sizing: border-box;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					gap: var(--norn-space-s, 0.75rem);
+					min-block-size: var(--norn-ui-control-height, 2.25rem);
+					margin-block-end: 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), var(--norn-surface-raised, light-dark(hsl(40, 14%, 96%), #242932)));
+					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;
+					}
+				}
+
+				& > div > details[open] > summary::after {
+					rotate: 225deg;
+				}
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				& > div > 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) {
+				& > div > details > summary::after {
+					border-color: CanvasText;
+				}
+			}
+
+			@media print {
+				& > div {
+					grid-template-columns: minmax(0, 1fr);
+				}
+
+				& > div > details > summary {
+					display: none;
+				}
+			}
+		}
+
+		/* Without ::details-content a closed details can't show its content, so the control is always there. */
+		@supports not selector(::details-content) {
+			norn-sidebar-layout > div > details > summary {
+				display: flex;
+				min-block-size: var(--norn-ui-control-height, 2.25rem);
+				align-items: center;
+				font-weight: 600;
+				cursor: pointer;
+			}
+		}
+	}
+</style>

package/components/norn-simple-table.webc

@@ -0,0 +1,120 @@
+<!---
+/*
+ * 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/.
+ */
+--->
+<span hidden :id="'norn-simple-table-' + uid"><slot name="label"></slot></span>
+<div><slot></slot></div>
+<style>
+	@layer norn.components {
+		norn-simple-table {
+			display: block;
+			min-inline-size: 0;
+
+			/* Shadows at the edges that have more to scroll to: the first two are the page's color and scroll with the content, so they cover the shadows underneath until the content has moved. */
+			& > div {
+				--_bg: var(--norn-surface-base, light-dark(#ffffff, #101216));
+				--_shadow: color-mix(in oklab, var(--norn-text-base, light-dark(#16181d, #eceef3)) 18%, transparent);
+				overflow-x: auto;
+				background:
+					linear-gradient(to right, var(--_bg) 30%, transparent) local 0 0 / 2rem 100% no-repeat,
+					linear-gradient(to left, var(--_bg) 30%, transparent) local 100% 0 / 2rem 100% no-repeat,
+					radial-gradient(farthest-side at 0 50%, var(--_shadow), transparent) scroll 0 0 / 0.75rem 100% no-repeat,
+					radial-gradient(farthest-side at 100% 50%, var(--_shadow), transparent) scroll 100% 0 / 0.75rem 100% no-repeat;
+			}
+
+			& > div > table {
+				min-inline-size: 100%;
+				border-collapse: collapse;
+				border-block-end: 1px solid var(--norn-ui-border-color, light-dark(#d3d8e2, #2d323e));
+			}
+
+			& > div > table > caption {
+				padding-block-end: var(--norn-space-xs, 0.5rem);
+				color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+				text-align: start;
+			}
+
+			& > div > table :is(th, td) {
+				min-inline-size: 7rem;
+				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;
+				vertical-align: top;
+			}
+
+			/* The last column is usually the one with sentences, so it keeps room to wrap into rather than a column of words. */
+			& > div > table :is(th, td):last-child {
+				min-inline-size: 10rem;
+			}
+
+			/* Wrap between words only: a token split across lines reads as two. */
+			& > div > table :is(th, td, code) {
+				overflow-wrap: normal;
+				word-break: normal;
+			}
+
+			& > div > table code {
+				white-space: nowrap;
+			}
+
+			@media print {
+				& > div {
+					overflow: visible;
+					background: none;
+				}
+			}
+		}
+	}
+</style>
+<script>
+	{
+		/** A table box that is a named tab stop only while it scrolls. */
+		class SimpleTable extends HTMLElement {
+			#observer;
+
+			connectedCallback() {
+				const box = this.querySelector(":scope > div");
+				if (!box || typeof ResizeObserver === "undefined") return;
+				const label = this.querySelector(":scope > span[hidden][id]");
+				const caption = box.querySelector("caption");
+				if (caption && label) caption.id ||= `${label.id}-caption`;
+				const named = label?.textContent.trim() ? label : caption?.textContent.trim() ? caption : undefined;
+				const headings = [...this.querySelectorAll("thead th")].map((cell) => cell.textContent.trim()).filter(Boolean);
+				const fit = () => {
+					if (box.scrollWidth > box.clientWidth) {
+						box.setAttribute("tabindex", "0");
+						if (named) {
+							box.setAttribute("role", "region");
+							box.setAttribute("aria-labelledby", named.id);
+						} else if (headings.length) {
+							box.setAttribute("role", "region");
+							box.setAttribute("aria-label", headings.join(", "));
+						}
+					} else {
+						box.removeAttribute("tabindex");
+						box.removeAttribute("role");
+						box.removeAttribute("aria-labelledby");
+						box.removeAttribute("aria-label");
+					}
+				};
+				this.#observer?.disconnect();
+				// The box keeps its width when the table grows, so watch both.
+				this.#observer = new ResizeObserver(fit);
+				this.#observer.observe(box);
+				const table = box.querySelector("table");
+				if (table) this.#observer.observe(table);
+			}
+
+			disconnectedCallback() {
+				this.#observer?.disconnect();
+				this.#observer = undefined;
+			}
+		}
+
+		if (!customElements.get("norn-simple-table")) customElements.define("norn-simple-table", SimpleTable);
+	}
+</script>

package/components/norn-skip-link.webc

@@ -0,0 +1,41 @@
+<!---
+/*
+ * 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 || '#main'"><slot name="label"><span webc:nokeep @text="nornComponentStrings?.('norn-skip-link', 'label', $data.page) || 'Skip to content'"></span></slot></a>
+<style>
+	@layer norn.components {
+		norn-skip-link {
+			display: block;
+
+			& a {
+				position: absolute;
+				inset-block-start: -5rem;
+				inset-inline-start: var(--norn-space-m, 1.25rem);
+				z-index: 10;
+				padding: var(--norn-space-xs, 0.5rem) var(--norn-space-s, 0.75rem);
+				border-radius: var(--norn-ui-border-radius, 6px);
+				background: var(--norn-surface-raised, light-dark(hsl(40, 14%, 96%), #242932));
+				color: var(--norn-text-base, light-dark(#16181d, #eceef3));
+
+				&:focus {
+					inset-block-start: var(--norn-space-xs, 0.5rem);
+				}
+			}
+
+			@media (forced-colors: active) {
+				& a {
+					border: 1px solid CanvasText;
+				}
+			}
+
+			@media print {
+				display: none;
+			}
+		}
+	}
+</style>