@devslab/site-kit 0.12.0 → 0.13.0

package/dist/solid.server.js

@@ -1,5 +1,5 @@
 import { createComponent, escape, mergeProps, ssr, ssrAttribute, ssrElement, ssrHydrationKey } from "solid-js/web";
-import { For, Show, createSignal, createUniqueId, onMount } from "solid-js";
+import { For, Show, createMemo, createSignal, createUniqueId, onMount } from "solid-js";
 import { Button, Field, Icon, IconButton } from "@devslab/dds-solid";
 //#region src/core/locales.mjs
 var LOCALES = Object.freeze([
@@ -420,6 +420,12 @@ function spriteMarkup(countries, bodies, uid) {
 * the bodies through loadFlagBodies, which the browser build emits as its
 * own chunk. Zero-sized rather than display:none so the referenced clip
 * paths and gradients still resolve.
+*
+* "No server HTML" is decided by looking at the element, not at whether
+* hydration is running: a hydration that drifted upstream recreates this
+* element from the template, empty, while the hydration context is still
+* set. Trusting the context left the first consumer with a blank flag
+* box; an empty sprite loads its bodies whatever the reason it is empty.
 */
 function FlagSprite(props) {
 	const bodies = flagBodiesNow();
@@ -514,32 +520,59 @@ var _tmpl$3$2 = [
 	"</ul></details></nav>"
 ];
 var _tmpl$4$2 = [
-	"<footer",
-	" class=\"site-footer\"",
-	"><div class=\"site-footer__inner\"><!--$-->",
-	"<!--/--><div class=\"site-footer__row\"><p class=\"site-footer__brand\"><!--$-->",
-	"<!--/--><strong>",
-	"</strong><!--$-->",
-	"<!--/--></p><ul class=\"site-footer__links\"><!--$-->",
-	"<!--/--><li>",
-	"</li></ul></div></div></footer>"
+	"<p",
+	" class=\"site-footer__brand\"><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--></p>"
+];
+var _tmpl$5$2 = [
+	"<strong",
+	">",
+	"</strong>"
 ];
-var _tmpl$5$2 = ["<span", " aria-hidden=\"true\">·</span>"];
-var _tmpl$6$2 = [
+var _tmpl$6$2 = ["<span", " aria-hidden=\"true\">·</span>"];
+var _tmpl$7$2 = [
 	"<a",
 	">",
 	"</a>"
 ];
-var _tmpl$7$2 = [
+var _tmpl$8$1 = [
+	"<ul",
+	" class=\"site-footer__links\"><!--$-->",
+	"<!--/--><li>",
+	"</li></ul>"
+];
+var _tmpl$9$1 = [
 	"<bdi",
 	">",
 	"</bdi>"
 ];
-var _tmpl$8$1 = [
+var _tmpl$0$1 = [
 	"<a",
 	"><bdi>",
 	"</bdi></a>"
 ];
+var _tmpl$1$1 = [
+	"<footer",
+	" class=\"site-footer\"",
+	"><div class=\"site-footer__inner\"><!--$-->",
+	"<!--/--><div class=\"site-footer__row\"><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--></div></div></footer>"
+];
+var _tmpl$10 = [
+	"<div",
+	" class=\"site-footer__identity\"><!--$-->",
+	"<!--/--><div class=\"site-footer__details\">",
+	"</div></div>"
+];
+var _tmpl$11 = [
+	"<nav",
+	" class=\"site-footer__nav\"",
+	">",
+	"</nav>"
+];
 function ThemeToggle(props) {
 	const order = [
 		"system",
@@ -591,9 +624,12 @@ function ThemeToggle(props) {
 		}
 	});
 }
+/** The emphasis class a `SiteLink` asks for, or none. */
+var linkClass = (item) => item.emphasis ? "site-link--emphasis" : void 0;
 function SiteHeader(props) {
 	const [menuOpen, setMenuOpen] = createSignal(false);
-	return ssr(_tmpl$$4, ssrHydrationKey(), escape(props.messages.skipToContent), ssrAttribute("href", escape(props.brand.href, true), false), escape(props.brand.logo), escape(props.brand.name), escape(createComponent(Button, {
+	const brand = createMemo(() => props.brand);
+	return ssr(_tmpl$$4, ssrHydrationKey(), escape(props.messages.skipToContent), ssrAttribute("href", escape(brand().href, true), false) + ssrAttribute("aria-label", escape(brand().label, true), false), escape(brand().logo), escape(brand().name), escape(createComponent(Button, {
 		"class": "site-menu-button",
 		tone: "ghost",
 		get ["aria-expanded"]() {
@@ -608,15 +644,20 @@ function SiteHeader(props) {
 		get each() {
 			return props.navigation;
 		},
-		children: (item) => ssr(_tmpl$2$2, ssrHydrationKey(), ssrAttribute("href", escape(item.href, true), false) + ssrAttribute("target", item.external ? "_blank" : escape(void 0, true), false) + ssrAttribute("rel", item.external ? "noreferrer" : escape(void 0, true), false), escape(item.label))
-	})), ssrAttribute("data-open", escape(String(menuOpen()), true), false), escape(createComponent(LocaleMenu, mergeProps({
-		get state() {
+		children: (item) => ssr(_tmpl$2$2, ssrHydrationKey(), ssrAttribute("class", escape(linkClass(item), true), false) + ssrAttribute("href", escape(item.href, true), false) + ssrAttribute("target", item.external ? "_blank" : escape(void 0, true), false) + ssrAttribute("rel", item.external ? "noreferrer" : escape(void 0, true), false), escape(item.label))
+	})), ssrAttribute("data-open", escape(String(menuOpen()), true), false), escape(createComponent(Show, {
+		get when() {
 			return props.locale;
 		},
-		get messages() {
-			return props.messages;
-		}
-	}, () => props.localeVariant ? { variant: props.localeVariant } : {}, () => props.localeRegistry ? { registry: props.localeRegistry } : {}, () => props.onLocaleChange ? { onLocaleChange: props.onLocaleChange } : {}))), props.theme && escape(createComponent(ThemeToggle, mergeProps(() => props.theme, { get messages() {
+		children: (locale) => createComponent(LocaleMenu, mergeProps({
+			get state() {
+				return locale();
+			},
+			get messages() {
+				return props.messages;
+			}
+		}, () => props.localeVariant ? { variant: props.localeVariant } : {}, () => props.localeRegistry ? { registry: props.localeRegistry } : {}, () => props.onLocaleChange ? { onLocaleChange: props.onLocaleChange } : {}))
+	})), props.theme && escape(createComponent(ThemeToggle, mergeProps(() => props.theme, { get messages() {
 		return props.messages;
 	} }))), escape(props.actions));
 }
@@ -659,7 +700,34 @@ function FooterLocaleMenu(props) {
 */
 function SiteFooter(props) {
 	const registry = () => props.localeRegistry ?? FAMILY_LOCALES;
-	return ssr(_tmpl$4$2, ssrHydrationKey(), ssrAttribute("aria-label", escape(props.messages.footerLabel, true), false), escape(createComponent(Show, {
+	const brand = createMemo(() => props.brand);
+	const details = createMemo(() => props.details);
+	const brandLine = () => ssr(_tmpl$4$2, ssrHydrationKey(), escape(brand().logo), escape(createComponent(Show, {
+		get when() {
+			return brand().name;
+		},
+		children: (name) => ssr(_tmpl$5$2, ssrHydrationKey(), escape(name()))
+	})), escape(createComponent(For, {
+		get each() {
+			return props.family ?? [];
+		},
+		children: (item) => [ssr(_tmpl$6$2, ssrHydrationKey()), ssr(_tmpl$7$2, ssrHydrationKey() + ssrAttribute("class", escape(linkClass(item), true), false) + ssrAttribute("href", escape(item.href, true), false), escape(item.label))]
+	})));
+	const linkList = () => ssr(_tmpl$8$1, ssrHydrationKey(), escape(createComponent(For, {
+		get each() {
+			return props.links;
+		},
+		children: (item) => ssr(_tmpl$2$2, ssrHydrationKey(), ssrAttribute("class", escape(linkClass(item), true), false) + ssrAttribute("href", escape(item.href, true), false), escape(item.label))
+	})), escape(createComponent(Show, {
+		get when() {
+			return props.copyrightHref;
+		},
+		get fallback() {
+			return ssr(_tmpl$9$1, ssrHydrationKey(), escape(props.copyright));
+		},
+		children: (href) => ssr(_tmpl$0$1, ssrHydrationKey() + ssrAttribute("href", escape(href(), true), false), escape(props.copyright))
+	})));
+	return ssr(_tmpl$1$1, ssrHydrationKey(), ssrAttribute("aria-label", escape(props.messages.footerLabel, true), false), escape(createComponent(Show, {
 		get when() {
 			return props.locale;
 		},
@@ -677,24 +745,22 @@ function SiteFooter(props) {
 				return props.onLocaleSelect;
 			}
 		})
-	})), escape(props.brand.logo), escape(props.brand.name), escape(createComponent(For, {
-		get each() {
-			return props.family ?? [];
+	})), escape(createComponent(Show, {
+		get when() {
+			return details();
 		},
-		children: (item) => [ssr(_tmpl$5$2, ssrHydrationKey()), ssr(_tmpl$6$2, ssrHydrationKey() + ssrAttribute("href", escape(item.href, true), false), escape(item.label))]
-	})), escape(createComponent(For, {
-		get each() {
-			return props.links;
+		get fallback() {
+			return brandLine();
 		},
-		children: (item) => ssr(_tmpl$2$2, ssrHydrationKey(), ssrAttribute("href", escape(item.href, true), false), escape(item.label))
+		children: (content) => ssr(_tmpl$10, ssrHydrationKey(), escape(brandLine()), escape(content()))
 	})), escape(createComponent(Show, {
 		get when() {
-			return props.copyrightHref;
+			return props.linksLabel;
 		},
 		get fallback() {
-			return ssr(_tmpl$7$2, ssrHydrationKey(), escape(props.copyright));
+			return linkList();
 		},
-		children: (href) => ssr(_tmpl$8$1, ssrHydrationKey() + ssrAttribute("href", escape(href(), true), false), escape(props.copyright))
+		children: (label) => ssr(_tmpl$11, ssrHydrationKey(), ssrAttribute("aria-label", escape(label(), true), false), escape(linkList()))
 	})));
 }
 //#endregion
@@ -755,13 +821,16 @@ var _tmpl$7$1 = [
 ];
 function MarketingShell(props) {
 	const mainClass = () => props.mainWidth === "bleed" ? "site-main site-main--bleed" : "site-main";
-	return ssr(_tmpl$$3, ssrHydrationKey(), escape(createComponent(SiteHeader, mergeProps(() => props.header))), ssrAttribute("class", escape(mainClass(), true), false), escape(props.children), escape(createComponent(SiteFooter, mergeProps(() => props.footer))));
+	const header = createMemo(() => props.header);
+	const footer = createMemo(() => props.footer);
+	return ssr(_tmpl$$3, ssrHydrationKey(), escape(createComponent(SiteHeader, mergeProps(header))), ssrAttribute("class", escape(mainClass(), true), false), escape(props.children), escape(createComponent(SiteFooter, mergeProps(footer))));
 }
 function LegalLayout(props) {
 	return ssr(_tmpl$2$1, ssrHydrationKey(), escape(props.title), escape(props.messages.updatedLabel), ssrAttribute("datetime", escape(props.updatedAt, true), false), escape(props.updatedAt), escape(props.children));
 }
 function StatusBanner(props) {
-	return ssr(_tmpl$3$1, ssrHydrationKey(), `site-status site-status--${escape(props.tone, true)}`, ssrAttribute("role", props.tone === "danger" ? "alert" : "status", false) + ssrAttribute("aria-live", props.tone === "danger" ? "assertive" : "polite", false), escape(props.title), props.children && ssr(_tmpl$4$1, ssrHydrationKey(), escape(props.children)), props.action && escape(createComponent(Button, {
+	const children = createMemo(() => props.children);
+	return ssr(_tmpl$3$1, ssrHydrationKey(), `site-status site-status--${escape(props.tone, true)}`, ssrAttribute("role", props.tone === "danger" ? "alert" : "status", false) + ssrAttribute("aria-live", props.tone === "danger" ? "assertive" : "polite", false), escape(props.title), children() && ssr(_tmpl$4$1, ssrHydrationKey(), escape(children())), props.action && escape(createComponent(Button, {
 		get tone() {
 			return props.action.tone ?? "secondary";
 		},