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

package/components/norn-code-tabs.webc

@@ -0,0 +1,270 @@
+<!---
+/*
+ * 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>
+	<span data-string="label" :id="'norn-code-tabs-' + uid"><slot name="label"><span webc:nokeep @text="nornComponentStrings?.('norn-code-tabs', 'label', $data.page) || 'Code samples'"></span></slot></span>
+	<span data-string="sample"><slot name="sample"><span webc:nokeep @text="nornComponentStrings?.('norn-code-tabs', 'sample', $data.page) || 'Sample {n}'"></span></slot></span>
+</span>
+<div :data-group="group || undefined"><slot></slot></div>
+<style>
+	@layer norn.components {
+		norn-code-tabs {
+			display: block;
+
+			& > div {
+				display: grid;
+				gap: var(--norn-space-s, 0.75rem);
+			}
+
+			& > div > [role="tablist"] {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--norn-space-xs, 0.5rem);
+				border-block-end: 1px solid var(--norn-ui-border-color, light-dark(#d3d8e2, #2d323e));
+			}
+
+			& > div > [role="tablist"] > [role="tab"] {
+				--_state: 0%;
+				box-sizing: border-box;
+				min-block-size: var(--norn-ui-control-height, 2.25rem);
+				margin-block-end: -1px;
+				padding: 0 var(--norn-space-s, 0.75rem);
+				border: 0;
+				border-block-end: 2px solid transparent;
+				border-start-start-radius: var(--norn-ui-radius-s, 4px);
+				border-start-end-radius: var(--norn-ui-radius-s, 4px);
+				background-color: color-mix(in oklab, currentcolor var(--_state), transparent);
+				color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+				font: inherit;
+				font-size: var(--norn-font-size-s, 0.875rem);
+				overflow-wrap: anywhere;
+				cursor: pointer;
+
+				&:hover {
+					--_state: var(--norn-ui-state-hover, 8%);
+					color: var(--norn-text-base, light-dark(#16181d, #eceef3));
+				}
+
+				&:active {
+					--_state: var(--norn-ui-state-press, 12%);
+				}
+
+				/* The ring sits inside the tab, clear of the underline. */
+				&:focus-visible {
+					outline-offset: calc(-1 * var(--norn-ui-focus-offset, 2px));
+				}
+
+				&[aria-selected="true"] {
+					border-block-end-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)));
+					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)));
+					font-weight: 600;
+				}
+			}
+
+			& > div > [role="tabpanel"][hidden] {
+				display: none;
+			}
+
+			/* The tab names the sample, so the caption would repeat it. */
+			& > div > [role="tabpanel"] figcaption {
+				display: none;
+			}
+
+			& > div > [role="tabpanel"] figure:has(> figcaption) {
+				row-gap: 0;
+			}
+
+			@media (pointer: coarse) {
+				& > div > [role="tablist"] > [role="tab"] {
+					min-block-size: 2.75rem;
+				}
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				& > div > [role="tablist"] > [role="tab"] {
+					transition: background-color var(--norn-ui-motion-duration, 150ms) var(--norn-ui-motion-easing, cubic-bezier(0.2, 0, 0, 1));
+				}
+			}
+
+			/* A clear border would be drawn in the text color, so only the selected tab has one. */
+			@media (forced-colors: active) {
+				& > div > [role="tablist"] > [role="tab"] {
+					border-block-end-width: 0;
+					padding-block-end: 2px;
+				}
+
+				& > div > [role="tablist"] > [role="tab"][aria-selected="true"] {
+					border-block-end-width: 2px;
+					border-block-end-color: Highlight;
+					padding-block-end: 0;
+				}
+			}
+
+			@media print {
+				& > div > [role="tablist"] {
+					display: none;
+				}
+
+				& > div > [role="tabpanel"][hidden] {
+					display: block;
+				}
+			}
+		}
+	}
+</style>
+<script>
+	{
+		const STORE = "norn-code-tabs:";
+		let sets = 0;
+
+		const remembered = (group) => {
+			try {
+				return group ? localStorage.getItem(STORE + group) : null;
+			} catch {
+				return null;
+			}
+		};
+
+		const remember = (group, name) => {
+			try {
+				if (group) localStorage.setItem(STORE + group, name);
+			} catch {
+				// Not remembered: the choice holds for this page only.
+			}
+		};
+
+		/**
+		 * A sample's tab name, read from its markup, so it never waits on the code block's script:
+		 * its `data-tab`, its caption, the text of its `label` slot when the author filled it, or its language.
+		 */
+		const nameOf = (panel) => {
+			const label = panel.querySelector(":scope > figure > [data-name]");
+			return (
+				panel.dataset.tab ||
+				panel.querySelector("figcaption")?.textContent.trim() ||
+				(label && !label.querySelector("[data-default]") ? label.textContent.trim() : "") ||
+				panel.querySelector("pre[data-language]")?.dataset.language ||
+				""
+			);
+		};
+
+		/** The names with a repeat made distinct by a number: `sh`, `sh 2`, `sh 3`. A tab name picks a tab, so none can be shared. */
+		const distinct = (names) => {
+			const used = new Set(names);
+			const seen = new Set();
+			return names.map((name) => {
+				if (!seen.has(name)) {
+					seen.add(name);
+					return name;
+				}
+				let count = 2;
+				while (used.has(`${name} ${count}`)) count++;
+				used.add(`${name} ${count}`);
+				return `${name} ${count}`;
+			});
+		};
+
+		/** Tabs over the code samples in the slot. The stacked samples are the whole component without a script. */
+		class CodeTabs extends HTMLElement {
+			#sync = (event) => {
+				if (event.detail.group === this.#group && event.detail.source !== this) this.#select(event.detail.name, false);
+			};
+
+			get #box() {
+				return this.querySelector(":scope > div");
+			}
+
+			get #group() {
+				return this.#box?.dataset.group;
+			}
+
+			connectedCallback() {
+				document.addEventListener("codetabschange", this.#sync);
+				const box = this.#box;
+				if (!box || box.querySelector(':scope > [role="tablist"]')) return;
+				const panels = [...box.querySelectorAll(":scope > norn-code-block")];
+				if (panels.length < 2) return;
+				const id = `norn-code-tabs-${++sets}`;
+				const strings = this.querySelector(":scope > [hidden]");
+				const name = strings?.querySelector('[data-string="label"]');
+				const sample = strings?.querySelector('[data-string="sample"]')?.textContent.trim() || "{n}";
+				const list = document.createElement("div");
+				list.setAttribute("role", "tablist");
+				if (name?.id) list.setAttribute("aria-labelledby", name.id);
+				const names = distinct(panels.map((panel, index) => nameOf(panel) || sample.replaceAll("{n}", String(index + 1))));
+				panels.forEach((panel, index) => {
+					const tab = document.createElement("button");
+					tab.type = "button";
+					tab.id = `${id}-tab-${index}`;
+					tab.setAttribute("role", "tab");
+					tab.setAttribute("aria-controls", (panel.id ||= `${id}-panel-${index}`));
+					tab.textContent = names[index];
+					panel.setAttribute("role", "tabpanel");
+					panel.setAttribute("aria-labelledby", tab.id);
+					list.append(tab);
+				});
+				box.prepend(list);
+				list.addEventListener("click", (event) => {
+					const tab = event.target.closest('[role="tab"]');
+					if (tab) this.#show(this.#tabs().indexOf(tab), true);
+				});
+				list.addEventListener("keydown", (event) => this.#key(event));
+				const tabs = this.#tabs();
+				const saved = remembered(this.#group);
+				this.#select(saved, false);
+				if (!tabs.some((tab) => tab.getAttribute("aria-selected") === "true")) this.#show(0, false);
+			}
+
+			disconnectedCallback() {
+				document.removeEventListener("codetabschange", this.#sync);
+			}
+
+			#tabs() {
+				return [...this.querySelectorAll('[role="tab"]')];
+			}
+
+			/** The tab with this name, if any. Names are distinct within a set, so it is the only one. */
+			#select(name, chosen) {
+				const index = this.#tabs().findIndex((tab) => tab.textContent === name);
+				if (index !== -1) this.#show(index, chosen);
+			}
+
+			/** Show the tab at this index, and the panel at the same index. A person's choice is remembered and shared with the group; a sync is not passed on. */
+			#show(index, chosen) {
+				const tabs = this.#tabs();
+				const panels = [...this.querySelectorAll(':scope > div > [role="tabpanel"]')];
+				tabs.forEach((tab, position) => {
+					const selected = position === index;
+					tab.setAttribute("aria-selected", String(selected));
+					tab.tabIndex = selected ? 0 : -1;
+					if (panels[position]) panels[position].hidden = !selected;
+				});
+				if (!chosen) return;
+				const name = tabs[index].textContent;
+				remember(this.#group, name);
+				if (this.#group) document.dispatchEvent(new CustomEvent("codetabschange", { detail: { group: this.#group, name, source: this } }));
+			}
+
+			/** Arrow keys follow the reading direction; Home and End go to the ends. Moving focus selects the tab. */
+			#key(event) {
+				const tabs = this.#tabs();
+				const index = tabs.indexOf(document.activeElement);
+				if (index === -1) return;
+				const forward = getComputedStyle(this).direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+				const backward = forward === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
+				const next = { [forward]: (index + 1) % tabs.length, [backward]: (index - 1 + tabs.length) % tabs.length, Home: 0, End: tabs.length - 1 }[event.key];
+				if (next === undefined) return;
+				event.preventDefault();
+				tabs[next].focus();
+				this.#show(next, true);
+			}
+		}
+
+		if (!customElements.get("norn-code-tabs")) customElements.define("norn-code-tabs", CodeTabs);
+	}
+</script>

