@expressive/ui 0.0.0-stage → 0.1.0

package/dist/calendar/base.js

@@ -0,0 +1,235 @@
+import { missing } from "../piece.js";
+import { addDays, addMonths, addYears, endOfMonth, endOfWeek, isSameDay, isSameMonth, startOfDay, startOfMonth, startOfWeek } from "./date.js";
+import { Component, set } from "@expressive/mvc";
+import { jsx, jsxs } from "@expressive/mvc/jsx-runtime";
+
+//#region src/calendar/base.tsx
+/**
+* Month grid date picker behavior without a look: bounds, keyboard navigation, roving focus and ARIA, assembled
+* from pieces.
+*
+* Every piece is a placeholder that throws when rendered - a skin assigns each one. Pieces spread the matching
+* `*Props` getter onto their element to stay accessible. ARIA a skin writes itself: `role="row"` on `Row`,
+* `role="columnheader"` on `Weekday`, and `aria-live="polite"` around the month title in `Header`.
+*/
+var Calendar = class Calendar extends Component {
+	static months = [
+		"January",
+		"February",
+		"March",
+		"April",
+		"May",
+		"June",
+		"July",
+		"August",
+		"September",
+		"October",
+		"November",
+		"December"
+	];
+	static weekdays = [
+		"Sunday",
+		"Monday",
+		"Tuesday",
+		"Wednesday",
+		"Thursday",
+		"Friday",
+		"Saturday"
+	];
+	value = void 0;
+	onChange = void 0;
+	/** The day holding keyboard focus; its month is the one shown. Starts at `value` or today, within `min`/`max`. */
+	focus = set(() => clamp(new Date(this.value || /* @__PURE__ */ new Date()), this.min, this.max), () => {});
+	min = void 0;
+	max = void 0;
+	Root = missing("Calendar.Root");
+	Header = missing("Calendar.Header");
+	Grid = missing("Calendar.Grid");
+	Row = missing("Calendar.Row");
+	Weekday = missing("Calendar.Weekday");
+	Day = missing("Calendar.Day");
+	/** Month and year shown, e.g. "January 2024". */
+	get title() {
+		const { focus } = this;
+		return `${Calendar.months[focus.getMonth()]} ${focus.getFullYear()}`;
+	}
+	/** `false` when the step would cross a bound. */
+	get backMonth() {
+		const prev = addMonths(this.focus, -1);
+		const floor = bound(this.min);
+		if (floor && startOfMonth(prev) < startOfMonth(floor)) return false;
+		return () => this.focus = prev;
+	}
+	get nextMonth() {
+		const next = addMonths(this.focus, 1);
+		const ceil = bound(this.max);
+		if (ceil && startOfMonth(next) > ceil) return false;
+		return () => this.focus = next;
+	}
+	/** Whole weeks covering the focused month. */
+	get days() {
+		const { focus, value } = this;
+		const floor = bound(this.min);
+		const ceil = bound(this.max);
+		const end = endOfWeek(endOfMonth(focus));
+		const now = /* @__PURE__ */ new Date();
+		const days = [];
+		for (let d = startOfWeek(startOfMonth(focus)); d <= end; d = addDays(d, 1)) {
+			const at = d;
+			const disabled = floor && at < startOfDay(floor) || ceil && at > ceil || false;
+			days.push({
+				date: at,
+				display: at.getDate(),
+				isCurrentMonth: isSameMonth(at, focus),
+				isToday: isSameDay(at, now),
+				isPast: at < startOfDay(now),
+				focused: isSameDay(at, focus),
+				select: disabled ? false : () => this.select(at),
+				selected: value && isSameDay(value, at) || false
+			});
+		}
+		return days;
+	}
+	get months() {
+		const floor = bound(this.min);
+		const ceil = bound(this.max);
+		const year = this.focus.getFullYear();
+		return Calendar.months.map((label, value) => {
+			const date = new Date(year, value);
+			return {
+				value,
+				label,
+				disabled: floor && date < startOfMonth(floor) || ceil && date > ceil || false
+			};
+		});
+	}
+	get years() {
+		const start = bound(this.min) || addYears(/* @__PURE__ */ new Date(), -20);
+		const end = bound(this.max) || addYears(/* @__PURE__ */ new Date(), 20);
+		const from = start.getFullYear();
+		const to = end.getFullYear();
+		return Array.from({ length: Math.max(to + 1 - from, 0) }, (_, i) => ({
+			value: from + i,
+			label: String(from + i),
+			disabled: false
+		}));
+	}
+	get backProps() {
+		const { backMonth } = this;
+		return {
+			type: "button",
+			"aria-label": "Previous month",
+			disabled: !backMonth,
+			onClick: backMonth || void 0
+		};
+	}
+	get nextProps() {
+		const { nextMonth } = this;
+		return {
+			type: "button",
+			"aria-label": "Next month",
+			disabled: !nextMonth,
+			onClick: nextMonth || void 0
+		};
+	}
+	get gridProps() {
+		const { title } = this;
+		return {
+			role: "grid",
+			"aria-label": title,
+			onKeyDown: this.keyDown
+		};
+	}
+	/** For a day's element, with `outside`, `today` and `selected` for styling. Binds `claim` on the focused day. */
+	get dayProps() {
+		return (day) => {
+			const { date, select, selected, focused, isCurrentMonth, isToday } = day;
+			return {
+				outside: !isCurrentMonth,
+				today: isToday,
+				selected,
+				props: {
+					type: "button",
+					role: "gridcell",
+					"aria-label": date.toDateString(),
+					"aria-selected": selected,
+					"aria-current": isToday ? "date" : void 0,
+					tabIndex: focused ? 0 : -1,
+					ref: focused ? this.claim : void 0,
+					disabled: !select,
+					onClick: select || void 0
+				}
+			};
+		};
+	}
+	select(date) {
+		this.value = date;
+		this.focus = date;
+		if (this.onChange) this.onChange(date);
+	}
+	/** Move focus to `date`, clamped to `min`/`max`. */
+	move(date) {
+		this.focus = clamp(date, this.min, this.max);
+	}
+	keyDown(event) {
+		const { focus } = this;
+		const page = event.shiftKey ? 12 : 1;
+		switch (event.key) {
+			case "ArrowLeft":
+				this.move(addDays(focus, -1));
+				break;
+			case "ArrowRight":
+				this.move(addDays(focus, 1));
+				break;
+			case "ArrowUp":
+				this.move(addDays(focus, -7));
+				break;
+			case "ArrowDown":
+				this.move(addDays(focus, 7));
+				break;
+			case "Home":
+				this.move(startOfWeek(focus));
+				break;
+			case "End":
+				this.move(startOfDay(endOfWeek(focus)));
+				break;
+			case "PageUp":
+				this.move(addMonths(focus, -page));
+				break;
+			case "PageDown":
+				this.move(addMonths(focus, page));
+				break;
+			case "Enter":
+			case " ":
+				if (this.days.find((day) => day.focused).select) this.select(focus);
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		NAVIGATING.add(this);
+	}
+	/** Ref for the focused day; moves focus to it after keyboard navigation. `dayProps` binds it. */
+	claim(element) {
+		if (element && NAVIGATING.delete(this)) element.focus();
+	}
+	render() {
+		const { days } = this;
+		const weeks = Array.from({ length: days.length / 7 }, (_, i) => days.slice(i * 7, i * 7 + 7));
+		return /* @__PURE__ */ jsxs(this.Root, { children: [/* @__PURE__ */ jsx(this.Header, {}), /* @__PURE__ */ jsxs(this.Grid, { children: [/* @__PURE__ */ jsx(this.Row, { children: Calendar.weekdays.map((name) => /* @__PURE__ */ jsx(this.Weekday, { name }, name)) }), weeks.map((week) => /* @__PURE__ */ jsx(this.Row, { children: week.map((day) => /* @__PURE__ */ jsx(this.Day, { day }, day.date.getTime())) }, week[0].date.getTime()))] })] });
+	}
+};
+const NAVIGATING = /* @__PURE__ */ new WeakSet();
+function bound(from) {
+	return from === true ? /* @__PURE__ */ new Date() : from || void 0;
+}
+function clamp(date, min, max) {
+	const floor = bound(min);
+	const ceil = bound(max);
+	if (floor && date < startOfDay(floor)) return startOfDay(floor);
+	if (ceil && date > ceil) return startOfDay(ceil);
+	return date;
+}
+
+//#endregion
+export { Calendar };
+//# sourceMappingURL=base.js.map

package/dist/calendar/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","names":[],"sources":["../../src/calendar/base.tsx"],"sourcesContent":["import { Component, set } from '@expressive/mvc';\n\nimport { missing } from '../piece';\nimport {\n  addDays,\n  addMonths,\n  addYears,\n  endOfMonth,\n  endOfWeek,\n  isSameDay,\n  isSameMonth,\n  startOfDay,\n  startOfMonth,\n  startOfWeek\n} from './date';\n\ndeclare namespace Calendar {\n  interface Day {\n    date: Date;\n    display: number;\n    isCurrentMonth: boolean;\n    isToday: boolean;\n    isPast: boolean;\n    selected: boolean;\n    /** Holds keyboard focus within the grid. */\n    focused: boolean;\n    /** `false` when out of range. */\n    select: false | (() => void);\n  }\n\n  interface Option {\n    value: number;\n    label: string;\n    disabled: boolean;\n  }\n\n  /** A boundary date, or `true` for \"today\". */\n  type Bound = Date | boolean | undefined;\n\n  type Key = Pick<KeyboardEvent, 'key' | 'shiftKey' | 'preventDefault'>;\n\n  type Wrap = (props: { children: Component.Node }) => Component.Node;\n  type Each = (props: { day: Day }) => Component.Node;\n  type Label = (props: { name: string }) => Component.Node;\n  type Part = () => Component.Node;\n}\n\n/**\n * Month grid date picker behavior without a look: bounds, keyboard navigation, roving focus and ARIA, assembled\n * from pieces.\n *\n * Every piece is a placeholder that throws when rendered - a skin assigns each one. Pieces spread the matching\n * `*Props` getter onto their element to stay accessible. ARIA a skin writes itself: `role=\"row\"` on `Row`,\n * `role=\"columnheader\"` on `Weekday`, and `aria-live=\"polite\"` around the month title in `Header`.\n */\nclass Calendar extends Component {\n  static months = [\n    'January', 'February', 'March', 'April', 'May', 'June',\n    'July', 'August', 'September', 'October', 'November', 'December'\n  ];\n\n  static weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n\n  value?: Date = undefined;\n  onChange?: (date: Date) => void = undefined;\n\n  /** The day holding keyboard focus; its month is the one shown. Starts at `value` or today, within `min`/`max`. */\n  focus = set(\n    () => clamp(new Date(this.value || new Date()), this.min, this.max),\n    () => {}\n  );\n\n  min: Calendar.Bound = undefined;\n  max: Calendar.Bound = undefined;\n\n  Root: Calendar.Wrap = missing('Calendar.Root');\n  Header: Calendar.Part = missing('Calendar.Header');\n  Grid: Calendar.Wrap = missing('Calendar.Grid');\n  Row: Calendar.Wrap = missing('Calendar.Row');\n  Weekday: Calendar.Label = missing('Calendar.Weekday');\n  Day: Calendar.Each = missing('Calendar.Day');\n\n  /** Month and year shown, e.g. \"January 2024\". */\n  get title(): string {\n    const { focus } = this;\n\n    return `${Calendar.months[focus.getMonth()]} ${focus.getFullYear()}`;\n  }\n\n  /** `false` when the step would cross a bound. */\n  get backMonth(): false | (() => void) {\n    const prev = addMonths(this.focus, -1);\n    const floor = bound(this.min);\n\n    if (floor && startOfMonth(prev) < startOfMonth(floor)) return false;\n\n    return () => (this.focus = prev);\n  }\n\n  get nextMonth(): false | (() => void) {\n    const next = addMonths(this.focus, 1);\n    const ceil = bound(this.max);\n\n    if (ceil && startOfMonth(next) > ceil) return false;\n\n    return () => (this.focus = next);\n  }\n\n  /** Whole weeks covering the focused month. */\n  get days(): Calendar.Day[] {\n    const { focus, value } = this;\n    const floor = bound(this.min);\n    const ceil = bound(this.max);\n    const end = endOfWeek(endOfMonth(focus));\n    const now = new Date();\n    const days: Calendar.Day[] = [];\n\n    for (let d = startOfWeek(startOfMonth(focus)); d <= end; d = addDays(d, 1)) {\n      const at = d;\n      const disabled = (floor && at < startOfDay(floor)) || (ceil && at > ceil) || false;\n\n      days.push({\n        date: at,\n        display: at.getDate(),\n        isCurrentMonth: isSameMonth(at, focus),\n        isToday: isSameDay(at, now),\n        isPast: at < startOfDay(now),\n        focused: isSameDay(at, focus),\n        select: disabled ? false : () => this.select(at),\n        selected: (value && isSameDay(value, at)) || false\n      });\n    }\n\n    return days;\n  }\n\n  get months(): Calendar.Option[] {\n    const floor = bound(this.min);\n    const ceil = bound(this.max);\n    const year = this.focus.getFullYear();\n\n    return Calendar.months.map((label, value) => {\n      const date = new Date(year, value);\n\n      return {\n        value,\n        label,\n        disabled: (floor && date < startOfMonth(floor)) || (ceil && date > ceil) || false\n      };\n    });\n  }\n\n  get years(): Calendar.Option[] {\n    const start = bound(this.min) || addYears(new Date(), -20);\n    const end = bound(this.max) || addYears(new Date(), 20);\n    const from = start.getFullYear();\n    const to = end.getFullYear();\n\n    return Array.from({ length: Math.max(to + 1 - from, 0) }, (_, i) => ({\n      value: from + i,\n      label: String(from + i),\n      disabled: false\n    }));\n  }\n\n  get backProps() {\n    const { backMonth } = this;\n\n    return {\n      type: 'button',\n      'aria-label': 'Previous month',\n      disabled: !backMonth,\n      onClick: backMonth || undefined\n    } as const;\n  }\n\n  get nextProps() {\n    const { nextMonth } = this;\n\n    return {\n      type: 'button',\n      'aria-label': 'Next month',\n      disabled: !nextMonth,\n      onClick: nextMonth || undefined\n    } as const;\n  }\n\n  get gridProps() {\n    const { title } = this;\n\n    return { role: 'grid', 'aria-label': title, onKeyDown: this.keyDown } as const;\n  }\n\n  /** For a day's element, with `outside`, `today` and `selected` for styling. Binds `claim` on the focused day. */\n  get dayProps() {\n    return (day: Calendar.Day) => {\n      const { date, select, selected, focused, isCurrentMonth, isToday } = day;\n\n      return {\n        outside: !isCurrentMonth,\n        today: isToday,\n        selected,\n        props: {\n          type: 'button',\n          role: 'gridcell',\n          'aria-label': date.toDateString(),\n          'aria-selected': selected,\n          'aria-current': isToday ? 'date' : undefined,\n          tabIndex: focused ? 0 : -1,\n          ref: focused ? this.claim : undefined,\n          disabled: !select,\n          onClick: select || undefined\n        } as const\n      };\n    };\n  }\n\n  select(date: Date) {\n    this.value = date;\n    this.focus = date;\n\n    if (this.onChange) this.onChange(date);\n  }\n\n  /** Move focus to `date`, clamped to `min`/`max`. */\n  move(date: Date) {\n    this.focus = clamp(date, this.min, this.max);\n  }\n\n  keyDown(event: Calendar.Key) {\n    const { focus } = this;\n    const page = event.shiftKey ? 12 : 1;\n\n    switch (event.key) {\n      case 'ArrowLeft': this.move(addDays(focus, -1)); break;\n      case 'ArrowRight': this.move(addDays(focus, 1)); break;\n      case 'ArrowUp': this.move(addDays(focus, -7)); break;\n      case 'ArrowDown': this.move(addDays(focus, 7)); break;\n      case 'Home': this.move(startOfWeek(focus)); break;\n      case 'End': this.move(startOfDay(endOfWeek(focus))); break;\n      case 'PageUp': this.move(addMonths(focus, -page)); break;\n      case 'PageDown': this.move(addMonths(focus, page)); break;\n      case 'Enter':\n      case ' ': {\n        const enabled = this.days.find((day) => day.focused)!.select;\n\n        if (enabled) this.select(focus);\n        break;\n      }\n      default:\n        return;\n    }\n\n    event.preventDefault();\n    NAVIGATING.add(this);\n  }\n\n  /** Ref for the focused day; moves focus to it after keyboard navigation. `dayProps` binds it. */\n  claim(element: HTMLElement | null) {\n    if (element && NAVIGATING.delete(this)) element.focus();\n  }\n\n  render(): Component.Node {\n    const { days } = this;\n    const weeks = Array.from({ length: days.length / 7 }, (_, i) => days.slice(i * 7, i * 7 + 7));\n\n    return (\n      <this.Root>\n        <this.Header />\n        <this.Grid>\n          <this.Row>\n            {Calendar.weekdays.map((name) => <this.Weekday key={name} name={name} />)}\n          </this.Row>\n          {weeks.map((week) => (\n            <this.Row key={week[0].date.getTime()}>\n              {week.map((day) => <this.Day key={day.date.getTime()} day={day} />)}\n            </this.Row>\n          ))}\n        </this.Grid>\n      </this.Root>\n    );\n  }\n}\n\nconst NAVIGATING = new WeakSet<Calendar>();\n\nfunction bound(from: Calendar.Bound) {\n  return from === true ? new Date() : from || undefined;\n}\n\nfunction clamp(date: Date, min: Calendar.Bound, max: Calendar.Bound) {\n  const floor = bound(min);\n  const ceil = bound(max);\n\n  if (floor && date < startOfDay(floor)) return startOfDay(floor);\n  if (ceil && date > ceil) return startOfDay(ceil);\n\n  return date;\n}\n\nexport { Calendar };\n"],"mappings":"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"}

package/dist/calendar/calendar.d.ts

@@ -0,0 +1,78 @@
+import { Calendar as Calendar$1 } from "./base.js";
+import { Component } from "@expressive/mvc";
+
+//#region src/calendar/calendar.d.ts
+declare namespace Calendar {
+  type Day = Calendar$1.Day;
+  type Option = Calendar$1.Option;
+  type Bound = Calendar$1.Bound;
+  type Key = Calendar$1.Key;
+}
+/**
+ * Month grid date picker with bounds and keyboard navigation.
+ *
+ * Arrows move a day or a week, Home/End to the week's edge, PageUp/PageDown a month (a year with Shift); Enter or
+ * Space selects. Pieces - `Root`, `Header`, `Grid`, `Row`, `Weekday`, `Day` - are function components reading
+ * `Calendar.get()`, each styled on its own; pass one as a prop or assign it in a subclass to replace it. Stock
+ * pieces are statics. A replacement `Day` spreads `dayProps(day).props` to keep roving focus.
+ *
+ * @example
+ * <Calendar min value={this.date} onChange={(date) => (this.date = date)} />
+ */
+declare class Calendar extends Calendar$1 {
+  static Root: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  static Header: () => Component.Node;
+  static Grid: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  static Row: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  static Weekday: ({
+    name
+  }: {
+    name: string;
+  }) => Component.Node;
+  static Day: ({
+    day
+  }: {
+    day: Calendar.Day;
+  }) => Component.Node;
+  Root: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  Header: () => Component.Node;
+  Grid: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  Row: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  Weekday: ({
+    name
+  }: {
+    name: string;
+  }) => Component.Node;
+  Day: ({
+    day
+  }: {
+    day: Calendar.Day;
+  }) => Component.Node;
+}
+//#endregion
+export { Calendar };
+//# sourceMappingURL=calendar.d.ts.map

package/dist/calendar/calendar.js

@@ -0,0 +1,145 @@
+import { Calendar as Calendar$1 } from "./base.js";
+import { Caret } from "../icons/caret.js";
+import { style } from "@expressive/dom";
+import { jsx, jsxs } from "@expressive/dom/jsx-runtime";
+
+//#region src/calendar/calendar.tsx
+const Root = ({ children }) => /* @__PURE__ */ jsx("div", { children });
+style(Root, {
+	display: "inline-flex",
+	flexDirection: "column",
+	gap: "8px",
+	padding: "12px",
+	background: "var(--ui-surface, #fff)",
+	border: "1px solid var(--ui-line, #ccc)",
+	borderRadius: "8px",
+	userSelect: "none"
+});
+const square = {
+	display: "grid",
+	placeItems: "center",
+	width: "36px",
+	height: "36px",
+	padding: "0",
+	border: "0",
+	borderRadius: "4px",
+	background: "none",
+	color: "inherit",
+	font: "inherit"
+};
+const Header = () => {
+	const { title, backProps, nextProps } = Calendar$1.get();
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx("button", {
+			...backProps,
+			children: /* @__PURE__ */ jsx(Caret, { _back: true })
+		}),
+		/* @__PURE__ */ jsx("span", {
+			"aria-live": "polite",
+			children: title
+		}),
+		/* @__PURE__ */ jsx("button", {
+			...nextProps,
+			children: /* @__PURE__ */ jsx(Caret, { _next: true })
+		})
+	] });
+};
+style(Header, {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	fontWeight: "600",
+	_button: [square, {
+		cursor: "pointer",
+		color: "var(--ui-muted, #999)",
+		":disabled": {
+			opacity: "0.3",
+			cursor: "default"
+		}
+	}],
+	_back: { transform: "rotate(90deg)" },
+	_next: { transform: "rotate(-90deg)" }
+});
+const Grid = ({ children }) => /* @__PURE__ */ jsx("div", {
+	...Calendar$1.get().gridProps,
+	children
+});
+const Row = ({ children }) => /* @__PURE__ */ jsx("div", {
+	role: "row",
+	children
+});
+style(Row, {
+	display: "grid",
+	gridTemplateColumns: "repeat(7, 36px)",
+	gap: "2px"
+});
+const Weekday = ({ name }) => /* @__PURE__ */ jsx("abbr", {
+	role: "columnheader",
+	title: name,
+	children: name.slice(0, 2)
+});
+style(Weekday, {
+	display: "grid",
+	placeItems: "center",
+	height: "28px",
+	color: "var(--ui-muted, #999)",
+	fontSize: "12px",
+	textDecoration: "none"
+});
+const Day = ({ day }) => {
+	const { outside, today, selected, props } = Calendar$1.get().dayProps(day);
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		_outside: outside,
+		_today: today,
+		_selected: selected,
+		children: day.display
+	});
+};
+style(Day, square, {
+	cursor: "pointer",
+	":hover": { background: "var(--ui-highlight, #deebff)" },
+	_outside: { opacity: "0.45" },
+	_today: {
+		fontWeight: "700",
+		boxShadow: "inset 0 0 0 1px var(--ui-line, #ccc)"
+	},
+	_selected: {
+		background: "var(--ui-accent, #2684ff)",
+		color: "#fff"
+	},
+	":disabled": {
+		opacity: "0.3",
+		cursor: "default",
+		background: "none"
+	}
+});
+/**
+* Month grid date picker with bounds and keyboard navigation.
+*
+* Arrows move a day or a week, Home/End to the week's edge, PageUp/PageDown a month (a year with Shift); Enter or
+* Space selects. Pieces - `Root`, `Header`, `Grid`, `Row`, `Weekday`, `Day` - are function components reading
+* `Calendar.get()`, each styled on its own; pass one as a prop or assign it in a subclass to replace it. Stock
+* pieces are statics. A replacement `Day` spreads `dayProps(day).props` to keep roving focus.
+*
+* @example
+* <Calendar min value={this.date} onChange={(date) => (this.date = date)} />
+*/
+var Calendar = class extends Calendar$1 {
+	static Root = Root;
+	static Header = Header;
+	static Grid = Grid;
+	static Row = Row;
+	static Weekday = Weekday;
+	static Day = Day;
+	Root = Root;
+	Header = Header;
+	Grid = Grid;
+	Row = Row;
+	Weekday = Weekday;
+	Day = Day;
+};
+
+//#endregion
+export { Calendar };
+//# sourceMappingURL=calendar.js.map

