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

package/components/norn-accordion.webc

@@ -0,0 +1,124 @@
+<!---
+/*
+ * 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><slot></slot></div>
+<style>
+	@layer norn.components {
+		norn-accordion {
+			display: block;
+			interpolate-size: allow-keywords;
+			overflow-wrap: anywhere;
+
+			& > div > details {
+				border-block-end: 1px solid var(--norn-ui-border-color, light-dark(#d3d8e2, #2d323e));
+
+				&:first-child {
+					border-block-start: 1px solid var(--norn-ui-border-color, light-dark(#d3d8e2, #2d323e));
+				}
+
+				&[open] > summary::after {
+					rotate: 225deg;
+				}
+
+				&::details-content {
+					block-size: 0;
+					overflow: hidden;
+				}
+
+				&[open]::details-content {
+					block-size: auto;
+				}
+			}
+
+			& > 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);
+				padding: var(--norn-space-s, 0.75rem) var(--norn-space-xs, 0.5rem);
+				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%);
+				}
+
+				/* The ring sits inside the summary, clear of the rules above and below. */
+				&: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;
+					margin-inline-end: var(--norn-space-2xs, 0.25rem);
+					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 > :not(summary) {
+				margin-block: 0 var(--norn-space-s, 0.75rem);
+				padding-inline: var(--norn-space-xs, 0.5rem);
+			}
+
+			@media (pointer: coarse) {
+				& > div > details > summary {
+					min-block-size: 2.75rem;
+				}
+			}
+
+			@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));
+				}
+
+				& > div > details > summary::after {
+					transition: rotate 200ms var(--norn-ui-motion-easing, cubic-bezier(0.2, 0, 0, 1));
+				}
+
+				& > div > details::details-content {
+					transition: block-size 200ms var(--norn-ui-motion-easing, cubic-bezier(0.2, 0, 0, 1)),
+						content-visibility 200ms allow-discrete;
+				}
+			}
+
+			@media (forced-colors: active) {
+				& > div > details > summary::after {
+					border-color: CanvasText;
+				}
+			}
+
+			@media print {
+				& > div > details::details-content {
+					block-size: auto;
+					content-visibility: visible;
+				}
+			}
+		}
+	}
+</style>