package/components/norn-copy-button.webc

@@ -0,0 +1,220 @@
+<!---
+/*
+ * 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 webc:if="!(typeof strings === 'string' && strings)" hidden>
+	<span data-string="label" :id="'norn-copy-button-' + uid"><slot name="label"></slot></span>
+	<span data-string="copy"><slot name="copy"><span webc:nokeep @text="nornComponentStrings?.('norn-copy-button', 'copy', $data.page) || 'Copy'"></span></slot></span>
+	<span data-string="copied"><slot name="copied"><span webc:nokeep @text="nornComponentStrings?.('norn-copy-button', 'copied', $data.page) || 'Copied'"></span></slot></span>
+	<span data-string="failed"><slot name="failed"><span webc:nokeep @text="nornComponentStrings?.('norn-copy-button', 'failed', $data.page) || 'Copy failed'"></span></slot></span>
+</span>
+<button
+	type="button"
+	hidden
+	:data-value="typeof value === 'string' ? value : undefined"
+	:data-source="typeof source === 'string' ? source : undefined"
+	:data-strings="typeof strings === 'string' && strings ? strings : undefined"
+	:data-compact="compact === true || compact === '' || compact === 'true' ? '' : undefined"
+	:data-surface="['base', 'raised', 'code'].includes(surface) ? surface : undefined"
+><span data-icons><norn-icon @name="copy"></norn-icon><norn-icon @name="check"></norn-icon></span><span data-label></span></button>
+<span role="status"></span>
+<style>
+	@layer norn.components {
+		norn-copy-button {
+			display: inline-flex;
+			max-inline-size: 100%;
+
+			& button {
+				--_state: 0%;
+				box-sizing: border-box;
+				display: inline-flex;
+				align-items: center;
+				min-block-size: var(--norn-ui-control-height, 2.25rem);
+				max-inline-size: 100%;
+				padding: 0 var(--norn-space-xs, 0.5rem);
+				border: 0;
+				border-radius: var(--norn-ui-border-radius, 6px);
+				background-color: color-mix(in oklab, currentcolor var(--_state), var(--_bg, transparent));
+				color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+				font: inherit;
+				font-size: var(--norn-font-size-s, 0.875rem);
+				overflow-wrap: anywhere;
+				text-align: start;
+				cursor: pointer;
+
+				&[hidden] {
+					display: none;
+				}
+
+				&[data-surface="base"] {
+					--_bg: var(--norn-surface-base, light-dark(#ffffff, #101216));
+				}
+
+				&[data-surface="raised"] {
+					--_bg: var(--norn-surface-raised, light-dark(hsl(40, 14%, 96%), #242932));
+				}
+
+				&[data-surface="code"] {
+					--_bg: var(--norn-surface-code, light-dark(hsl(40, 14%, 94%), #2c313b));
+				}
+
+				&:hover {
+					--_state: var(--norn-ui-state-hover, 8%);
+				}
+
+				&:active {
+					--_state: var(--norn-ui-state-press, 12%);
+				}
+
+				&[data-state="copied"] {
+					color: var(--norn-status-success, light-dark(#0b6b3a, #7ed6a1));
+				}
+
+				&[data-state="failed"] {
+					color: var(--norn-status-danger, light-dark(#b42318, #ff8a80));
+				}
+			}
+
+			/* The copy icon and the check share a cell, and so do the three texts, so the button is as wide for one as for another. */
+			& [data-icons],
+			& [data-label] {
+				display: inline-grid;
+			}
+
+			& [data-icons] > norn-icon,
+			& [data-label] > span {
+				grid-area: 1 / 1;
+			}
+
+			& [data-label] {
+				margin-inline-start: var(--norn-space-2xs, 0.25rem);
+			}
+
+			& button:not([data-state="copied"]) [data-icons] > norn-icon:last-child,
+			& button[data-state="copied"] [data-icons] > norn-icon:first-child,
+			& [data-label] > span:not([data-active]) {
+				visibility: hidden;
+			}
+
+			/* A compact button is only its icon until the pointer or focus is on it, or it has a result to show. */
+			& button[data-compact]:not(:hover, :focus-visible, [data-state]) [data-label] {
+				inline-size: 0;
+				margin: 0;
+				overflow: hidden;
+				white-space: nowrap;
+			}
+
+			& [role="status"] {
+				position: absolute;
+				inline-size: 1px;
+				block-size: 1px;
+				overflow: hidden;
+				clip-path: inset(50%);
+				white-space: nowrap;
+			}
+
+			@media (pointer: coarse) {
+				& button {
+					min-block-size: 2.75rem;
+				}
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				& button {
+					transition: background-color var(--norn-ui-motion-duration, 150ms) var(--norn-ui-motion-easing, cubic-bezier(0.2, 0, 0, 1));
+				}
+			}
+
+			@media print {
+				display: none;
+			}
+		}
+	}
+</style>
+<script>
+	{
+		const CONFIRMATION_MS = 2000;
+
+		/** Copies its value, or its target's text, and says how that went, in the texts the page holds. */
+		class CopyButton extends HTMLElement {
+			#wired = false;
+			#timer;
+			#name = "";
+
+			connectedCallback() {
+				const button = this.querySelector("button");
+				if (!button || typeof navigator.clipboard?.writeText !== "function") return;
+				const name = this.#string(button, "label");
+				this.#name = name?.id && name.textContent.trim() ? name.id : "";
+				if (this.#name) button.setAttribute("aria-labelledby", this.#name);
+				this.#build(button);
+				button.hidden = false;
+				if (this.#wired) return;
+				this.#wired = true;
+				button.addEventListener("click", () => this.#copy(button));
+			}
+
+			disconnectedCallback() {
+				clearTimeout(this.#timer);
+			}
+
+			/** The element holding one of the texts: in this component, or in the one `data-strings` names. */
+			#string(button, key) {
+				const holder = button.dataset.strings ? document.getElementById(button.dataset.strings) : this.querySelector(":scope > span[hidden]");
+				return holder?.querySelector(`[data-string="${key}"]`);
+			}
+
+			#text(button, key) {
+				return this.#string(button, key)?.textContent.trim() ?? "";
+			}
+
+			/** The three texts in one cell, so the button is as wide for any of them. Safe to run again. */
+			#build(button) {
+				button.querySelector("[data-label]").replaceChildren(
+					...["copy", "copied", "failed"].map((key) => {
+						const text = document.createElement("span");
+						text.dataset.text = key;
+						text.textContent = this.#text(button, key);
+						return text;
+					}),
+				);
+				this.#show(button, "copy");
+			}
+
+			/** Show one text, and mark the button with the result so the icon and color follow. */
+			#show(button, key) {
+				for (const text of button.querySelectorAll("[data-label] > span")) text.toggleAttribute("data-active", text.dataset.text === key);
+				if (key === "copy") delete button.dataset.state;
+				else button.dataset.state = key;
+			}
+
+			async #copy(button) {
+				const status = this.querySelector('[role="status"]');
+				const { value, source } = button.dataset;
+				let ok = true;
+				try {
+					await navigator.clipboard.writeText(value ?? document.getElementById(source)?.textContent ?? "");
+				} catch {
+					ok = false;
+				}
+				const result = ok ? "copied" : "failed";
+				this.#show(button, result);
+				status.textContent = this.#text(button, result);
+				// The visible text is the name while it shows the result, so the name always holds the words on the button.
+				button.removeAttribute("aria-labelledby");
+				clearTimeout(this.#timer);
+				this.#timer = setTimeout(() => {
+					this.#show(button, "copy");
+					status.textContent = "";
+					if (this.#name) button.setAttribute("aria-labelledby", this.#name);
+				}, CONFIRMATION_MS);
+			}
+		}
+
+		if (!customElements.get("norn-copy-button")) customElements.define("norn-copy-button", CopyButton);
+	}
+</script>

