@nepdatejs/vanilla 0.1.0 → 0.1.1

package/dist/preset-list-BYCZm61I.cjs

@@ -0,0 +1,97 @@
+const require_registry = require("./registry-3qzdVB7H.cjs");
+let _nepdatejs_dom = require("@nepdatejs/dom");
+//#region src/panel.ts
+/** Show a panel beside its anchor, and close it the usual ways. Returns the way to undo that. */
+function openPanel(options) {
+	const { panel, close } = options;
+	panel.hidden = false;
+	const stopTracking = (0, _nepdatejs_dom.trackPosition)(options.anchor, panel, {
+		width: options.width,
+		layout: options.layout
+	});
+	const stopOutside = (0, _nepdatejs_dom.onOutsidePointer)(options.inside, close);
+	const stopBackdrop = (0, _nepdatejs_dom.onBackdropPointer)(panel, close);
+	const stopEscape = (0, _nepdatejs_dom.onEscape)(() => {
+		close();
+		(0, _nepdatejs_dom.restoreFocus)(options.returnFocus);
+	});
+	return () => {
+		stopTracking();
+		stopOutside();
+		stopBackdrop();
+		stopEscape();
+		panel.hidden = true;
+	};
+}
+/** The BS/AD buttons in a panel's footer. */
+function renderSegment(segment, state, locale) {
+	segment.hidden = !state.canSwitchCalendar;
+	require_registry.setAttrs(segment, { "aria-label": locale.labels.calendar });
+	for (const button of segment.querySelectorAll("button")) {
+		const calendar = button.dataset["calendar"] === "AD" ? "AD" : "BS";
+		require_registry.setText(button, locale.calendarNames[calendar]);
+		require_registry.setAttrs(button, { "aria-pressed": String(calendar === state.calendar) });
+	}
+}
+//#endregion
+//#region src/preset-list.ts
+/** The shortcut buttons beside the calendar. Hidden when there are none. */
+var PresetList = class {
+	constructor(onApply) {
+		this.ids = "";
+		this.element = require_registry.el("div", {
+			class: "ndp-presets",
+			role: "group",
+			hidden: true
+		});
+		this.element.addEventListener("click", (event) => {
+			const button = event.target instanceof Element ? event.target.closest(".ndp-preset") : null;
+			const id = button?.dataset["preset"];
+			if (id !== void 0 && button && !button.disabled) onApply(id);
+		});
+	}
+	render(presets, label) {
+		this.element.hidden = presets.length === 0;
+		require_registry.setAttrs(this.element, { "aria-label": label });
+		const ids = presets.map((preset) => preset.id).join("\n");
+		if (ids !== this.ids) {
+			this.ids = ids;
+			this.element.replaceChildren(...presets.map((preset) => require_registry.el("button", {
+				type: "button",
+				class: "ndp-preset",
+				"data-preset": preset.id
+			})));
+		}
+		presets.forEach((preset, index) => {
+			const button = this.element.children[index];
+			if (button) {
+				require_registry.setText(button, preset.label);
+				require_registry.setAttrs(button, {
+					"aria-pressed": preset.isActive ? "true" : "false",
+					disabled: preset.isDisabled
+				});
+			}
+		});
+	}
+};
+//#endregion
+Object.defineProperty(exports, "PresetList", {
+	enumerable: true,
+	get: function() {
+		return PresetList;
+	}
+});
+Object.defineProperty(exports, "openPanel", {
+	enumerable: true,
+	get: function() {
+		return openPanel;
+	}
+});
+Object.defineProperty(exports, "renderSegment", {
+	enumerable: true,
+	get: function() {
+		return renderSegment;
+	}
+});
+
+//# sourceMappingURL=preset-list-BYCZm61I.cjs.map

