@bysages/svelte 0.2.3 → 0.3.1

package/dist/{ai-prompt-input-BmyKyadu.mjs → ai-prompt-input-vh89e9EX.mjs}

@@ -2,6 +2,7 @@ import { t as Button } from "./button-BCcX7lHq.mjs";
 import { Field } from "./components/field/index.mjs";
 import { n as MentionsVessel } from "./mentions-DjhgNRmY.mjs";
 import { t as useMentions } from "./use-mentions-DeF_38di.mjs";
+import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -37,35 +38,43 @@ function AiPromptInput$1($$anchor, $$props) {
 		var fragment = $.comment();
 		var node = $.first_child(fragment);
 		var consequent = ($$anchor) => {
-			Button($$anchor, {
-				variant: "solid",
-				size: "sm",
-				square: true,
-				type: "button",
-				"aria-label": "Stop",
-				get disabled() {
-					return disabled();
-				},
-				onclick: () => $$props.onStop?.(),
-				children: ($$anchor, $$slotProps) => {
-					var svg = root();
-					$.append($$anchor, svg);
-				},
-				$$slots: { default: true }
-			});
+			{
+				let $0 = $.derived(() => messages().ai.stop);
+				Button($$anchor, {
+					variant: "solid",
+					size: "sm",
+					square: true,
+					type: "button",
+					get "aria-label"() {
+						return $.get($0);
+					},
+					get disabled() {
+						return disabled();
+					},
+					onclick: () => $$props.onStop?.(),
+					children: ($$anchor, $$slotProps) => {
+						var svg = root();
+						$.append($$anchor, svg);
+					},
+					$$slots: { default: true }
+				});
+			}
 		};
 		var alternate = ($$anchor) => {
 			{
-				let $0 = $.derived(() => disabled() || !value().trim());
+				let $0 = $.derived(() => messages().ai.send);
+				let $1 = $.derived(() => disabled() || !value().trim());
 				Button($$anchor, {
 					variant: "solid",
 					size: "sm",
 					square: true,
 					type: "submit",
-					"aria-label": "Send",
-					get disabled() {
+					get "aria-label"() {
 						return $.get($0);
 					},
+					get disabled() {
+						return $.get($1);
+					},
 					children: ($$anchor, $$slotProps) => {
 						var svg_1 = root_1();
 						$.append($$anchor, svg_1);
@@ -81,8 +90,10 @@ function AiPromptInput$1($$anchor, $$props) {
 		$.append($$anchor, fragment);
 	};
 	injectComponentStyle("ai");
-	let value = $.prop($$props, "value", 15, ""), placeholder = $.prop($$props, "placeholder", 3, "Send a message"), disabled = $.prop($$props, "disabled", 3, false), busy = $.prop($$props, "busy", 3, false), rest = $.rest_props($$props, rest_excludes);
+	let value = $.prop($$props, "value", 15, ""), disabled = $.prop($$props, "disabled", 3, false), busy = $.prop($$props, "busy", 3, false), rest = $.rest_props($$props, rest_excludes);
 	let textareaEl = $.state(null);
+	const messages = useComponentMessages();
+	const placeholderText = $.derived(() => $$props.placeholder ?? messages().ai.send);
 	const mentionState = useMentions(() => ({
 		items: $$props.mentions?.items ?? [],
 		trigger: $$props.mentions?.trigger
@@ -142,38 +153,44 @@ function AiPromptInput$1($$anchor, $$props) {
 			children: ($$anchor, $$slotProps) => {
 				var fragment_3 = $.comment();
 				var node_6 = $.first_child(fragment_3);
-				$.component(node_6, () => Field.Textarea, ($$anchor, Field_Textarea) => {
-					Field_Textarea($$anchor, {
-						autoresize: true,
-						rows: 1,
-						get placeholder() {
-							return placeholder();
-						},
-						get disabled() {
-							return disabled();
-						},
-						oninput: () => mentionState.onInput(),
-						onkeydown: (event) => {
-							if (mentionState.onKeydown(event)) return;
-							if (event.key === "Enter" && !event.shiftKey) {
-								event.preventDefault();
-								send();
+				{
+					let $0 = $.derived(() => messages().ai.conversation);
+					$.component(node_6, () => Field.Textarea, ($$anchor, Field_Textarea) => {
+						Field_Textarea($$anchor, {
+							autoresize: true,
+							rows: 1,
+							get placeholderText() {
+								return $.get(placeholderText);
+							},
+							get "aria-label"() {
+								return $.get($0);
+							},
+							get disabled() {
+								return disabled();
+							},
+							oninput: () => mentionState.onInput(),
+							onkeydown: (event) => {
+								if (mentionState.onKeydown(event)) return;
+								if (event.key === "Enter" && !event.shiftKey) {
+									event.preventDefault();
+									send();
+								}
+							},
+							get ref() {
+								return $.get(textareaEl);
+							},
+							set ref($$value) {
+								$.set(textareaEl, $$value, true);
+							},
+							get value() {
+								return value();
+							},
+							set value($$value) {
+								value($$value);
 							}
-						},
-						get ref() {
-							return $.get(textareaEl);
-						},
-						set ref($$value) {
-							$.set(textareaEl, $$value, true);
-						},
-						get value() {
-							return value();
-						},
-						set value($$value) {
-							value($$value);
-						}
+						});
 					});
-				});
+				}
 				$.append($$anchor, fragment_3);
 			},
 			$$slots: { default: true }

package/dist/{ai-response-D5IkRFMN.mjs → ai-response-BPQPjMlC.mjs}

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -113,16 +114,19 @@ var root_1 = $.from_html(`<div></div>`);
 function AiResponse$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("ai");
-	let copyLabel = $.prop($$props, "copyLabel", 3, "Copy code"), copiedLabel = $.prop($$props, "copiedLabel", 3, "Copied"), rest = $.rest_props($$props, rest_excludes);
+	let rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
 	const html = $.derived(() => renderHtml($$props.content, $$props.highlighter ? { highlighter: $$props.highlighter } : void 0));
+	const copyText = $.derived(() => $$props.copyLabel ?? messages().ai.copyCode);
+	const copiedText = $.derived(() => $$props.copiedLabel ?? messages().ai.copied);
 	let root;
 	$.user_effect(() => {
 		$.get(html);
-		if (root) decorateCodeCopy(root, copyLabel());
+		if (root) decorateCodeCopy(root, $.get(copyText));
 		if (root) wrapResponseTables(root);
 	});
 	const handleClick = (event) => {
-		clickCodeCopy(event, copyLabel(), copiedLabel());
+		clickCodeCopy(event, $.get(copyText), $.get(copiedText));
 		$$props.onclick?.(event);
 	};
 	var div = root_1();

package/dist/{autocomplete-D7ZZ7Xpb.mjs → autocomplete-Dhuhqp-6.mjs}

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -20,6 +21,7 @@ function AutoComplete$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("combobox");
 	let value = $.prop($$props, "value", 15, ""), items = $.prop($$props, "items", 19, () => []), size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
 	const { collection, filter: filterItems } = useListCollection({
 		initialItems: items(),
 		filter: (item, input) => $$props.filter ? $$props.filter(item, input) : item.toLowerCase().includes(input.toLowerCase())
@@ -85,7 +87,8 @@ function AutoComplete$1($$anchor, $$props) {
 													ArkCombobox_Empty($$anchor, {
 														children: ($$anchor, $$slotProps) => {
 															$.next();
-															var text = $.text("No matches");
+															var text = $.text();
+															$.template_effect(($0) => $.set_text(text, $0), [() => messages().command.noMatches]);
 															$.append($$anchor, text);
 														},
 														$$slots: { default: true }
@@ -93,16 +96,16 @@ function AutoComplete$1($$anchor, $$props) {
 												});
 												var node_7 = $.sibling(node_6, 2);
 												$.each(node_7, 16, () => collection().items, (item) => item, ($$anchor, item) => {
-													var fragment_6 = $.comment();
-													var node_8 = $.first_child(fragment_6);
+													var fragment_7 = $.comment();
+													var node_8 = $.first_child(fragment_7);
 													$.component(node_8, () => Combobox.Item, ($$anchor, ArkCombobox_Item) => {
 														ArkCombobox_Item($$anchor, {
 															get item() {
 																return item;
 															},
 															children: ($$anchor, $$slotProps) => {
-																var fragment_7 = $.comment();
-																var node_9 = $.first_child(fragment_7);
+																var fragment_8 = $.comment();
+																var node_9 = $.first_child(fragment_8);
 																$.component(node_9, () => Combobox.ItemText, ($$anchor, ArkCombobox_ItemText) => {
 																	ArkCombobox_ItemText($$anchor, {
 																		children: ($$anchor, $$slotProps) => {
@@ -114,12 +117,12 @@ function AutoComplete$1($$anchor, $$props) {
 																		$$slots: { default: true }
 																	});
 																});
-																$.append($$anchor, fragment_7);
+																$.append($$anchor, fragment_8);
 															},
 															$$slots: { default: true }
 														});
 													});
-													$.append($$anchor, fragment_6);
+													$.append($$anchor, fragment_7);
 												});
 												$.append($$anchor, fragment_5);
 											},

package/dist/{avatar-BHYqgq4d.mjs → avatar-LR0CZ1Iz.mjs}

@@ -8,12 +8,13 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"$$events",
 	"$$legacy",
 	"size",
+	"shape",
 	"children"
 ]);
 function Avatar$2($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("avatar");
-	let rest = $.rest_props($$props, rest_excludes);
+	let shape = $.prop($$props, "shape", 3, "circle"), rest = $.rest_props($$props, rest_excludes);
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	$.component(node, () => Avatar.Root, ($$anchor, ArkAvatar_Root) => {
@@ -21,6 +22,9 @@ function Avatar$2($$anchor, $$props) {
 			get "data-size"() {
 				return $$props.size;
 			},
+			get "data-shape"() {
+				return shape();
+			},
 			children: ($$anchor, $$slotProps) => {
 				var fragment_1 = $.comment();
 				var node_1 = $.first_child(fragment_1);

package/dist/{banner-LEPWtGlY.mjs → banner-Bj3FFB-O.mjs}

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -84,21 +85,23 @@ var rest_excludes$3 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
-	"type"
+	"type",
+	"aria-label"
 ]);
 var root$3 = $.from_html(`<button><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></button>`);
 function BannerClose($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("banner");
 	let type = $.prop($$props, "type", 3, "button"), rest = $.rest_props($$props, rest_excludes$3);
+	const messages = useComponentMessages();
 	var button = root$3();
-	$.attribute_effect(button, () => ({
+	$.attribute_effect(button, ($0) => ({
 		...rest,
 		type: type(),
-		"aria-label": rest["aria-label"] ?? "Dismiss",
+		"aria-label": $0,
 		"data-scope": "banner",
 		"data-part": "close"
-	}));
+	}), [() => $$props["aria-label"] ?? messages().banner.dismiss]);
 	$.append($$anchor, button);
 	$.pop();
 }

package/dist/bento-BTvt7gsB.mjs

@@ -0,0 +1,73 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/bento/Bento.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"columns",
+	"children"
+]);
+var root$1 = $.from_html(`<div><!></div>`);
+function Bento$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("bento");
+	/** Tracks across the lattice. */
+	let columns = $.prop($$props, "columns", 3, 3), rest = $.rest_props($$props, rest_excludes$1);
+	var div = root$1();
+	$.attribute_effect(div, ($0) => ({
+		...rest,
+		"data-scope": "bento",
+		"data-part": "root",
+		[$.STYLE]: { "--bs-bento-columns": $0 }
+	}), [() => String(columns())]);
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/bento/BentoCell.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"span",
+	"rowSpan",
+	"children"
+]);
+var root = $.from_html(`<div><!></div>`);
+function BentoCell($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("bento");
+	/** Columns this tile claims. */
+	/** Rows this tile claims. */
+	let span = $.prop($$props, "span", 3, 1), rowSpan = $.prop($$props, "rowSpan", 3, 1), rest = $.rest_props($$props, rest_excludes);
+	var div = root();
+	$.attribute_effect(div, ($0, $1) => ({
+		...rest,
+		"data-scope": "bento",
+		"data-part": "cell",
+		[$.STYLE]: {
+			"--bs-bento-span-x": $0,
+			"--bs-bento-span-y": $1
+		}
+	}), [() => String(span()), () => String(rowSpan())]);
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/bento/index.ts
+/** The bento lattice: a grid of unequal tiles that reads as one plate
+* — Bento, Bento.Cell. */
+const Bento = Object.assign(Bento$1, {
+	Root: Bento$1,
+	Cell: BentoCell
+});
+//#endregion
+export { Bento as t };

package/dist/block-ui-CxsMoEoa.mjs

@@ -0,0 +1,50 @@
+import { t as Spinner } from "./Spinner-DGAzGJ_8.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/block-ui/BlockUI.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"blocked",
+	"children"
+]);
+var root = $.from_html(`<div data-scope="block-ui" data-part="mask"><!></div>`);
+var root_1 = $.from_html(`<div><!> <!></div>`);
+function BlockUI$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("block-ui");
+	let blocked = $.prop($$props, "blocked", 3, false), rest = $.rest_props($$props, rest_excludes);
+	var div = root_1();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "block-ui",
+		"data-part": "root",
+		"data-blocked": blocked() ? "" : void 0,
+		"aria-busy": blocked() || void 0
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	var node_1 = $.sibling(node, 2);
+	var consequent = ($$anchor) => {
+		var div_1 = root();
+		var node_2 = $.child(div_1);
+		Spinner(node_2, { size: "lg" });
+		$.reset(div_1);
+		$.append($$anchor, div_1);
+	};
+	$.if(node_1, ($$render) => {
+		if (blocked()) $$render(consequent);
+	});
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/block-ui/index.ts
+/** A curtain over content that must wait: frosted paper and one
+* quiet wheel. */
+const BlockUI = BlockUI$1;
+//#endregion
+export { BlockUI as t };

package/dist/{breadcrumb-C01pAq93.mjs → breadcrumb-CtBjVdxv.mjs}

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -6,6 +7,7 @@ var rest_excludes$5 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
+	"aria-label",
 	"children"
 ]);
 var root$5 = $.from_html(`<nav><!></nav>`);
@@ -13,13 +15,14 @@ function Breadcrumb$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("breadcrumb");
 	let rest = $.rest_props($$props, rest_excludes$5);
+	const messages = useComponentMessages();
 	var nav = root$5();
-	$.attribute_effect(nav, () => ({
+	$.attribute_effect(nav, ($0) => ({
 		...rest,
-		"aria-label": "Breadcrumb",
+		"aria-label": $0,
 		"data-scope": "breadcrumb",
 		"data-part": "root"
-	}));
+	}), [() => $$props["aria-label"] ?? messages().breadcrumb.label]);
 	var node = $.child(nav);
 	$.snippet(node, () => $$props.children ?? $.noop);
 	$.reset(nav);

package/dist/browser-gmPTH6mJ.mjs

@@ -0,0 +1,146 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/browser/Browser.svelte
+var rest_excludes$4 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$4 = $.from_html(`<div><!></div>`);
+function Browser$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("browser");
+	let rest = $.rest_props($$props, rest_excludes$4);
+	var div = root$4();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "browser",
+		"data-part": "root"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/browser/BrowserBody.svelte
+var rest_excludes$3 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$3 = $.from_html(`<div><!></div>`);
+function BrowserBody($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("browser");
+	let rest = $.rest_props($$props, rest_excludes$3);
+	var div = root$3();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "browser",
+		"data-part": "body"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/browser/BrowserDots.svelte
+var rest_excludes$2 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy"
+]);
+var root$2 = $.from_html(`<span data-scope="browser" data-part="dot"></span>`);
+var root_1 = $.from_html(`<div></div>`);
+function BrowserDots($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("browser");
+	let rest = $.rest_props($$props, rest_excludes$2);
+	const tones = [
+		"danger",
+		"warning",
+		"success"
+	];
+	var div = root_1();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "browser",
+		"data-part": "dots"
+	}));
+	$.each(div, 20, () => tones, (tone) => tone, ($$anchor, tone) => {
+		var span = root$2();
+		$.template_effect(() => $.set_attribute(span, "data-tone", tone));
+		$.append($$anchor, span);
+	});
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/browser/BrowserTitleBar.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$1 = $.from_html(`<div><!></div>`);
+function BrowserTitleBar($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("browser");
+	let rest = $.rest_props($$props, rest_excludes$1);
+	var div = root$1();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "browser",
+		"data-part": "titlebar"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/browser/BrowserUrlBar.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root = $.from_html(`<div><!></div>`);
+function BrowserUrlBar($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("browser");
+	let rest = $.rest_props($$props, rest_excludes);
+	var div = root();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "browser",
+		"data-part": "urlbar"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/browser/index.ts
+/** A browser window as a vessel: Root, TitleBar, Dots, UrlBar, Body. */
+const Browser = Object.assign(Browser$1, {
+	TitleBar: BrowserTitleBar,
+	Dots: BrowserDots,
+	UrlBar: BrowserUrlBar,
+	Body: BrowserBody
+});
+//#endregion
+export { Browser as t };

package/dist/{calendar-0tSnHuLj.mjs → calendar-BMXmRdwJ.mjs}

@@ -99,7 +99,7 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"onValueChange",
 	"children"
 ]);
-var root = $.from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" style="transform: rotate(180deg)"><path d="m9 5 7 7-7 7"></path></svg>`);
+var root = $.from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><path d="m15 5-7 7 7 7"></path></svg>`);
 var root_1 = $.from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><path d="m9 5 7 7-7 7"></path></svg>`);
 var root_2 = $.from_html(`<!> <!> <!>`, 1);
 var root_3 = $.from_html(`<div data-scope="calendar" data-part="header"><!></div>`);