package/components/norn-fact-list.webc

@@ -0,0 +1,52 @@
+<!---
+/*
+ * 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', 'm', 'l'].includes(gap) ? gap : undefined"><slot></slot></ul>
+<style>
+	@layer norn.components {
+		norn-fact-list {
+			display: block;
+
+			& ul {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--norn-space-xs, 0.5rem) var(--norn-space-m, 1.25rem);
+				margin: 0;
+				padding: 0;
+				list-style: none;
+				color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+				font-size: var(--norn-font-size-s, 0.875rem);
+
+				&[data-gap="s"] {
+					row-gap: var(--norn-space-s, 0.75rem);
+				}
+
+				&[data-gap="m"] {
+					row-gap: var(--norn-space-m, 1.25rem);
+				}
+
+				&[data-gap="l"] {
+					row-gap: var(--norn-space-l, 2rem);
+				}
+			}
+
+			& li {
+				display: inline-flex;
+				align-items: center;
+				gap: var(--norn-space-2xs, 0.25rem);
+				max-inline-size: 100%;
+				line-height: 1.5;
+				overflow-wrap: anywhere;
+			}
+
+			& norn-icon {
+				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)));
+			}
+		}
+	}
+</style>

package/components/norn-footer.webc

@@ -0,0 +1,122 @@
+<!---
+/*
+ * 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/.
+ */
+--->
+<footer :style="[typeof width === 'string' && width ? '--_width: ' + width : '', typeof leadWidth === 'string' && leadWidth ? '--_lead: ' + leadWidth : ''].filter(Boolean).join('; ')">
+	<div><slot></slot></div>
+	<div><slot name="colophon"></slot></div>
+</footer>
+<style>
+	@layer norn.components {
+		norn-footer {
+			display: block;
+			container-type: inline-size;
+
+			& > footer {
+				display: grid;
+				gap: var(--norn-space-l, 2rem);
+				padding: var(--norn-space-l, 2rem) var(--norn-space-m, 1.25rem);
+				border-block-start: 1px solid var(--norn-ui-border-color, light-dark(#d3d8e2, #2d323e));
+				color: var(--norn-text-muted, light-dark(#4b5160, #a4abba));
+				font-size: var(--norn-font-size-s, 0.875rem);
+			}
+
+			& > footer > div {
+				inline-size: min(100%, var(--_width, var(--norn-layout-width, 64rem)));
+				margin-inline: auto;
+
+				/* A slot nobody filled leaves its wrapper empty: take it out of the grid. */
+				&:not(:has(*)) {
+					display: none;
+				}
+
+				&:first-child {
+					display: grid;
+					grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+					align-items: start;
+					gap: var(--norn-space-l, 2rem);
+				}
+
+				&:first-child > :is(div, nav) {
+					display: grid;
+					align-content: start;
+					gap: var(--norn-space-s, 0.75rem);
+				}
+
+				/* A nav of several link groups: one landmark, a column per group. */
+				&:first-child > nav:has(> div) {
+					display: flex;
+					flex-wrap: wrap;
+					gap: var(--norn-space-l, 2rem);
+				}
+
+				&:first-child > nav > div {
+					display: grid;
+					align-content: start;
+					gap: var(--norn-space-s, 0.75rem);
+				}
+			}
+
+			@container (min-width: 60rem) {
+				& > footer > div:first-child {
+					grid-template-columns: minmax(0, var(--_lead, 25rem));
+					grid-auto-columns: minmax(min-content, max-content);
+					grid-auto-flow: column;
+					justify-content: space-between;
+				}
+			}
+
+			& :where(p) {
+				margin-block: 0;
+			}
+
+			& :where(strong) {
+				color: var(--norn-text-base, light-dark(#16181d, #eceef3));
+			}
+
+			& :where(small) {
+				font-size: var(--norn-font-size-s, 0.875rem);
+			}
+
+			& > footer > div:first-child > :is(div, nav) > ul,
+			& > footer > div:first-child > nav > div > ul {
+				display: flex;
+				flex-direction: column;
+				gap: var(--norn-space-xs, 0.5rem);
+				margin: 0;
+				padding: 0;
+				list-style: none;
+			}
+
+			& :where(a) {
+				color: inherit;
+			}
+
+			/* A link in the navigation is quiet until the pointer or focus is on it. A link in a sentence keeps its underline. */
+			& :where(nav a) {
+				text-decoration: none;
+			}
+
+			& :where(a:is(:hover, :focus-visible)) {
+				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: underline;
+			}
+
+			& :where(a:has(norn-icon)) {
+				display: inline-flex;
+				align-items: center;
+				gap: var(--norn-space-2xs, 0.25rem);
+			}
+
+			@media print {
+				& > footer {
+					gap: var(--norn-space-s, 0.75rem);
+				}
+			}
+		}
+	}
+</style>