ten-protons-datepicker 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ten Protons
+
+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,306 @@
-# Temporary Holding Version
+# Ten Protons Datepicker
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Zero-dependency, accessible, framework-agnostic datepicker. Vanilla TypeScript + a native Web Component.
+
+- WAI-ARIA date picker dialog pattern, full keyboard support, live-region announcements
+- Single, range and multiple selection, and an optional time selector, as separate, tree-shakeable modules
+- `valueInUtc`: your backend speaks UTC, the picker shows local time, and the conversion happens inside the picker
+- `Intl`-based localisation, RTL, locale-derived input format, first day of week
+- Manual input that is parsed on blur / Enter and validated against min / max / disabled dates
+- CSS variables, light / dark (`prefers-color-scheme` or `data-theme`), replaceable class names
+- ESM only, strict TypeScript types, no runtime dependencies
+
+```sh
+npm i ten-protons-datepicker
+```
+
+## Web Component
+
+```html
+<script type="module">
+  import 'ten-protons-datepicker/wc';
+  import 'ten-protons-datepicker/locales/uk'; // optional UI strings for locale="uk"
+</script>
+
+<x-datepicker name="period" mode="range" locale="uk" min="2025-01-01" label="Period"></x-datepicker>
+```
+
+`mode="range"` / `mode="multiple"` and `enable-time` load their module on demand, so single-date pages don't pay for them.
+
+| Attribute | Notes |
+| --- | --- |
+| `value` | ISO: `2025-03-05`, range `2025-03-01/2025-03-10`, multiple `2025-03-01,2025-03-05`. Unix timestamps work too; with `output-timestamp` the property returns them. See [Unix timestamps](#unix-timestamps) |
+| `name`, `placeholder`, `label`, `disabled` | `label` is the input's accessible name. Form-associated where `ElementInternals` exists |
+| `mode`, `locale`, `min`, `max`, `date-format`, `first-day`, `position`, `theme` | see [Options](#options) |
+| `number-of-months`, `show-other-months`, `allow-input`, `close-on-select`, `disabled-days`, `output-timestamp`, `enable-time`, `value-in-utc`, `inline` | booleans: present = true, `="false"` = false |
+
+```js
+const el = document.querySelector('x-datepicker');
+el.value;                       // ISO string of the current selection
+el.options = { disabledDates: (d) => d.getDay() === 0, onChange: console.log };
+el.addEventListener('change', (e) => console.log(e.detail)); // also: open, close, monthChange, yearChange
+await el.ready;                 // resolves with the underlying Datepicker
+```
+
+Style with `::part(input)`, `::part(toggle)` and the `--tp-*` variables.
+
+## Imperative API
+
+```ts
+import { Datepicker } from 'ten-protons-datepicker';
+import { withRange } from 'ten-protons-datepicker/range';
+import 'ten-protons-datepicker/core.css';
+import 'ten-protons-datepicker/themes.css';
+
+const dp = withRange(new Datepicker(input, { locale: 'en-GB', minDate: new Date() }));
+
+dp.addEventListener('change', (e) => console.log(e.detail)); // or onChange option
+dp.setRange(start, end);
+dp.getDate();    // Date | Date[] | null   (numbers with outputTimestamp)
+dp.destroy();
+```
+
+Methods: `open() close() toggle() destroy() getDate() setDate(date, triggerChange?) setOptions(partial) jumpToDate(date) setRange(start, end)`.
+
+`withMultiple` lives in `ten-protons-datepicker/multiple` and `withTime` in `ten-protons-datepicker/time`. Without the helpers, import the module for its side effect and pass `mode: 'range'` / `enableTime: true`. Selecting a mode or `enableTime` without importing its module throws a descriptive error.
+
+With `inline: true` the calendar renders inside the given element (any element, not just an input).
+
+### Options
+
+| Option | Default | |
+| --- | --- | --- |
+| `mode` | `'single'` | `'single' \| 'range' \| 'multiple'` |
+| `selected`, `defaultDate` | | initial value / month shown when empty |
+| `minDate`, `maxDate` | | `Date`, ISO `yyyy-MM-dd`, or a Unix timestamp in seconds (`DateInput`; also accepted by `selected`, `setDate`) |
+| `disabledDates`, `disabledDaysOfWeek` | | `Date[]` or `(date) => boolean`; `0` = Sunday |
+| `locale` | browser | BCP 47 tag or a `LocaleObject` |
+| `firstDayOfWeek` | from locale | `0`–`6` |
+| `dateFormat` | from locale | tokens: `yyyy yy MMMM MMM MM M dd d EEEE EEE`, quote literals: `d 'de' MMMM` |
+| `inline`, `showOtherMonths`, `numberOfMonths` | `false`, `false`, `1` | `numberOfMonths: 1 \| 2` |
+| `position` | `'auto'` | `auto top bottom left right`; auto flips above when there is no room below |
+| `theme` | auto | `'light' \| 'dark'` |
+| `allowInput` | `true` | `false` makes the input read-only |
+| `closeOnSelect` | `true` (single, range), `false` (multiple, and with `enableTime`) | |
+| `closeOnOutsideClick` | `true` | outside pointer-down or focus |
+| `classes` | | replace any default class name (`ClassNames`) |
+| `enableTime` | `false` | add an `HH:mm:ss` time selector below the calendar, see [Date & time](#date--time). Needs `ten-protons-datepicker/time` |
+| `valueInUtc` | `false` | the backend works in UTC: values going in and out are UTC, the picker shows local time, see [UTC backends](#utc-backends-valueinutc) |
+| `outputTimestamp` | `false` | report Unix timestamps (seconds) instead of `Date`s / ISO strings, see [Unix timestamps](#unix-timestamps) |
+| `isoInput` | | input that receives the ISO value (or the timestamp with `outputTimestamp`), e.g. a hidden field |
+| `anchor`, `appendTo` | input, `document.body` | construction only |
+| `onChange onOpen onClose onMonthChange` | | callbacks; the same events fire as `CustomEvent`s |
+
+`setOptions` accepts everything except `inline`, `anchor` and `appendTo`.
+
+## Input handling
+
+Typing is parsed on blur or Enter (ISO is always accepted). Separators are matched leniently (`5/3/2025` parses with `dd.MM.yyyy`). Range text is `start – end`, multiple is comma separated.
+
+- Valid: the selection, calendar and `isoInput` update and `change` fires.
+- Invalid, disabled or too many dates: on Enter the input is marked `aria-invalid` and keeps its text; on blur it reverts to the last valid value.
+- Empty text clears the selection.
+
+`change` also dispatches native bubbling `input` / `change` events on the input, so `v-model`-style bindings work.
+
+## Unix timestamps
+
+**Input is automatic, with no option.** Type or paste a Unix timestamp in seconds (9–11 digits, e.g. `1794072736`) and the picker converts it: the input shows the date in your `dateFormat` and the calendar jumps to it. Ranges and multiple dates work too (`1741996800 - 1742428800`), and timestamps are also understood in the web component's `value` attribute, in `selected` / `setDate()` / `minDate` / `maxDate` (as a number or a digit string), and in a prefilled input. Anything with fewer digits (like `20250315`) is still treated as a normal date.
+
+**Output is opt-in with `outputTimestamp: true`** (`output-timestamp` on the web component). Everything the picker reports then uses seconds instead of `Date`s / ISO strings:
+
+| | `outputTimestamp: false` (default) | `outputTimestamp: true` |
+| --- | --- | --- |
+| `getDate()`, `onChange`, `change` event `detail` | `Date` / `Date[]` / `null` | `number` / `number[]` / `null` |
+| `isoInput` value, web component `value` and form value | `2025-03-15`, `2025-03-10/2025-03-20` | `1741996800`, `1741996800/1742428800` |
+| text shown in the input | formatted with `dateFormat` | formatted with `dateFormat` (unchanged) |
+
+All four combinations work:
+
+```ts
+const dp = new Datepicker(input, { dateFormat: 'dd.MM.yyyy', outputTimestamp: true, onChange: (ts) => save(ts) });
+
+// timestamp -> timestamp   input "1794072736"   shows 07.11.2026, getDate() = 1794009600
+// formatted -> timestamp   input "07.11.2026"   shows 07.11.2026, getDate() = 1794009600
+// with outputTimestamp: false (default):
+// timestamp -> date        input "1794072736"   shows 07.11.2026, getDate() = Date(2026-11-07)
+// formatted -> date        input "07.11.2026"   shows 07.11.2026, getDate() = Date(2026-11-07)
+```
+
+(Values shown for a browser in UTC; elsewhere the output is that zone's local midnight of 7 November, e.g. `1794002400` in Europe/Kyiv.)
+
+Things to know:
+
+- **Day granularity (without `enableTime`).** A date-only picker selects days, not instants; with [`enableTime`](#date--time) the time of day is kept too. A timestamp is converted to the **local** calendar day it falls on, and the timestamp that comes out is the **local midnight** of that day. So `timestamp -> timestamp` normalises the time of day (`1794072736` comes back as `1794009600`), and it is stable from then on: feeding the output back in gives the same value.
+- **Time zones.** "Local" is the browser's time zone, in line with the rest of the picker. A timestamp for UTC midnight (`1741996800` = 2025-03-15T00:00Z) is still March 14 in New York. If your backend stores UTC-midnight timestamps for plain dates, set [`valueInUtc`](#utc-backends-valueinutc): `1741996800` is then 15 March in every time zone.
+- **Seconds only.** Millisecond timestamps (13 digits) are not recognised.
+- **Types.** `DatepickerValue` is `Date | Date[] | number | number[] | null`; narrow it with `typeof` / `instanceof` or check `outputTimestamp` yourself. With the default nothing changes at runtime.
+
+## Date & time
+
+`enableTime: true` (`enable-time` on the web component) adds a 24-hour **hours : minutes : seconds** selector below the calendar. It is an optional module, so date-only bundles don't pay for it:
+
+```ts
+import { Datepicker } from 'ten-protons-datepicker';
+import { withTime } from 'ten-protons-datepicker/time'; // or: import 'ten-protons-datepicker/time' and pass enableTime: true
+
+const dp = withTime(new Datepicker(input, { dateFormat: 'dd.MM.yyyy', onChange: (d) => save(d) }));
+```
+
+```html
+<x-datepicker enable-time output-timestamp name="meeting"></x-datepicker> <!-- loads the time module itself -->
+```
+
+How it behaves:
+
+- **Picking.** A newly picked day gets the time currently shown in the selector (`00:00:00` until you change it). Editing the selector immediately changes the time of the selected date(s) and fires `change`. Each field is a spinbutton: type digits, `↑` / `↓` (wraps), `Home` / `End`; values are clamped on blur / `Enter`.
+- **The popup stays open** after picking a day so you can set the time (`closeOnSelect` defaults to `false` with `enableTime`). Close it with `Escape`, `Enter` in the input, or a click outside.
+- **Display.** The input shows the date in your `dateFormat` followed by the time as `HH:mm:ss` (24-hour): `15.03.2025 13:07:09`. `dateFormat` only controls the date part. The time format is fixed.
+- **Typing.** `15.03.2025 13:07:09`, `15.03.2025 13:07` (seconds default to 0), ISO `2025-03-15T13:07:09` (or with a space), and Unix timestamps. A date typed **without** a time takes the time currently in the selector. An invalid time (`24:00`, `10:60`) is rejected like any invalid date.
+- **Range and multiple.** One time applies to all selected dates: the selector sets every date at once. Text typed with different times per date (`10.03.2025 09:00:00 - 12.03.2025 18:30:00`) keeps them until you touch the selector.
+- **Limits are day-based.** `minDate`, `maxDate` and the disabled-date options compare calendar days; they don't constrain the time of day.
+- **Screen readers.** The selector is a labelled group (`time` / `hours` / `minutes` / `seconds` strings, overridable in the `locale` object, translated in `locales/uk`), and the selection announcement includes the time.
+- **Switching at runtime.** `setOptions({ enableTime })` adds `00:00:00` to selected dates or drops their time.
+
+### Time and `outputTimestamp`
+
+Timestamps are understood on input whatever the options are (see [Unix timestamps](#unix-timestamps)); `outputTimestamp` and `enableTime` decide what comes out:
+
+| | `outputTimestamp: false` (default) | `outputTimestamp: true` |
+| --- | --- | --- |
+| **`enableTime: false`** (default) | `Date` at local midnight; ISO `2025-03-15` | timestamp of local midnight: `1741996800` |
+| **`enableTime: true`** | `Date` with the selected time; ISO `2025-03-15T13:07:09` | exact timestamp including the time: `1742044029` |
+
+"Out" means `getDate()`, `onChange`, the `change` event `detail`, the `isoInput` value, and the web component's `value` and form value. The text in the input is always the formatted date (plus `HH:mm:ss` with `enableTime`).
+
+All combinations, with and without time, with and without timestamp output (values for a browser in UTC):
+
+```ts
+// 1. date only, Date out (the defaults)
+new Datepicker(input, { dateFormat: 'dd.MM.yyyy' });
+//    typed "15.03.2025"            shows 15.03.2025            getDate() = Date(2025-03-15 00:00:00)
+//    typed "1742044029"            shows 15.03.2025            getDate() = Date(2025-03-15 00:00:00)   the time is dropped
+
+// 2. date only, timestamp out
+new Datepicker(input, { dateFormat: 'dd.MM.yyyy', outputTimestamp: true });
+//    typed "15.03.2025"            shows 15.03.2025            getDate() = 1741996800
+//    typed "1742044029"            shows 15.03.2025            getDate() = 1741996800                  normalised to midnight
+
+// 3. date + time, Date out
+withTime(new Datepicker(input, { dateFormat: 'dd.MM.yyyy' }));
+//    typed "15.03.2025 13:07:09"   shows 15.03.2025 13:07:09   getDate() = Date(2025-03-15 13:07:09)
+//    typed "1742044029"            shows 15.03.2025 13:07:09   getDate() = Date(2025-03-15 13:07:09)
+
+// 4. date + time, timestamp out
+withTime(new Datepicker(input, { dateFormat: 'dd.MM.yyyy', outputTimestamp: true }));
+//    typed "15.03.2025 13:07:09"   shows 15.03.2025 13:07:09   getDate() = 1742044029
+//    typed "1742044029"            shows 15.03.2025 13:07:09   getDate() = 1742044029                  exact round trip
+```
+
+Ranges work the same way: `withTime(withRange(new Datepicker(input, { outputTimestamp: true })))` returns `[1741597200, 1741804200]` for 10 March 09:00:00 to 12 March 18:30:00 (UTC). In the web component, `<x-datepicker enable-time mode="range">` has the value `2025-03-10T09:00:00/2025-03-12T18:30:00`, or `1741597200/1741804200` with `output-timestamp`.
+
+Things to know:
+
+- **Local time.** As everywhere in the picker, the time of day is in the browser's time zone, and the timestamps are the instants of those local times. With [`valueInUtc`](#utc-backends-valueinutc) the values are converted to and from UTC for you. A time that doesn't exist (the hour skipped by a daylight-saving change, e.g. `02:30` on 9 March 2025 in New York) is moved to the next valid time (`03:30`), and the input shows that.
+- **Seconds.** Dates are kept to the second; milliseconds are dropped.
+
+## UTC backends (`valueInUtc`)
+
+Many backends only speak UTC, while users pick dates in their own time zone. Normally that means every app writes the same conversion code in both directions, and gets it subtly wrong around midnight. Set **`valueInUtc: true`** (`value-in-utc` on the web component) and the picker does it: **everything that goes in or comes out is UTC, everything the user sees and edits is local.**
+
+```ts
+const dp = new Datepicker(input, { valueInUtc: true });
+
+dp.setDate(new Date('2025-03-15T00:00:00Z'));   // the backend's value: shows 15.03.2025 in every time zone
+dp.getDate().toISOString();                     // '2025-03-15T00:00:00.000Z', send it as is
+```
+
+```html
+<x-datepicker name="due" value-in-utc value="2025-03-15T00:00:00.000Z"></x-datepicker>
+```
+
+Without it, a user in Kyiv (UTC+2) who picks 15 March gets a `Date` for **local** midnight, and `toISOString()` sends `2025-03-14T22:00:00.000Z`: the backend stores the 14th. That is the bug this option removes.
+
+What "in and out" covers: `selected`, `defaultDate`, `minDate` / `maxDate`, `disabledDates` (array), `setDate()`, `jumpToDate()`, the `value` attribute, and typed or pasted ISO strings and timestamps, in; `getDate()`, `onChange`, the `change` event, `isoInput` and the web component's `value` / form value, out. The text in the input is always the user's local display and is never converted.
+
+What it does depends on whether a time is picked:
+
+| | without `valueInUtc` (local) | with `valueInUtc` |
+| --- | --- | --- |
+| **date only**: a picked day is reported as | `Date` at **local** midnight (`2025-03-14T22:00:00.000Z` for 15 March in Kyiv) | `Date` at **UTC midnight** (`2025-03-15T00:00:00.000Z`), in every time zone |
+| **date only**: a value is shown as | the local day of the instant (UTC midnight is 14 March in New York) | its **UTC day** (15 March everywhere) |
+| **with `enableTime`**: Date / timestamp | the instant of the local time | the same instant. Instants need no conversion |
+| **with `enableTime`**: ISO string | `2025-03-15T13:07:09`: local, no zone | `2025-03-15T11:07:09Z`: UTC (for a user in Kyiv) |
+| **with `enableTime`**: ISO string without a zone, in | local time | read as **UTC** (an explicit `Z` or `+02:00` always wins) |
+
+Combined with [`outputTimestamp`](#unix-timestamps), for a user in Kyiv (UTC+2) picking 15 March, or 15 March 13:07:09 with `enableTime`:
+
+| | `outputTimestamp: false` | `outputTimestamp: true` |
+| --- | --- | --- |
+| date only, local (default) | `Date`, `toISOString()` = `2025-03-14T22:00:00.000Z` | `1741989600` |
+| date only, **`valueInUtc`** | `Date`, `toISOString()` = `2025-03-15T00:00:00.000Z` | `1741996800` |
+| with time, local (default) | `Date`, `toISOString()` = `2025-03-15T11:07:09.000Z`; `isoInput` = `2025-03-15T13:07:09` | `1742036829` |
+| with time, **`valueInUtc`** | `Date`, same instant; `isoInput` = `2025-03-15T11:07:09Z` | `1742036829` |
+
+A UTC timestamp for a time of day works in either mode, because a timestamp is an instant. What changes is plain dates (UTC midnight instead of local midnight) and ISO strings (UTC with a `Z` instead of local without a zone).
+
+Things to know:
+
+- **Pass UTC values in.** With `valueInUtc`, `new Date('2025-03-15')` (UTC midnight) is 15 March, but `new Date(2025, 2, 15)` (local midnight) is 14 March for users east of UTC, which is what "a UTC value" means. This also applies to `minDate`, `maxDate` and `defaultDate`: pass the backend's values, not `new Date()` for "now".
+- **`disabledDates` as a function** and `disabledDaysOfWeek` work on the day the user sees, so a Sunday is a Sunday on screen whatever the time zone.
+- **Date-time ISO accepted forms:** `2025-03-15T11:07:09Z`, with milliseconds (`…09.000Z`, what `toISOString()` produces), with an offset (`…09+02:00`), without a zone (UTC with this option, local without it), or with a space instead of the `T`. A bare `2025-03-15` is a calendar day and needs no conversion, except that a time picker reads it as UTC midnight.
+- **Switching at runtime.** `setOptions({ valueInUtc })` keeps the day or time the user sees and changes what is reported.
+
+## Keyboard
+
+| Key | Action |
+| --- | --- |
+| `↓` or `Alt+↓` in the input | open and move focus into the calendar |
+| `← → ↑ ↓` | previous / next day, previous / next week (← → mirror in RTL) |
+| `Home` / `End` | start / end of the week |
+| `PageUp` / `PageDown` | previous / next month; with `Shift`, previous / next year |
+| `Enter` / `Space` | select |
+| `Escape` | close, focus returns to where it came from |
+| `Tab` | cycles inside the dialog (`aria-modal`), including the time fields |
+
+Opening with the mouse keeps focus in the input so you can keep typing; opening with the keyboard, the toggle button or `open()` moves focus into the grid.
+
+## Localisation
+
+Month and weekday names, the default numeric format, first weekday and direction come from `Intl`. UI strings default to English (`today` is localised through `Intl.RelativeTimeFormat`). The strings are `today clear prevMonth nextMonth label selected` and, for the time selector, `time hours minutes seconds`. Override what you need:
+
+```ts
+new Datepicker(input, { locale: { code: 'de', clear: 'Löschen', prevMonth: 'Voriger Monat', nextMonth: 'Nächster Monat', label: 'Datum wählen', selected: 'Ausgewählt' } });
+```
+
+`months`, `monthsShort`, `weekdays`, `weekdaysShort`, `firstDayOfWeek` and `rtl` can be overridden as well. `registerLocale(obj)` makes a locale available by tag (that's how `ten-protons-datepicker/locales/uk` works).
+
+The calendar is always Gregorian, and manual input accepts Arabic-Indic and Persian digits.
+
+## Theming
+
+Import `core.css` (and `themes.css` for dark mode). Customise with CSS variables on `.tp-dp`:
+`--tp-bg --tp-fg --tp-muted --tp-border --tp-hover --tp-accent --tp-accent-fg --tp-range --tp-focus --tp-radius --tp-cell --tp-pad --tp-z --tp-shadow --tp-font`.
+
+Dark mode follows `prefers-color-scheme` unless `theme: 'light'` / `data-theme="light"`; `theme: 'dark'` forces it. To style with Tailwind or CSS Modules, pass `classes` and skip `core.css`.
+
+## Browsers
+
+Current Chrome, Firefox, Safari (14.1+) and Edge. Form association of the Web Component needs `ElementInternals` (Safari 16.4+); everywhere else it still works, but its value isn't submitted with a `<form>`. Use the `change` event or `isoInput` there.
+
+## Not implemented yet
+
+Presets and a year / month picker view are not implemented. Month and year are reachable with the previous / next buttons and `PageUp` / `PageDown` (`Shift` for years).
+
+## Development
+
+```sh
+npm install
+npm run typecheck
+npm run build      # tsup -> dist/
+npm run demo       # build, then serve the repo; open http://localhost:5173/demo/
+```
+
+`demo/index.html` imports from `dist/` and must be served over HTTP (ES modules don't load from `file://`).
+
+MIT

package/dist/Datepicker-BFcQ6Txe.d.ts

@@ -0,0 +1,265 @@
+/** Day of week, `0` = Sunday. */
+type Weekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+type DatepickerMode = 'single' | 'range' | 'multiple';
+type Position = 'auto' | 'top' | 'bottom' | 'left' | 'right';
+/**
+ * What the picker reports: `Date` in single mode, `Date[]` in range/multiple mode, `null` when nothing is
+ * selected. With `outputTimestamp` the dates are Unix timestamps in seconds (`number` / `number[]`).
+ */
+type DatepickerValue = Date | Date[] | number | number[] | null;
+/** What the picker accepts: a `Date`, an ISO `yyyy-MM-dd` string, or a Unix timestamp in seconds (number or digit string). */
+type DateInput = Date | string | number;
+/** UI strings. Defaults are English; `today` is localised through `Intl.RelativeTimeFormat`. */
+interface LocaleStrings {
+    today: string;
+    clear: string;
+    prevMonth: string;
+    nextMonth: string;
+    /** Accessible name of the calendar dialog. */
+    label: string;
+    /** Time selector (`enableTime`): group name and the three field names. */
+    time: string;
+    hours: string;
+    minutes: string;
+    seconds: string;
+    /** Prefix of the screen-reader announcement, e.g. "Selected: Wednesday, March 5, 2025". */
+    selected: string;
+}
+/** Override only what you need; everything else comes from `Intl` for `code`. */
+interface LocaleObject extends Partial<LocaleStrings> {
+    /** BCP 47 tag, e.g. `uk`, `en-GB`. */
+    code: string;
+    firstDayOfWeek?: Weekday;
+    rtl?: boolean;
+    /** 12 month names, January first. */
+    months?: string[];
+    monthsShort?: string[];
+    /** 7 weekday names, Sunday first. */
+    weekdays?: string[];
+    weekdaysShort?: string[];
+}
+/** CSS classes used by the calendar. Replace any of them to fully restyle (Tailwind, CSS Modules...). */
+interface ClassNames {
+    root: string;
+    /** Added to the root when the calendar is a popup (not inline). */
+    pop: string;
+    months: string;
+    head: string;
+    title: string;
+    nav: string;
+    grid: string;
+    dow: string;
+    day: string;
+    out: string;
+    today: string;
+    selected: string;
+    disabled: string;
+    inRange: string;
+    rangeStart: string;
+    rangeEnd: string;
+    foot: string;
+    btn: string;
+    /** Time selector row and its number fields (`enableTime`). */
+    time: string;
+    timeField: string;
+    /** Visually hidden (screen-reader only) text. */
+    sr: string;
+}
+interface DatepickerOptions {
+    /** `'single'` (default). `'range'` / `'multiple'` require importing their module first. */
+    mode?: DatepickerMode;
+    /** Initial / new selection. Takes precedence over the input's existing value. */
+    selected?: DateInput | DateInput[] | null;
+    /** Month shown (and day focused) when nothing is selected. Defaults to today. */
+    defaultDate?: DateInput | null;
+    /** `Date`, ISO `yyyy-MM-dd` string or Unix timestamp in seconds. */
+    minDate?: DateInput | null;
+    maxDate?: DateInput | null;
+    disabledDates?: Date[] | ((date: Date) => boolean);
+    /** `0` = Sunday. */
+    disabledDaysOfWeek?: number[];
+    /** BCP 47 tag, or a `LocaleObject` with overrides. */
+    locale?: string | LocaleObject;
+    firstDayOfWeek?: Weekday;
+    /**
+     * Token format used for display and manual input. Tokens: `yyyy yy MMMM MMM MM M dd d EEEE EEE`;
+     * quote literals with `'...'`. Defaults to the locale's numeric order (`dd.MM.yyyy` for `uk`).
+     */
+    dateFormat?: string;
+    /** Render the calendar permanently instead of as a popup. Read at construction only. */
+    inline?: boolean;
+    showOtherMonths?: boolean;
+    numberOfMonths?: 1 | 2;
+    position?: Position;
+    /** Force `light` / `dark`. Omit to follow `prefers-color-scheme`. */
+    theme?: 'light' | 'dark';
+    /**
+     * Also pick a time (hours : minutes : seconds, 24-hour) in a selector below the calendar. Selected dates keep
+     * their time, which is shown as `HH:mm:ss` after the date, and included in `getDate()`, `onChange` and timestamps.
+     * Requires `import 'ten-protons-datepicker/time'` (the web component loads it for you). In range / multiple mode
+     * one time applies to every selected date. Default `false`.
+     */
+    enableTime?: boolean;
+    /**
+     * The backend works in UTC: values going in and out are UTC, while the picker shows and edits the user's local time.
+     * Covers `selected`, `setDate()`, `minDate` / `maxDate`, typed or pasted ISO strings and timestamps, and
+     * `getDate()`, `onChange`, `isoInput` and the web component's `value`:
+     * - with `enableTime`, ISO strings are UTC (`2025-03-15T11:07:09Z`, and without a zone they are read as UTC);
+     * - without it, each picked day is reported as UTC midnight and a UTC-midnight value shows as that day in every time zone.
+     * Default `false` (local time).
+     */
+    valueInUtc?: boolean;
+    /** Allow typing a date. Default `true`. When `false` the input is read-only. */
+    allowInput?: boolean;
+    /** Close once a selection is complete. Defaults to `true` for single/range, `false` for multiple and with `enableTime`. */
+    closeOnSelect?: boolean;
+    closeOnOutsideClick?: boolean;
+    /** Replace default CSS class names. */
+    classes?: Partial<ClassNames>;
+    /**
+     * Report Unix timestamps (seconds, local midnight of each selected day) from `getDate()`, `onChange`,
+     * the `change` event, `isoInput` and the web component's form value, instead of `Date`s / ISO strings.
+     * Day pickers report each day's local midnight; with `enableTime` the timestamp includes the selected time.
+     * Typed or pasted timestamps are always understood, whatever this is set to. Default `false`.
+     */
+    outputTimestamp?: boolean;
+    /** Input that receives the ISO value (`yyyy-MM-dd`, or `yyyy-MM-ddTHH:mm:ss` with `enableTime`; ranges as `a/b`, multiple as `a,b`), or timestamps with `outputTimestamp`. */
+    isoInput?: HTMLInputElement | null;
+    /** Element the popup is positioned against and treated as "inside" for outside clicks. Read at construction. */
+    anchor?: HTMLElement;
+    /** Where the popup is appended. Defaults to `document.body`. Read at construction. */
+    appendTo?: ParentNode;
+    onChange?: (dates: DatepickerValue, instance: Datepicker) => void;
+    onOpen?: (instance: Datepicker) => void;
+    onClose?: (instance: Datepicker) => void;
+    onMonthChange?: (date: Date, instance: Datepicker) => void;
+}
+interface DatepickerEventMap {
+    change: CustomEvent<DatepickerValue>;
+    open: CustomEvent<undefined>;
+    close: CustomEvent<undefined>;
+    monthChange: CustomEvent<Date>;
+    yearChange: CustomEvent<Date>;
+}
+
+interface Datepicker {
+    addEventListener<K extends keyof DatepickerEventMap>(type: K, listener: (this: Datepicker, ev: DatepickerEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof DatepickerEventMap>(type: K, listener: (this: Datepicker, ev: DatepickerEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+/**
+ * Accessible datepicker attached to an `<input>` (popup) or any element (`inline: true`).
+ *
+ * Opens on click or ArrowDown; with `allowInput` the date can be typed and is parsed on blur / Enter.
+ * Emits `change`, `open`, `close`, `monthChange` and `yearChange` (as `CustomEvent`s on the instance
+ * and through the `on*` callbacks). `change` also fires native `input`/`change` events on the input.
+ *
+ * ```ts
+ * const dp = new Datepicker(input, { locale: 'uk', minDate: new Date() });
+ * dp.addEventListener('change', (e) => console.log(e.detail));
+ * ```
+ */
+declare class Datepicker extends EventTarget {
+    /** The element the picker is attached to. */
+    readonly el: HTMLElement;
+    private readonly input;
+    private readonly anchor;
+    private readonly id;
+    private user;
+    private o;
+    private loc;
+    private mode;
+    private fmt;
+    private lo;
+    private hi;
+    private skip;
+    private sel;
+    /** Unfinished selection (e.g. range start); only the committed `sel` is ever emitted. */
+    private pending;
+    /** Time of day given to newly picked days (`enableTime`): follows the selection and the time selector. */
+    private tod;
+    private view;
+    private focus;
+    private hover;
+    private cal;
+    private isOpen;
+    private destroyed;
+    private opener;
+    private wasReadOnly;
+    private added;
+    private offs;
+    private openOffs;
+    private handlers;
+    constructor(el: HTMLElement, options?: DatepickerOptions);
+    /** Localised UI strings in use (e.g. to label an external toggle button). */
+    get strings(): LocaleStrings;
+    /** Opens the popup and moves focus into the calendar. */
+    open(): void;
+    /** Closes the popup and returns focus to where it came from. */
+    close(): void;
+    toggle(): void;
+    /**
+     * Selected date(s): `Date | null` in single mode, `Date[] | null` otherwise (copies). With `outputTimestamp`
+     * the dates are Unix timestamps in seconds instead: `number | null` / `number[] | null`. With `valueInUtc`
+     * a date-only picker reports each day as UTC midnight.
+     */
+    getDate(): DatepickerValue;
+    /**
+     * Replaces the selection. Accepts `Date`s, ISO strings and Unix timestamps in seconds. Invalid dates are
+     * ignored; `change` fires only if `triggerChange` is true.
+     */
+    setDate(date: DateInput | DateInput[] | null, triggerChange?: boolean): void;
+    /** Shows the month of `date` and moves the keyboard focus to it (clamped to min/max). */
+    jumpToDate(date: Date): void;
+    /** Shorthand for `setDate([start, end])`; use in `range` mode. */
+    setRange(start: Date, end: Date): void;
+    /** Merges options. `inline`, `anchor` and `appendTo` are only read at construction. */
+    setOptions(options: Partial<DatepickerOptions>): void;
+    /** Removes the calendar, listeners and everything added to the input. The instance is unusable afterwards. */
+    destroy(): void;
+    private resolve;
+    private monthsShown;
+    private home;
+    private isDisabled;
+    private clamp;
+    private normalize;
+    /** `d` with the picker's time of day; date-only pickers keep their midnights. */
+    private stamp;
+    private setSel;
+    private pick;
+    /** The time selector changed: every selected (or pending) date takes the new time of day. */
+    private setTime;
+    private announce;
+    /** Focuses `d` (clamped) and scrolls the visible months to include it. */
+    private reveal;
+    private setView;
+    private move;
+    private nav;
+    private state;
+    private refresh;
+    private mount;
+    private present;
+    private hide;
+    private reposition;
+    private listenWhileOpen;
+    private on;
+    private bindInput;
+    /** Display text of the committed selection. */
+    private text;
+    private writeISO;
+    private writeInput;
+    /**
+     * ISO dates / Unix timestamps (always accepted, whatever `dateFormat` is) or text in `dateFormat`. With
+     * `enableTime` they carry a time ("15.03.2025 13:07:09"); a date typed without one takes the selector's time.
+     */
+    private read;
+    /**
+     * Parses the input text into the selection. Invalid, disabled or too many dates are rejected:
+     * on Enter the input is flagged `aria-invalid` and keeps its text; on blur it reverts.
+     */
+    private commitInput;
+    private emit;
+}
+
+export { type ClassNames as C, type DateInput as D, type LocaleObject as L, type Position as P, type Weekday as W, Datepicker as a, type DatepickerEventMap as b, type DatepickerMode as c, type DatepickerOptions as d, type DatepickerValue as e, type LocaleStrings as f };

package/dist/chunk-ANB32WKT.js

@@ -0,0 +1 @@
+var l=(e,t,n)=>{let a=new Date(2e3,0,1);return a.setFullYear(e,t,n),a.setHours(0,0,0,0),a},d=e=>l(e.getFullYear(),e.getMonth(),e.getDate()),C=e=>l(e.getFullYear(),e.getMonth(),1),$=(e,t)=>l(e.getFullYear(),e.getMonth(),e.getDate()+t),S=(e,t)=>{let n=l(e.getFullYear(),e.getMonth()+t,1);return n.setDate(Math.min(e.getDate(),l(n.getFullYear(),n.getMonth()+1,0).getDate())),n},w=e=>e.getFullYear()*1e4+e.getMonth()*100+e.getDate(),H=e=>l(Math.floor(e/1e4),Math.floor(e/100)%100,e%100),f=(e,t=2)=>String(e).padStart(t,"0"),p=(e,t,n,a=0,o=0,s=0)=>{let r=new Date(0);return r.setUTCFullYear(e,t,n),r.setUTCHours(a,o,s,0),r},x=(e,t,n)=>n&&!t?l(e.getUTCFullYear(),e.getUTCMonth(),e.getUTCDate()):Y(e,t),y=(e,t=false,n=false)=>n&&!t?p(e.getFullYear(),e.getMonth(),e.getDate()):new Date(e),I=(e,t=false,n=false)=>Math.floor(y(e,t,n).getTime()/1e3),N=(e,t=false,n=false)=>{let a=t&&n,[o,s,r,u,D,g]=a?[e.getUTCFullYear(),e.getUTCMonth(),e.getUTCDate(),e.getUTCHours(),e.getUTCMinutes(),e.getUTCSeconds()]:[e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds()];return `${f(o,4)}-${f(s+1)}-${f(r)}${t?`T${f(u)}:${f(D)}:${f(g)}${a?"Z":""}`:""}`},F=/^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?(Z|[+-]\d{2}:?\d{2})?)?$/,M=(e,t=false,n=false)=>{let a=F.exec(e.trim());if(!a)return null;let[o,s,r]=[+a[1],+a[2]-1,+a[3]],[u,D,g]=[+(a[4]??0),+(a[5]??0),+(a[6]??0)],i=l(o,s,r);if(i.getMonth()!==s||i.getDate()!==r||u>23||D>59||g>59)return null;if(a[4]===void 0&&!(t&&n))return i;let c=a[7],m;if(c&&c!=="Z"){let U=(c[0]==="-"?-1:1)*(+c.slice(1,3)*60+ +c.slice(-2));m=new Date(p(o,s,r,u,D,g).getTime()-U*6e4);}else c||n?m=p(o,s,r,u,D,g):(m=i).setHours(u,D,g);return x(m,t,n)},b=(e,t,n)=>{let a=new Date(e*1e3);return isNaN(+a)?null:x(a,t,n)},T=(e,t=false,n=false)=>/^\d{9,11}$/.test(e.trim())?b(+e,t,n):null,h=/\d{4}-\d{2}-\d{2}(?:[T ]\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?(?:Z|[+-]\d{2}:?\d{2})?)?|\d{9,11}/g,O=(e,t=false,n=false)=>{let a=(e.match(h)??[]).map(o=>M(o,t,n)??T(o,t,n));return a.every(o=>o!==null)&&!e.replace(h,"").replace(/[\s,;/–—-]/g,"")?a:null},Y=(e,t=false)=>{if(!t)return d(e);let n=new Date(e);return n.setMilliseconds(0),n},Z=(e,t=false,n=false)=>{let a=e instanceof Date?x(e,t,n):typeof e=="string"?M(e,t,n)??T(e,t,n):typeof e=="number"?b(e,t,n):null;return a&&!isNaN(+a)?a:null};export{l as a,d as b,C as c,$ as d,S as e,w as f,H as g,y as h,I as i,N as j,O as k,Y as l,Z as m};

package/dist/chunk-BHROFXOE.js

@@ -0,0 +1 @@
+import {a}from'./chunk-ANB32WKT.js';var b={today:"Today",clear:"Clear",prevMonth:"Previous month",nextMonth:"Next month",label:"Choose date",selected:"Selected",time:"Time",hours:"Hours",minutes:"Minutes",seconds:"Seconds"},N={calendar:"gregory"},w=new Map,H=e=>{w.set(e.code.toLowerCase(),e);},s=e=>{let a;return ()=>a??(a=e())},v=e=>e.toLowerCase().replace(/\./g,""),h=e=>Array.from({length:e},(a,p)=>p),P=/^(US|CA|MX|BR|JP|IL|IN|PH|KR|TW|HK|ZA|SA)$/,R=/^(ar|he|iw|fa|ur|ps|sd|ug|yi|dv|ckb)(-|$)/i,E=e=>{try{let a=new Intl.RelativeTimeFormat(e,{numeric:"auto"}).format(0,"day");return a.charAt(0).toLocaleUpperCase(e)+a.slice(1)}catch{return b.today}},U=(e,a$1)=>{let r=(typeof e=="string"?e:e?.code)||typeof navigator<"u"&&navigator.language||"en";try{new Intl.DateTimeFormat(r);}catch{r="en";}let L=r.toLowerCase(),o=typeof e=="object"?e:w.get(L)??w.get(L.split("-")[0]),I={...b,today:E(r)};for(let t of Object.keys(b)){let n=o?.[t];n&&(I[t]=n);}let c=t=>new Intl.DateTimeFormat(r,{...N,...t}),i=new Intl.Locale(r),x=i.getWeekInfo?.()??i.weekInfo,k=(i.getTextInfo?.()??i.textInfo)?.direction,F=i.maximize().region??"",M=c({month:"long",year:"numeric"}),O=c({weekday:"long",day:"numeric",month:"long",year:"numeric"}),A=new Intl.NumberFormat(r),f=[],m=(t,n)=>h(12).map(u=>{let g=a(2e3,u,1);return n?c({day:"numeric",month:t}).formatToParts(g).find(d=>d.type==="month").value:c({month:t}).format(g)}),y={long:s(()=>m("long",true)),short:s(()=>m("short",true))},T={long:s(()=>m("long",false)),short:s(()=>m("short",false))},j={long:s(()=>h(7).map(t=>c({weekday:"long"}).format(a(2e3,0,2+t)))),short:s(()=>h(7).map(t=>c({weekday:"short"}).format(a(2e3,0,2+t))))},$=s(()=>{let t=new Map,n=[y.long(),y.short(),T.long(),T.short(),o?.months,o?.monthsShort];for(let u of n)u?.forEach((g,d)=>t.set(v(g),d));return t}),D=(t,n=false)=>(n?o?.monthsShort??o?.months:o?.months)?.[t]??y[n?"short":"long"]()[t],S=(t,n=false)=>(n?o?.weekdays:o?.weekdaysShort??o?.weekdays)?.[t]??j[n?"long":"short"]()[t],C=s(()=>c({numberingSystem:"latn",year:"numeric",month:"2-digit",day:"2-digit"}).formatToParts(a(2e3,10,22)).map(t=>t.type==="year"?"yyyy":t.type==="month"?"MM":t.type==="day"?"dd":t.value.replace(/[‎‏؜]/g,"")).join(""));return {code:r,rtl:o?.rtl??(k?k==="rtl":R.test(r)),firstDay:a$1??o?.firstDayOfWeek??(x?.firstDay??(P.test(F)?7:1))%7,strings:I,get format(){return C()},title:t=>o?.months?`${o.months[t.getMonth()]} ${t.getFullYear()}`:M.format(t),label:t=>o?.months||o?.weekdays?`${S(t.getDay(),true)}, ${t.getDate()} ${D(t.getMonth())} ${t.getFullYear()}`:O.format(t),dow:S,month:D,monthIndex:t=>$().get(v(t))??-1,num:t=>f[t]??(f[t]=A.format(t))}};export{H as a,U as b};

package/dist/chunk-CUGUCENC.js

@@ -0,0 +1 @@
+import {f}from'./chunk-ANB32WKT.js';var s=(e,o)=>f(e)-f(o),n={single:{max:1,join:", ",iso:",",autoClose:true,clean:e=>e.slice(0,1),pick:(e,o)=>({sel:[o],complete:true})}},a=(e,o)=>{n[e]=o;},i=e=>n[e];export{s as a,a as b,i as c};

package/dist/chunk-LUHEXL2S.js

@@ -0,0 +1 @@
+import {c as c$2}from'./chunk-CUGUCENC.js';import {c,b as b$1}from'./chunk-Q2P4Y4T6.js';import {b as b$2}from'./chunk-BHROFXOE.js';import {b,f,c as c$1,i,h,m,l,e,j as j$1,k as k$1,g as g$1,d,a}from'./chunk-ANB32WKT.js';var R=(h,n,t,e$1)=>{if(h.ctrlKey||h.metaKey||h.altKey)return null;let i=(n.getDay()-t+7)%7,s=e$1?-1:1;switch(h.key){case "ArrowLeft":return d(n,-s);case "ArrowRight":return d(n,s);case "ArrowUp":return d(n,-7);case "ArrowDown":return d(n,7);case "Home":return d(n,-i);case "End":return d(n,6-i);case "PageUp":return e(n,h.shiftKey?-12:-1);case "PageDown":return e(n,h.shiftKey?12:1);default:return null}};var z={root:"tp-dp",pop:"tp-pop",months:"tp-months",head:"tp-head",title:"tp-title",nav:"tp-nav",grid:"tp-grid",dow:"tp-dow",day:"tp-day",out:"tp-out",today:"tp-today",selected:"tp-selected",disabled:"tp-disabled",inRange:"tp-in-range",rangeStart:"tp-range-start",rangeEnd:"tp-range-end",foot:"tp-foot",btn:"tp-btn",time:"tp-time",timeField:"tp-time-field",sr:"tp-sr"},g=(h,n="",t={})=>{let e=document.createElement(h);n&&(e.className=n);for(let i in t)e.setAttribute(i,t[i]);return e},j=(...h)=>h.filter(Boolean).join(" "),k=(h,n,t)=>{h.getAttribute(n)!==t&&(t===null?h.removeAttribute(n):h.setAttribute(n,t));},x=class{constructor(n){this.o=n;this.panels=[];this.layoutKey=-1;this.focusTd=null;let{loc:t,cls:e,on:i}=n,s=this.el=g("div",j(e.root,!n.inline&&e.pop),{id:n.id,dir:t.rtl?"rtl":"ltr","aria-label":t.strings.label,...n.inline?{role:"group"}:{role:"dialog","aria-modal":"true"},...n.theme?{"data-theme":n.theme}:{}}),o=g("div",e.months);for(let a=0;a<n.months;a++)o.append(this.panel(a));let r=g("div",e.foot);for(let a of ["today","clear"]){let c=g("button",e.btn,{type:"button","data-a":a});c.textContent=t.strings[a],r.append(c);}this.live=g("div",e.sr,{"aria-live":"polite","aria-atomic":"true"}),this.timeUI=n.time?.({loc:t,cls:e,id:n.id,change:i.time}),s.append(o,...this.timeUI?[this.timeUI.el]:[],r,this.live),this.prev=s.querySelector("[data-a=prev]"),this.next=s.querySelector("[data-a=next]");let l=a=>a.target.closest("td[data-k]");s.addEventListener("click",a=>{let c=l(a);if(c)return i.pick(g$1(+c.dataset.k));let m=a.target.closest("[data-a]")?.dataset.a;m==="prev"?i.nav(-1):m==="next"?i.nav(1):m==="today"?i.today():m==="clear"&&i.clear();}),s.addEventListener("pointerover",a=>{let c=l(a);c&&i.hover(+c.dataset.k);}),s.addEventListener("pointerleave",()=>i.hover(null)),s.addEventListener("keydown",a=>this.onKey(a));}update(n,t=false){let e=f(n.view);e!==this.layoutKey&&(this.layoutKey=e,this.layout(n.view)),this.paint(n),t&&this.focusCell();}focusCell(){this.focusTd?.focus({preventScroll:true});}announce(n){this.live.textContent=n;}panel(n){let{loc:t,cls:e,id:i,months:s}=this.o,o=`${i}-t${n}`,r=y=>g("button",e.nav,{type:"button","data-a":y,"aria-label":t.strings[y==="prev"?"prevMonth":"nextMonth"]}),l=g("h2",e.title,{id:o,"aria-live":"polite"}),a=g("div",e.head);a.append(n===0?r("prev"):g("span",e.nav),l,n===s-1?r("next"):g("span",e.nav));let c=g("tr");for(let y=0;y<7;y++){let D=(t.firstDay+y)%7,v=g("th",e.dow,{scope:"col",abbr:t.dow(D,true)});v.textContent=t.dow(D),c.append(v);}let m=g("thead");m.append(c);let f=g("tbody"),p=g("table",e.grid,{role:"grid","aria-labelledby":o});p.append(m,f),this.panels.push({title:l,body:f,cells:[]});let u=g("div");return u.append(a,p),u}layout(n){let{loc:t,cls:e$1,otherMonths:i}=this.o;this.panels.forEach((s,o)=>{let r=e(n,o),l=d(r,-((r.getDay()-t.firstDay+7)%7)),a=document.createDocumentFragment();s.title.textContent=t.title(r),s.cells=[];for(let c=0;c<6;c++){let m=g("tr"),f$1=false;for(let p=0;p<7;p++){let u=d(l,c*7+p),y=u.getMonth()!==r.getMonth(),D=y&&!i,v=g("td",e$1.day,{role:"gridcell"});D?v.setAttribute("aria-hidden","true"):(f$1=true,v.tabIndex=-1,v.dataset.k=String(f(u)),v.textContent=t.num(u.getDate()),v.setAttribute("aria-label",t.label(u))),s.cells.push({td:v,d:u,k:f(u),out:y,hidden:D}),m.append(v);}f$1||m.setAttribute("aria-hidden","true"),a.append(m);}s.body.replaceChildren(a);});}paint(n){let{cls:t}=this.o,e=f(n.focus),i=n.span;this.focusTd=null;for(let s of this.panels)for(let{td:o,d:r,k:l,out:a,hidden:c}of s.cells){if(c)continue;let m=n.keys.includes(l)||!!i&&!n.preview&&l>=i[0]&&l<=i[1],f=n.disabled(r),p=j(t.day,a&&t.out,l===n.today&&t.today,m&&t.selected,f&&t.disabled,i&&l>i[0]&&l<i[1]&&t.inRange,i&&l===i[0]&&t.rangeStart,i&&l===i[1]&&t.rangeEnd);o.className!==p&&(o.className=p),k(o,"aria-selected",m?"true":null),k(o,"aria-disabled",f?"true":null),k(o,"aria-current",l===n.today?"date":null);let u=l===e&&!a;k(o,"tabindex",u?"0":"-1"),u&&(this.focusTd=o);}this.timeUI?.set(n.time),k(this.prev,"aria-disabled",n.canPrev?null:"true"),k(this.next,"aria-disabled",n.canNext?null:"true");}onKey(n){let{loc:t,on:e,inline:i}=this.o;if(n.key==="Escape")return i?void 0:(n.stopPropagation(),e.close());if(n.key==="Tab"&&!i)return this.trapTab(n);let s=n.target.closest("td[data-k]");if(!s)return;let o=g$1(+s.dataset.k);if(n.key==="Enter"||n.key===" ")return n.preventDefault(),e.pick(o);let r=R(n,o,t.firstDay,t.rtl);r&&(n.preventDefault(),e.move(r));}trapTab(n){let t=[...this.el.querySelectorAll('button, input, td[tabindex="0"]')],[e,i]=[t[0],t[t.length-1]],s=n.shiftKey?e:i;(n.target===s||!t.includes(n.target))&&(n.preventDefault(),(n.shiftKey?i:e)?.focus());}};var G=/'([^']*)'|(yyyy|yy|MMMM|MMM|MM|M|dd|d|EEEE|EEE)|([^'yMdE]+|.)/g,W=/[\p{L}\p{N}]/u,X=/(\d{1,2}):(\d{2})(?::(\d{2}))?/g,M=(h,n=2)=>String(h).padStart(n,"0"),C=h=>`${M(h.getHours())}:${M(h.getMinutes())}:${M(h.getSeconds())}`,Y=(h,n,t)=>n.replace(G,(e,i,s,o)=>{if(!s)return i??o??"";let[r,l,a]=[h.getFullYear(),h.getMonth(),h.getDate()];switch(s){case "yyyy":return M(r,4);case "yy":return M(r%100);case "MMMM":return t.month(l);case "MMM":return t.month(l,true);case "MM":return M(l+1);case "M":return String(l+1);case "dd":return M(a);case "d":return String(a);default:return t.dow(h.getDay(),s==="EEEE")}}),q=(h,n,t,e)=>{let i=[],s="";for(let[,f,p,u]of n.matchAll(G))if(p)p[0]==="E"?s+="(?:\\p{L}+\\.?[^\\p{L}\\p{N}]+)?":(i.push(p),s+=p==="yyyy"?"(\\d{4})":p==="yy"?"(\\d{2})":p.length>2?"(\\p{L}+\\.?)":"(\\d{1,2})");else {let y=f??u??"";s+=W.test(y)?`\\s*(?:${y.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})?\\s*`:"[^\\p{L}\\p{N}]*";}let o=h.replace(/[٠-٩۰-۹]/g,f=>String(f.charCodeAt(0)&15)),r=[];e&&(o=o.replace(X,(f,p,u,y)=>(r.push([+p,+u,+(y??0)])," ")));let l=new Date,a$1=[],c="",m=0;for(let f of o.matchAll(new RegExp(s,"gu"))){let[p,u,y]=[l.getFullYear(),l.getMonth(),1];i.forEach((v,Q)=>{let w=f[Q+1];v==="yyyy"?p=+w:v==="yy"?p=2e3+ +w>l.getFullYear()+50?1900+ +w:2e3+ +w:v[0]==="d"?y=+w:u=v.length>2?t.monthIndex(w):+w-1;});let D=a(p,u,y);if(u<0||D.getMonth()!==u||D.getDate()!==y)return null;if(e){let v=r.length?r[a$1.length]:e;if(!v||v[0]>23||v[1]>59||v[2]>59)return null;D.setHours(...v);}a$1.push(D),c+=o.slice(m,f.index),m=f.index+f[0].length;}return c+=o.slice(m),a$1.length&&!W.test(c)&&(!r.length||r.length===a$1.length)?a$1:null};var B=(h,n,t,e)=>{let i=h.getBoundingClientRect(),[s,o]=[n.offsetWidth,n.offsetHeight],[r,l]=[document.documentElement.clientWidth,document.documentElement.clientHeight],a=(f,p,u)=>Math.max(8,Math.min(f,u-p-8)),c=e?i.right-s:i.left,m;t==="left"||t==="right"?(c=t==="left"?i.left-s-4:i.right+4,m=i.top):m=t==="top"||t==="auto"&&l-i.bottom<o+4&&i.top>l-i.bottom?i.top-o-4:i.bottom+4,n.style.left=`${a(c,s,r)}px`,n.style.top=`${a(m,o,l)}px`;};var _={mode:"single",position:"auto",numberOfMonths:1,allowInput:true,closeOnOutsideClick:true},Z=0,tt=h=>Object.fromEntries(Object.entries(h).filter(([,n])=>n!==void 0)),J=class extends EventTarget{constructor(t,e={}){super();this.id=`tp-${++Z}`;this.user={};this.o=_;this.fmt="";this.lo=null;this.hi=null;this.skip=null;this.sel=[];this.pending=null;this.tod=[0,0,0];this.view=new Date;this.focus=new Date;this.hover=null;this.cal=null;this.isOpen=false;this.destroyed=false;this.opener=null;this.wasReadOnly=false;this.added=[];this.offs=[];this.openOffs=[];this.handlers={pick:t=>this.pick(t),move:t=>this.move(t),nav:t=>this.nav(t),hover:t=>{t!==this.hover&&(this.hover=t,this.pending&&this.refresh());},today:()=>this.pick(b(new Date)),clear:()=>this.setSel([],true),close:()=>this.hide(true),time:t=>this.setTime(t)};this.isDisabled=t=>{let e=f(t),i=this.o.disabledDates;return this.lo!==null&&e<f(this.lo)||this.hi!==null&&e>f(this.hi)||!!this.o.disabledDaysOfWeek?.includes(t.getDay())||!!this.skip?.has(e)||typeof i=="function"&&i(t)};this.reposition=()=>{this.cal&&this.isOpen&&B(this.anchor,this.cal.el,this.o.position??"auto",this.loc.rtl);};this.el=t,this.input=t instanceof HTMLInputElement?t:null,this.anchor=e.anchor??t,this.resolve(e);let i=e.selected===void 0&&this.input?.value.trim()?this.read(this.input.value):null;this.sel=i?this.mode.clean(i):this.normalize(e.selected),this.sel[0]&&(this.tod=c(this.sel[0])),this.focus=this.clamp(this.sel[0]??this.home()),this.view=c$1(this.focus),this.input&&this.bindInput(this.input),this.sel.length&&this.writeInput(),this.o.inline&&(this.mount(),this.isOpen=true,this.refresh());}get strings(){return this.loc.strings}open(){this.present(true);}close(){this.hide(true);}toggle(){this.isOpen?this.close():this.open();}getDate(){let{outputTimestamp:t,enableTime:e,valueInUtc:i$1}=this.o,s=this.sel.map(o=>t?i(o,e,i$1):h(o,e,i$1));return this.mode.max===1?s[0]??null:s.length?s:null}setDate(t,e=false){if(this.destroyed)return;let i=this.normalize(t);i[0]&&this.reveal(i[0]),this.setSel(i,e);}jumpToDate(t){let e=m(t,!!this.o.enableTime,!!this.o.valueInUtc);this.destroyed||!e||(this.reveal(e),this.refresh());}setRange(t,e){this.setDate([t,e]);}setOptions(t){if(this.destroyed)return;let e=this.text();this.resolve({...this.user,...t}),this.sel="selected"in t?this.normalize(t.selected):this.mode.clean(this.sel.map(s=>l(s,!!this.o.enableTime))),this.sel[0]&&(this.tod=c(this.sel[0])),this.pending=null,this.focus=this.clamp(this.sel[0]??this.focus),this.input&&(this.input.readOnly=this.wasReadOnly||this.o.allowInput===false),e!==this.text()?this.writeInput():this.o.isoInput&&this.writeISO();let i=this.cal?.el.matches(":focus-within");this.cal?.el.remove(),this.cal=null,this.reveal(this.focus),this.isOpen&&(this.mount(),this.cal.el.hidden=false,this.refresh(),this.reposition(),i&&this.cal.focusCell());}destroy(){this.destroyed||(this.destroyed=true,this.openOffs.splice(0).forEach(t=>t()),this.offs.splice(0).forEach(t=>t()),this.cal?.el.remove(),this.cal=null,this.isOpen=false,this.input&&([...this.added,"aria-controls","aria-invalid"].forEach(t=>this.input.removeAttribute(t)),this.input.readOnly=this.wasReadOnly));}resolve(t){let e={..._,...tt(t)},i=c$2(e.mode);if(!i)throw new Error(`[datepicker] mode "${e.mode}" is not registered. Import "ten-protons-datepicker/${e.mode}" first.`);if(e.enableTime&&!b$1())throw new Error('[datepicker] enableTime needs the time module. Import "ten-protons-datepicker/time" first.');this.user=t,this.o=e,this.mode=i,this.loc=b$2(e.locale,e.firstDayOfWeek),this.fmt=e.dateFormat??this.loc.format;let[s,o]=[!!e.enableTime,!!e.valueInUtc];this.lo=m(e.minDate,s,o),this.hi=m(e.maxDate,s,o);let r=e.disabledDates;this.skip=Array.isArray(r)?new Set(r.map(l=>f(m(l,s,o)??l))):null;}monthsShown(){return this.o.numberOfMonths===2?2:1}home(){return m(this.o.defaultDate,!!this.o.enableTime,!!this.o.valueInUtc)??b(new Date)}clamp(t){let e=f(t);return this.lo&&e<f(this.lo)?new Date(this.lo):this.hi&&e>f(this.hi)?new Date(this.hi):t}normalize(t){let e=t==null?[]:Array.isArray(t)?t:[t],[i,s]=[!!this.o.enableTime,!!this.o.valueInUtc];return this.mode.clean(e.map(o=>m(o,i,s)).filter(o=>o!==null))}stamp(t){if(!this.o.enableTime)return t;let e=new Date(t);return e.setHours(...this.tod),e}setSel(t,e){let i=this.o.enableTime?o=>+o:f,s=t.length===this.sel.length&&t.every((o,r)=>i(o)===i(this.sel[r]));this.sel=t,t[0]&&(this.tod=c(t[0])),this.pending=null,this.writeInput(),this.refresh(),e&&!s&&this.emit("change",this.getDate());}pick(t){if(this.isDisabled(t))return this.move(t);let e=this.stamp(t),i=this.mode.pick(this.pending??this.sel,e);if(this.hover=f(t),this.reveal(e),this.announce(i.sel),!i.complete)return this.pending=i.sel,this.refresh(true);this.setSel(i.sel,true),this.o.closeOnSelect??(this.mode.autoClose&&!this.o.enableTime)?this.hide(true):this.cal?.focusCell();}setTime(t){this.tod=t,this.pending?(this.pending=this.pending.map(e=>this.stamp(e)),this.refresh()):this.sel.length&&this.setSel(this.sel.map(e=>this.stamp(e)),true);}announce(t){let{strings:e,label:i}=this.loc,s=o=>this.o.enableTime?`${i(o)} ${C(o)}`:i(o);this.cal?.announce(t.length?`${e.selected}: ${t.map(s).join(", ")}`:"");}reveal(t){this.focus=this.clamp(t);let e$1=this.monthsShown(),i=c$1(this.focus),s=f(i),o=s<f(this.view)?i:s>f(e(this.view,e$1-1))?e(i,1-e$1):this.view;this.lo&&f(o)<f(c$1(this.lo))&&(o=c$1(this.lo)),this.setView(o);}setView(t){let e=this.view;f(t)!==f(e)&&(this.view=t,this.emit("monthChange",new Date(t)),t.getFullYear()!==e.getFullYear()&&this.emit("yearChange",new Date(t)));}move(t){this.reveal(t),this.hover=f(this.focus),this.refresh(true);}nav(t){let e$1=this.state();(t<0?!e$1.canPrev:!e$1.canNext)||(this.focus=this.clamp(e(this.focus,t)),this.setView(e(this.view,t)),this.refresh());}state(){let t=(this.pending??this.sel).map(f);return {view:this.view,focus:this.focus,keys:t,span:this.mode.span?.(t,this.hover)??null,preview:!!this.pending,today:f(new Date),time:this.tod,disabled:this.isDisabled,canPrev:!this.lo||f(this.view)>f(c$1(this.lo)),canNext:!this.hi||f(e(this.view,this.monthsShown()))<=f(this.hi)}}refresh(t=false){this.cal?.update(this.state(),t);}mount(){if(this.cal)return;let t=this.o,e=this.cal=new x({id:this.id,loc:this.loc,cls:{...z,...t.classes},months:this.monthsShown(),otherMonths:!!t.showOtherMonths,inline:!!t.inline,theme:t.theme,time:t.enableTime?b$1():void 0,on:this.handlers});if(t.inline){this.input?this.el.after(e.el):this.el.append(e.el);return}e.el.hidden=true,(t.appendTo??this.el.ownerDocument.body).append(e.el),this.input?.setAttribute("aria-controls",this.id);}present(t){if(this.destroyed||this.o.inline)return;if(this.isOpen)return t?this.cal?.focusCell():void 0;this.mount();let e=this.cal,i=this.el.getRootNode().activeElement;this.opener=i===this.el.ownerDocument.body?null:i,this.reveal(this.sel[0]??this.focus),e.el.hidden=false,this.isOpen=true,this.refresh(),this.reposition(),this.input?.setAttribute("aria-expanded","true"),this.listenWhileOpen(),t&&e.focusCell(),this.emit("open");}hide(t){if(!this.isOpen||this.o.inline)return;let e=this.cal,i=t&&e.el.matches(":focus-within");this.pending=null,this.hover=null,this.isOpen=false,e.el.hidden=true,this.openOffs.splice(0).forEach(s=>s()),this.input?.setAttribute("aria-expanded","false"),i&&(this.opener?.isConnected?this.opener:this.el).focus({preventScroll:true}),this.emit("close");}listenWhileOpen(){let t=this.el.ownerDocument,e=(i,s,o,r=false)=>{i.addEventListener(s,o,r),this.openOffs.push(()=>i.removeEventListener(s,o,r));};if(this.o.closeOnOutsideClick!==false){let i=s=>{let o=s.composedPath();!o.includes(this.cal.el)&&!o.includes(this.anchor)&&this.hide(false);};e(t,"pointerdown",i,true),e(t,"focusin",i,true);}e(t.defaultView??window,"resize",this.reposition),e(t,"scroll",this.reposition,true);}on(t,e,i){t.addEventListener(e,i),this.offs.push(()=>t.removeEventListener(e,i));}bindInput(t){let e=(i,s)=>{t.hasAttribute(i)||(t.setAttribute(i,s),this.added.push(i));};e("aria-haspopup","dialog"),e("aria-expanded","false"),e("autocomplete","off"),this.wasReadOnly=t.readOnly,t.readOnly=this.wasReadOnly||this.o.allowInput===false,this.on(t,"click",()=>this.present(this.o.allowInput===false)),this.on(t,"input",()=>t.removeAttribute("aria-invalid")),this.on(t,"blur",()=>this.commitInput(true)),this.on(t,"keydown",i=>{if(i.key==="ArrowDown")i.preventDefault(),this.isOpen?this.cal?.focusCell():this.present(true);else if(i.key==="Enter"){let s=this.commitInput(false);(!s||this.isOpen)&&i.preventDefault(),s&&this.hide(false);}else i.key==="Escape"&&this.isOpen&&(i.stopPropagation(),this.hide(false));});}text(){return this.sel.map(t=>Y(t,this.fmt,this.loc)+(this.o.enableTime?` ${C(t)}`:"")).join(this.mode.join)}writeISO(){let{isoInput:t,outputTimestamp:e,enableTime:i$1,valueInUtc:s}=this.o;t&&(t.value=this.sel.map(o=>e?i(o,i$1,s):j$1(o,i$1,s)).join(this.mode.iso));}writeInput(){this.input&&(this.input.value=this.text(),this.input.removeAttribute("aria-invalid")),this.writeISO();}read(t){let e=!!this.o.enableTime,i=k$1(t,e,!!this.o.valueInUtc);return i?.length?i:q(t,this.fmt,this.loc,e?this.tod:void 0)}commitInput(t){let e=this.input;if(!e||this.destroyed)return  true;let i=e.value.trim();if(i===this.text())return  true;let s=[];return i&&(s=this.read(i),s&&(s.length>this.mode.max||s.some(this.isDisabled))&&(s=null)),s?(s=this.mode.clean(s),s[0]&&this.reveal(s[0]),this.setSel(s,true),true):(t?this.writeInput():e.setAttribute("aria-invalid","true"),false)}emit(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e}));let i=this.o;t==="change"?(i.onChange?.(e,this),this.input?.dispatchEvent(new Event("input",{bubbles:true})),this.input?.dispatchEvent(new Event("change",{bubbles:true}))):t==="open"?i.onOpen?.(this):t==="close"?i.onClose?.(this):t==="monthChange"&&i.onMonthChange?.(e,this);}};export{J as a};

package/dist/chunk-Q2P4Y4T6.js

@@ -0,0 +1 @@
+var t,i=e=>{t=e;},o=()=>t,m=e=>[e.getHours(),e.getMinutes(),e.getSeconds()];export{i as a,o as b,m as c};

package/dist/core.css

@@ -0,0 +1,58 @@
+.tp-dp{
+  --tp-bg:#fff;--tp-fg:#1f2328;--tp-muted:#656d76;--tp-border:#d0d7de;--tp-hover:#eef1f4;
+  --tp-accent:#2563eb;--tp-accent-fg:#fff;--tp-range:#dbe7fd;--tp-focus:#2563eb;
+  --tp-radius:.5rem;--tp-cell:2.25rem;--tp-pad:.75rem;--tp-z:1000;
+  --tp-shadow:0 8px 24px rgba(0,0,0,.15);
+  position:relative;box-sizing:border-box;width:max-content;max-width:calc(100vw - 1rem);padding:var(--tp-pad);
+  background:var(--tp-bg);color:var(--tp-fg);border:1px solid var(--tp-border);border-radius:var(--tp-radius);
+  font:.875rem/1.4 var(--tp-font,inherit)
+}
+.tp-dp[hidden]{display:none}
+.tp-dp *{box-sizing:border-box}
+.tp-pop{position:fixed;top:0;left:0;z-index:var(--tp-z);box-shadow:var(--tp-shadow)}
+
+.tp-months{display:flex;gap:1.25rem}
+.tp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
+.tp-title{flex:1;margin:0;font-size:1em;font-weight:600;text-align:center}
+.tp-nav{display:grid;place-items:center;width:var(--tp-cell);height:var(--tp-cell);padding:0;border:0;border-radius:var(--tp-radius);background:none;color:inherit;cursor:pointer}
+.tp-nav[data-a]:hover{background:var(--tp-hover)}
+.tp-nav[data-a]::before{content:"";width:.5rem;height:.5rem;border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(45deg)}
+.tp-nav[data-a=next]::before{transform:rotate(-135deg)}
+.tp-dp[dir=rtl] .tp-nav[data-a=prev]::before{transform:rotate(-135deg)}
+.tp-dp[dir=rtl] .tp-nav[data-a=next]::before{transform:rotate(45deg)}
+.tp-nav[aria-disabled=true]{opacity:.35;cursor:default}
+.tp-nav[aria-disabled=true]:hover{background:none}
+
+.tp-grid{border-collapse:collapse;table-layout:fixed}
+.tp-dow,.tp-day{width:var(--tp-cell);height:var(--tp-cell);padding:0;text-align:center}
+.tp-dow{font-size:.75rem;font-weight:500;color:var(--tp-muted)}
+.tp-day{cursor:pointer;border-radius:var(--tp-radius);font-variant-numeric:tabular-nums}
+.tp-day[aria-hidden]{visibility:hidden}
+.tp-day:hover{background:var(--tp-hover)}
+.tp-day:focus-visible{outline:2px solid var(--tp-focus);outline-offset:-2px}
+.tp-out{color:var(--tp-muted)}
+.tp-today{font-weight:700;box-shadow:inset 0 -2px 0 var(--tp-accent)}
+.tp-disabled{opacity:.35;cursor:not-allowed;background:none!important}
+.tp-in-range{background:var(--tp-range);border-radius:0}
+.tp-range-start,.tp-range-end{background:var(--tp-range)}
+.tp-range-start{border-start-end-radius:0;border-end-end-radius:0}
+.tp-range-end{border-start-start-radius:0;border-end-start-radius:0}
+.tp-range-start.tp-range-end{border-radius:var(--tp-radius)}
+.tp-selected,.tp-selected:hover{background:var(--tp-accent);color:var(--tp-accent-fg)}
+
+/* The time row is as wide as one month's day grid (also with two months, where it centres): three equal fields. */
+.tp-time{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.25rem;width:100%;max-width:calc(7*var(--tp-cell));margin:.5rem auto 0;padding-top:.5rem;border-top:1px solid var(--tp-border)}
+/* `.tp-dp` is in the selector so a page's own `input[type=text]` rules can't stretch or restyle the fields. */
+.tp-dp .tp-time-field{box-sizing:border-box;width:100%;min-width:0;height:var(--tp-cell);margin:0;padding:0 .25rem;border:1px solid var(--tp-border);border-radius:var(--tp-radius);background:var(--tp-bg);color:inherit;font:inherit;text-align:center;font-variant-numeric:tabular-nums}
+.tp-dp .tp-time-field:focus-visible{outline:2px solid var(--tp-focus);outline-offset:1px}
+.tp-time>span{text-align:center;color:var(--tp-muted)}
+
+.tp-foot{display:flex;justify-content:space-between;margin-top:.5rem}
+.tp-btn{padding:.25rem .5rem;border:0;border-radius:var(--tp-radius);background:none;color:var(--tp-accent);font:inherit;cursor:pointer}
+.tp-btn:hover{background:var(--tp-hover)}
+.tp-btn:focus-visible,.tp-nav:focus-visible{outline:2px solid var(--tp-focus);outline-offset:1px}
+.tp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+
+@media (forced-colors:active){
+  .tp-selected{forced-color-adjust:none;background:Highlight;color:HighlightText}
+}

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+import { L as LocaleObject } from './Datepicker-BFcQ6Txe.js';
+export { C as ClassNames, D as DateInput, a as Datepicker, b as DatepickerEventMap, c as DatepickerMode, d as DatepickerOptions, e as DatepickerValue, f as LocaleStrings, P as Position, W as Weekday } from './Datepicker-BFcQ6Txe.js';
+
+/** Makes a locale available by tag, e.g. for `<x-datepicker locale="uk">`. */
+declare const registerLocale: (locale: LocaleObject) => void;
+
+/** Selection strategy. `single` is built in; `range` and `multiple` register themselves when imported. */
+interface Mode {
+    /** Most dates a selection can hold. */
+    max: number;
+    /** Separator between dates in the input text. */
+    join: string;
+    /** Separator between dates in the ISO value. */
+    iso: string;
+    /** Close the popup when a selection completes (overridable by `closeOnSelect`). */
+    autoClose: boolean;
+    /** Sorts / limits / dedupes an arbitrary list of days into a valid selection. */
+    clean(dates: Date[]): Date[];
+    /** Selection after `day` is activated. `complete: false` keeps it pending (e.g. range start). */
+    pick(current: Date[], day: Date): {
+        sel: Date[];
+        complete: boolean;
+    };
+    /** Inclusive run of day keys to highlight; `hover` is the day under the pointer / focus. */
+    span?(keys: number[], hover: number | null): [number, number] | null;
+}
+declare const byDay: (a: Date, b: Date) => number;
+declare const registerMode: (name: string, mode: Mode) => void;
+
+/** Time of day: hours (0-23), minutes, seconds. */
+type Time = [hours: number, minutes: number, seconds: number];
+
+export { LocaleObject, type Mode, type Time, byDay, registerLocale, registerMode };

package/dist/index.js

@@ -0,0 +1 @@
+export{a as Datepicker}from'./chunk-LUHEXL2S.js';export{a as byDay,b as registerMode}from'./chunk-CUGUCENC.js';import'./chunk-Q2P4Y4T6.js';export{a as registerLocale}from'./chunk-BHROFXOE.js';import'./chunk-ANB32WKT.js';

package/dist/locales/uk.d.ts

@@ -0,0 +1,6 @@
+import { L as LocaleObject } from '../Datepicker-BFcQ6Txe.js';
+
+/** Ukrainian UI strings. Month and weekday names come from `Intl`. Importing registers `uk` for `<x-datepicker locale="uk">`. */
+declare const uk: LocaleObject;
+
+export { uk };

package/dist/locales/uk.js

@@ -0,0 +1 @@
+import {a}from'../chunk-BHROFXOE.js';import'../chunk-ANB32WKT.js';var o={code:"uk",today:"\u0421\u044C\u043E\u0433\u043E\u0434\u043D\u0456",clear:"\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u0438",prevMonth:"\u041F\u043E\u043F\u0435\u0440\u0435\u0434\u043D\u0456\u0439 \u043C\u0456\u0441\u044F\u0446\u044C",nextMonth:"\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0438\u0439 \u043C\u0456\u0441\u044F\u0446\u044C",label:"\u041E\u0431\u0435\u0440\u0456\u0442\u044C \u0434\u0430\u0442\u0443",selected:"\u041E\u0431\u0440\u0430\u043D\u043E",time:"\u0427\u0430\u0441",hours:"\u0413\u043E\u0434\u0438\u043D\u0438",minutes:"\u0425\u0432\u0438\u043B\u0438\u043D\u0438",seconds:"\u0421\u0435\u043A\u0443\u043D\u0434\u0438"};a(o);export{o as uk};

package/dist/multiple.d.ts

@@ -0,0 +1,6 @@
+import { a as Datepicker } from './Datepicker-BFcQ6Txe.js';
+
+/** Switches `dp` to multiple mode: `const dp = withMultiple(new Datepicker(input))`. */
+declare const withMultiple: <T extends Datepicker>(dp: T) => T;
+
+export { withMultiple };

package/dist/multiple.js

@@ -0,0 +1 @@
+import {b,a}from'./chunk-CUGUCENC.js';import {f}from'./chunk-ANB32WKT.js';var m={max:1/0,join:", ",iso:",",autoClose:false,clean:e=>e.filter((o,i)=>e.findIndex(l=>f(l)===f(o))===i).sort(a),pick:(e,o)=>{let i=f(o);return {sel:e.some(r=>f(r)===i)?e.filter(r=>f(r)!==i):[...e,o].sort(a),complete:true}}};b("multiple",m);var c=e=>(e.setOptions({mode:"multiple"}),e);export{c as withMultiple};

package/dist/range.d.ts

@@ -0,0 +1,6 @@
+import { a as Datepicker } from './Datepicker-BFcQ6Txe.js';
+
+/** Switches `dp` to range mode: `const dp = withRange(new Datepicker(input))`. */
+declare const withRange: <T extends Datepicker>(dp: T) => T;
+
+export { withRange };

package/dist/range.js

@@ -0,0 +1 @@
+import {b,a}from'./chunk-CUGUCENC.js';import'./chunk-ANB32WKT.js';var o={max:2,join:" \u2013 ",iso:"/",autoClose:true,clean:e=>e.slice(0,2).sort(a),pick:(e,t)=>e.length===1?{sel:[e[0],t].sort(a),complete:true}:{sel:[t],complete:false},span:(e,t)=>e.length===2?[e[0],e[1]]:e.length===1&&t!==null?[Math.min(e[0],t),Math.max(e[0],t)]:null};b("range",o);var l=e=>(e.setOptions({mode:"range"}),e);export{l as withRange};

package/dist/themes.css

@@ -0,0 +1,11 @@
+/* Dark follows prefers-color-scheme unless data-theme="light"; data-theme="dark" forces it. */
+.tp-dp[data-theme=dark]{
+  --tp-bg:#161b22;--tp-fg:#e6edf3;--tp-muted:#8d96a0;--tp-border:#30363d;--tp-hover:#21262d;
+  --tp-accent:#4c8dff;--tp-accent-fg:#0b1220;--tp-range:#1b2f52;--tp-focus:#79a8ff;--tp-shadow:0 8px 24px rgba(0,0,0,.5)
+}
+@media (prefers-color-scheme:dark){
+  .tp-dp:not([data-theme=light]){
+    --tp-bg:#161b22;--tp-fg:#e6edf3;--tp-muted:#8d96a0;--tp-border:#30363d;--tp-hover:#21262d;
+    --tp-accent:#4c8dff;--tp-accent-fg:#0b1220;--tp-range:#1b2f52;--tp-focus:#79a8ff;--tp-shadow:0 8px 24px rgba(0,0,0,.5)
+  }
+}

package/dist/time.d.ts

@@ -0,0 +1,6 @@
+import { a as Datepicker } from './Datepicker-BFcQ6Txe.js';
+
+/** Switches `dp` to date & time: `const dp = withTime(new Datepicker(input))`. */
+declare const withTime: <T extends Datepicker>(dp: T) => T;
+
+export { withTime };

package/dist/time.js

@@ -0,0 +1 @@
+import {a}from'./chunk-Q2P4Y4T6.js';var b=[["hours",23],["minutes",59],["seconds",59]],g=r=>String(r).padStart(2,"0");a(({loc:r,cls:l,change:f})=>{let s=document.createElement("div");s.className=l.time,s.setAttribute("role","group"),s.setAttribute("aria-label",r.strings.time);let a=[0,0,0],m=[];return b.forEach(([c,n],i)=>{let t=document.createElement("input");t.className=l.timeField;let v={type:"text",inputmode:"numeric",size:"2",maxlength:"2",autocomplete:"off",role:"spinbutton","aria-label":r.strings[c],"aria-valuemin":"0","aria-valuemax":String(n)};for(let[e,E]of Object.entries(v))t.setAttribute(e,E);let u=()=>{t.value=g(a[i]),t.setAttribute("aria-valuenow",String(a[i]));},o=e=>{a[i]=Math.min(n,Math.max(0,e)),u(),f([...a]);},p=()=>{let e=parseInt(t.value,10);isNaN(e)?u():o(e);};if(t.addEventListener("input",()=>t.value=t.value.replace(/\D/g,"")),t.addEventListener("change",p),t.addEventListener("focus",()=>t.select()),t.addEventListener("keydown",e=>{if(e.key==="ArrowUp"||e.key==="ArrowDown")o((a[i]+(e.key==="ArrowUp"?1:-1)+n+1)%(n+1));else if(e.key==="Home")o(0);else if(e.key==="End")o(n);else if(e.key==="Enter")p();else return;e.preventDefault();}),i){let e=document.createElement("span");e.textContent=":",e.setAttribute("aria-hidden","true"),s.append(e);}s.append(t),m.push({input:t,render:u});}),{el:s,set(c){a.splice(0,3,...c),m.forEach(({input:n,render:i})=>n.getRootNode().activeElement===n||i());}}});var h=r=>(r.setOptions({enableTime:true}),r);export{h as withTime};

package/dist/wc.d.ts

@@ -0,0 +1,57 @@
+import { a as Datepicker, d as DatepickerOptions } from './Datepicker-BFcQ6Txe.js';
+
+declare const Base: typeof HTMLElement;
+/**
+ * `<x-datepicker>`: an input + calendar toggle with the popup inside its shadow root.
+ *
+ * Attributes: `value` (ISO or Unix seconds, ranges `a/b`, multiple `a,b`), `name`, `placeholder`, `label`, `disabled`,
+ * `mode`, `locale`, `min`, `max`, `date-format`, `first-day`, `position`, `theme`, `number-of-months`,
+ * `show-other-months`, `allow-input`, `close-on-select`, `disabled-days`, `output-timestamp`, `enable-time`, `value-in-utc`, `inline`.
+ * Events (bubbling, composed): `change`, `open`, `close`, `monthChange`, `yearChange` with `detail`.
+ * Style with `::part(input)`, `::part(toggle)` and the `--tp-*` custom properties.
+ * Takes part in forms (via `ElementInternals`) in browsers that support form-associated elements.
+ */
+declare class XDatepicker extends Base {
+    static formAssociated: boolean;
+    static observedAttributes: string[];
+    /** Resolves with the underlying picker once it exists (extra modes load asynchronously). */
+    ready: Promise<Datepicker | null>;
+    private picker;
+    private extra;
+    private gen;
+    private readonly internals;
+    private readonly root;
+    private readonly wrap;
+    private readonly input;
+    private readonly toggleBtn;
+    private readonly iso;
+    constructor();
+    /** ISO value: `2025-03-05`, `2025-03-01/2025-03-10` (range) or `2025-03-01,2025-03-05` (multiple). */
+    get value(): string;
+    set value(v: string);
+    /** Options that can't be expressed as attributes (callbacks, `disabledDates`, a `LocaleObject`...). */
+    set options(o: DatepickerOptions);
+    open(): void;
+    close(): void;
+    toggle(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    private opts;
+    private load;
+    private init;
+    private teardown;
+    private apply;
+    private setValue;
+    private setDisabled;
+    private syncForm;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'x-datepicker': XDatepicker;
+    }
+}
+
+export { XDatepicker };

package/dist/wc.js

@@ -0,0 +1,70 @@
+import {a as a$1}from'./chunk-LUHEXL2S.js';import'./chunk-CUGUCENC.js';import'./chunk-Q2P4Y4T6.js';import'./chunk-BHROFXOE.js';import'./chunk-ANB32WKT.js';var d=`.tp-dp{
+  --tp-bg:#fff;--tp-fg:#1f2328;--tp-muted:#656d76;--tp-border:#d0d7de;--tp-hover:#eef1f4;
+  --tp-accent:#2563eb;--tp-accent-fg:#fff;--tp-range:#dbe7fd;--tp-focus:#2563eb;
+  --tp-radius:.5rem;--tp-cell:2.25rem;--tp-pad:.75rem;--tp-z:1000;
+  --tp-shadow:0 8px 24px rgba(0,0,0,.15);
+  position:relative;box-sizing:border-box;width:max-content;max-width:calc(100vw - 1rem);padding:var(--tp-pad);
+  background:var(--tp-bg);color:var(--tp-fg);border:1px solid var(--tp-border);border-radius:var(--tp-radius);
+  font:.875rem/1.4 var(--tp-font,inherit)
+}
+.tp-dp[hidden]{display:none}
+.tp-dp *{box-sizing:border-box}
+.tp-pop{position:fixed;top:0;left:0;z-index:var(--tp-z);box-shadow:var(--tp-shadow)}
+
+.tp-months{display:flex;gap:1.25rem}
+.tp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
+.tp-title{flex:1;margin:0;font-size:1em;font-weight:600;text-align:center}
+.tp-nav{display:grid;place-items:center;width:var(--tp-cell);height:var(--tp-cell);padding:0;border:0;border-radius:var(--tp-radius);background:none;color:inherit;cursor:pointer}
+.tp-nav[data-a]:hover{background:var(--tp-hover)}
+.tp-nav[data-a]::before{content:"";width:.5rem;height:.5rem;border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(45deg)}
+.tp-nav[data-a=next]::before{transform:rotate(-135deg)}
+.tp-dp[dir=rtl] .tp-nav[data-a=prev]::before{transform:rotate(-135deg)}
+.tp-dp[dir=rtl] .tp-nav[data-a=next]::before{transform:rotate(45deg)}
+.tp-nav[aria-disabled=true]{opacity:.35;cursor:default}
+.tp-nav[aria-disabled=true]:hover{background:none}
+
+.tp-grid{border-collapse:collapse;table-layout:fixed}
+.tp-dow,.tp-day{width:var(--tp-cell);height:var(--tp-cell);padding:0;text-align:center}
+.tp-dow{font-size:.75rem;font-weight:500;color:var(--tp-muted)}
+.tp-day{cursor:pointer;border-radius:var(--tp-radius);font-variant-numeric:tabular-nums}
+.tp-day[aria-hidden]{visibility:hidden}
+.tp-day:hover{background:var(--tp-hover)}
+.tp-day:focus-visible{outline:2px solid var(--tp-focus);outline-offset:-2px}
+.tp-out{color:var(--tp-muted)}
+.tp-today{font-weight:700;box-shadow:inset 0 -2px 0 var(--tp-accent)}
+.tp-disabled{opacity:.35;cursor:not-allowed;background:none!important}
+.tp-in-range{background:var(--tp-range);border-radius:0}
+.tp-range-start,.tp-range-end{background:var(--tp-range)}
+.tp-range-start{border-start-end-radius:0;border-end-end-radius:0}
+.tp-range-end{border-start-start-radius:0;border-end-start-radius:0}
+.tp-range-start.tp-range-end{border-radius:var(--tp-radius)}
+.tp-selected,.tp-selected:hover{background:var(--tp-accent);color:var(--tp-accent-fg)}
+
+/* The time row is as wide as one month's day grid (also with two months, where it centres): three equal fields. */
+.tp-time{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.25rem;width:100%;max-width:calc(7*var(--tp-cell));margin:.5rem auto 0;padding-top:.5rem;border-top:1px solid var(--tp-border)}
+/* \`.tp-dp\` is in the selector so a page's own \`input[type=text]\` rules can't stretch or restyle the fields. */
+.tp-dp .tp-time-field{box-sizing:border-box;width:100%;min-width:0;height:var(--tp-cell);margin:0;padding:0 .25rem;border:1px solid var(--tp-border);border-radius:var(--tp-radius);background:var(--tp-bg);color:inherit;font:inherit;text-align:center;font-variant-numeric:tabular-nums}
+.tp-dp .tp-time-field:focus-visible{outline:2px solid var(--tp-focus);outline-offset:1px}
+.tp-time>span{text-align:center;color:var(--tp-muted)}
+
+.tp-foot{display:flex;justify-content:space-between;margin-top:.5rem}
+.tp-btn{padding:.25rem .5rem;border:0;border-radius:var(--tp-radius);background:none;color:var(--tp-accent);font:inherit;cursor:pointer}
+.tp-btn:hover{background:var(--tp-hover)}
+.tp-btn:focus-visible,.tp-nav:focus-visible{outline:2px solid var(--tp-focus);outline-offset:1px}
+.tp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+
+@media (forced-colors:active){
+  .tp-selected{forced-color-adjust:none;background:Highlight;color:HighlightText}
+}
+`;var l=`/* Dark follows prefers-color-scheme unless data-theme="light"; data-theme="dark" forces it. */
+.tp-dp[data-theme=dark]{
+  --tp-bg:#161b22;--tp-fg:#e6edf3;--tp-muted:#8d96a0;--tp-border:#30363d;--tp-hover:#21262d;
+  --tp-accent:#4c8dff;--tp-accent-fg:#0b1220;--tp-range:#1b2f52;--tp-focus:#79a8ff;--tp-shadow:0 8px 24px rgba(0,0,0,.5)
+}
+@media (prefers-color-scheme:dark){
+  .tp-dp:not([data-theme=light]){
+    --tp-bg:#161b22;--tp-fg:#e6edf3;--tp-muted:#8d96a0;--tp-border:#30363d;--tp-hover:#21262d;
+    --tp-accent:#4c8dff;--tp-accent-fg:#0b1220;--tp-range:#1b2f52;--tp-focus:#79a8ff;--tp-shadow:0 8px 24px rgba(0,0,0,.5)
+  }
+}
+`;var f={range:()=>import('./range.js'),multiple:()=>import('./multiple.js')},v=()=>import('./time.js'),o=e=>e??void 0,c=e=>e===null?void 0:Number(e),a=e=>e===null?void 0:e!=="false",y=e=>e===null?void 0:e.split(",").map(Number),u=e=>e.split(/\s*[/,;]\s*/).filter(Boolean),h={mode:["mode",o],locale:["locale",o],min:["minDate",o],max:["maxDate",o],"date-format":["dateFormat",o],"first-day":["firstDayOfWeek",c],position:["position",o],theme:["theme",o],"number-of-months":["numberOfMonths",c],"show-other-months":["showOtherMonths",a],"allow-input":["allowInput",a],"close-on-select":["closeOnSelect",a],"disabled-days":["disabledDaysOfWeek",y],"output-timestamp":["outputTimestamp",a],"enable-time":["enableTime",a],"value-in-utc":["valueInUtc",a],inline:["inline",a]},k=["change","open","close","monthChange","yearChange"],w='<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg>',x=":host{display:inline-block}:host([hidden]){display:none}.wrap{position:relative;display:flex;align-items:center}input{box-sizing:border-box;width:100%;padding-inline-end:2.25rem;font:inherit}.toggle{position:absolute;inset-inline-end:.25rem;display:grid;place-items:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:.25rem;background:none;color:inherit;cursor:pointer}.toggle:disabled{opacity:.4;cursor:default}:host([inline]) .toggle{display:none}",E=typeof HTMLElement>"u"?class{}:HTMLElement,n=class extends E{constructor(){super();this.ready=Promise.resolve(null);this.picker=null;this.extra={};this.gen=0;this.internals=this.attachInternals?.();let t=this.root=this.attachShadow({mode:"open",delegatesFocus:true});t.innerHTML=`<style>${d}${l}${x}</style><div class="wrap" part="wrap"><input part="input"><button type="button" class="toggle" part="toggle" aria-haspopup="dialog">${w}</button></div>`,this.wrap=t.querySelector(".wrap"),this.input=t.querySelector("input"),this.toggleBtn=t.querySelector("button"),this.iso=document.createElement("input"),this.toggleBtn.addEventListener("click",()=>this.picker?.toggle());}get value(){return this.iso.value}set value(t){this.setAttribute("value",t);}set options(t){this.extra={...this.extra,...t},this.apply();}open(){this.picker?.open();}close(){this.picker?.close();}toggle(){this.picker?.toggle();}connectedCallback(){this.ready=this.init();}disconnectedCallback(){this.teardown();}attributeChangedCallback(t,i,r){if(t==="placeholder")this.input.placeholder=r??"";else if(t==="label")r===null?this.input.removeAttribute("aria-label"):this.input.setAttribute("aria-label",r);else if(t==="disabled")this.setDisabled(r!==null);else if(this.picker)t==="value"?this.setValue(r):t==="inline"?(this.teardown(),this.ready=this.init()):this.apply();else return}formResetCallback(){this.setValue(this.getAttribute("value"));}formDisabledCallback(t){this.setDisabled(t);}opts(){let t={};for(let[i,[r,s]]of Object.entries(h))t[r]=s(this.getAttribute(i));return {...t,...this.extra}}async load({mode:t,enableTime:i}){await Promise.all([t&&f[t]?.(),i&&v()]);}async init(){if(this.picker)return this.picker;let t=++this.gen;if(await this.load(this.opts()),t!==this.gen||!this.isConnected)return null;let i=this.getAttribute("value"),r=this.picker=new a$1(this.input,{...this.opts(),selected:i?u(i):null,isoInput:this.iso,anchor:this.wrap,appendTo:this.root});for(let s of k)r.addEventListener(s,g=>{s==="change"&&this.syncForm(),this.dispatchEvent(new CustomEvent(s,{detail:g.detail,bubbles:true,composed:true}));});return this.toggleBtn.setAttribute("aria-label",r.strings.label),this.setDisabled(this.hasAttribute("disabled")),this.syncForm(),r}teardown(){this.gen++,this.picker?.destroy(),this.picker=null;}async apply(){let t=this.opts();await this.load(t),this.picker&&(this.picker.setOptions(t),this.syncForm(),this.toggleBtn.setAttribute("aria-label",this.picker.strings.label));}setValue(t){this.picker?.setDate(t?u(t):[]),this.syncForm();}setDisabled(t){this.input.disabled=this.toggleBtn.disabled=t,t&&this.picker?.close();}syncForm(){this.internals?.setFormValue?.(this.iso.value||null);}};n.formAssociated=true,n.observedAttributes=[...Object.keys(h),"value","placeholder","label","disabled"];typeof customElements<"u"&&!customElements.get("x-datepicker")&&customElements.define("x-datepicker",n);export{n as XDatepicker};

package/package.json

@@ -1,6 +1,79 @@
 {
   "name": "ten-protons-datepicker",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Zero-dependency, accessible, tiny datepicker. Vanilla TypeScript + Web Component.",
+  "keywords": [
+    "datepicker",
+    "date-picker",
+    "calendar",
+    "web-component",
+    "a11y",
+    "range",
+    "zero-dependency"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "./dist/range.js",
+    "./dist/multiple.js",
+    "./dist/time.js",
+    "./dist/wc.js",
+    "./dist/locales/*.js",
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./range": {
+      "types": "./dist/range.d.ts",
+      "import": "./dist/range.js"
+    },
+    "./multiple": {
+      "types": "./dist/multiple.d.ts",
+      "import": "./dist/multiple.js"
+    },
+    "./time": {
+      "types": "./dist/time.d.ts",
+      "import": "./dist/time.js"
+    },
+    "./wc": {
+      "types": "./dist/wc.d.ts",
+      "import": "./dist/wc.js"
+    },
+    "./locales/uk": {
+      "types": "./dist/locales/uk.d.ts",
+      "import": "./dist/locales/uk.js"
+    },
+    "./core.css": "./dist/core.css",
+    "./themes.css": "./dist/themes.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "tsup",
+    "demo": "npm run build && npx --yes serve . -l 5173",
+    "prepublishOnly": "npm run typecheck && npm run build"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TenProtons/Ten-Protons-Datepicker.git"
+  },
+  "homepage": "https://github.com/TenProtons/Ten-Protons-Datepicker#readme",
+  "bugs": {
+    "url": "https://github.com/TenProtons/Ten-Protons-Datepicker/issues"
+  }
+}