package/dist/calendar/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.js","names":["Base.Calendar"],"sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["/** @jsxImportSource @expressive/dom */\nimport { Component } from '@expressive/mvc';\nimport { style } from '@expressive/dom';\n\nimport { Caret } from '../icons';\nimport * as Base from './base';\n\ndeclare namespace Calendar {\n  type Day = Base.Calendar.Day;\n  type Option = Base.Calendar.Option;\n  type Bound = Base.Calendar.Bound;\n  type Key = Base.Calendar.Key;\n}\n\nconst Root = ({ children }: { children: Component.Node }): Component.Node => <div>{children}</div>;\n\nstyle(Root, {\n  display: 'inline-flex',\n  flexDirection: 'column',\n  gap: '8px',\n  padding: '12px',\n  background: 'var(--ui-surface, #fff)',\n  border: '1px solid var(--ui-line, #ccc)',\n  borderRadius: '8px',\n  userSelect: 'none'\n});\n\nconst square = {\n  display: 'grid',\n  placeItems: 'center',\n  width: '36px',\n  height: '36px',\n  padding: '0',\n  border: '0',\n  borderRadius: '4px',\n  background: 'none',\n  color: 'inherit',\n  font: 'inherit'\n};\n\nconst Header = (): Component.Node => {\n  const { title, backProps, nextProps } = Base.Calendar.get();\n\n  return (\n    <div>\n      <button {...backProps}>\n        <Caret _back />\n      </button>\n      <span aria-live=\"polite\">{title}</span>\n      <button {...nextProps}>\n        <Caret _next />\n      </button>\n    </div>\n  );\n};\n\nstyle(Header, {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  fontWeight: '600',\n  _button: [square, {\n    cursor: 'pointer',\n    color: 'var(--ui-muted, #999)',\n    ':disabled': {\n      opacity: '0.3',\n      cursor: 'default'\n    }\n  }],\n  _back: {\n    transform: 'rotate(90deg)'\n  },\n  _next: {\n    transform: 'rotate(-90deg)'\n  }\n});\n\nconst Grid = ({ children }: { children: Component.Node }): Component.Node => (\n  <div {...Base.Calendar.get().gridProps}>{children}</div>\n);\n\nconst Row = ({ children }: { children: Component.Node }): Component.Node => (\n  <div role=\"row\">{children}</div>\n);\n\nstyle(Row, {\n  display: 'grid',\n  gridTemplateColumns: 'repeat(7, 36px)',\n  gap: '2px'\n});\n\nconst Weekday = ({ name }: { name: string }): Component.Node => (\n  <abbr role=\"columnheader\" title={name}>{name.slice(0, 2)}</abbr>\n);\n\nstyle(Weekday, {\n  display: 'grid',\n  placeItems: 'center',\n  height: '28px',\n  color: 'var(--ui-muted, #999)',\n  fontSize: '12px',\n  textDecoration: 'none'\n});\n\nconst Day = ({ day }: { day: Calendar.Day }): Component.Node => {\n  const { outside, today, selected, props } = Base.Calendar.get().dayProps(day);\n\n  return (\n    <button {...props} _outside={outside} _today={today} _selected={selected}>\n      {day.display}\n    </button>\n  );\n};\n\nstyle(Day, square, {\n  cursor: 'pointer',\n  ':hover': {\n    background: 'var(--ui-highlight, #deebff)'\n  },\n  _outside: {\n    opacity: '0.45'\n  },\n  _today: {\n    fontWeight: '700',\n    boxShadow: 'inset 0 0 0 1px var(--ui-line, #ccc)'\n  },\n  _selected: {\n    background: 'var(--ui-accent, #2684ff)',\n    color: '#fff'\n  },\n  ':disabled': {\n    opacity: '0.3',\n    cursor: 'default',\n    background: 'none'\n  }\n});\n\n/**\n * Month grid date picker with bounds and keyboard navigation.\n *\n * Arrows move a day or a week, Home/End to the week's edge, PageUp/PageDown a month (a year with Shift); Enter or\n * Space selects. Pieces - `Root`, `Header`, `Grid`, `Row`, `Weekday`, `Day` - are function components reading\n * `Calendar.get()`, each styled on its own; pass one as a prop or assign it in a subclass to replace it. Stock\n * pieces are statics. A replacement `Day` spreads `dayProps(day).props` to keep roving focus.\n *\n * @example\n * <Calendar min value={this.date} onChange={(date) => (this.date = date)} />\n */\nclass Calendar extends Base.Calendar {\n  static Root = Root;\n  static Header = Header;\n  static Grid = Grid;\n  static Row = Row;\n  static Weekday = Weekday;\n  static Day = Day;\n\n  Root = Root;\n  Header = Header;\n  Grid = Grid;\n  Row = Row;\n  Weekday = Weekday;\n  Day = Day;\n}\n\nexport { Calendar, Day, Grid, Header, Root, Row, Weekday };\n"],"mappings":";;;;;;AAcA,MAAM,QAAQ,EAAE,eAA6D,oBAAC,SAAK,WAAe;AAElG,MAAM,MAAM;CACV,SAAS;CACT,eAAe;CACf,KAAK;CACL,SAAS;CACT,YAAY;CACZ,QAAQ;CACR,cAAc;CACd,YAAY;CACb,CAAC;AAEF,MAAM,SAAS;CACb,SAAS;CACT,YAAY;CACZ,OAAO;CACP,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,cAAc;CACd,YAAY;CACZ,OAAO;CACP,MAAM;CACP;AAED,MAAM,eAA+B;CACnC,MAAM,EAAE,OAAO,WAAW,yBAA4B,KAAK;AAE3D,QACE,qBAAC;EACC,oBAAC;GAAO,GAAI;aACV,oBAAC,SAAM,cAAQ;IACR;EACT,oBAAC;GAAK,aAAU;aAAU;IAAa;EACvC,oBAAC;GAAO,GAAI;aACV,oBAAC,SAAM,cAAQ;IACR;KACL;;AAIV,MAAM,QAAQ;CACZ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,SAAS,CAAC,QAAQ;EAChB,QAAQ;EACR,OAAO;EACP,aAAa;GACX,SAAS;GACT,QAAQ;GACT;EACF,CAAC;CACF,OAAO,EACL,WAAW,iBACZ;CACD,OAAO,EACL,WAAW,kBACZ;CACF,CAAC;AAEF,MAAM,QAAQ,EAAE,eACd,oBAAC;CAAI,cAAkB,KAAK,CAAC;CAAY;EAAe;AAG1D,MAAM,OAAO,EAAE,eACb,oBAAC;CAAI,MAAK;CAAO;EAAe;AAGlC,MAAM,KAAK;CACT,SAAS;CACT,qBAAqB;CACrB,KAAK;CACN,CAAC;AAEF,MAAM,WAAW,EAAE,WACjB,oBAAC;CAAK,MAAK;CAAe,OAAO;WAAO,KAAK,MAAM,GAAG,EAAE;EAAQ;AAGlE,MAAM,SAAS;CACb,SAAS;CACT,YAAY;CACZ,QAAQ;CACR,OAAO;CACP,UAAU;CACV,gBAAgB;CACjB,CAAC;AAEF,MAAM,OAAO,EAAE,UAAiD;CAC9D,MAAM,EAAE,SAAS,OAAO,UAAU,qBAAwB,KAAK,CAAC,SAAS,IAAI;AAE7E,QACE,oBAAC;EAAO,GAAI;EAAO,UAAU;EAAS,QAAQ;EAAO,WAAW;YAC7D,IAAI;GACE;;AAIb,MAAM,KAAK,QAAQ;CACjB,QAAQ;CACR,UAAU,EACR,YAAY,gCACb;CACD,UAAU,EACR,SAAS,QACV;CACD,QAAQ;EACN,YAAY;EACZ,WAAW;EACZ;CACD,WAAW;EACT,YAAY;EACZ,OAAO;EACR;CACD,aAAa;EACX,SAAS;EACT,QAAQ;EACR,YAAY;EACb;CACF,CAAC;;;;;;;;;;;;AAaF,IAAM,WAAN,cAAuBA,WAAc;CACnC,OAAO,OAAO;CACd,OAAO,SAAS;CAChB,OAAO,OAAO;CACd,OAAO,MAAM;CACb,OAAO,UAAU;CACjB,OAAO,MAAM;CAEb,OAAO;CACP,SAAS;CACT,OAAO;CACP,MAAM;CACN,UAAU;CACV,MAAM"}

