@soxa-ui/webc 0.0.0-stage → 0.3.0-beta.1

package/dist/components/accordion/item/accordion-item.template.js

@@ -0,0 +1,123 @@
+import { bind } from "../../../adapter/template/types.js";
+import { ownerAttributes } from "../../../adapter/template/owner.js";
+import { lend } from "../../../adapter/template/lend.js";
+import { createDetail, patch } from "../../../adapter/template/parts.js";
+import "../../../adapter/index.js";
+import { TButtonElement } from "../../button/Button.element.js";
+import "../../button/index.js";
+import { TIconElement } from "../../icon/Icon.element.js";
+import "../../icon/index.js";
+import { DEFAULT_SLOT } from "@soxa-ui/setup";
+//#region src/components/accordion/item/accordion-item.template.ts
+var parts = /* @__PURE__ */ new WeakMap();
+function arrowOf(owner, slotted) {
+	const wrapper = owner.createElement("span");
+	wrapper.className = "so-accordion-item__arrow";
+	if (slotted) return {
+		wrapper,
+		icon: null
+	};
+	const icon = createDetail(owner, TIconElement, { embedded: "accordion.arrow" });
+	icon.icon = "arrowRight";
+	wrapper.appendChild(icon);
+	return {
+		wrapper,
+		icon
+	};
+}
+var accordionItemTemplate = {
+	create: (root, ctx) => {
+		const { hasSlot } = ctx;
+		const { ownerDocument } = root;
+		const header = createDetail(ownerDocument, TButtonElement, {
+			embedded: "accordion.header",
+			attributes: { type: "button" }
+		});
+		const arrow = arrowOf(ownerDocument, hasSlot("arrow-icon"));
+		const body = ownerDocument.createElement("div");
+		const content = ownerDocument.createElement("div");
+		header.className = "so-accordion-item__header";
+		body.className = "so-accordion-item__body";
+		content.className = "so-accordion-item__content";
+		body.appendChild(content);
+		header.addEventListener("click", () => {
+			ctx.facade?.context?.adapters.selection.toggle();
+		});
+		root.append(header, body);
+		parts.set(root, {
+			header,
+			arrow,
+			content
+		});
+		return {
+			slots: {
+				"arrow-icon": {
+					mode: "append",
+					node: arrow.wrapper
+				},
+				leading: {
+					mode: "append",
+					node: header,
+					slot: "leading"
+				},
+				header: {
+					mode: "append",
+					node: header,
+					slot: DEFAULT_SLOT
+				},
+				trailing: {
+					mode: "append",
+					node: header,
+					slot: "trailing"
+				},
+				default: {
+					mode: "append",
+					node: content
+				}
+			},
+			control: header
+		};
+	},
+	bindings: [
+		bind([
+			"view",
+			"disabled",
+			"size",
+			"variant"
+		], ({ root, state }) => {
+			const own = parts.get(root);
+			if (!own) return;
+			const { header, arrow } = own;
+			const disabled = state.disabled === true;
+			patch(header, {
+				view: state.view,
+				disabled,
+				size: state.size,
+				variant: state.variant
+			});
+			if (arrow.icon && arrow.icon.size !== state.size) arrow.icon.size = state.size;
+		}),
+		bind("aria", ({ root, state }) => {
+			const header = parts.get(root)?.header;
+			if (header) ownerAttributes(header, state.aria);
+		}),
+		bind("contentAria", ({ root, state }) => {
+			const content = parts.get(root)?.content;
+			if (content) ownerAttributes(content, state.contentAria);
+		}),
+		bind("text", ({ root, state, hasSlot }) => {
+			const header = parts.get(root)?.header;
+			const text = state.text ?? "";
+			if (header && !hasSlot("header") && header.text !== text) header.text = text;
+		}),
+		bind("arrowPlacement", ({ root, state }) => {
+			const own = parts.get(root);
+			if (!own) return;
+			const { header, arrow } = own;
+			const placement = state.arrowPlacement;
+			lend(header, placement === "start" ? "leading" : "trailing", arrow.wrapper, placement === "start" ? "start" : "end");
+		})
+	]
+};
+//#endregion
+export { accordionItemTemplate };

