@devslab/site-kit 0.15.0 → 0.17.0

package/dist/solid.server.js

@@ -1,6 +1,6 @@
-import { createComponent, escape, mergeProps, ssr, ssrAttribute, ssrElement, ssrHydrationKey } from "solid-js/web";
-import { For, Show, createMemo, createSignal, createUniqueId, onMount } from "solid-js";
-import { Button, Field, Icon, IconButton } from "@devslab/dds-solid";
+import { createComponent, escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrHydrationKey } from "solid-js/web";
+import { For, Show, createMemo, createSignal, createUniqueId, onCleanup, onMount } from "solid-js";
+import { Button, Dialog, Field, Icon, IconButton, Switch } from "@devslab/dds-solid";
 //#region src/core/locales.mjs
 var LOCALES = Object.freeze([
 	{
@@ -350,31 +350,31 @@ var FLAGS_BY_COUNTRY = Object.freeze({
 var flagBodiesNow = () => FLAGS_BY_COUNTRY;
 //#endregion
 //#region src/solid/locale-menu.tsx
-var _tmpl$$5 = [
+var _tmpl$$6 = [
 	"<svg",
 	" class=\"site-flag-sprite\" aria-hidden=\"true\">",
 	"</svg>"
 ];
-var _tmpl$2$3 = ["<svg", " class=\"site-flag-sprite\" aria-hidden=\"true\"></svg>"];
-var _tmpl$3$3 = [
+var _tmpl$2$4 = ["<svg", " class=\"site-flag-sprite\" aria-hidden=\"true\"></svg>"];
+var _tmpl$3$4 = [
 	"<svg",
 	" aria-hidden=\"true\"><use href=\"",
 	"\"></use></svg>"
 ];
-var _tmpl$4$3 = [
+var _tmpl$4$4 = [
 	"<label",
 	"><span class=\"dds-sr-only\">",
 	"</span><span class=\"dds-select site-locale\"><select class=\"dds-select__input\"",
 	">",
 	"</select></span></label>"
 ];
-var _tmpl$5$3 = [
+var _tmpl$5$4 = [
 	"<option",
 	"",
 	">",
 	"</option>"
 ];
-var _tmpl$6$3 = [
+var _tmpl$6$4 = [
 	"<details",
 	" class=\"site-locale-flag\"><summary class=\"site-locale-flag__trigger\"",
 	"><!--$-->",
@@ -429,20 +429,20 @@ function spriteMarkup(countries, bodies, uid) {
 */
 function FlagSprite(props) {
 	const bodies = flagBodiesNow();
-	if (bodies) return ssr(_tmpl$$5, ssrHydrationKey(), spriteMarkup(props.countries, bodies, props.uid));
-	return ssr(_tmpl$2$3, ssrHydrationKey());
+	if (bodies) return ssr(_tmpl$$6, ssrHydrationKey(), spriteMarkup(props.countries, bodies, props.uid));
+	return ssr(_tmpl$2$4, ssrHydrationKey());
 }
 function Flag(props) {
 	const country = () => flagCountryFor(props.locale, props.registry);
-	return ssr(_tmpl$3$3, ssrHydrationKey() + ssrAttribute("class", escape(props.class, true), false) + ssrAttribute("viewBox", escape(FLAG_VIEWBOX, true), false), `#${escape(symbolId(country(), props.uid), true)}`);
+	return ssr(_tmpl$3$4, ssrHydrationKey() + ssrAttribute("class", escape(props.class, true), false) + ssrAttribute("viewBox", escape(FLAG_VIEWBOX, true), false), `#${escape(symbolId(country(), props.uid), true)}`);
 }
 function SelectLocaleMenu(props) {
 	const registry = () => registryOf(props);
-	return ssr(_tmpl$4$3, ssrHydrationKey(), escape(props.messages.localeLabel), ssrAttribute("aria-label", escape(props.messages.localeLabel, true), false), escape(createComponent(For, {
+	return ssr(_tmpl$4$4, ssrHydrationKey(), escape(props.messages.localeLabel), ssrAttribute("aria-label", escape(props.messages.localeLabel, true), false), escape(createComponent(For, {
 		get each() {
 			return registry().LOCALES;
 		},
-		children: (locale) => ssr(_tmpl$5$3, ssrHydrationKey() + ssrAttribute("value", escape(locale.code, true), false) + ssrAttribute("lang", escape(locale.code, true), false) + ssrAttribute("dir", escape(locale.dir, true), false), ssrAttribute("selected", locale.code === props.state.locale, true), escape(locale.nativeName))
+		children: (locale) => ssr(_tmpl$5$4, ssrHydrationKey() + ssrAttribute("value", escape(locale.code, true), false) + ssrAttribute("lang", escape(locale.code, true), false) + ssrAttribute("dir", escape(locale.dir, true), false), ssrAttribute("selected", locale.code === props.state.locale, true), escape(locale.nativeName))
 	})));
 }
 function FlagLocaleMenu(props) {
@@ -454,7 +454,7 @@ function FlagLocaleMenu(props) {
 		const name = current()?.nativeName;
 		return name ? `${props.messages.localeLabel}: ${name}` : props.messages.localeLabel;
 	};
-	return ssr(_tmpl$6$3, ssrHydrationKey(), ssrAttribute("aria-label", escape(triggerLabel(), true), false) + ssrAttribute("title", escape(props.messages.localeLabel, true), false), escape(createComponent(FlagSprite, {
+	return ssr(_tmpl$6$4, ssrHydrationKey(), ssrAttribute("aria-label", escape(triggerLabel(), true), false) + ssrAttribute("title", escape(props.messages.localeLabel, true), false), escape(createComponent(FlagSprite, {
 		get countries() {
 			return countries();
 		},
@@ -488,6 +488,238 @@ function LocaleMenu(props) {
 	return props.variant === "flag" ? createComponent(FlagLocaleMenu, props) : createComponent(SelectLocaleMenu, props);
 }
 //#endregion
+//#region src/solid/consent.tsx
+var _tmpl$$5 = [
+	"<section",
+	" class=\"site-consent\"",
+	"><div class=\"site-consent__inner\"><div class=\"site-consent__copy\"><h2 class=\"site-consent__title\">",
+	"</h2><p class=\"site-consent__body\"><!--$-->",
+	"<!--/--> <a class=\"site-consent__link\"",
+	">",
+	"</a></p></div><div class=\"site-consent__actions\"><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--></div><!--$-->",
+	"<!--/--></div></section>"
+];
+var _tmpl$2$3 = [
+	"<ul",
+	" class=\"site-consent-categories\" role=\"list\"><li class=\"site-consent-category\"><div class=\"site-consent-category__copy\"><h3 class=\"site-consent-category__title\">",
+	"</h3><p class=\"site-consent-category__body\">",
+	"</p></div><span class=\"dds-badge site-consent-category__status\">",
+	"</span></li><li class=\"site-consent-category\"><div class=\"site-consent-category__copy\"><h3 class=\"site-consent-category__title\">",
+	"</h3><p id=\"site-consent-analytics-body\" class=\"site-consent-category__body\">",
+	"</p></div><!--$-->",
+	"<!--/--></li></ul>"
+];
+var _tmpl$3$3 = [
+	"<p",
+	" class=\"site-consent-dialog__policy\"><a class=\"site-consent__link\"",
+	">",
+	"</a></p>"
+];
+var _tmpl$4$3 = [
+	"<p",
+	" class=\"dds-sr-only\" role=\"status\">",
+	"</p>"
+];
+var _tmpl$5$3 = [
+	"<span",
+	" class=\"dds-sr-only\">",
+	"</span>"
+];
+var _tmpl$6$3 = [
+	"<button",
+	" type=\"button\"",
+	" aria-haspopup=\"dialog\">",
+	"</button>"
+];
+/** A link with a non-empty `#fragment`: the policy section, not the top of the page. */
+var POLICY_SECTION_HREF = /^[^#\s]*#[^#\s]+$/;
+/**
+* The consent bar and its settings dialog (D-034).
+*
+* Renders nothing on the server and nothing during hydration: the bar comes
+* in after mount, when the browser's own cookie is known. So it can never
+* disagree with the server's markup, and a page without JavaScript shows no
+* bar and loads no analytics.
+*
+* The bar's three choices are the same button, the same size: "모두 허용",
+* "거부", "설정". Closing it any other way (✕, Escape) is no decision —
+* nothing loads, and the next visit asks again. Its text is short; the
+* disclosure lives in the policy section `learnMoreHref` points at.
+*/
+function ConsentBanner(props) {
+	if (typeof props.learnMoreHref !== "string" || !POLICY_SECTION_HREF.test(props.learnMoreHref)) throw new RangeError(`ConsentBanner: learnMoreHref must link to the privacy policy's analytics section with its #anchor (e.g. /privacy#analytics), got ${JSON.stringify(props.learnMoreHref)}`);
+	const [mounted, setMounted] = createSignal(false);
+	const [undecided, setUndecided] = createSignal(false);
+	const [dismissed, setDismissed] = createSignal(false);
+	const [settingsOpen, setSettingsOpen] = createSignal(false);
+	const [analytics, setAnalytics] = createSignal(false);
+	const [announcement, setAnnouncement] = createSignal("");
+	const sync = () => {
+		setUndecided(props.controller.needsDecision());
+		setDismissed(props.controller.dismissed());
+	};
+	const openSettings = () => {
+		setAnalytics(props.controller.analyticsGranted());
+		setSettingsOpen(true);
+	};
+	onMount(() => {
+		const controller = props.controller;
+		controller.start();
+		sync();
+		onCleanup(controller.subscribe((event) => {
+			if (event.type === "open-settings") openSettings();
+			else sync();
+		}));
+		setMounted(true);
+	});
+	const keepFocus = () => setTimeout(() => {
+		if (document.activeElement && document.activeElement !== document.body) return;
+		document.getElementById("main-content")?.focus({ preventScroll: true });
+	}, 0);
+	const decide = (choice) => {
+		choice();
+		setSettingsOpen(false);
+		setAnnouncement("");
+		queueMicrotask(() => setAnnouncement(props.messages.saved));
+		keepFocus();
+	};
+	const acceptAll = () => decide(() => props.controller.acceptAll());
+	const rejectAll = () => decide(() => props.controller.rejectAll());
+	const dismiss = () => {
+		props.controller.dismiss();
+		keepFocus();
+	};
+	return createComponent(Show, {
+		get when() {
+			return mounted();
+		},
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return memo(() => !!undecided())() && !dismissed();
+					},
+					get children() {
+						return ssr(_tmpl$$5, ssrHydrationKey(), ssrAttribute("aria-label", escape(props.messages.regionLabel, true), false), escape(props.messages.title), escape(props.messages.body), ssrAttribute("href", escape(props.learnMoreHref, true), false), escape(props.messages.learnMore), escape(createComponent(Button, {
+							"class": "site-consent__action",
+							tone: "secondary",
+							onClick: acceptAll,
+							get children() {
+								return props.messages.acceptAll;
+							}
+						})), escape(createComponent(Button, {
+							"class": "site-consent__action",
+							tone: "secondary",
+							onClick: rejectAll,
+							get children() {
+								return props.messages.rejectAll;
+							}
+						})), escape(createComponent(Button, {
+							"class": "site-consent__action",
+							tone: "secondary",
+							"aria-haspopup": "dialog",
+							onClick: openSettings,
+							get children() {
+								return props.messages.settings;
+							}
+						})), escape(createComponent(IconButton, {
+							"class": "site-consent__dismiss",
+							get ["aria-label"]() {
+								return props.messages.dismiss;
+							},
+							get title() {
+								return props.messages.dismiss;
+							},
+							onClick: dismiss,
+							get children() {
+								return createComponent(Icon, {
+									name: "close",
+									size: 20
+								});
+							}
+						})));
+					}
+				}),
+				createComponent(Dialog, {
+					id: "site-consent-settings",
+					"class": "site-consent-dialog",
+					get open() {
+						return settingsOpen();
+					},
+					onOpenChange: setSettingsOpen,
+					get title() {
+						return props.messages.settingsTitle;
+					},
+					get description() {
+						return props.messages.settingsIntro;
+					},
+					get actions() {
+						return [createComponent(Button, {
+							"class": "site-consent__action",
+							tone: "secondary",
+							onClick: () => setSettingsOpen(false),
+							get children() {
+								return props.messages.cancel;
+							}
+						}), createComponent(Button, {
+							"class": "site-consent__action",
+							tone: "secondary",
+							onClick: () => decide(() => props.controller.save({ analytics: analytics() })),
+							get children() {
+								return props.messages.save;
+							}
+						})];
+					},
+					get children() {
+						return [
+							createComponent(IconButton, {
+								"class": "site-consent-dialog__close",
+								get ["aria-label"]() {
+									return props.messages.close;
+								},
+								get title() {
+									return props.messages.close;
+								},
+								onClick: () => setSettingsOpen(false),
+								get children() {
+									return createComponent(Icon, {
+										name: "close",
+										size: 20
+									});
+								}
+							}),
+							ssr(_tmpl$2$3, ssrHydrationKey(), escape(props.messages.necessaryTitle), escape(props.messages.necessaryBody), escape(props.messages.necessaryStatus), escape(props.messages.analyticsTitle), escape(props.messages.analyticsBody), escape(createComponent(Switch, {
+								"class": "site-consent-category__switch",
+								get checked() {
+									return analytics();
+								},
+								onCheckedChange: setAnalytics,
+								"aria-describedby": "site-consent-analytics-body",
+								get label() {
+									return ssr(_tmpl$5$3, ssrHydrationKey(), escape(props.messages.analyticsSwitch));
+								}
+							}))),
+							ssr(_tmpl$3$3, ssrHydrationKey(), ssrAttribute("href", escape(props.privacyHref, true), false), escape(props.messages.privacyLink))
+						];
+					}
+				}),
+				ssr(_tmpl$4$3, ssrHydrationKey(), escape(announcement()))
+			];
+		}
+	});
+}
+/**
+* Re-opens the settings dialog from anywhere — the footer's "쿠키 설정", an
+* account page. The ConsentBanner mounted on the page listens for it; a page
+* without one has nothing to open.
+*/
+function ConsentSettingsButton(props) {
+	return ssr(_tmpl$6$3, ssrHydrationKey(), ssrAttribute("class", props.class ? `site-consent-trigger ${escape(props.class, true)}` : "site-consent-trigger", false), escape(props.children));
+}
+//#endregion
 //#region src/solid/chrome.tsx
 var _tmpl$$4 = [
 	"<header",
@@ -540,20 +772,26 @@ var _tmpl$7$2 = [
 var _tmpl$8$1 = [
 	"<ul",
 	" class=\"site-footer__links\"><!--$-->",
+	"<!--/--><!--$-->",
 	"<!--/--><li>",
 	"</li></ul>"
 ];
 var _tmpl$9$1 = [
+	"<li",
+	">",
+	"</li>"
+];
+var _tmpl$0$1 = [
 	"<bdi",
 	">",
 	"</bdi>"
 ];
-var _tmpl$0$1 = [
+var _tmpl$1$1 = [
 	"<a",
 	"><bdi>",
 	"</bdi></a>"
 ];
-var _tmpl$1$1 = [
+var _tmpl$10 = [
 	"<footer",
 	" class=\"site-footer\"",
 	"><div class=\"site-footer__inner\"><!--$-->",
@@ -561,13 +799,13 @@ var _tmpl$1$1 = [
 	"<!--/--><!--$-->",
 	"<!--/--></div></div></footer>"
 ];
-var _tmpl$10 = [
+var _tmpl$11 = [
 	"<div",
 	" class=\"site-footer__identity\"><!--$-->",
 	"<!--/--><div class=\"site-footer__details\">",
 	"</div></div>"
 ];
-var _tmpl$11 = [
+var _tmpl$12 = [
 	"<nav",
 	" class=\"site-footer__nav\"",
 	">",
@@ -718,16 +956,28 @@ function SiteFooter(props) {
 			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.consentSettings;
+		},
+		children: (settings) => ssr(_tmpl$9$1, ssrHydrationKey(), escape(createComponent(ConsentSettingsButton, {
+			get controller() {
+				return settings().controller;
+			},
+			get children() {
+				return settings().label;
+			}
+		})))
 	})), escape(createComponent(Show, {
 		get when() {
 			return props.copyrightHref;
 		},
 		get fallback() {
-			return ssr(_tmpl$9$1, ssrHydrationKey(), escape(props.copyright));
+			return ssr(_tmpl$0$1, ssrHydrationKey(), escape(props.copyright));
 		},
-		children: (href) => ssr(_tmpl$0$1, ssrHydrationKey() + ssrAttribute("href", escape(href(), true), false), escape(props.copyright))
+		children: (href) => ssr(_tmpl$1$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, {
+	return ssr(_tmpl$10, ssrHydrationKey(), ssrAttribute("aria-label", escape(props.messages.footerLabel, true), false), escape(createComponent(Show, {
 		get when() {
 			return props.locale;
 		},
@@ -752,7 +1002,7 @@ function SiteFooter(props) {
 		get fallback() {
 			return brandLine();
 		},
-		children: (content) => ssr(_tmpl$10, ssrHydrationKey(), escape(brandLine()), escape(content()))
+		children: (content) => ssr(_tmpl$11, ssrHydrationKey(), escape(brandLine()), escape(content()))
 	})), escape(createComponent(Show, {
 		get when() {
 			return props.linksLabel;
@@ -760,7 +1010,7 @@ function SiteFooter(props) {
 		get fallback() {
 			return linkList();
 		},
-		children: (label) => ssr(_tmpl$11, ssrHydrationKey(), ssrAttribute("aria-label", escape(label(), true), false), escape(linkList()))
+		children: (label) => ssr(_tmpl$12, ssrHydrationKey(), ssrAttribute("aria-label", escape(label(), true), false), escape(linkList()))
 	})));
 }
 //#endregion
@@ -1061,6 +1311,6 @@ function PricingNote(props) {
 	return ssr(_tmpl$1, ssrHydrationKey(), escape(props.children), escape(props.action));
 }
 //#endregion
-export { ErrorLayout, FeatureRows, HeroSplit, LegalLayout, LocaleMenu, MarketingShell, NotFoundLayout, OssProductMark, PricingNote, RequestAccessForm, SectionBlock, SectionHead, SiteFooter, SiteHeader, StatusBanner, StepFlow, ThemeToggle };
+export { ConsentBanner, ConsentSettingsButton, ErrorLayout, FeatureRows, HeroSplit, LegalLayout, LocaleMenu, MarketingShell, NotFoundLayout, OssProductMark, PricingNote, RequestAccessForm, SectionBlock, SectionHead, SiteFooter, SiteHeader, StatusBanner, StepFlow, ThemeToggle };
 
 //# sourceMappingURL=solid.server.js.map