@devslab/site-kit 0.8.1 → 0.9.0

package/dist/solid.server.js

@@ -460,6 +460,15 @@ var _tmpl$2$2 = [
 	"</a></li>"
 ];
 var _tmpl$3$2 = [
+	"<nav",
+	" class=\"site-footer__langs\"",
+	"><details class=\"site-footer__langs-menu\"><summary class=\"site-footer__langs-trigger\" aria-label=\"",
+	"\"><span",
+	">",
+	"</span></summary><ul class=\"site-footer__langs-list\" role=\"list\">",
+	"</ul></details></nav>"
+];
+var _tmpl$4$2 = [
 	"<footer",
 	" class=\"site-footer\"",
 	"><div class=\"site-footer__inner\"><!--$-->",
@@ -470,18 +479,12 @@ var _tmpl$3$2 = [
 	"<!--/--><li>",
 	"</li></ul></div></div></footer>"
 ];
-var _tmpl$4$2 = [
-	"<nav",
-	" class=\"site-footer__langs\"",
-	">",
-	"</nav>"
-];
-var _tmpl$5$2 = [
+var _tmpl$5$2 = ["<span", " aria-hidden=\"true\">·</span>"];
+var _tmpl$6$2 = [
 	"<a",
 	">",
 	"</a>"
 ];
-var _tmpl$6$2 = ["<span", " aria-hidden=\"true\">·</span>"];
 var _tmpl$7$2 = [
 	"<bdi",
 	">",
@@ -573,6 +576,30 @@ function SiteHeader(props) {
 	} }))), escape(props.actions));
 }
 /**
+* The footer's language row, collapsed.
+*
+* It used to be every language laid out flat, which is a different length in
+* every product — ten for one, twenty for another — so the same footer carried
+* a different visual weight depending on how many languages the product sells
+* in. A `<details>` keeps all of them: the anchors are in the document whether
+* it is open or not, so a crawler still follows every locale, and it works with
+* no JavaScript. Same mechanism as the header's flag menu, including Escape
+* returning focus to the trigger.
+*
+* The trigger is the current language's own name rather than a translated word
+* for "language": it is the one label already meaningful to a reader who cannot
+* read the page, and it is what the flat row marked with `aria-current`.
+*/
+function FooterLocaleMenu(props) {
+	const current = () => props.registry.LOCALES.find((entry) => entry.code === props.state.locale);
+	return ssr(_tmpl$3$2, ssrHydrationKey(), ssrAttribute("aria-label", escape(props.label, true), false), `${escape(props.label, true)}: ${escape(current()?.nativeName ?? props.state.locale, true)}`, ssrAttribute("lang", escape(current()?.code, true), false) + ssrAttribute("dir", escape(current()?.dir, true), false), escape(current()?.nativeName ?? props.state.locale), escape(createComponent(For, {
+		get each() {
+			return props.registry.LOCALES;
+		},
+		children: (entry) => ssr(_tmpl$2$2, ssrHydrationKey(), ssrAttribute("href", escape(props.state.hrefForLocale(entry.code), true), false) + ssrAttribute("hreflang", escape(entry.code, true), false) + ssrAttribute("lang", escape(entry.code, true), false) + ssrAttribute("dir", escape(entry.dir, true), false) + ssrAttribute("aria-current", entry.code === props.state.locale ? "page" : escape(void 0, true), false), escape(entry.nativeName))
+	})));
+}
+/**
 * The family footer: a language row, then the brand beside its family links,
 * then the page's links and the copyright.
 *
@@ -587,21 +614,29 @@ function SiteHeader(props) {
 */
 function SiteFooter(props) {
 	const registry = () => props.localeRegistry ?? FAMILY_LOCALES;
-	return ssr(_tmpl$3$2, ssrHydrationKey(), ssrAttribute("aria-label", escape(props.messages.footerLabel, true), false), escape(createComponent(Show, {
+	return ssr(_tmpl$4$2, ssrHydrationKey(), ssrAttribute("aria-label", escape(props.messages.footerLabel, true), false), escape(createComponent(Show, {
 		get when() {
 			return props.locale;
 		},
-		children: (locale) => ssr(_tmpl$4$2, ssrHydrationKey(), ssrAttribute("aria-label", escape(props.messages.localeLabel, true), false), escape(createComponent(For, {
-			get each() {
-				return registry().LOCALES;
+		children: (locale) => createComponent(FooterLocaleMenu, {
+			get state() {
+				return locale();
 			},
-			children: (entry) => ssr(_tmpl$5$2, ssrHydrationKey() + ssrAttribute("href", escape(locale().hrefForLocale(entry.code), true), false) + ssrAttribute("hreflang", escape(entry.code, true), false) + ssrAttribute("lang", escape(entry.code, true), false) + ssrAttribute("dir", escape(entry.dir, true), false) + ssrAttribute("aria-current", entry.code === locale().locale ? "page" : escape(void 0, true), false), escape(entry.nativeName))
-		})))
+			get registry() {
+				return registry();
+			},
+			get label() {
+				return props.messages.localeLabel;
+			},
+			get onSelect() {
+				return props.onLocaleSelect;
+			}
+		})
 	})), escape(props.brand.logo), escape(props.brand.name), escape(createComponent(For, {
 		get each() {
 			return props.family ?? [];
 		},
-		children: (item) => [ssr(_tmpl$6$2, ssrHydrationKey()), ssr(_tmpl$5$2, ssrHydrationKey() + ssrAttribute("href", escape(item.href, true), false), escape(item.label))]
+		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;