package/dist/calendar/date.js

@@ -0,0 +1,56 @@
+//#region src/calendar/date.ts
+function startOfDay(from) {
+	const date = new Date(from);
+	date.setHours(0, 0, 0, 0);
+	return date;
+}
+function startOfMonth(from) {
+	const date = startOfDay(from);
+	date.setDate(1);
+	return date;
+}
+function endOfMonth(from) {
+	const date = startOfMonth(from);
+	date.setMonth(date.getMonth() + 1);
+	return /* @__PURE__ */ new Date(date.getTime() - 1);
+}
+function startOfWeek(from) {
+	const date = startOfDay(from);
+	date.setDate(date.getDate() - date.getDay());
+	return date;
+}
+function endOfWeek(from) {
+	const date = startOfWeek(from);
+	date.setDate(date.getDate() + 7);
+	return /* @__PURE__ */ new Date(date.getTime() - 1);
+}
+function addDays(from, count) {
+	const date = new Date(from);
+	date.setDate(date.getDate() + count);
+	return date;
+}
+/** Clamps to the last valid day when the target month is shorter. */
+function addMonths(from, count) {
+	const date = new Date(from);
+	const day = date.getDate();
+	date.setDate(1);
+	date.setMonth(date.getMonth() + count);
+	date.setDate(Math.min(day, daysInMonth(date)));
+	return date;
+}
+function addYears(from, count) {
+	return addMonths(from, count * 12);
+}
+function isSameDay(a, b) {
+	return startOfDay(a).getTime() === startOfDay(b).getTime();
+}
+function isSameMonth(a, b) {
+	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function daysInMonth(of) {
+	return new Date(of.getFullYear(), of.getMonth() + 1, 0).getDate();
+}
+
+//#endregion
+export { addDays, addMonths, addYears, endOfMonth, endOfWeek, isSameDay, isSameMonth, startOfDay, startOfMonth, startOfWeek };
+//# sourceMappingURL=date.js.map

package/dist/calendar/date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.js","names":[],"sources":["../../src/calendar/date.ts"],"sourcesContent":["export function startOfDay(from: Date) {\n  const date = new Date(from);\n  date.setHours(0, 0, 0, 0);\n  return date;\n}\n\nexport function startOfMonth(from: Date) {\n  const date = startOfDay(from);\n  date.setDate(1);\n  return date;\n}\n\nexport function endOfMonth(from: Date) {\n  const date = startOfMonth(from);\n  date.setMonth(date.getMonth() + 1);\n  return new Date(date.getTime() - 1);\n}\n\nexport function startOfWeek(from: Date) {\n  const date = startOfDay(from);\n  date.setDate(date.getDate() - date.getDay());\n  return date;\n}\n\nexport function endOfWeek(from: Date) {\n  const date = startOfWeek(from);\n  date.setDate(date.getDate() + 7);\n  return new Date(date.getTime() - 1);\n}\n\nexport function addDays(from: Date, count: number) {\n  const date = new Date(from);\n  date.setDate(date.getDate() + count);\n  return date;\n}\n\n/** Clamps to the last valid day when the target month is shorter. */\nexport function addMonths(from: Date, count: number) {\n  const date = new Date(from);\n  const day = date.getDate();\n\n  date.setDate(1);\n  date.setMonth(date.getMonth() + count);\n  date.setDate(Math.min(day, daysInMonth(date)));\n\n  return date;\n}\n\nexport function addYears(from: Date, count: number) {\n  return addMonths(from, count * 12);\n}\n\nexport function isSameDay(a: Date, b: Date) {\n  return startOfDay(a).getTime() === startOfDay(b).getTime();\n}\n\nexport function isSameMonth(a: Date, b: Date) {\n  return (\n    a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth()\n  );\n}\n\nfunction daysInMonth(of: Date) {\n  return new Date(of.getFullYear(), of.getMonth() + 1, 0).getDate();\n}\n"],"mappings":";AAAA,SAAgB,WAAW,MAAY;CACrC,MAAM,OAAO,IAAI,KAAK,KAAK;AAC3B,MAAK,SAAS,GAAG,GAAG,GAAG,EAAE;AACzB,QAAO;;AAGT,SAAgB,aAAa,MAAY;CACvC,MAAM,OAAO,WAAW,KAAK;AAC7B,MAAK,QAAQ,EAAE;AACf,QAAO;;AAGT,SAAgB,WAAW,MAAY;CACrC,MAAM,OAAO,aAAa,KAAK;AAC/B,MAAK,SAAS,KAAK,UAAU,GAAG,EAAE;AAClC,wBAAO,IAAI,KAAK,KAAK,SAAS,GAAG,EAAE;;AAGrC,SAAgB,YAAY,MAAY;CACtC,MAAM,OAAO,WAAW,KAAK;AAC7B,MAAK,QAAQ,KAAK,SAAS,GAAG,KAAK,QAAQ,CAAC;AAC5C,QAAO;;AAGT,SAAgB,UAAU,MAAY;CACpC,MAAM,OAAO,YAAY,KAAK;AAC9B,MAAK,QAAQ,KAAK,SAAS,GAAG,EAAE;AAChC,wBAAO,IAAI,KAAK,KAAK,SAAS,GAAG,EAAE;;AAGrC,SAAgB,QAAQ,MAAY,OAAe;CACjD,MAAM,OAAO,IAAI,KAAK,KAAK;AAC3B,MAAK,QAAQ,KAAK,SAAS,GAAG,MAAM;AACpC,QAAO;;;AAIT,SAAgB,UAAU,MAAY,OAAe;CACnD,MAAM,OAAO,IAAI,KAAK,KAAK;CAC3B,MAAM,MAAM,KAAK,SAAS;AAE1B,MAAK,QAAQ,EAAE;AACf,MAAK,SAAS,KAAK,UAAU,GAAG,MAAM;AACtC,MAAK,QAAQ,KAAK,IAAI,KAAK,YAAY,KAAK,CAAC,CAAC;AAE9C,QAAO;;AAGT,SAAgB,SAAS,MAAY,OAAe;AAClD,QAAO,UAAU,MAAM,QAAQ,GAAG;;AAGpC,SAAgB,UAAU,GAAS,GAAS;AAC1C,QAAO,WAAW,EAAE,CAAC,SAAS,KAAK,WAAW,EAAE,CAAC,SAAS;;AAG5D,SAAgB,YAAY,GAAS,GAAS;AAC5C,QACE,EAAE,aAAa,KAAK,EAAE,aAAa,IAAI,EAAE,UAAU,KAAK,EAAE,UAAU;;AAIxE,SAAS,YAAY,IAAU;AAC7B,QAAO,IAAI,KAAK,GAAG,aAAa,EAAE,GAAG,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS"}

package/dist/dialog/base.d.ts

@@ -0,0 +1,74 @@
+import { Component, Model } from "@expressive/mvc";
+
+//#region src/dialog/base.d.ts
+declare namespace Dialog {
+  type Wrap = (props: {
+    children: Component.Node;
+  }) => Component.Node;
+  type Part = () => Component.Node;
+  type Key = Pick<KeyboardEvent, 'key' | 'shiftKey' | 'preventDefault'>;
+}
+/**
+ * Modal dialog behavior without a look: focus trap and restore, scroll lock, dismissal and ARIA, assembled from pieces.
+ *
+ * Every visible piece is a placeholder that throws when rendered - a skin assigns each one it renders. `Layer` renders
+ * in place by default; a skin replaces it to move the dialog out of the page. Pieces spread the matching `*Props`
+ * getter onto their element to stay accessible.
+ */
+declare class Dialog extends Component {
+  open: boolean;
+  onClose?: () => void;
+  /** Heading, and the dialog's accessible name. */
+  title?: string;
+  /** Whether Escape, the backdrop and the close button dismiss. */
+  dismissible: boolean;
+  /** Prefixes the heading id. */
+  id: string;
+  Layer: Dialog.Wrap;
+  Backdrop: Dialog.Wrap;
+  Panel: Dialog.Wrap;
+  Header: Dialog.Wrap;
+  Title: Dialog.Part;
+  Close: Dialog.Part;
+  constructor(...args: Model.Args);
+  /** For the backdrop: a press that starts and ends on it closes. */
+  get backdropProps(): {
+    onMouseDown: (event: MouseEvent) => void;
+    onClick: (event: MouseEvent) => void;
+  };
+  get panelProps(): {
+    readonly ref: (panel: HTMLElement | null) => void;
+    readonly id: `${string}-panel`;
+    readonly role: "dialog";
+    readonly 'aria-modal': "true";
+    readonly 'aria-labelledby': string | undefined;
+    readonly tabIndex: -1;
+  };
+  get titleProps(): {
+    id: string;
+  };
+  get closeProps(): {
+    readonly type: "button";
+    readonly 'aria-label': "Close";
+    readonly onClick: () => void;
+  };
+  /** Ask to close; ignored unless `dismissible`. */
+  close(): void;
+  /** Escape closes; Tab goes to `trap`. Ignored unless this is the topmost open dialog. */
+  protected keyDown(event: Dialog.Key): void;
+  /** Send keys pressed anywhere to `keyDown` while open; returns the release. Defaults to `document`. */
+  protected listen(): () => void;
+  /** Stop the page behind from scrolling while open; returns the release. Defaults to the body's `overflow`. */
+  protected lock(): () => void;
+  /** Keep Tab focus inside the panel, wrapping at either end. Defaults to the DOM's focusable elements. */
+  protected trap(event: Dialog.Key): void;
+  private enter;
+  /** Ref for the panel, in `panelProps`; focuses it, or its `autofocus` element. */
+  focusIn(panel: HTMLElement | null): void;
+  render(props: {
+    children?: Component.Node;
+  }): Component.Node;
+}
+//#endregion
+export { Dialog };
+//# sourceMappingURL=base.d.ts.map