@0001-labs/design-system-1 0.3.0-alpha.20 → 0.3.0-alpha.21

package/dist/3-unit/ds-calendar.d.ts

@@ -1,14 +1,39 @@
 import { type PropertyValues } from "lit";
+import { type DateLength } from "../0-face/format";
 import { type CalendarEvent, type Day } from "../0-face/calendar";
 import { CalendarBase } from "./calendar-base";
 import "../2-core/ds-icon";
 export * from "./calendar-base";
+/** One end of a picker's value: its day and, when it has one, its time (`14:30`). */
+export interface CalendarEnd {
+    day: Day;
+    time: string;
+}
+/** Reads a value: `2026-10-21`, `2026-10-21T14:30`, or two of them joined by `/`. */
+export declare function readDateValue(value: string | null | undefined): {
+    start?: CalendarEnd;
+    end?: CalendarEnd;
+};
+/**
+ * Writes a value from its ends, the times only with `time`. An end that is
+ * the same moment as the start leaves the value one day.
+ */
+export declare function writeDateValue(start: CalendarEnd | undefined, end: CalendarEnd | undefined, options: {
+    time: boolean;
+}): string;
+/** Reads what a person typed: a day written `YYYY-MM-DD`, or a date the browser can read ("Oct 21, 2026"). */
+export declare function parseTypedDay(text: string): Day | null;
 /**
  * @element ds-calendar
  * @prop {string} month - The month shown, `YYYY-MM` (or a day in it). The
  *   selected day's month, or today's, when left out; the arrows change it.
- * @prop {string} value - The selected day, `YYYY-MM-DD`.
- * @prop {boolean} selectable - Pressing a day selects it and fires `change`.
+ * @prop {string} value - The selected day, `YYYY-MM-DD`, or a range,
+ *   `YYYY-MM-DD/YYYY-MM-DD`; in a picker either end may carry a time
+ *   (`2026-10-21T09:00`).
+ * @prop {boolean} selectable - Pressing a day selects it and fires `change`:
+ *   the first press one day, the next the end of a range from it.
+ * @prop {boolean} picker - A field one control high that opens the small
+ *   month below it, with the days to type, Include time and Clear.
  * @prop {boolean} compact - One square per day, no events written out: the
  *   small month.
  * @prop {number} dayWidth - Squares per day (`day-width`): 4 by default, 1
@@ -19,8 +44,6 @@ export * from "./calendar-base";
  * @prop {boolean} fixed - Always draw six weeks, so the month keeps its height.
  * @prop {boolean} outsideDays - Draw the days of the months before and after
  *   in the title grey (`outside-days`); pressing one moves there.
- * @prop {boolean} range - A selectable calendar chooses a first and a last
- *   day; `value` is then `YYYY-MM-DD/YYYY-MM-DD`.
  * @prop {boolean} noHeader - Leave out the title and arrows (`no-header`).
  * @prop {boolean} noToday - Leave out the Today button (`no-today`).
  * @prop {string} min - The first day a person may choose.
@@ -28,20 +51,35 @@ export * from "./calendar-base";
  * @prop {string} weekStart - The week's first day (`week-start`), 0–6 from
  *   Sunday or its English name; the language's own by default.
  * @prop {string} today - The day drawn as today; the reader's own by default.
+ * @prop {string} label - The grid's name, or a picker's: a translation key,
+ *   or literal words with `literal`.
+ * @prop {string} name - The form field's name.
+ * @prop {string} placeholder - A picker's words before a day is chosen; the
+ *   shared "Choose a date" by default.
+ * @prop {string} length - How a picker writes a day: `short`, `medium` (the
+ *   default) or `long`.
+ * @prop {boolean} time - A picker chooses a time with each day (Include time).
+ * @prop {boolean} required - A form needs a value; a picker leaves Clear out.
+ * @prop {boolean} disabled - A picker cannot be opened.
+ * @prop {boolean} open - A picker's month is open.
  * @prop {CalendarEvent[]} events - What happens on the days (property only).
  *
  * @fires day-press - A day was pressed or chosen with Enter or Space;
  *   `{ day, events }`. Cancelable: cancelled, a selectable calendar keeps its value.
- * @fires change - A person selected a day; `{ value, previous }`.
+ * @fires change - A person selected a day or ended a range;
+ *   `{ value, previous, start, end }`, `end` empty while it is still to come.
+ * @fires input - A picker's value changed, the same moment as `change`.
  * @fires event-press - An event was pressed; `{ event, day }`.
  * @fires navigate - A person moved to another month; `{ month }`.
+ * @fires ds-calendar-toggle - A picker's month opened or closed; `{ open }`.
  *
  * @example
  * <ds-calendar month="2026-10" week-numbers></ds-calendar>
- * <ds-calendar compact selectable value="2026-10-18"></ds-calendar>
- * <ds-calendar compact selectable range value="2026-10-18/2026-10-24"></ds-calendar>
+ * <ds-calendar compact selectable value="2026-10-18/2026-10-24"></ds-calendar>
+ * <ds-calendar picker label="When" literal name="when" value="2026-10-21/2026-10-24"></ds-calendar>
  */
 export declare class Calendar extends CalendarBase {
+    static formAssociated: boolean;
     static properties: {
         month: {
             type: StringConstructor;
@@ -82,7 +120,37 @@ export declare class Calendar extends CalendarBase {
             attribute: string;
             reflect: boolean;
         };
+        picker: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        length: {
+            type: StringConstructor;
+        };
+        time: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        unfolded: {
             state: boolean;
         };
         value: {
@@ -106,10 +174,6 @@ export declare class Calendar extends CalendarBase {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        range: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
         label: {
             type: StringConstructor;
         };
@@ -126,6 +190,9 @@ export declare class Calendar extends CalendarBase {
         hoverDay: {
             state: boolean;
         };
+        endPending: {
+            state: boolean;
+        };
     };
     static styles: import("lit").CSSResult[];
     month: string | undefined;
@@ -137,17 +204,37 @@ export declare class Calendar extends CalendarBase {
     outsideDays: boolean;
     noHeader: boolean;
     noToday: boolean;
+    picker: boolean;
+    name: string | undefined;
+    placeholder: string | undefined;
+    length: DateLength | undefined;
+    time: boolean;
+    required: boolean;
+    disabled: boolean;
+    open: boolean;
     /** The day whose hidden events are unfolded. */
-    open: Day | undefined;
+    unfolded: Day | undefined;
     protected readonly weeksRun: "rows";
     private byDay;
+    private readonly internals;
+    /** The value the field started with, for a form's reset. */
+    private initial;
+    private shown;
+    /** Whether opening a picker should move focus into the month (a key opened it). */
+    private focusMonth;
     constructor();
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    /** The form was reset: back to the value it started with. */
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
     /** The first of the month shown. */
     get shownMonth(): Day;
     private get squaresPerDay();
     private get eventLines();
     protected eventsOn(day: Day): CalendarEvent[];
     protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
     /** Shows another month and says so with `navigate`. */
     showMonth(month: string, announce?: boolean): void;
     /** The month before, as the previous arrow does. */
@@ -166,6 +253,46 @@ export declare class Calendar extends CalendarBase {
     private renderHeader;
     private renderDay;
     render(): import("lit").TemplateResult<1>;
+    private pickerWords;
+    private get trigger();
+    private get panel();
+    /** The small month inside the picker. */
+    private get smallMonth();
+    private get ends();
+    /** Opens a picker's month. */
+    show(): void;
+    /** Closes a picker's month, giving focus back to the field when it was inside. */
+    hide(restore?: boolean): void;
+    private focusPickerDay;
+    /** Below the field, half a square from it, or above when there is more room there; held inside the screen. */
+    private place;
+    private onOutside;
+    private toggle;
+    private onTriggerKey;
+    private onPanelKey;
+    private onPanelFocusOut;
+    /** Takes a new value and says so. */
+    private commit;
+    private write;
+    /**
+     * A day pressed in the month. The first press of an opening is the value;
+     * the second ends the range and, without times to set, closes the month.
+     */
+    private picked;
+    /** A day typed in a field, read when the person leaves it or presses Enter. */
+    private typed;
+    private timed;
+    private setTime;
+    /** Pressing the switch's row presses the switch, as a label would. */
+    private passPress;
+    private clear;
+    private moment;
+    private formatter;
+    private fieldText;
+    /** The face's words: one day, or a range written as the language writes one ("Oct 21 – 24, 2026"). */
+    private faceText;
+    private renderEnd;
+    private renderPicker;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/3-unit/ds-calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-calendar.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-calendar.ts"],"names":[],"mappings":"AAOA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEpE,OAAO,EAUL,KAAK,aAAa,EAClB,KAAK,GAAG,EACT,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAwB,MAAM,iBAAiB,CAAC;AACrE,OAAO,mBAAmB,CAAC;AAK3B,cAAc,iBAAiB,CAAC;AAKhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAYf;IAEF,MAAM,CAAC,MAAM,4BAAgE;IAErE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACzB,gDAAgD;IACxC,IAAI,EAAE,GAAG,GAAG,SAAS,CAAC;IAE9B,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,MAAM,CAAU;IAE9C,OAAO,CAAC,KAAK,CAAmC;;IAYhD,oCAAoC;IACpC,IAAI,UAAU,IAAI,GAAG,CAEpB;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,UAAU,GAErB;IAED,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,aAAa,EAAE;IAI7C,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IASlD,uDAAuD;IACvD,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,UAAQ;IAQzC,oDAAoD;IACpD,aAAa;IAIb,+CAA+C;IAC/C,SAAS;IAIT,+CAA+C;IAC/C,SAAS;IAKT,6FAA6F;IAC7F,OAAO,KAAK,MAAM,GAIjB;IAED,OAAO,CAAC,SAAS,CAmBf;IAEF,OAAO,CAAC,OAAO,CAqBb;IAEF,8EAA8E;IAC9E,OAAO,CAAC,aAAa,CAOnB;IAEF,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,YAAY;IAyBpB,OAAO,CAAC,SAAS;IAkDjB,MAAM;CA8BP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,QAAQ,CAAC;KACzB;CACF"}
+{"version":3,"file":"ds-calendar.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-calendar.ts"],"names":[],"mappings":"AAcA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGpE,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAYL,KAAK,aAAa,EAClB,KAAK,GAAG,EACT,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAmD,MAAM,iBAAiB,CAAC;AAChG,OAAO,mBAAmB,CAAC;AAK3B,cAAc,iBAAiB,CAAC;AAKhC,qFAAqF;AACrF,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,GAAG,CAAC;IACT,IAAI,EAAE,MAAM,CAAC;CACd;AAID,qFAAqF;AACrF,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC;IAAC,GAAG,CAAC,EAAE,WAAW,CAAA;CAAE,CAW1G;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,WAAW,GAAG,SAAS,EAAE,GAAG,EAAE,WAAW,GAAG,SAAS,EAAE,OAAO,EAAE;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GAAG,MAAM,CAI/H;AAED,8GAA8G;AAC9G,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,GAAG,IAAI,CAKtD;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,MAAM,CAAC,cAAc,UAAQ;IAE7B,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAoBf;IAEF,MAAM,CAAC,MAAM,4BAAgE;IAErE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,MAAM,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACtB,gDAAgD;IACxC,QAAQ,EAAE,GAAG,GAAG,SAAS,CAAC;IAElC,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,MAAM,CAAU;IAE9C,OAAO,CAAC,KAAK,CAAmC;IAChD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAA8E;IACxG,4DAA4D;IAC5D,OAAO,CAAC,OAAO,CAAM;IACrB,OAAO,CAAC,KAAK,CAAS;IACtB,mFAAmF;IACnF,OAAO,CAAC,UAAU,CAAS;;IAiB3B,oBAAoB;IAKpB,SAAS,CAAC,YAAY;IAItB,6DAA6D;IAC7D,iBAAiB;IAIjB,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAItC,oCAAoC;IACpC,IAAI,UAAU,IAAI,GAAG,CAEpB;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,UAAU,GAErB;IAED,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,aAAa,EAAE;IAI7C,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAgBlD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAa/C,uDAAuD;IACvD,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,UAAQ;IAQzC,oDAAoD;IACpD,aAAa;IAIb,+CAA+C;IAC/C,SAAS;IAIT,+CAA+C;IAC/C,SAAS;IAKT,6FAA6F;IAC7F,OAAO,KAAK,MAAM,GAIjB;IAED,OAAO,CAAC,SAAS,CAmBf;IAEF,OAAO,CAAC,OAAO,CAqBb;IAEF,8EAA8E;IAC9E,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,YAAY;IAyBpB,OAAO,CAAC,SAAS;IAkDjB,MAAM;IAkCN,OAAO,CAAC,WAAW;IAKnB,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,KAAK,GAEhB;IAED,yCAAyC;IACzC,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,IAAI,GAEf;IAED,8BAA8B;IAC9B,IAAI;IAwBJ,kFAAkF;IAClF,IAAI,CAAC,OAAO,UAAO;YAeL,cAAc;IAO5B,8GAA8G;IAC9G,OAAO,CAAC,KAAK,CAkBX;IAEF,OAAO,CAAC,SAAS,CAEf;IAEF,OAAO,CAAC,MAAM,CAIZ;IAEF,OAAO,CAAC,YAAY,CAQlB;IAEF,OAAO,CAAC,UAAU,CAMhB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,qCAAqC;IACrC,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,KAAK;IAIb;;;OAGG;IACH,OAAO,CAAC,MAAM,CAWZ;IAEF,+EAA+E;IAC/E,OAAO,CAAC,KAAK;IAqBb,OAAO,CAAC,KAAK;IAOb,OAAO,CAAC,OAAO,CAKb;IAEF,sEAAsE;IACtE,OAAO,CAAC,SAAS,CAIf;IAEF,OAAO,CAAC,KAAK,CAGX;IAEF,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,SAAS;IAIjB,sGAAsG;IACtG,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,SAAS;IA4BjB,OAAO,CAAC,YAAY;CA2DrB;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,QAAQ,CAAC;KACzB;CACF"}