package/dist/preset-list-BYCZm61I.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset-list-BYCZm61I.cjs","names":["trackPosition","onOutsidePointer","onBackdropPointer","onEscape","el"],"sources":["../src/panel.ts","../src/preset-list.ts"],"sourcesContent":["import type { CalendarSystem, LocaleData } from '@nepdatejs/core';\nimport {\n  onBackdropPointer,\n  onEscape,\n  onOutsidePointer,\n  restoreFocus,\n  trackPosition,\n  type PanelLayout,\n} from '@nepdatejs/dom';\nimport { setAttrs, setText } from './dom';\n\ninterface OpenPanel {\n  readonly panel: HTMLElement;\n  readonly anchor: Element;\n  /** A pointer down outside these closes the panel. */\n  readonly inside: readonly Element[];\n  readonly width: number;\n  readonly layout: PanelLayout | undefined;\n  readonly close: () => void;\n  /** Gets focus back after Escape. */\n  readonly returnFocus: HTMLElement;\n}\n\n/** Show a panel beside its anchor, and close it the usual ways. Returns the way to undo that. */\nexport function openPanel(options: OpenPanel): () => void {\n  const { panel, close } = options;\n  panel.hidden = false;\n  const stopTracking = trackPosition(options.anchor, panel, {\n    width: options.width,\n    layout: options.layout,\n  });\n  const stopOutside = onOutsidePointer(options.inside, close);\n  const stopBackdrop = onBackdropPointer(panel, close);\n  const stopEscape = onEscape(() => {\n    close();\n    restoreFocus(options.returnFocus);\n  });\n\n  return () => {\n    stopTracking();\n    stopOutside();\n    stopBackdrop();\n    stopEscape();\n    panel.hidden = true;\n  };\n}\n\n/** The BS/AD buttons in a panel's footer. */\nexport function renderSegment(\n  segment: HTMLElement,\n  state: { readonly canSwitchCalendar: boolean; readonly calendar: CalendarSystem },\n  locale: LocaleData,\n): void {\n  segment.hidden = !state.canSwitchCalendar;\n  setAttrs(segment, { 'aria-label': locale.labels.calendar });\n  for (const button of segment.querySelectorAll<HTMLButtonElement>('button')) {\n    const calendar = button.dataset['calendar'] === 'AD' ? 'AD' : 'BS';\n    setText(button, locale.calendarNames[calendar]);\n    setAttrs(button, { 'aria-pressed': String(calendar === state.calendar) });\n  }\n}\n","import type { PresetState } from '@nepdatejs/datepicker';\nimport { el, setAttrs, setText } from './dom';\n\n/** Panel width with and without the presets column. */\nexport const PANEL_WIDTH = 320;\nexport const PANEL_WIDTH_WITH_PRESETS = 492;\nexport const TIME_COLUMNS_WIDTH = 136;\n\n/** The shortcut buttons beside the calendar. Hidden when there are none. */\nexport class PresetList {\n  readonly element: HTMLDivElement;\n  private ids = '';\n\n  constructor(onApply: (id: string) => void) {\n    this.element = el('div', { class: 'ndp-presets', role: 'group', hidden: true });\n    this.element.addEventListener('click', (event) => {\n      const button =\n        event.target instanceof Element\n          ? event.target.closest<HTMLButtonElement>('.ndp-preset')\n          : null;\n      const id = button?.dataset['preset'];\n      if (id !== undefined && button && !button.disabled) {\n        onApply(id);\n      }\n    });\n  }\n\n  render(presets: readonly PresetState[], label: string): void {\n    this.element.hidden = presets.length === 0;\n    setAttrs(this.element, { 'aria-label': label });\n    const ids = presets.map((preset) => preset.id).join('\\n');\n    if (ids !== this.ids) {\n      this.ids = ids;\n      this.element.replaceChildren(\n        ...presets.map((preset) =>\n          el('button', { type: 'button', class: 'ndp-preset', 'data-preset': preset.id }),\n        ),\n      );\n    }\n    presets.forEach((preset, index) => {\n      const button = this.element.children[index];\n      if (button) {\n        setText(button, preset.label);\n        setAttrs(button, {\n          'aria-pressed': preset.isActive ? 'true' : 'false',\n          disabled: preset.isDisabled,\n        });\n      }\n    });\n  }\n}\n"],"mappings":";;;;AAwBA,SAAgB,UAAU,SAAgC;CACxD,MAAM,EAAE,OAAO,UAAU;CACzB,MAAM,SAAS;CACf,MAAM,gBAAA,GAAeA,eAAAA,cAAAA,CAAc,QAAQ,QAAQ,OAAO;EACxD,OAAO,QAAQ;EACf,QAAQ,QAAQ;CAClB,CAAC;CACD,MAAM,eAAA,GAAcC,eAAAA,iBAAAA,CAAiB,QAAQ,QAAQ,KAAK;CAC1D,MAAM,gBAAA,GAAeC,eAAAA,kBAAAA,CAAkB,OAAO,KAAK;CACnD,MAAM,cAAA,GAAaC,eAAAA,SAAAA,OAAe;EAChC,MAAM;EACN,CAAA,GAAA,eAAA,aAAA,CAAa,QAAQ,WAAW;CAClC,CAAC;CAED,aAAa;EACX,aAAa;EACb,YAAY;EACZ,aAAa;EACb,WAAW;EACX,MAAM,SAAS;CACjB;AACF;;AAGA,SAAgB,cACd,SACA,OACA,QACM;CACN,QAAQ,SAAS,CAAC,MAAM;CACxB,iBAAA,SAAS,SAAS,EAAE,cAAc,OAAO,OAAO,SAAS,CAAC;CAC1D,KAAK,MAAM,UAAU,QAAQ,iBAAoC,QAAQ,GAAG;EAC1E,MAAM,WAAW,OAAO,QAAQ,gBAAgB,OAAO,OAAO;EAC9D,iBAAA,QAAQ,QAAQ,OAAO,cAAc,SAAS;EAC9C,iBAAA,SAAS,QAAQ,EAAE,gBAAgB,OAAO,aAAa,MAAM,QAAQ,EAAE,CAAC;CAC1E;AACF;;;;ACnDA,IAAa,aAAb,MAAwB;CAItB,YAAY,SAA+B;EAF3C,KAAQ,MAAM;EAGZ,KAAK,UAAUC,iBAAAA,GAAG,OAAO;GAAE,OAAO;GAAe,MAAM;GAAS,QAAQ;EAAK,CAAC;EAC9E,KAAK,QAAQ,iBAAiB,UAAU,UAAU;GAChD,MAAM,SACJ,MAAM,kBAAkB,UACpB,MAAM,OAAO,QAA2B,aAAa,IACrD;GACN,MAAM,KAAK,QAAQ,QAAQ;GAC3B,IAAI,OAAO,KAAA,KAAa,UAAU,CAAC,OAAO,UACxC,QAAQ,EAAE;EAEd,CAAC;CACH;CAEA,OAAO,SAAiC,OAAqB;EAC3D,KAAK,QAAQ,SAAS,QAAQ,WAAW;EACzC,iBAAA,SAAS,KAAK,SAAS,EAAE,cAAc,MAAM,CAAC;EAC9C,MAAM,MAAM,QAAQ,KAAK,WAAW,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI;EACxD,IAAI,QAAQ,KAAK,KAAK;GACpB,KAAK,MAAM;GACX,KAAK,QAAQ,gBACX,GAAG,QAAQ,KAAK,WACdA,iBAAAA,GAAG,UAAU;IAAE,MAAM;IAAU,OAAO;IAAc,eAAe,OAAO;GAAG,CAAC,CAChF,CACF;EACF;EACA,QAAQ,SAAS,QAAQ,UAAU;GACjC,MAAM,SAAS,KAAK,QAAQ,SAAS;GACrC,IAAI,QAAQ;IACV,iBAAA,QAAQ,QAAQ,OAAO,KAAK;IAC5B,iBAAA,SAAS,QAAQ;KACf,gBAAgB,OAAO,WAAW,SAAS;KAC3C,UAAU,OAAO;IACnB,CAAC;GACH;EACF,CAAC;CACH;AACF"}