package/dist/components/accordion/item/index.d.ts

@@ -0,0 +1,3 @@
+export { setupAccordionItem } from './setup.component';
+export { TAccordionItemElement, type TAccordionItemElementProps } from './AccordionItem.element';
+export { accordionItemTemplate } from './accordion-item.template';

package/dist/components/accordion/item/index.js

@@ -0,0 +1,3 @@
+import "./setup.component.js";
+import "./accordion-item.template.js";
+export { TAccordionItemElement } from "./AccordionItem.element.js";

package/dist/components/accordion/item/setup.component.d.ts

@@ -0,0 +1,3 @@
+import type { IAccordionItem, TAccordionItemCollectionFacade } from '@soxa-ui/core';
+import type { TBinding, TUpdateListener } from '../../../adapter';
+export declare function setupAccordionItem(host: HTMLElement, ctrl: IAccordionItem | undefined, props: Record<string, unknown>, onUpdate: TUpdateListener): TBinding<IAccordionItem, TAccordionItemCollectionFacade>;

package/dist/components/accordion/item/setup.component.js

@@ -0,0 +1,22 @@
+import { createWebcAdapterContext } from "../../../adapter/common/createWebcAdapterContext.js";
+import { joinBindings, useAdapter, useCollectionAdapter } from "../../../adapter/runtime/useAdapter.js";
+import { createWebcElevator } from "../../../adapter/elevator/factory.js";
+import "../../../adapter/elevator/index.js";
+import "../../../adapter/index.js";
+import { AccordionCollectionItemDescriptor, AccordionItemDescriptor, TCollectionItemExtension } from "@soxa-ui/setup";
+//#region src/components/accordion/item/setup.component.ts
+function setupAccordionItem(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, AccordionItemDescriptor(), {
+		ctrl,
+		props
+	});
+	const itemAdapter = createWebcAdapterContext(host, AccordionCollectionItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, {
+		adapter,
+		elevator: createWebcElevator(host)
+	});
+	const item = useCollectionAdapter(itemAdapter, host, onUpdate);
+	const owner = useAdapter(adapter, host, onUpdate);
+	return joinBindings(owner, item);
+}
+//#endregion
+export { setupAccordionItem };

package/dist/components/accordion/setup.component.d.ts

@@ -0,0 +1,3 @@
+import type { IAccordion, TAccordionCollectionFacade } from '@soxa-ui/core';
+import type { TBinding, TUpdateListener } from '../../adapter';
+export declare function setupAccordion(host: HTMLElement, ctrl: IAccordion | undefined, props: Record<string, unknown>, onUpdate: TUpdateListener): TBinding<IAccordion, TAccordionCollectionFacade>;

package/dist/components/accordion/setup.component.js

@@ -0,0 +1,26 @@
+import { createWebcAdapterContext } from "../../adapter/common/createWebcAdapterContext.js";
+import { joinBindings, useAdapter, useCollectionAdapter } from "../../adapter/runtime/useAdapter.js";
+import { createWebcElevator } from "../../adapter/elevator/factory.js";
+import "../../adapter/elevator/index.js";
+import "../../adapter/index.js";
+import { AccordionCollectionDescriptor, AccordionDescriptor, TCollectionExtension, TDragAndDropCollectionExtension } from "@soxa-ui/setup";
+//#region src/components/accordion/setup.component.ts
+function setupAccordion(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, AccordionDescriptor(), {
+		ctrl,
+		props
+	});
+	const elevator = createWebcElevator(host);
+	const collectionAdapter = createWebcAdapterContext(host, AccordionCollectionDescriptor(), {
+		props,
+		options: {
+			owner: adapter.instance,
+			engine: props["engine"]
+		}
+	}, { bundle: adapter.bundle }).use(TCollectionExtension, { elevator }).use(TDragAndDropCollectionExtension, { elevator });
+	const facade = useCollectionAdapter(collectionAdapter, host, onUpdate);
+	const owner = useAdapter(adapter, host, onUpdate);
+	return joinBindings(owner, facade);
+}
+//#endregion
+export { setupAccordion };

