@nepdatejs/vanilla 0.0.0-bootstrap → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Shishir Rai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,125 @@
 # @nepdatejs/vanilla
 
-This placeholder version only reserves the name. Install the latest version.
+The BS/AD date picker and calendar for plain JavaScript, as custom elements and a small imperative API. It works in plain HTML, Vue, Svelte, Solid, Laravel Blade, Django and Rails templates.
+
+## From a CDN
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@nepdatejs/styles/index.css" />
+<script src="https://unpkg.com/@nepdatejs/vanilla/dist/nepdate-picker.global.js"></script>
+
+<form>
+  <label for="dob">Date of birth</label>
+  <nep-date-picker name="dob" input-id="dob" max="2026-12-31" required></nep-date-picker>
+</form>
+```
+
+## With a bundler
+
+```bash
+npm install @nepdatejs/vanilla @nepdatejs/styles
+```
+
+```js
+import '@nepdatejs/styles';
+import '@nepdatejs/vanilla/define'; // registers the elements
+```
+
+### One element per page
+
+Each element has its own entry, so you ship only what you use (the calendar alone is about 3.7 kB of vanilla code instead of 9 kB):
+
+```js
+import { defineDatePicker } from '@nepdatejs/vanilla/date-picker';
+defineDatePicker();
+```
+
+The entries are `/date-picker`, `/calendar`, `/date-range-picker`, `/date-time-picker` and `/multi-date-picker`. Each one exports its element, its view, `define…()` and `create…()`.
+
+## `<nep-date-picker>`
+
+A form-associated element: the form receives the AD `"YYYY-MM-DD"` value under `name`. It supports `required`, `disabled` fieldsets and form reset.
+
+| Attribute                 | Meaning                                            |
+| ------------------------- | -------------------------------------------------- |
+| `value`                   | Starting value (AD)                                |
+| `min`, `max`              | Limits (AD)                                        |
+| `calendar`                | `BS` or `AD`, fixed                                |
+| `default-calendar`        | Calendar shown first                               |
+| `locale`                  | `en`, `ne`                                         |
+| `name`                    | Form field name                                    |
+| `placeholder`             | Input placeholder                                  |
+| `required`, `disabled`    | As on a native input                               |
+| `clearable="false"`       | Hide the clear button                              |
+| `show-equivalent="false"` | Hide the other-calendar line                       |
+| `close-on-select="false"` | Keep the panel open after a pick                   |
+| `theme`                   | `light` \| `dark` \| `auto`                        |
+| `inline`                  | Calendar always shown under the input              |
+| `mask="false"`            | Don't fill in dashes while typing                  |
+| `panel-layout`            | `auto` (sheet below 480px) \| `popover` \| `sheet` |
+| `persist-calendar`        | localStorage key for the BS/AD choice              |
+| `week-starts-on`          | `0`–`6`                                            |
+| `display-format`          | e.g. `long`                                        |
+| `label`                   | The input's `aria-label`                           |
+| `input-id`                | For `<label for>`                                  |
+
+- **Properties:** `value`; `holidays`, `events` and `isDateDisabled` (functions and lists); `open()`, `close()`, `focus()`, `checkValidity()`.
+- **Events:** `change` (detail `{ value, ad, bs }`), `nep-open`, `nep-close`, `nep-calendar-change`.
+
+## `<nep-calendar>` and `<nep-date-range-picker>`
+
+```html
+<nep-calendar value="2026-10-18" range></nep-calendar>
+<nep-date-range-picker name="leave" min-days="1" max-days="15"></nep-date-range-picker>
+```
+
+- **`nep-calendar`:** fires `nep-select` with `{ date, value }`, or `{ range: { start, end } }` when it has the `range` attribute.
+- **`nep-date-range-picker`:** add `fiscal-years` for a "Fiscal year" button that picks a whole fiscal year. It submits `leave-start` and `leave-end` (or set `start-name` / `end-name`), and fires `change` with `{ value: { start, end } }`.
+
+## `<nep-date-time-picker>`
+
+```html
+<nep-date-time-picker
+  name="starts-at"
+  minute-step="15"
+  default-time="09:00"
+  hour12
+></nep-date-time-picker>
+```
+
+Submits one instant, e.g. `2026-10-18T14:30:00+05:45`.
+
+- **Attributes:** `time-zone`, `time-label`, `presets`, plus the date attributes above.
+- **Events:** `change` with `{ value, ad, bs, time }`.
+
+## `<nep-multi-date-picker>`
+
+```html
+<nep-multi-date-picker
+  name="days-off"
+  max-dates="5"
+  value="2026-10-18,2026-10-20"
+></nep-multi-date-picker>
+```
+
+Click days to add or remove them, or type them separated by commas. The form gets one `days-off` entry per day, each an AD `"YYYY-MM-DD"`, and `element.value` is the sorted list.
+
+- **Attributes:** `max-dates`, `close-on-select`, plus the date attributes above (`min`, `max`, `calendar`, `locale`, `required`, `disabled`, `inline`, `panel-layout`, `mask`, `label`, …).
+- **Events:** `change` with `{ value: string[], dates: { ad, bs }[] }`.
+
+## Without custom elements
+
+```js
+import { createDatePicker } from '@nepdatejs/vanilla';
+
+// Takes over an existing <input name="dob" value="2026-10-10">, keeping it in step:
+const picker = createDatePicker(document.querySelector('input[name="dob"]'), {
+  min: '2026-01-01',
+});
+picker.getValue(); // "2026-10-10"
+picker.destroy(); // puts the original input back
+```
+
+`createCalendar(container, options)` and `createDateRangePicker(container, options)` work the same way.
+
+MIT © Shishir Rai

package/dist/auto-define.cjs

@@ -0,0 +1,11 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_registry = require("./registry-3qzdVB7H.cjs");
+const require_define = require("./define-DTTdLfIM.cjs");
+//#region src/auto-define.ts
+/** `import '@nepdatejs/vanilla/define'` registers every element (<nep-date-picker>, <nep-calendar>, …). */
+require_define.defineElements();
+//#endregion
+exports.ELEMENT_NAMES = require_registry.ELEMENT_NAMES;
+exports.defineElements = require_define.defineElements;
+
+//# sourceMappingURL=auto-define.cjs.map

package/dist/auto-define.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-define.cjs","names":["defineElements"],"sources":["../src/auto-define.ts"],"sourcesContent":["/** `import '@nepdatejs/vanilla/define'` registers every element (<nep-date-picker>, <nep-calendar>, …). */\nimport { defineElements } from './define';\n\ndefineElements();\n\nexport { defineElements, ELEMENT_NAMES } from './define';\n"],"mappings":";;;;;AAGAA,eAAAA,eAAe"}

package/dist/auto-define.d.cts

@@ -0,0 +1,2 @@
+import { n as ELEMENT_NAMES, t as defineElements } from "./define-B8NUA3yj.cjs";
+export { ELEMENT_NAMES, defineElements };

package/dist/auto-define.d.ts

@@ -0,0 +1,2 @@
+import { n as ELEMENT_NAMES, t as defineElements } from "./define-B8NUA3yj.js";
+export { ELEMENT_NAMES, defineElements };

package/dist/auto-define.js

@@ -0,0 +1,9 @@
+import { t as ELEMENT_NAMES } from "./registry-BvkGnkvV.js";
+import { t as defineElements } from "./define-7natoEH4.js";
+//#region src/auto-define.ts
+/** `import '@nepdatejs/vanilla/define'` registers every element (<nep-date-picker>, <nep-calendar>, …). */
+defineElements();
+//#endregion
+export { ELEMENT_NAMES, defineElements };
+
+//# sourceMappingURL=auto-define.js.map

package/dist/auto-define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-define.js","names":[],"sources":["../src/auto-define.ts"],"sourcesContent":["/** `import '@nepdatejs/vanilla/define'` registers every element (<nep-date-picker>, <nep-calendar>, …). */\nimport { defineElements } from './define';\n\ndefineElements();\n\nexport { defineElements, ELEMENT_NAMES } from './define';\n"],"mappings":";;;;AAGA,eAAe"}

package/dist/calendar-BAcO-jYq.js

@@ -0,0 +1,142 @@
+import { a as calendarAttr, c as onUnlessFalse, d as str, h as CalendarView, i as bool, m as weekday, n as defineElement, p as theme, r as Base, s as isoOf, t as ELEMENT_NAMES } from "./registry-BvkGnkvV.js";
+import { fromIsoDate } from "@nepdatejs/core";
+import { createCalendar, isDayList } from "@nepdatejs/calendar";
+//#region src/calendar-element.ts
+/**
+* <nep-calendar value="2026-10-18"></nep-calendar>
+*
+* A standalone month view. Fires `nep-select` with { date, value } (single) or
+* { range: { start, end } } (with the `range` attribute).
+*/
+var NepCalendarElement = class extends Base {
+	constructor(..._args) {
+		super(..._args);
+		this.store = null;
+		this.view = null;
+		this.rich = {};
+	}
+	get holidays() {
+		return this.rich.holidays;
+	}
+	set holidays(next) {
+		this.rich = {
+			...this.rich,
+			holidays: next
+		};
+		this.store?.setOptions({ holidays: next });
+	}
+	get events() {
+		return this.rich.events;
+	}
+	set events(next) {
+		this.rich = {
+			...this.rich,
+			events: next
+		};
+		this.store?.setOptions({ events: next });
+	}
+	get isDateDisabled() {
+		return this.rich.isDateDisabled;
+	}
+	set isDateDisabled(next) {
+		this.rich = {
+			...this.rich,
+			isDateDisabled: next
+		};
+		this.store?.setOptions({ isDateDisabled: next });
+	}
+	connectedCallback() {
+		if (this.store) return;
+		const store = createCalendar({
+			...this.readOptions(),
+			onSelect: (selection) => {
+				const detail = isDayList(selection) ? {
+					dates: selection,
+					values: selection.map(isoOf)
+				} : "calendar" in selection ? {
+					date: selection,
+					value: isoOf(selection)
+				} : { range: {
+					start: isoOf(selection.start),
+					end: isoOf(selection.end)
+				} };
+				this.dispatchEvent(new CustomEvent("nep-select", {
+					bubbles: true,
+					detail
+				}));
+			}
+		});
+		this.store = store;
+		this.view = new CalendarView(this, store, { locale: () => str(this, "locale") });
+		this.applyTheme();
+	}
+	disconnectedCallback() {
+		this.view?.destroy();
+		this.view = null;
+		this.store = null;
+	}
+	attributeChangedCallback() {
+		this.store?.setOptions(this.readOptions());
+		this.applyTheme();
+	}
+	applyTheme() {
+		const value = theme(this);
+		if (this.view) {
+			if (value) this.view.element.dataset["ndpTheme"] = value;
+			else delete this.view.element.dataset["ndpTheme"];
+		}
+	}
+	readOptions() {
+		return {
+			...this.rich,
+			selected: fromIsoDate(this.getAttribute("value")),
+			calendar: calendarAttr(this, "calendar"),
+			locale: str(this, "locale"),
+			min: fromIsoDate(this.getAttribute("min")),
+			max: fromIsoDate(this.getAttribute("max")),
+			weekStartsOn: weekday(this, "week-starts-on"),
+			showOtherCalendar: onUnlessFalse(this, "show-other-calendar"),
+			showOutsideDays: onUnlessFalse(this, "show-outside-days"),
+			selectionMode: bool(this, "range") ? "range" : "single"
+		};
+	}
+};
+NepCalendarElement.observedAttributes = [
+	"value",
+	"calendar",
+	"locale",
+	"min",
+	"max",
+	"week-starts-on",
+	"show-other-calendar",
+	"show-outside-days",
+	"range",
+	"theme"
+];
+//#endregion
+//#region src/calendar.ts
+/** `@nepdatejs/vanilla/calendar`: just the standalone calendar. */
+/** Register <nep-calendar> (skipped if already defined). */
+function defineCalendar(registry) {
+	defineElement(ELEMENT_NAMES.calendar, NepCalendarElement, registry);
+}
+/** Mount a standalone calendar into a container. */
+function createCalendar$1(container, options = {}) {
+	const store = createCalendar(options);
+	const view = new CalendarView(container, store, { locale: () => options.locale });
+	return {
+		store,
+		view,
+		setOptions: (changes) => {
+			store.setOptions(changes);
+		},
+		destroy: () => {
+			view.destroy();
+			store.destroy();
+		}
+	};
+}
+//#endregion
+export { defineCalendar as n, NepCalendarElement as r, createCalendar$1 as t };
+
+//# sourceMappingURL=calendar-BAcO-jYq.js.map

package/dist/calendar-BAcO-jYq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-BAcO-jYq.js","names":["createCalendarStore","createCalendar","createCalendarStore"],"sources":["../src/calendar-element.ts","../src/calendar.ts"],"sourcesContent":["import { fromIsoDate } from '@nepdatejs/core';\nimport {\n  createCalendar as createCalendarStore,\n  isDayList,\n  type CalendarOptions,\n  type CalendarStore,\n  type DateRange,\n} from '@nepdatejs/calendar';\nimport { CalendarView } from './calendar-view';\nimport {\n  Base,\n  str,\n  bool,\n  onUnlessFalse,\n  calendarAttr,\n  weekday,\n  theme,\n  isoOf,\n  type RichProps,\n} from './element-utils';\n\n/**\n * <nep-calendar value=\"2026-10-18\"></nep-calendar>\n *\n * A standalone month view. Fires `nep-select` with { date, value } (single) or\n * { range: { start, end } } (with the `range` attribute).\n */\nexport class NepCalendarElement extends Base {\n  static readonly observedAttributes: readonly string[] = [\n    'value',\n    'calendar',\n    'locale',\n    'min',\n    'max',\n    'week-starts-on',\n    'show-other-calendar',\n    'show-outside-days',\n    'range',\n    'theme',\n  ];\n\n  store: CalendarStore | null = null;\n  private view: CalendarView | null = null;\n  private rich: RichProps = {};\n\n  get holidays(): RichProps['holidays'] {\n    return this.rich.holidays;\n  }\n  set holidays(next: RichProps['holidays']) {\n    this.rich = { ...this.rich, holidays: next };\n    this.store?.setOptions({ holidays: next });\n  }\n  get events(): RichProps['events'] {\n    return this.rich.events;\n  }\n  set events(next: RichProps['events']) {\n    this.rich = { ...this.rich, events: next };\n    this.store?.setOptions({ events: next });\n  }\n  get isDateDisabled(): RichProps['isDateDisabled'] {\n    return this.rich.isDateDisabled;\n  }\n  set isDateDisabled(next: RichProps['isDateDisabled']) {\n    this.rich = { ...this.rich, isDateDisabled: next };\n    this.store?.setOptions({ isDateDisabled: next });\n  }\n\n  connectedCallback(): void {\n    if (this.store) {\n      return;\n    }\n    const store = createCalendarStore({\n      ...this.readOptions(),\n      onSelect: (selection) => {\n        const detail = isDayList(selection)\n          ? { dates: selection, values: selection.map(isoOf) }\n          : 'calendar' in selection\n            ? { date: selection, value: isoOf(selection) }\n            : {\n                range: {\n                  start: isoOf(selection.start),\n                  end: isoOf(selection.end),\n                } satisfies Record<keyof DateRange, string>,\n              };\n        this.dispatchEvent(new CustomEvent('nep-select', { bubbles: true, detail }));\n      },\n    });\n    this.store = store;\n    this.view = new CalendarView(this, store, { locale: () => str(this, 'locale') });\n    this.applyTheme();\n  }\n\n  disconnectedCallback(): void {\n    this.view?.destroy();\n    this.view = null;\n    this.store = null;\n  }\n\n  attributeChangedCallback(): void {\n    this.store?.setOptions(this.readOptions());\n    this.applyTheme();\n  }\n\n  private applyTheme(): void {\n    const value = theme(this);\n    if (this.view) {\n      if (value) {\n        this.view.element.dataset['ndpTheme'] = value;\n      } else {\n        delete this.view.element.dataset['ndpTheme'];\n      }\n    }\n  }\n\n  private readOptions(): CalendarOptions {\n    return {\n      ...this.rich,\n      selected: fromIsoDate(this.getAttribute('value')),\n      calendar: calendarAttr(this, 'calendar'),\n      locale: str(this, 'locale'),\n      min: fromIsoDate(this.getAttribute('min')),\n      max: fromIsoDate(this.getAttribute('max')),\n      weekStartsOn: weekday(this, 'week-starts-on'),\n      showOtherCalendar: onUnlessFalse(this, 'show-other-calendar'),\n      showOutsideDays: onUnlessFalse(this, 'show-outside-days'),\n      selectionMode: bool(this, 'range') ? 'range' : 'single',\n    };\n  }\n}\n","/** `@nepdatejs/vanilla/calendar`: just the standalone calendar. */\nimport {\n  createCalendar as createCalendarStore,\n  type CalendarOptions,\n  type CalendarStore,\n} from '@nepdatejs/calendar';\nimport { NepCalendarElement } from './calendar-element';\nimport { CalendarView } from './calendar-view';\nimport { defineElement, ELEMENT_NAMES } from './registry';\n\nexport { NepCalendarElement };\nexport { CalendarView, type CalendarViewOptions } from './calendar-view';\n\n/** Register <nep-calendar> (skipped if already defined). */\nexport function defineCalendar(registry?: CustomElementRegistry): void {\n  defineElement(ELEMENT_NAMES.calendar, NepCalendarElement, registry);\n}\n\nexport interface CalendarHandle {\n  readonly store: CalendarStore;\n  readonly view: CalendarView;\n  setOptions(changes: Partial<CalendarOptions>): void;\n  destroy(): void;\n}\n\n/** Mount a standalone calendar into a container. */\nexport function createCalendar(\n  container: HTMLElement,\n  options: CalendarOptions = {},\n): CalendarHandle {\n  const store = createCalendarStore(options);\n  const view = new CalendarView(container, store, { locale: () => options.locale });\n\n  return {\n    store,\n    view,\n    setOptions: (changes) => {\n      store.setOptions(changes);\n    },\n    destroy: () => {\n      view.destroy();\n      store.destroy();\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/calendar-BNdN8qJv.d.ts

@@ -0,0 +1,87 @@
+import { n as RichProps, t as Base } from "./element-utils-C-r5gPlk.js";
+import { CalendarDate, LocaleCode } from "@nepdatejs/core";
+import { CalendarOptions, CalendarStore } from "@nepdatejs/calendar";
+//#region src/calendar-element.d.ts
+/**
+ * <nep-calendar value="2026-10-18"></nep-calendar>
+ *
+ * A standalone month view. Fires `nep-select` with { date, value } (single) or
+ * { range: { start, end } } (with the `range` attribute).
+ */
+declare class NepCalendarElement extends Base {
+  static readonly observedAttributes: readonly string[];
+  store: CalendarStore | null;
+  private view;
+  private rich;
+  get holidays(): RichProps["holidays"];
+  set holidays(next: RichProps["holidays"]);
+  get events(): RichProps["events"];
+  set events(next: RichProps["events"]);
+  get isDateDisabled(): RichProps["isDateDisabled"];
+  set isDateDisabled(next: RichProps["isDateDisabled"]);
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  attributeChangedCallback(): void;
+  private applyTheme;
+  private readOptions;
+}
+//#endregion
+//#region src/calendar-view.d.ts
+interface CalendarViewOptions {
+  /** The locale for labels; read on every render so a change applies at once. */
+  readonly locale?: (() => LocaleCode | undefined) | undefined;
+  /** Called for a day click or Enter/Space; defaults to store.actions.select. */
+  readonly onDayActivate?: ((date: CalendarDate) => void) | undefined;
+}
+/**
+ * Renders a calendar store into `root` with the @nepdatejs/styles markup and
+ * keeps it in step. Elements are updated in place, so a click or focus never
+ * lands on a replaced button; only switching view or row count rebuilds the body.
+ */
+declare class CalendarView {
+  readonly element: HTMLDivElement;
+  private readonly store;
+  private readonly options;
+  private readonly prev;
+  private readonly next;
+  private readonly title;
+  private readonly body;
+  private bodyKey;
+  private cells;
+  private tiles;
+  private focusAfterRender;
+  private readonly unsubscribe;
+  constructor(root: HTMLElement, store: CalendarStore, options?: CalendarViewOptions);
+  /** Move keyboard focus to the day that should have it. */
+  focusGrid(): void;
+  destroy(): void;
+  render(): void;
+  /** Focus the grid if a keyboard move or view change asked for it. */
+  private flushFocus;
+  private renderTitle;
+  private buildGrid;
+  private patchGrid;
+  private buildOptions;
+  private patchOptions;
+  private cellOf;
+  private readonly onClick;
+  private readonly onKeyDown;
+  private readonly onMouseOver;
+  private readonly onMouseLeave;
+  private readonly onFocusIn;
+}
+//#endregion
+//#region src/calendar.d.ts
+/** Register <nep-calendar> (skipped if already defined). */
+declare function defineCalendar(registry?: CustomElementRegistry): void;
+interface CalendarHandle {
+  readonly store: CalendarStore;
+  readonly view: CalendarView;
+  setOptions(changes: Partial<CalendarOptions>): void;
+  destroy(): void;
+}
+/** Mount a standalone calendar into a container. */
+declare function createCalendar$1(container: HTMLElement, options?: CalendarOptions): CalendarHandle;
+//#endregion
+export { CalendarViewOptions as a, CalendarView as i, createCalendar$1 as n, NepCalendarElement as o, defineCalendar as r, CalendarHandle as t };
+//# sourceMappingURL=calendar-BNdN8qJv.d.ts.map

package/dist/calendar-C1LZI7XN.cjs

@@ -0,0 +1,159 @@
+const require_registry = require("./registry-3qzdVB7H.cjs");
+let _nepdatejs_core = require("@nepdatejs/core");
+let _nepdatejs_calendar = require("@nepdatejs/calendar");
+//#region src/calendar-element.ts
+/**
+* <nep-calendar value="2026-10-18"></nep-calendar>
+*
+* A standalone month view. Fires `nep-select` with { date, value } (single) or
+* { range: { start, end } } (with the `range` attribute).
+*/
+var NepCalendarElement = class extends require_registry.Base {
+	constructor(..._args) {
+		super(..._args);
+		this.store = null;
+		this.view = null;
+		this.rich = {};
+	}
+	get holidays() {
+		return this.rich.holidays;
+	}
+	set holidays(next) {
+		this.rich = {
+			...this.rich,
+			holidays: next
+		};
+		this.store?.setOptions({ holidays: next });
+	}
+	get events() {
+		return this.rich.events;
+	}
+	set events(next) {
+		this.rich = {
+			...this.rich,
+			events: next
+		};
+		this.store?.setOptions({ events: next });
+	}
+	get isDateDisabled() {
+		return this.rich.isDateDisabled;
+	}
+	set isDateDisabled(next) {
+		this.rich = {
+			...this.rich,
+			isDateDisabled: next
+		};
+		this.store?.setOptions({ isDateDisabled: next });
+	}
+	connectedCallback() {
+		if (this.store) return;
+		const store = (0, _nepdatejs_calendar.createCalendar)({
+			...this.readOptions(),
+			onSelect: (selection) => {
+				const detail = (0, _nepdatejs_calendar.isDayList)(selection) ? {
+					dates: selection,
+					values: selection.map(require_registry.isoOf)
+				} : "calendar" in selection ? {
+					date: selection,
+					value: require_registry.isoOf(selection)
+				} : { range: {
+					start: require_registry.isoOf(selection.start),
+					end: require_registry.isoOf(selection.end)
+				} };
+				this.dispatchEvent(new CustomEvent("nep-select", {
+					bubbles: true,
+					detail
+				}));
+			}
+		});
+		this.store = store;
+		this.view = new require_registry.CalendarView(this, store, { locale: () => require_registry.str(this, "locale") });
+		this.applyTheme();
+	}
+	disconnectedCallback() {
+		this.view?.destroy();
+		this.view = null;
+		this.store = null;
+	}
+	attributeChangedCallback() {
+		this.store?.setOptions(this.readOptions());
+		this.applyTheme();
+	}
+	applyTheme() {
+		const value = require_registry.theme(this);
+		if (this.view) {
+			if (value) this.view.element.dataset["ndpTheme"] = value;
+			else delete this.view.element.dataset["ndpTheme"];
+		}
+	}
+	readOptions() {
+		return {
+			...this.rich,
+			selected: (0, _nepdatejs_core.fromIsoDate)(this.getAttribute("value")),
+			calendar: require_registry.calendarAttr(this, "calendar"),
+			locale: require_registry.str(this, "locale"),
+			min: (0, _nepdatejs_core.fromIsoDate)(this.getAttribute("min")),
+			max: (0, _nepdatejs_core.fromIsoDate)(this.getAttribute("max")),
+			weekStartsOn: require_registry.weekday(this, "week-starts-on"),
+			showOtherCalendar: require_registry.onUnlessFalse(this, "show-other-calendar"),
+			showOutsideDays: require_registry.onUnlessFalse(this, "show-outside-days"),
+			selectionMode: require_registry.bool(this, "range") ? "range" : "single"
+		};
+	}
+};
+NepCalendarElement.observedAttributes = [
+	"value",
+	"calendar",
+	"locale",
+	"min",
+	"max",
+	"week-starts-on",
+	"show-other-calendar",
+	"show-outside-days",
+	"range",
+	"theme"
+];
+//#endregion
+//#region src/calendar.ts
+/** `@nepdatejs/vanilla/calendar`: just the standalone calendar. */
+/** Register <nep-calendar> (skipped if already defined). */
+function defineCalendar(registry) {
+	require_registry.defineElement(require_registry.ELEMENT_NAMES.calendar, NepCalendarElement, registry);
+}
+/** Mount a standalone calendar into a container. */
+function createCalendar(container, options = {}) {
+	const store = (0, _nepdatejs_calendar.createCalendar)(options);
+	const view = new require_registry.CalendarView(container, store, { locale: () => options.locale });
+	return {
+		store,
+		view,
+		setOptions: (changes) => {
+			store.setOptions(changes);
+		},
+		destroy: () => {
+			view.destroy();
+			store.destroy();
+		}
+	};
+}
+//#endregion
+Object.defineProperty(exports, "NepCalendarElement", {
+	enumerable: true,
+	get: function() {
+		return NepCalendarElement;
+	}
+});
+Object.defineProperty(exports, "createCalendar", {
+	enumerable: true,
+	get: function() {
+		return createCalendar;
+	}
+});
+Object.defineProperty(exports, "defineCalendar", {
+	enumerable: true,
+	get: function() {
+		return defineCalendar;
+	}
+});
+
+//# sourceMappingURL=calendar-C1LZI7XN.cjs.map

package/dist/calendar-C1LZI7XN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-C1LZI7XN.cjs","names":["Base","createCalendarStore","isDayList","isoOf","CalendarView","str","theme","fromIsoDate","calendarAttr","weekday","onUnlessFalse","bool","ELEMENT_NAMES","createCalendarStore","CalendarView"],"sources":["../src/calendar-element.ts","../src/calendar.ts"],"sourcesContent":["import { fromIsoDate } from '@nepdatejs/core';\nimport {\n  createCalendar as createCalendarStore,\n  isDayList,\n  type CalendarOptions,\n  type CalendarStore,\n  type DateRange,\n} from '@nepdatejs/calendar';\nimport { CalendarView } from './calendar-view';\nimport {\n  Base,\n  str,\n  bool,\n  onUnlessFalse,\n  calendarAttr,\n  weekday,\n  theme,\n  isoOf,\n  type RichProps,\n} from './element-utils';\n\n/**\n * <nep-calendar value=\"2026-10-18\"></nep-calendar>\n *\n * A standalone month view. Fires `nep-select` with { date, value } (single) or\n * { range: { start, end } } (with the `range` attribute).\n */\nexport class NepCalendarElement extends Base {\n  static readonly observedAttributes: readonly string[] = [\n    'value',\n    'calendar',\n    'locale',\n    'min',\n    'max',\n    'week-starts-on',\n    'show-other-calendar',\n    'show-outside-days',\n    'range',\n    'theme',\n  ];\n\n  store: CalendarStore | null = null;\n  private view: CalendarView | null = null;\n  private rich: RichProps = {};\n\n  get holidays(): RichProps['holidays'] {\n    return this.rich.holidays;\n  }\n  set holidays(next: RichProps['holidays']) {\n    this.rich = { ...this.rich, holidays: next };\n    this.store?.setOptions({ holidays: next });\n  }\n  get events(): RichProps['events'] {\n    return this.rich.events;\n  }\n  set events(next: RichProps['events']) {\n    this.rich = { ...this.rich, events: next };\n    this.store?.setOptions({ events: next });\n  }\n  get isDateDisabled(): RichProps['isDateDisabled'] {\n    return this.rich.isDateDisabled;\n  }\n  set isDateDisabled(next: RichProps['isDateDisabled']) {\n    this.rich = { ...this.rich, isDateDisabled: next };\n    this.store?.setOptions({ isDateDisabled: next });\n  }\n\n  connectedCallback(): void {\n    if (this.store) {\n      return;\n    }\n    const store = createCalendarStore({\n      ...this.readOptions(),\n      onSelect: (selection) => {\n        const detail = isDayList(selection)\n          ? { dates: selection, values: selection.map(isoOf) }\n          : 'calendar' in selection\n            ? { date: selection, value: isoOf(selection) }\n            : {\n                range: {\n                  start: isoOf(selection.start),\n                  end: isoOf(selection.end),\n                } satisfies Record<keyof DateRange, string>,\n              };\n        this.dispatchEvent(new CustomEvent('nep-select', { bubbles: true, detail }));\n      },\n    });\n    this.store = store;\n    this.view = new CalendarView(this, store, { locale: () => str(this, 'locale') });\n    this.applyTheme();\n  }\n\n  disconnectedCallback(): void {\n    this.view?.destroy();\n    this.view = null;\n    this.store = null;\n  }\n\n  attributeChangedCallback(): void {\n    this.store?.setOptions(this.readOptions());\n    this.applyTheme();\n  }\n\n  private applyTheme(): void {\n    const value = theme(this);\n    if (this.view) {\n      if (value) {\n        this.view.element.dataset['ndpTheme'] = value;\n      } else {\n        delete this.view.element.dataset['ndpTheme'];\n      }\n    }\n  }\n\n  private readOptions(): CalendarOptions {\n    return {\n      ...this.rich,\n      selected: fromIsoDate(this.getAttribute('value')),\n      calendar: calendarAttr(this, 'calendar'),\n      locale: str(this, 'locale'),\n      min: fromIsoDate(this.getAttribute('min')),\n      max: fromIsoDate(this.getAttribute('max')),\n      weekStartsOn: weekday(this, 'week-starts-on'),\n      showOtherCalendar: onUnlessFalse(this, 'show-other-calendar'),\n      showOutsideDays: onUnlessFalse(this, 'show-outside-days'),\n      selectionMode: bool(this, 'range') ? 'range' : 'single',\n    };\n  }\n}\n","/** `@nepdatejs/vanilla/calendar`: just the standalone calendar. */\nimport {\n  createCalendar as createCalendarStore,\n  type CalendarOptions,\n  type CalendarStore,\n} from '@nepdatejs/calendar';\nimport { NepCalendarElement } from './calendar-element';\nimport { CalendarView } from './calendar-view';\nimport { defineElement, ELEMENT_NAMES } from './registry';\n\nexport { NepCalendarElement };\nexport { CalendarView, type CalendarViewOptions } from './calendar-view';\n\n/** Register <nep-calendar> (skipped if already defined). */\nexport function defineCalendar(registry?: CustomElementRegistry): void {\n  defineElement(ELEMENT_NAMES.calendar, NepCalendarElement, registry);\n}\n\nexport interface CalendarHandle {\n  readonly store: CalendarStore;\n  readonly view: CalendarView;\n  setOptions(changes: Partial<CalendarOptions>): void;\n  destroy(): void;\n}\n\n/** Mount a standalone calendar into a container. */\nexport function createCalendar(\n  container: HTMLElement,\n  options: CalendarOptions = {},\n): CalendarHandle {\n  const store = createCalendarStore(options);\n  const view = new CalendarView(container, store, { locale: () => options.locale });\n\n  return {\n    store,\n    view,\n    setOptions: (changes) => {\n      store.setOptions(changes);\n    },\n    destroy: () => {\n      view.destroy();\n      store.destroy();\n    },\n  };\n}\n"],"mappings":"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"}