package/dist/preset-list-DmE6fJjr.js

@@ -0,0 +1,80 @@
+import { b as setText, g as el, v as setAttrs } from "./registry-BvkGnkvV.js";
+import { onBackdropPointer, onEscape, onOutsidePointer, restoreFocus, trackPosition } from "@nepdatejs/dom";
+//#region src/panel.ts
+/** Show a panel beside its anchor, and close it the usual ways. Returns the way to undo that. */
+function openPanel(options) {
+	const { panel, close } = options;
+	panel.hidden = false;
+	const stopTracking = trackPosition(options.anchor, panel, {
+		width: options.width,
+		layout: options.layout
+	});
+	const stopOutside = onOutsidePointer(options.inside, close);
+	const stopBackdrop = onBackdropPointer(panel, close);
+	const stopEscape = onEscape(() => {
+		close();
+		restoreFocus(options.returnFocus);
+	});
+	return () => {
+		stopTracking();
+		stopOutside();
+		stopBackdrop();
+		stopEscape();
+		panel.hidden = true;
+	};
+}
+/** The BS/AD buttons in a panel's footer. */
+function renderSegment(segment, state, locale) {
+	segment.hidden = !state.canSwitchCalendar;
+	setAttrs(segment, { "aria-label": locale.labels.calendar });
+	for (const button of segment.querySelectorAll("button")) {
+		const calendar = button.dataset["calendar"] === "AD" ? "AD" : "BS";
+		setText(button, locale.calendarNames[calendar]);
+		setAttrs(button, { "aria-pressed": String(calendar === state.calendar) });
+	}
+}
+//#endregion
+//#region src/preset-list.ts
+/** The shortcut buttons beside the calendar. Hidden when there are none. */
+var PresetList = class {
+	constructor(onApply) {
+		this.ids = "";
+		this.element = el("div", {
+			class: "ndp-presets",
+			role: "group",
+			hidden: true
+		});
+		this.element.addEventListener("click", (event) => {
+			const button = event.target instanceof Element ? event.target.closest(".ndp-preset") : null;
+			const id = button?.dataset["preset"];
+			if (id !== void 0 && button && !button.disabled) onApply(id);
+		});
+	}
+	render(presets, label) {
+		this.element.hidden = presets.length === 0;
+		setAttrs(this.element, { "aria-label": label });
+		const ids = presets.map((preset) => preset.id).join("\n");
+		if (ids !== this.ids) {
+			this.ids = ids;
+			this.element.replaceChildren(...presets.map((preset) => el("button", {
+				type: "button",
+				class: "ndp-preset",
+				"data-preset": preset.id
+			})));
+		}
+		presets.forEach((preset, index) => {
+			const button = this.element.children[index];
+			if (button) {
+				setText(button, preset.label);
+				setAttrs(button, {
+					"aria-pressed": preset.isActive ? "true" : "false",
+					disabled: preset.isDisabled
+				});
+			}
+		});
+	}
+};
+//#endregion
+export { openPanel as n, renderSegment as r, PresetList as t };
+
+//# sourceMappingURL=preset-list-DmE6fJjr.js.map