package/dist/components/button/Button.element.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `<button is="so-button">` — настоящая кнопка: форма, `submitter`, фокус и
+ * доступность нативные. Кнопочная строка элемента коллекции на `div` и `span`
+ * — свой элемент с тем же шаблоном (`registerItemRowTag`, `../item-row`).
+ * docs/architecture.md, Layer 8d, «Элемент soxa — нативный элемент своего
+ * тега».
+ */
+import { ButtonDescriptor } from '@soxa-ui/setup';
+import type { IButton } from '@soxa-ui/core';
+import type { TElementClassOf, TElementOf } from '../../adapter';
+export declare const TButtonElement: TElementClassOf<typeof HTMLButtonElement, typeof ButtonDescriptor, IButton>;
+export type TButtonElementProps = TElementOf<HTMLButtonElement, typeof ButtonDescriptor, IButton>;

package/dist/components/button/Button.element.js

@@ -0,0 +1,22 @@
+import { defineElement } from "../../adapter/runtime/defineElement.js";
+import { ElementBase } from "../../adapter/runtime/element.base.js";
+import "../../adapter/index.js";
+import { buttonTemplate } from "./button.template.js";
+import { setupButton } from "./setup.component.js";
+import { ButtonDescriptor } from "@soxa-ui/setup";
+//#region src/components/button/Button.element.ts
+/**
+* `<button is="so-button">` — настоящая кнопка: форма, `submitter`, фокус и
+* доступность нативные. Кнопочная строка элемента коллекции на `div` и `span`
+* — свой элемент с тем же шаблоном (`registerItemRowTag`, `../item-row`).
+* docs/architecture.md, Layer 8d, «Элемент soxa — нативный элемент своего
+* тега».
+*/
+var TButtonElement = ElementBase(HTMLButtonElement, {
+	descriptor: ButtonDescriptor,
+	template: buttonTemplate,
+	setup: setupButton
+});
+defineElement("so-button", TButtonElement, "button");
+//#endregion
+export { TButtonElement };

package/dist/components/button/button.template.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Шаблон Button: в корне только `span` текста, `leading` — перед ним,
+ * `trailing` — в конце корня. Обёрток нет: лишний узел сломал бы селекторы
+ * темы.
+ */
+import type { IButton } from '@soxa-ui/core';
+import { type ITemplate } from '../../adapter';
+export declare const buttonTemplate: ITemplate<IButton>;

package/dist/components/button/button.template.js

@@ -0,0 +1,30 @@
+import { bind } from "../../adapter/template/types.js";
+import "../../adapter/index.js";
+//#region src/components/button/button.template.ts
+var buttonTemplate = {
+	create: (root) => {
+		const text = document.createElement("span");
+		text.className = "so-button__text";
+		root.appendChild(text);
+		return { slots: {
+			leading: {
+				mode: "before",
+				node: text
+			},
+			default: {
+				mode: "append",
+				node: text
+			},
+			trailing: {
+				mode: "append",
+				node: root
+			}
+		} };
+	},
+	bindings: [bind("text", ({ content, state, hasSlot }) => {
+		if (hasSlot("default")) return;
+		content.textContent = String(state.text ?? "");
+	})]
+};
+//#endregion
+export { buttonTemplate };

package/dist/components/button/index.d.ts

@@ -0,0 +1,3 @@
+/** Application API for this element entry. */
+export { TButtonElement } from './Button.element';
+export type { TButtonElementProps } from './Button.element';

package/dist/components/button/index.js

@@ -0,0 +1 @@
+export { TButtonElement } from "./Button.element.js";

package/dist/components/button/setup.component.d.ts

@@ -0,0 +1,3 @@
+import type { IButton } from '@soxa-ui/core';
+import type { TBinding, TUpdateListener } from '../../adapter';
+export declare function setupButton(host: HTMLElement, ctrl: IButton | undefined, props: Record<string, unknown>, onUpdate: TUpdateListener): TBinding<IButton>;