package/components/norn-breadcrumbs.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/.
+ */
+--->
+<nav webc:if="items && items.length" :aria-labelledby="'norn-breadcrumbs-' + uid">
+	<span data-label :id="'norn-breadcrumbs-' + uid"><slot name="label"><span webc:nokeep @text="nornComponentStrings?.('norn-breadcrumbs', 'label', $data.page) || 'Breadcrumb'"></span></slot></span>
+	<ol>
+		<li webc:for="(item, index) of items">
+			<norn-icon webc:if="index" @name="chevron-end"></norn-icon>
+			<a :href="item.href" :aria-current="index === items.length - 1 ? 'page' : undefined" @text="item.title"></a>
+		</li>
+	</ol>
+</nav>
+<style>
+	@layer norn.components {
+		norn-breadcrumbs {
+			display: block;
+			font-size: var(--norn-font-size-s, 0.875rem);
+
+			& nav > [data-label] {
+				position: absolute;
+				inline-size: 1px;
+				block-size: 1px;
+				overflow: hidden;
+				clip-path: inset(50%);
+				white-space: nowrap;
+			}
+
+			& nav > ol {
+				display: flex;
+				flex-wrap: wrap;
+				align-items: center;
+				gap: var(--norn-space-2xs, 0.25rem) var(--norn-space-xs, 0.5rem);
+				margin: 0;
+				padding: 0;
+				list-style: none;
+			}
+
+			& nav > ol > li {
+				display: inline-flex;
+				align-items: center;
+				gap: var(--norn-space-xs, 0.5rem);
+			}
+
+			& nav > ol > li > norn-icon {
+				color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+			}
+
+			/* The links are quiet until the pointer or focus is on one. */
+			& nav > ol > li > a {
+				padding-block: var(--norn-space-2xs, 0.25rem);
+				color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+				text-decoration: none;
+
+				&:is(:hover, :focus-visible) {
+					color: var(--norn-text-base, light-dark(#16181d, #eceef3));
+					text-decoration: underline;
+				}
+
+				&[aria-current="page"] {
+					color: var(--norn-text-base, light-dark(#16181d, #eceef3));
+					text-decoration: none;
+				}
+			}
+		}
+	}
+</style>

package/components/norn-callout.webc

@@ -0,0 +1,97 @@
+<!---
+/*
+ * 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 VARIANTS = { note: ["Note", "info"], tip: ["Tip", "tip"], important: ["Important", "important"], warning: ["Warning", "warning"], caution: ["Caution", "caution"] };
+
+/** A known variant, else `note`. */
+const kind = (variant) => (Object.hasOwn(VARIANTS, variant) ? variant : "note");
+</script>
+<div role="note" :data-variant="kind(variant)">
+	<p><norn-icon :@name="VARIANTS[kind(variant)][1]"></norn-icon><slot name="heading"><span @text="nornComponentStrings?.('norn-callout', kind(variant), $data.page) || VARIANTS[kind(variant)][0]"></span></slot></p>
+	<slot></slot>
+</div>
+<style>
+	@layer norn.components {
+		norn-callout {
+			--_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)));
+			display: block;
+
+			&:has(> [data-variant="tip"]) {
+				--_color: var(--norn-status-success, light-dark(#0b6b3a, #7ed6a1));
+			}
+
+			&:has(> [data-variant="warning"]) {
+				--_color: var(--norn-status-warning, light-dark(#9a4a00, #ffb36b));
+			}
+
+			&:has(> [data-variant="caution"]) {
+				--_color: var(--norn-status-danger, light-dark(#b42318, #ff8a80));
+			}
+
+			/* A quiet raised panel: a short rule, a small label, then the body set like a pull quote. */
+			& > div {
+				display: grid;
+				grid-template-columns: minmax(0, 1fr);
+				gap: var(--norn-space-s, 0.75rem);
+				padding: var(--norn-space-m, 1.25rem) var(--norn-space-l, 2rem);
+				overflow-wrap: anywhere;
+				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));
+				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);
+				line-height: 1.4;
+				text-wrap: pretty;
+
+				&::before {
+					content: "";
+					inline-size: 2rem;
+					block-size: 2px;
+					background: var(--_color);
+				}
+			}
+
+			& > div > p:first-child {
+				display: flex;
+				align-items: center;
+				gap: var(--norn-space-xs, 0.5rem);
+				margin: 0;
+				color: var(--_color);
+				font-family: var(--norn-font-body, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+				font-size: var(--norn-font-size-s, 0.875rem);
+				font-weight: 600;
+				letter-spacing: 0.08em;
+				line-height: 1.15;
+				text-transform: uppercase;
+			}
+
+			& > div > p:first-child > norn-icon {
+				flex: none;
+			}
+
+			& > div > :not(:first-child) {
+				margin: 0;
+			}
+
+			/* A fill that forced colors replaces still shows as a border. */
+			@media (forced-colors: active) {
+				& > div {
+					border: 1px solid CanvasText;
+				}
+			}
+
+			@media print {
+				& > div {
+					border: 1px solid currentcolor;
+					background: none;
+				}
+			}
+		}
+	}
+</style>

package/components/norn-card-grid.webc

@@ -0,0 +1,60 @@
+<!---
+/*
+ * 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/.
+ */
+--->
+<ul role="list" :data-gap="['s', 'l'].includes(gap) ? gap : undefined" :style="typeof min === 'string' && min ? '--_min: ' + min : ''"><slot></slot></ul>
+<style>
+	@layer norn.components {
+		norn-card-grid {
+			display: block;
+
+			& > ul {
+				--_gap: var(--norn-space-m, 1.25rem);
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--_min, 17rem)), 1fr));
+				gap: var(--_gap);
+				margin: 0;
+				padding: 0;
+				list-style: none;
+			}
+
+			& > ul[data-gap="s"] {
+				--_gap: var(--norn-space-s, 0.75rem);
+			}
+
+			& > ul[data-gap="l"] {
+				--_gap: var(--norn-space-l, 2rem);
+			}
+		}
+
+		/* Each card spans three rows, and its heading, body, and footer take one each, so they line up across a row. The rows have no gap, so a card with no footer leaves no blank space; the space between cards is a margin on each, taken back from the end of the list. */
+		@supports (grid-template-rows: subgrid) {
+			norn-card-grid {
+				& > ul {
+					row-gap: 0;
+					margin-block-end: calc(-1 * var(--_gap));
+				}
+
+				& > ul > li {
+					display: grid;
+					grid-row: span 3;
+					grid-template-rows: subgrid;
+					margin-block-end: var(--_gap);
+				}
+
+				& > ul > li > * {
+					grid-row: 1 / -1;
+				}
+
+				/* A card lays its heading, body, and footer on the rows of its tag. */
+				& > ul > li > norn-card {
+					grid-template-rows: subgrid;
+				}
+			}
+		}
+	}
+</style>

package/components/norn-card.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/.
+ */
+--->
+<article :data-accent="['accent', 'info', 'success', 'warning', 'danger'].includes(accent) ? accent : undefined" :data-title-face="titleFace === 'mono' ? 'mono' : undefined"><slot></slot></article>
+<style>
+	@layer norn.components {
+		norn-card {
+			display: grid;
+			grid-template-columns: minmax(0, 1fr);
+			block-size: 100%;
+
+			/* The article takes the rows the tag has. A norn-card-grid gives the tag three subgrid rows, one each for the heading, the body, and a footer, so they line up across a row. */
+			& > article {
+				--_state: 0%;
+				--_accent: initial;
+				box-sizing: border-box;
+				position: relative;
+				display: grid;
+				grid-row: 1 / -1;
+				grid-template-columns: minmax(0, 1fr);
+				grid-template-rows: inherit;
+				align-content: start;
+				row-gap: 0;
+				block-size: 100%;
+				padding: var(--norn-space-m, 1.25rem);
+				/* Without an accent the declaration is invalid, so there is no line and no space for one. */
+				border-block-start: 2px solid var(--_accent);
+				border-radius: var(--norn-ui-border-radius, 6px);
+				background-color: color-mix(in oklab, currentcolor var(--_state), var(--norn-surface-raised, light-dark(hsl(40, 14%, 96%), #242932)));
+
+				/* A fourth child has no row to take, so a card with more than a heading, a body, and a footer lays out on its own. */
+				&:has(> :nth-child(4)) {
+					grid-template-rows: none;
+				}
+
+				&[data-accent="accent"] {
+					--_accent: var(--norn-ui-accent, #2346d4);
+				}
+
+				&[data-accent="info"] {
+					--_accent: var(--norn-status-info, light-dark(#1b4fc4, #8fb0ff));
+				}
+
+				&[data-accent="success"] {
+					--_accent: var(--norn-status-success, light-dark(#0b6b3a, #7ed6a1));
+				}
+
+				&[data-accent="warning"] {
+					--_accent: var(--norn-status-warning, light-dark(#9a4a00, #ffb36b));
+				}
+
+				&[data-accent="danger"] {
+					--_accent: var(--norn-status-danger, light-dark(#b42318, #ff8a80));
+				}
+
+				&:has(a:hover) {
+					--_state: var(--norn-ui-state-hover, 8%);
+				}
+
+				&:has(a:active) {
+					--_state: var(--norn-ui-state-press, 12%);
+				}
+
+				/* The ring goes around the card, not around the link text. */
+				&:has(a: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);
+				}
+			}
+
+			& > article > * {
+				margin: 0;
+			}
+
+			& > article > :not(:last-child) {
+				margin-block-end: var(--norn-space-s, 0.75rem);
+			}
+
+			& > article > :is(h2, h3, h4, h5, h6),
+			& > article > norn-heading-anchor > :is(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));
+				font-size: var(--norn-font-size-l, 1.25rem);
+				line-height: 1.15;
+				text-wrap: balance;
+			}
+
+			& > article > :is(h2, h3, h4, h5, h6) a,
+			& > article > norn-heading-anchor > :is(h2, h3, h4, h5, h6) 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: none;
+				overflow-wrap: anywhere;
+
+				/* The link reaches over the whole card. */
+				&::after {
+					content: "";
+					position: absolute;
+					inset: 0;
+				}
+
+				&:hover {
+					text-decoration: underline;
+				}
+
+				&:focus-visible {
+					outline: none;
+				}
+			}
+
+			& > article > p {
+				color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+				text-wrap: pretty;
+			}
+
+			& > article[data-title-face="mono"] > :is(h2, h3, h4, h5, h6),
+			& > article[data-title-face="mono"] > norn-heading-anchor > :is(h2, h3, h4, h5, h6) {
+				font-family: var(--norn-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+				font-size: var(--norn-font-size-m, 1rem);
+				font-weight: 700;
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				& > article {
+					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) {
+				& > article {
+					border: 1px solid CanvasText;
+				}
+			}
+
+			@media print {
+				break-inside: avoid;
+			}
+		}
+	}
+</style>