package/dist/preset-list-DmE6fJjr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset-list-DmE6fJjr.js","names":[],"sources":["../src/panel.ts","../src/preset-list.ts"],"sourcesContent":["import type { CalendarSystem, LocaleData } from '@nepdatejs/core';\nimport {\n  onBackdropPointer,\n  onEscape,\n  onOutsidePointer,\n  restoreFocus,\n  trackPosition,\n  type PanelLayout,\n} from '@nepdatejs/dom';\nimport { setAttrs, setText } from './dom';\n\ninterface OpenPanel {\n  readonly panel: HTMLElement;\n  readonly anchor: Element;\n  /** A pointer down outside these closes the panel. */\n  readonly inside: readonly Element[];\n  readonly width: number;\n  readonly layout: PanelLayout | undefined;\n  readonly close: () => void;\n  /** Gets focus back after Escape. */\n  readonly returnFocus: HTMLElement;\n}\n\n/** Show a panel beside its anchor, and close it the usual ways. Returns the way to undo that. */\nexport function openPanel(options: OpenPanel): () => void {\n  const { panel, close } = options;\n  panel.hidden = false;\n  const stopTracking = trackPosition(options.anchor, panel, {\n    width: options.width,\n    layout: options.layout,\n  });\n  const stopOutside = onOutsidePointer(options.inside, close);\n  const stopBackdrop = onBackdropPointer(panel, close);\n  const stopEscape = onEscape(() => {\n    close();\n    restoreFocus(options.returnFocus);\n  });\n\n  return () => {\n    stopTracking();\n    stopOutside();\n    stopBackdrop();\n    stopEscape();\n    panel.hidden = true;\n  };\n}\n\n/** The BS/AD buttons in a panel's footer. */\nexport function renderSegment(\n  segment: HTMLElement,\n  state: { readonly canSwitchCalendar: boolean; readonly calendar: CalendarSystem },\n  locale: LocaleData,\n): void {\n  segment.hidden = !state.canSwitchCalendar;\n  setAttrs(segment, { 'aria-label': locale.labels.calendar });\n  for (const button of segment.querySelectorAll<HTMLButtonElement>('button')) {\n    const calendar = button.dataset['calendar'] === 'AD' ? 'AD' : 'BS';\n    setText(button, locale.calendarNames[calendar]);\n    setAttrs(button, { 'aria-pressed': String(calendar === state.calendar) });\n  }\n}\n","import type { PresetState } from '@nepdatejs/datepicker';\nimport { el, setAttrs, setText } from './dom';\n\n/** Panel width with and without the presets column. */\nexport const PANEL_WIDTH = 320;\nexport const PANEL_WIDTH_WITH_PRESETS = 492;\nexport const TIME_COLUMNS_WIDTH = 136;\n\n/** The shortcut buttons beside the calendar. Hidden when there are none. */\nexport class PresetList {\n  readonly element: HTMLDivElement;\n  private ids = '';\n\n  constructor(onApply: (id: string) => void) {\n    this.element = el('div', { class: 'ndp-presets', role: 'group', hidden: true });\n    this.element.addEventListener('click', (event) => {\n      const button =\n        event.target instanceof Element\n          ? event.target.closest<HTMLButtonElement>('.ndp-preset')\n          : null;\n      const id = button?.dataset['preset'];\n      if (id !== undefined && button && !button.disabled) {\n        onApply(id);\n      }\n    });\n  }\n\n  render(presets: readonly PresetState[], label: string): void {\n    this.element.hidden = presets.length === 0;\n    setAttrs(this.element, { 'aria-label': label });\n    const ids = presets.map((preset) => preset.id).join('\\n');\n    if (ids !== this.ids) {\n      this.ids = ids;\n      this.element.replaceChildren(\n        ...presets.map((preset) =>\n          el('button', { type: 'button', class: 'ndp-preset', 'data-preset': preset.id }),\n        ),\n      );\n    }\n    presets.forEach((preset, index) => {\n      const button = this.element.children[index];\n      if (button) {\n        setText(button, preset.label);\n        setAttrs(button, {\n          'aria-pressed': preset.isActive ? 'true' : 'false',\n          disabled: preset.isDisabled,\n        });\n      }\n    });\n  }\n}\n"],"mappings":";;;;AAwBA,SAAgB,UAAU,SAAgC;CACxD,MAAM,EAAE,OAAO,UAAU;CACzB,MAAM,SAAS;CACf,MAAM,eAAe,cAAc,QAAQ,QAAQ,OAAO;EACxD,OAAO,QAAQ;EACf,QAAQ,QAAQ;CAClB,CAAC;CACD,MAAM,cAAc,iBAAiB,QAAQ,QAAQ,KAAK;CAC1D,MAAM,eAAe,kBAAkB,OAAO,KAAK;CACnD,MAAM,aAAa,eAAe;EAChC,MAAM;EACN,aAAa,QAAQ,WAAW;CAClC,CAAC;CAED,aAAa;EACX,aAAa;EACb,YAAY;EACZ,aAAa;EACb,WAAW;EACX,MAAM,SAAS;CACjB;AACF;;AAGA,SAAgB,cACd,SACA,OACA,QACM;CACN,QAAQ,SAAS,CAAC,MAAM;CACxB,SAAS,SAAS,EAAE,cAAc,OAAO,OAAO,SAAS,CAAC;CAC1D,KAAK,MAAM,UAAU,QAAQ,iBAAoC,QAAQ,GAAG;EAC1E,MAAM,WAAW,OAAO,QAAQ,gBAAgB,OAAO,OAAO;EAC9D,QAAQ,QAAQ,OAAO,cAAc,SAAS;EAC9C,SAAS,QAAQ,EAAE,gBAAgB,OAAO,aAAa,MAAM,QAAQ,EAAE,CAAC;CAC1E;AACF;;;;ACnDA,IAAa,aAAb,MAAwB;CAItB,YAAY,SAA+B;EAF3C,KAAQ,MAAM;EAGZ,KAAK,UAAU,GAAG,OAAO;GAAE,OAAO;GAAe,MAAM;GAAS,QAAQ;EAAK,CAAC;EAC9E,KAAK,QAAQ,iBAAiB,UAAU,UAAU;GAChD,MAAM,SACJ,MAAM,kBAAkB,UACpB,MAAM,OAAO,QAA2B,aAAa,IACrD;GACN,MAAM,KAAK,QAAQ,QAAQ;GAC3B,IAAI,OAAO,KAAA,KAAa,UAAU,CAAC,OAAO,UACxC,QAAQ,EAAE;EAEd,CAAC;CACH;CAEA,OAAO,SAAiC,OAAqB;EAC3D,KAAK,QAAQ,SAAS,QAAQ,WAAW;EACzC,SAAS,KAAK,SAAS,EAAE,cAAc,MAAM,CAAC;EAC9C,MAAM,MAAM,QAAQ,KAAK,WAAW,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI;EACxD,IAAI,QAAQ,KAAK,KAAK;GACpB,KAAK,MAAM;GACX,KAAK,QAAQ,gBACX,GAAG,QAAQ,KAAK,WACd,GAAG,UAAU;IAAE,MAAM;IAAU,OAAO;IAAc,eAAe,OAAO;GAAG,CAAC,CAChF,CACF;EACF;EACA,QAAQ,SAAS,QAAQ,UAAU;GACjC,MAAM,SAAS,KAAK,QAAQ,SAAS;GACrC,IAAI,QAAQ;IACV,QAAQ,QAAQ,OAAO,KAAK;IAC5B,SAAS,QAAQ;KACf,gBAAgB,OAAO,WAAW,SAAS;KAC3C,UAAU,OAAO;IACnB,CAAC;GACH;EACF,CAAC;CACH;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nepdatejs/vanilla",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Nepali BS/AD date picker and calendar as Web Components and a plain JavaScript API.",
   "keywords": [
     "nepali",
@@ -126,10 +126,10 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@nepdatejs/core": "^0.1.0",
+    "@nepdatejs/core": "^0.1.1",
     "@nepdatejs/calendar": "^0.1.0",
-    "@nepdatejs/datepicker": "^0.1.0",
-    "@nepdatejs/dom": "^0.1.0",
+    "@nepdatejs/datepicker": "^0.1.1",
+    "@nepdatejs/dom": "^0.1.1",
     "@nepdatejs/styles": "^0.1.0"
   },
   "publishConfig": {

package/src/datetime-view.ts

@@ -1,4 +1,4 @@
-import { getLocale, type CalendarSystem } from '@nepdatejs/core';
+import { getLocale } from '@nepdatejs/core';
 import {
   createDateTimePicker,
   type DateTimePickerOptions,
@@ -6,15 +6,9 @@ import {
   type DateTimePickerStore,
   type TimeCell,
 } from '@nepdatejs/datepicker';
-import {
-  onBackdropPointer,
-  onEscape,
-  onOutsidePointer,
-  restoreFocus,
-  trackPosition,
-  type PanelLayout,
-} from '@nepdatejs/dom';
+import type { PanelLayout } from '@nepdatejs/dom';
 import { CalendarView } from './calendar-view';
+import { openPanel, renderSegment } from './panel';
 import { el, icon, setAttrs, setPopupMode, setText, uid } from './dom';
 import type { Theme } from './picker-view';
 import {
@@ -297,15 +291,7 @@ export class DateTimePickerView {
     setText(this.hint, hint ?? '');
     setAttrs(this.hint, { 'data-error': state.error !== null });
 
-    this.segment.hidden = !state.canSwitchCalendar;
-    setAttrs(this.segment, { 'aria-label': locale.labels.calendar });
-    for (const button of this.segment.querySelectorAll<HTMLButtonElement>('button')) {
-      const calendar = button.dataset['calendar'] as CalendarSystem;
-      setText(button, locale.calendarNames[calendar]);
-      setAttrs(button, {
-        'aria-pressed': calendar === state.calendar ? 'true' : 'false',
-      });
-    }
+    renderSegment(this.segment, state, locale);
     setText(this.nowButton, locale.labels.now);
     setText(this.doneButton, locale.labels.done);
     setAttrs(this.time, { 'aria-label': locale.labels.time });
@@ -343,28 +329,17 @@ export class DateTimePickerView {
     this.wasOpen = open;
     this.options.onOpenChange?.(open);
     if (open) {
-      this.panel.hidden = false;
-      const stopTracking = trackPosition(this.row, this.panel, {
+      this.closePanel = openPanel({
+        panel: this.panel,
+        anchor: this.row,
+        inside: [this.field],
         width: this.panelWidth(),
         layout: this.options.panelLayout,
+        close: () => {
+          this.store.actions.close();
+        },
+        returnFocus: this.dateInput,
       });
-      const stopOutside = onOutsidePointer([this.field], () => {
-        this.store.actions.close();
-      });
-      const stopBackdrop = onBackdropPointer(this.panel, () => {
-        this.store.actions.close();
-      });
-      const stopEscape = onEscape(() => {
-        this.store.actions.close();
-        restoreFocus(this.dateInput);
-      });
-      this.closePanel = () => {
-        stopTracking();
-        stopOutside();
-        stopBackdrop();
-        stopEscape();
-        this.panel.hidden = true;
-      };
       for (const item of this.time.querySelectorAll<HTMLElement>(
         '[aria-pressed="true"]',
       )) {

package/src/multi-view.ts

@@ -5,15 +5,9 @@ import {
   type MultiDatePickerState,
   type MultiDatePickerStore,
 } from '@nepdatejs/datepicker';
-import {
-  onBackdropPointer,
-  onEscape,
-  onOutsidePointer,
-  restoreFocus,
-  trackPosition,
-  type PanelLayout,
-} from '@nepdatejs/dom';
+import { restoreFocus, type PanelLayout } from '@nepdatejs/dom';
 import { CalendarView } from './calendar-view';
+import { openPanel, renderSegment } from './panel';
 import { el, icon, setAttrs, setPopupMode, setText, uid } from './dom';
 import type { Theme } from './picker-view';
 import { PANEL_WIDTH } from './preset-list';
@@ -235,13 +229,7 @@ export class MultiDatePickerView {
     this.hint.hidden = state.error === null;
     setText(this.hint, state.error?.message ?? '');
 
-    this.segment.hidden = !state.canSwitchCalendar;
-    setAttrs(this.segment, { 'aria-label': locale.labels.calendar });
-    for (const button of this.segment.querySelectorAll<HTMLButtonElement>('button')) {
-      const calendar = button.dataset['calendar'] === 'AD' ? 'AD' : 'BS';
-      setText(button, locale.calendarNames[calendar]);
-      setAttrs(button, { 'aria-pressed': String(calendar === state.calendar) });
-    }
+    renderSegment(this.segment, state, locale);
     setText(this.doneButton, locale.labels.done);
     this.doneButton.hidden = state.inline;
 
@@ -270,27 +258,17 @@ export class MultiDatePickerView {
     this.wasOpen = open;
     this.options.onOpenChange?.(open);
     if (open) {
-      this.panel.hidden = false;
-      const stopTracking = trackPosition(this.box, this.panel, {
+      this.closePanel = openPanel({
+        panel: this.panel,
+        anchor: this.box,
+        inside: [this.field, this.panel],
         width: PANEL_WIDTH,
         layout: this.options.panelLayout,
+        close: () => {
+          this.store.actions.close();
+        },
+        returnFocus: this.input,
       });
-      const close = (): void => {
-        this.store.actions.close();
-      };
-      const stopOutside = onOutsidePointer([this.field, this.panel], close);
-      const stopBackdrop = onBackdropPointer(this.panel, close);
-      const stopEscape = onEscape(() => {
-        close();
-        restoreFocus(this.input);
-      });
-      this.closePanel = () => {
-        stopTracking();
-        stopOutside();
-        stopBackdrop();
-        stopEscape();
-        this.panel.hidden = true;
-      };
       this.calendarView.focusGrid();
     } else {
       this.closePanel?.();

package/src/panel.ts

@@ -0,0 +1,61 @@
+import type { CalendarSystem, LocaleData } from '@nepdatejs/core';
+import {
+  onBackdropPointer,
+  onEscape,
+  onOutsidePointer,
+  restoreFocus,
+  trackPosition,
+  type PanelLayout,
+} from '@nepdatejs/dom';
+import { setAttrs, setText } from './dom';
+
+interface OpenPanel {
+  readonly panel: HTMLElement;
+  readonly anchor: Element;
+  /** A pointer down outside these closes the panel. */
+  readonly inside: readonly Element[];
+  readonly width: number;
+  readonly layout: PanelLayout | undefined;
+  readonly close: () => void;
+  /** Gets focus back after Escape. */
+  readonly returnFocus: HTMLElement;
+}
+
+/** Show a panel beside its anchor, and close it the usual ways. Returns the way to undo that. */
+export function openPanel(options: OpenPanel): () => void {
+  const { panel, close } = options;
+  panel.hidden = false;
+  const stopTracking = trackPosition(options.anchor, panel, {
+    width: options.width,
+    layout: options.layout,
+  });
+  const stopOutside = onOutsidePointer(options.inside, close);
+  const stopBackdrop = onBackdropPointer(panel, close);
+  const stopEscape = onEscape(() => {
+    close();
+    restoreFocus(options.returnFocus);
+  });
+
+  return () => {
+    stopTracking();
+    stopOutside();
+    stopBackdrop();
+    stopEscape();
+    panel.hidden = true;
+  };
+}
+
+/** The BS/AD buttons in a panel's footer. */
+export function renderSegment(
+  segment: HTMLElement,
+  state: { readonly canSwitchCalendar: boolean; readonly calendar: CalendarSystem },
+  locale: LocaleData,
+): void {
+  segment.hidden = !state.canSwitchCalendar;
+  setAttrs(segment, { 'aria-label': locale.labels.calendar });
+  for (const button of segment.querySelectorAll<HTMLButtonElement>('button')) {
+    const calendar = button.dataset['calendar'] === 'AD' ? 'AD' : 'BS';
+    setText(button, locale.calendarNames[calendar]);
+    setAttrs(button, { 'aria-pressed': String(calendar === state.calendar) });
+  }
+}

package/src/picker-view.ts

@@ -6,15 +6,9 @@ import {
   type DatePickerState,
   type DatePickerStore,
 } from '@nepdatejs/datepicker';
-import {
-  onBackdropPointer,
-  onEscape,
-  onOutsidePointer,
-  restoreFocus,
-  trackPosition,
-  type PanelLayout,
-} from '@nepdatejs/dom';
+import { restoreFocus, type PanelLayout } from '@nepdatejs/dom';
 import { CalendarView } from './calendar-view';
+import { openPanel, renderSegment } from './panel';
 import { el, icon, setAttrs, setPopupMode, setText, uid } from './dom';
 import { PANEL_WIDTH, PANEL_WIDTH_WITH_PRESETS, PresetList } from './preset-list';
 
@@ -282,15 +276,7 @@ export class DatePickerView {
     setText(this.hint, hintText ?? '');
     setAttrs(this.hint, { 'data-error': state.error !== null });
 
-    this.segment.hidden = !state.canSwitchCalendar;
-    setAttrs(this.segment, { 'aria-label': locale.labels.calendar });
-    for (const button of this.segment.querySelectorAll<HTMLButtonElement>('button')) {
-      const calendar = button.dataset['calendar'] as CalendarSystem;
-      setText(button, locale.calendarNames[calendar]);
-      setAttrs(button, {
-        'aria-pressed': calendar === state.calendar ? 'true' : 'false',
-      });
-    }
+    renderSegment(this.segment, state, locale);
     setText(this.todayButton, locale.labels.today);
     this.presetList.render(state.presets, locale.labels.presets);
 
@@ -321,28 +307,17 @@ export class DatePickerView {
     this.wasOpen = open;
     this.options.onOpenChange?.(open);
     if (open) {
-      this.panel.hidden = false;
-      const stopTracking = trackPosition(this.box, this.panel, {
+      this.closePanel = openPanel({
+        panel: this.panel,
+        anchor: this.box,
+        inside: [this.field, this.panel],
         width: this.panelWidth(),
         layout: this.options.panelLayout,
+        close: () => {
+          this.store.actions.close();
+        },
+        returnFocus: this.input,
       });
-      const stopOutside = onOutsidePointer([this.field, this.panel], () => {
-        this.store.actions.close();
-      });
-      const stopBackdrop = onBackdropPointer(this.panel, () => {
-        this.store.actions.close();
-      });
-      const stopEscape = onEscape(() => {
-        this.store.actions.close();
-        restoreFocus(this.input);
-      });
-      this.closePanel = () => {
-        stopTracking();
-        stopOutside();
-        stopBackdrop();
-        stopEscape();
-        this.panel.hidden = true;
-      };
       this.calendarView.focusGrid();
     } else {
       this.closePanel?.();

package/src/range-view.ts

@@ -1,4 +1,4 @@
-import { getLocale, type CalendarSystem } from '@nepdatejs/core';
+import { getLocale } from '@nepdatejs/core';
 import {
   createDateRangePicker,
   type DateRangePickerOptions,
@@ -6,15 +6,9 @@ import {
   type DateRangePickerStore,
   type RangeField,
 } from '@nepdatejs/datepicker';
-import {
-  onBackdropPointer,
-  onEscape,
-  onOutsidePointer,
-  restoreFocus,
-  trackPosition,
-  type PanelLayout,
-} from '@nepdatejs/dom';
+import { restoreFocus, type PanelLayout } from '@nepdatejs/dom';
 import { CalendarView } from './calendar-view';
+import { openPanel, renderSegment } from './panel';
 import { el, icon, setAttrs, setPopupMode, setText, uid } from './dom';
 import { PANEL_WIDTH, PANEL_WIDTH_WITH_PRESETS, PresetList } from './preset-list';
 import type { Theme } from './picker-view';
@@ -279,15 +273,7 @@ export class DateRangePickerView {
     this.hint.hidden = hintText === null;
     setText(this.hint, hintText ?? '');
     setAttrs(this.hint, { 'data-error': hintText !== null });
-    this.segment.hidden = !state.canSwitchCalendar;
-    setAttrs(this.segment, { 'aria-label': locale.labels.calendar });
-    for (const button of this.segment.querySelectorAll<HTMLButtonElement>('button')) {
-      const calendar = button.dataset['calendar'] as CalendarSystem;
-      setText(button, locale.calendarNames[calendar]);
-      setAttrs(button, {
-        'aria-pressed': calendar === state.calendar ? 'true' : 'false',
-      });
-    }
+    renderSegment(this.segment, state, locale);
     this.presetList.render(state.presets, locale.labels.presets);
     const fiscal = this.options.fiscalYearView ?? false;
     this.fiscalButton.hidden = !fiscal;
@@ -323,29 +309,18 @@ export class DateRangePickerView {
     this.wasOpen = open;
     this.options.onOpenChange?.(open);
     if (open) {
-      this.panel.hidden = false;
       const anchor = this.field.querySelector('.ndp-range') ?? this.field;
-      const stopTracking = trackPosition(anchor, this.panel, {
+      this.closePanel = openPanel({
+        panel: this.panel,
+        anchor,
+        inside: [this.field],
         width: this.panelWidth(),
         layout: this.options.panelLayout,
+        close: () => {
+          this.store.actions.close();
+        },
+        returnFocus: this.inputs.start,
       });
-      const stopOutside = onOutsidePointer([this.field], () => {
-        this.store.actions.close();
-      });
-      const stopBackdrop = onBackdropPointer(this.panel, () => {
-        this.store.actions.close();
-      });
-      const stopEscape = onEscape(() => {
-        this.store.actions.close();
-        restoreFocus(this.inputs.start);
-      });
-      this.closePanel = () => {
-        stopTracking();
-        stopOutside();
-        stopBackdrop();
-        stopEscape();
-        this.panel.hidden = true;
-      };
       this.calendarView.focusGrid();
     } else {
       this.closePanel?.();