package/dist/components/button/setup.component.js

@@ -0,0 +1,14 @@
+import { createWebcAdapterContext } from "../../adapter/common/createWebcAdapterContext.js";
+import { useAdapter } from "../../adapter/runtime/useAdapter.js";
+import "../../adapter/index.js";
+import { ButtonDescriptor } from "@soxa-ui/setup";
+//#region src/components/button/setup.component.ts
+function setupButton(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, ButtonDescriptor(), {
+		ctrl,
+		props
+	});
+	return useAdapter(adapter, host, onUpdate);
+}
+//#endregion
+export { setupButton };

package/dist/components/calendar/Calendar.element.d.ts

@@ -0,0 +1,9 @@
+/**
+ * `<div is="so-calendar">` — календарь; дни рисует шаблон, слота по умолчанию
+ * нет. Модуль регистрирует и день. docs/architecture.md, Layer 8d, «Даты».
+ */
+import { CalendarDescriptor } from '@soxa-ui/setup';
+import type { ICalendar, TCalendarCollectionFacade } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../adapter';
+export declare const TCalendarElement: TElementClassOf<typeof HTMLDivElement, typeof CalendarDescriptor, ICalendar, TCalendarCollectionFacade>;
+export type TCalendarElementProps = TElementType<typeof TCalendarElement>;

package/dist/components/calendar/Calendar.element.js

@@ -0,0 +1,23 @@
+import { defineElement } from "../../adapter/runtime/defineElement.js";
+import { ElementBase } from "../../adapter/runtime/element.base.js";
+import "../../adapter/index.js";
+import { TCalendarItemElement } from "./item/CalendarItem.element.js";
+import "./item/index.js";
+import { calendarTemplate } from "./calendar.template.js";
+import { setupCalendar } from "./setup.component.js";
+import { CalendarCollectionDescriptor, CalendarDescriptor } from "@soxa-ui/setup";
+//#region src/components/calendar/Calendar.element.ts
+/**
+* `<div is="so-calendar">` — календарь; дни рисует шаблон, слота по умолчанию
+* нет. Модуль регистрирует и день. docs/architecture.md, Layer 8d, «Даты».
+*/
+var TCalendarElement = ElementBase(HTMLDivElement, {
+	descriptor: CalendarDescriptor,
+	facade: CalendarCollectionDescriptor,
+	template: calendarTemplate,
+	setup: setupCalendar
+});
+defineElement("so-calendar", TCalendarElement, "div");
+defineElement("so-calendar-item", TCalendarItemElement, "td");
+//#endregion
+export { TCalendarElement };

package/dist/components/calendar/calendar.template.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Calendar template: months in a row by a loop over grid places, one pair of paging buttons
+ * at the first month, the footer in a row of its own. No handlers: clicks and keys are
+ * caught by plugins on the root. docs/architecture.md, Layer 8d, «Даты».
+ */
+import type { ICalendar, TCalendarCollectionFacade } from '@soxa-ui/core';
+import { type ITemplate, type TItemSlots } from '../../adapter';
+/** Calendar sample → day slot (`setup/__tests__/item-slots.spec.ts`). */
+export declare const CALENDAR_ITEM_SLOTS: TItemSlots;
+export declare const calendarTemplate: ITemplate<ICalendar, TCalendarCollectionFacade>;

package/dist/components/calendar/calendar.template.js

@@ -0,0 +1,309 @@
+import { bind } from "../../adapter/template/types.js";
+import { ownerAttributes } from "../../adapter/template/owner.js";
+import { lend } from "../../adapter/template/lend.js";
+import { createDetail, createItem, lendSamples, patch } from "../../adapter/template/parts.js";
+import { TKeyedLoop } from "../../adapter/template/loop.js";
+import "../../adapter/index.js";
+import { TButtonElement } from "../button/Button.element.js";
+import "../button/index.js";
+import { iconButton, syncIconButton } from "../common/icon-button.js";
+import { registerPopoverTag } from "../popover/Popover.element.js";
+import "../popover/index.js";
+import { TListBoxElement } from "../list-box/ListBox.element.js";
+import "../list-box/index.js";
+import { TCalendarItemElement } from "./item/CalendarItem.element.js";
+import "./item/index.js";
+import { DEFAULT_SLOT } from "@soxa-ui/setup";
+//#region src/components/calendar/calendar.template.ts
+/** Calendar sample → day slot (`setup/__tests__/item-slots.spec.ts`). */
+var CALENDAR_ITEM_SLOTS = { item: "default" };
+/** Month heading — Popover on a `div`: the panel lies in the root, and a block has no place in a `span`. */
+var TPopoverDivElement = registerPopoverTag("div");
+/** `arrowRight` for both arrows: the theme mirrors «back». */
+var PREV = {
+	embedded: "calendar.prev",
+	iconEmbedded: "calendar.prev-icon",
+	className: "so-calendar__prev",
+	role: "arrowRight"
+};
+var NEXT = {
+	embedded: "calendar.next",
+	iconEmbedded: "calendar.next-icon",
+	className: "so-calendar__next",
+	role: "arrowRight"
+};
+var PICKER_PREV = {
+	embedded: "calendar.picker-prev",
+	iconEmbedded: "calendar.picker-prev-icon",
+	className: "so-calendar__picker-prev",
+	role: "arrowRight"
+};
+var PICKER_NEXT = {
+	embedded: "calendar.picker-next",
+	iconEmbedded: "calendar.picker-next-icon",
+	className: "so-calendar__picker-next",
+	role: "arrowRight"
+};
+var parts = /* @__PURE__ */ new WeakMap();
+var monthsByNode = /* @__PURE__ */ new WeakMap();
+var cellLoops = /* @__PURE__ */ new WeakMap();
+/**
+* The place's popover — before insertion: the assembly takes it on connection. The list
+* comes later, with the place's list (`listDetailOf`).
+*/
+function headingOf(owner, picker) {
+	const popover = createDetail(owner, TPopoverDivElement, { embedded: "calendar.picker" });
+	const title = createDetail(owner, TButtonElement, {
+		embedded: "calendar.title",
+		attributes: { type: "button" }
+	});
+	const titleText = owner.createElement("span");
+	const card = owner.createElement("div");
+	const header = owner.createElement("div");
+	const heading = createDetail(owner, TButtonElement, {
+		embedded: "calendar.picker-heading",
+		attributes: { type: "button" }
+	});
+	const prev = iconButton(owner, PICKER_PREV, false);
+	const next = iconButton(owner, PICKER_NEXT, false);
+	popover.className = "so-calendar__heading";
+	popover.ctrl = picker.popover;
+	popover.contained = true;
+	popover.edge = "top";
+	title.className = "so-calendar__title";
+	titleText.className = "so-calendar__title-text";
+	card.className = "so-calendar__picker";
+	header.className = "so-calendar__picker-header";
+	heading.className = "so-calendar__picker-heading";
+	lend(title, DEFAULT_SLOT, titleText);
+	header.append(heading, prev.button, next.button);
+	card.append(header);
+	lend(popover, "trigger", title);
+	lend(popover, DEFAULT_SLOT, card);
+	return {
+		popover,
+		instance: picker.popover,
+		title,
+		titleText,
+		card,
+		header,
+		list: null,
+		heading,
+		prev,
+		next
+	};
+}
+/**
+* The list detail over the place's list and its engine — the place gets them with the first
+* opening of its popover. The detail takes them before insertion: the assembly takes them on
+* connection.
+*/
+function listDetailOf(owner, list) {
+	const detail = createDetail(owner, TListBoxElement, { embedded: "calendar.picker-list" });
+	detail.className = "so-calendar__picker-list";
+	detail.ctrl = list.ctrl;
+	detail.engine = list.engine;
+	detail.indicator = "none";
+	return detail;
+}
+function syncHeading(ctx, heading, grid, picker) {
+	const { size } = ctx.state;
+	const disabled = ctx.state.disabled === true;
+	const { popover, title, titleText } = heading;
+	const list = heading.list ?? (picker.list ? listDetailOf(ctx.root.ownerDocument, picker.list) : null);
+	patch(title, {
+		size,
+		disabled
+	});
+	ownerAttributes(titleText, grid.titleAria);
+	patch(titleText, { textContent: grid.title });
+	patch(popover, { aria_labelledBy: picker.labelledBy });
+	if (list) patch(list, {
+		size,
+		aria_labelledBy: picker.labelledBy
+	});
+	if (list && !heading.list) {
+		heading.card.insertBefore(list, heading.header);
+		heading.list = list;
+	}
+	patch(heading.heading, {
+		size,
+		text: picker.heading
+	});
+	ownerAttributes(heading.heading, picker.headingAria);
+	syncIconButton(heading.prev, size, picker.prevDisabled);
+	syncIconButton(heading.next, size, picker.nextDisabled);
+	ownerAttributes(heading.prev.button, picker.prevAria);
+	ownerAttributes(heading.next.button, picker.nextAria);
+}
+function drawWeekdays(row, weekdays) {
+	while (row.cells.length > weekdays.length) row.lastElementChild?.remove();
+	weekdays.forEach((weekday, index) => {
+		let cell = row.cells.item(index);
+		if (!cell) {
+			cell = row.ownerDocument.createElement("th");
+			cell.className = "so-calendar__weekday";
+			row.appendChild(cell);
+		}
+		patch(cell, { textContent: weekday.label });
+	});
+}
+function cellOf(ctx, cell) {
+	const { ownerDocument } = ctx.root;
+	if (!cell.item) {
+		const filler = ownerDocument.createElement("td");
+		filler.className = "so-calendar__filler";
+		ownerAttributes(filler, cell.aria);
+		return filler;
+	}
+	const day = createItem(ownerDocument, TCalendarItemElement);
+	day.ctrl = cell.item;
+	lendSamples(ctx, day, CALENDAR_ITEM_SLOTS);
+	return day;
+}
+/** A day takes everything from its instance. */
+function updateCell(node, cell) {
+	if (!cell.item) ownerAttributes(node, cell.aria);
+}
+function drawWeek(ctx, row, week) {
+	let loop = cellLoops.get(row);
+	if (!loop) {
+		loop = new TKeyedLoop(row, null, (cell) => cell.item ?? cell.date);
+		cellLoops.set(row, loop);
+	}
+	loop.draw(week, (cell) => cellOf(ctx, cell), updateCell);
+}
+function weekOf(ctx, week) {
+	const row = ctx.root.ownerDocument.createElement("tr");
+	row.className = "so-calendar__week";
+	drawWeek(ctx, row, week);
+	return row;
+}
+/** The place's popover instance changed (a new binding without an outside engine) — a new heading. */
+function drawMonth(ctx, month, { index, grid }) {
+	const picker = ctx.state.pickers?.[index];
+	if (month.heading && month.heading.instance !== picker?.popover) {
+		month.heading.popover.remove();
+		month.heading = null;
+	}
+	if (!month.heading && picker) {
+		month.heading = headingOf(ctx.root.ownerDocument, picker);
+		month.node.prepend(month.heading.popover);
+	}
+	if (month.heading && picker) syncHeading(ctx, month.heading, grid, picker);
+	ownerAttributes(month.table, grid.gridAria);
+	drawWeekdays(month.weekdays, ctx.state.weekdays ?? []);
+	month.weeks.draw(grid.weeks.map((cells, place) => ({
+		cells,
+		place
+	})), ({ cells }) => weekOf(ctx, cells), (row, { cells }) => drawWeek(ctx, row, cells));
+}
+function monthOf(ctx, place) {
+	const { ownerDocument } = ctx.root;
+	const node = ownerDocument.createElement("div");
+	const table = ownerDocument.createElement("table");
+	const thead = ownerDocument.createElement("thead");
+	const weekdays = ownerDocument.createElement("tr");
+	const tbody = ownerDocument.createElement("tbody");
+	node.className = "so-calendar__month";
+	table.className = "so-calendar__grid";
+	thead.setAttribute("aria-hidden", "true");
+	weekdays.className = "so-calendar__weekdays";
+	thead.appendChild(weekdays);
+	table.append(thead, tbody);
+	node.appendChild(table);
+	const month = {
+		node,
+		heading: null,
+		table,
+		weekdays,
+		weeks: new TKeyedLoop(tbody, null, (week) => week.place)
+	};
+	monthsByNode.set(node, month);
+	drawMonth(ctx, month, place);
+	return node;
+}
+/** After the first month's heading — Tab follows the eye. They do not move: relocation would rebuild them. */
+function placePaging(month, prev, next) {
+	if (next.nextSibling === month.table && prev.nextSibling === next) return;
+	month.node.insertBefore(prev, month.table);
+	month.node.insertBefore(next, month.table);
+}
+var calendarTemplate = {
+	create: (root, { hasSlot }) => {
+		const { ownerDocument } = root;
+		const months = ownerDocument.createElement("div");
+		const footer = ownerDocument.createElement("div");
+		const prev = iconButton(ownerDocument, PREV, hasSlot("prev-icon"));
+		const next = iconButton(ownerDocument, NEXT, hasSlot("next-icon"));
+		months.className = "so-calendar__months";
+		footer.className = "so-calendar__footer";
+		root.appendChild(months);
+		if (hasSlot("footer")) root.appendChild(footer);
+		parts.set(root, {
+			prev,
+			next,
+			months: new TKeyedLoop(months, null, (place) => place.index)
+		});
+		return { slots: {
+			item: { mode: "sample" },
+			"prev-icon": {
+				mode: "append",
+				node: prev.button,
+				slot: DEFAULT_SLOT
+			},
+			"next-icon": {
+				mode: "append",
+				node: next.button,
+				slot: DEFAULT_SLOT
+			},
+			footer: {
+				mode: "append",
+				node: footer
+			}
+		} };
+	},
+	bindings: [
+		bind([
+			"grids",
+			"pickers",
+			"weekdays",
+			"size",
+			"disabled"
+		], (ctx) => {
+			const own = parts.get(ctx.root);
+			if (!own) return;
+			const places = (ctx.state.grids ?? []).map((grid, index) => ({
+				index,
+				grid
+			}));
+			own.months.draw(places, (place) => monthOf(ctx, place), (node, place) => {
+				const month = monthsByNode.get(node);
+				if (month) drawMonth(ctx, month, place);
+			});
+			const first = places[0] ? own.months.elementOf(places[0]) : void 0;
+			const month = first ? monthsByNode.get(first) : void 0;
+			if (month) placePaging(month, own.prev.button, own.next.button);
+		}),
+		bind([
+			"size",
+			"prevDisabled",
+			"nextDisabled"
+		], ({ root, state }) => {
+			const own = parts.get(root);
+			if (!own) return;
+			syncIconButton(own.prev, state.size, state.prevDisabled === true);
+			syncIconButton(own.next, state.size, state.nextDisabled === true);
+		}),
+		bind("prevAria", ({ root, state }) => {
+			const button = parts.get(root)?.prev.button;
+			if (button) ownerAttributes(button, state.prevAria);
+		}),
+		bind("nextAria", ({ root, state }) => {
+			const button = parts.get(root)?.next.button;
+			if (button) ownerAttributes(button, state.nextAria);
+		})
+	]
+};
+//#endregion
+export { CALENDAR_ITEM_SLOTS, calendarTemplate };

package/dist/components/calendar/index.d.ts

@@ -0,0 +1,5 @@
+/** Application API for this element entry. */
+export { TCalendarElement } from './Calendar.element';
+export type { TCalendarElementProps } from './Calendar.element';
+export { TCalendarItemElement } from './item/CalendarItem.element';
+export type { TCalendarItemElementProps } from './item/CalendarItem.element';

package/dist/components/calendar/index.js

@@ -0,0 +1,3 @@
+import { TCalendarItemElement } from "./item/CalendarItem.element.js";
+import { TCalendarElement } from "./Calendar.element.js";
+export { TCalendarElement, TCalendarItemElement };