@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.15

package/dist/3-unit/ds-calendar-large.js

@@ -0,0 +1,305 @@
+// ds-calendar-large.ts
+// Months side by side as squares: a week to a column, the seven days down it,
+// drawn one and a half times the grid (a square of 30px, lines of 1.5px)
+// inside a rounded frame that scrolls sideways. A day on which something
+// happens is filled with its colour, split into bands when several share it;
+// a date is written only on today and where an event starts or ends.
+import { html, nothing, unsafeCSS } from "lit";
+import { define } from "../0-face/define";
+import { addDays, addMonths, dateNumber, eventsByDay, monthName, monthTitle, startOfMonth, weekdayNames, weekdayOf, } from "../0-face/calendar";
+import { CalendarBase, readMonth } from "./calendar-base";
+import "../2-core/ds-icon";
+import metrics from "../1-root/component-metrics.css?inline";
+import controls from "../1-root/controls.css?inline";
+import styles from "./styles/ds-calendar-large.css?inline";
+export * from "./calendar-base";
+/** The fill for a day: one colour, or bands side by side. */
+function fillOf(events) {
+    if (!events.length)
+        return undefined;
+    const colours = [...new Set(events.map(event => event.color || "var(--ds-calendar-event-fill)"))];
+    if (colours.length === 1)
+        return colours[0];
+    const share = 100 / colours.length;
+    return `linear-gradient(90deg, ${colours.map((colour, index) => `${colour} ${index * share}% ${(index + 1) * share}%`).join(", ")})`;
+}
+/**
+ * @element ds-calendar-large
+ * @prop {string} start - The first month drawn, `YYYY-MM`; the month before
+ *   today's by default.
+ * @prop {number} months - How many months are drawn: 6 by default.
+ * @prop {number} scale - How many times the grid it is drawn: 1.5 by default.
+ * @prop {string} value - The selected day, `YYYY-MM-DD`.
+ * @prop {boolean} selectable - Pressing a day selects it and fires `change`.
+ * @prop {boolean} noHeader - Leave out the title and arrows (`no-header`).
+ * @prop {string} min - The first day a person may choose.
+ * @prop {string} max - The last day a person may choose.
+ * @prop {string} weekStart - The week's first day (`week-start`); the
+ *   language's own by default.
+ * @prop {string} today - The day drawn as today; the reader's own by default.
+ * @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 }`.
+ * @fires change - A person selected a day; `{ value, previous }`.
+ * @fires navigate - The months drawn moved on or back; `{ month }`, the first one.
+ *
+ * @example
+ * <ds-calendar-large start="2026-09" months="6"></ds-calendar-large>
+ */
+export class CalendarLarge extends CalendarBase {
+    constructor() {
+        super();
+        this.weeksRun = "columns";
+        this.byDay = new Map();
+        this.placed = false;
+        this.frame = 0;
+        this.onScroll = () => {
+            cancelAnimationFrame(this.frame);
+            this.frame = requestAnimationFrame(() => {
+                const scroller = this.scroller;
+                const cell = scroller?.querySelector(".cell")?.getBoundingClientRect().width;
+                if (!scroller || !cell)
+                    return;
+                const column = Math.min(this.weekStarts.length - 1, Math.max(0, Math.round(Math.abs(scroller.scrollLeft) / cell)));
+                // The month that owns most of the first week in view.
+                this.visible = startOfMonth(addDays(this.weekStarts[column], 3));
+            });
+        };
+        this.onKeyDown = (event) => {
+            const cell = event.target.closest("[data-day]");
+            if (!cell)
+                return;
+            const day = cell.dataset.day;
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                this.press(day);
+                return;
+            }
+            const target = this.keyTarget(event, day);
+            if (!target)
+                return;
+            event.preventDefault();
+            if (target < this.weekStarts[0] || target > this.lastDay) {
+                const by = target < this.weekStarts[0] ? -1 : 1;
+                const first = addMonths(this.firstMonth, by);
+                this.start = first.slice(0, 7);
+                this.announceMonth(first);
+            }
+            void this.focusCell(target);
+        };
+        this.onClick = (event) => {
+            const cell = event.composedPath().find(node => node instanceof HTMLElement && node.dataset?.day);
+            if (!cell)
+                return;
+            const day = cell.dataset.day;
+            this.focusDay = day;
+            this.press(day);
+        };
+        this.noHeader = false;
+    }
+    /** The first of the first month drawn. */
+    get firstMonth() {
+        return readMonth(this.start) ?? addMonths(startOfMonth(this.todayDay), -1);
+    }
+    get monthCount() {
+        const count = this.months;
+        return typeof count === "number" && Number.isFinite(count) ? Math.max(1, Math.min(36, Math.floor(count))) : 6;
+    }
+    /** The first day of each week drawn, from the week holding the first month's first day. */
+    get weekStarts() {
+        const first = this.firstMonth;
+        const from = addDays(first, -((weekdayOf(first) - this.firstDay + 7) % 7));
+        const last = addDays(addMonths(first, this.monthCount), -1);
+        const weeks = [];
+        for (let day = from; day <= last; day = addDays(day, 7))
+            weeks.push(day);
+        return weeks;
+    }
+    get lastDay() {
+        return addDays(this.weekStarts.at(-1), 6);
+    }
+    eventsOn(day) {
+        return this.byDay.get(day) ?? [];
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        const scale = typeof this.scale === "number" && Number.isFinite(this.scale) && this.scale > 0 ? this.scale : 1.5;
+        this.style.setProperty("--ds-calendar-scale", String(scale));
+    }
+    firstUpdated() {
+        // Open on today's month when it is drawn, else on the first.
+        const today = this.todayDay;
+        this.scrollToDay(today >= this.weekStarts[0] && today <= this.lastDay ? startOfMonth(today) : this.firstMonth, false);
+        this.placed = true;
+    }
+    disconnectedCallback() {
+        cancelAnimationFrame(this.frame);
+        super.disconnectedCallback();
+    }
+    get scroller() {
+        return this.renderRoot.querySelector(".scroller");
+    }
+    columnOf(day) {
+        return this.weekStarts.findIndex(start => day >= start && day <= addDays(start, 6));
+    }
+    /** Scrolls the week holding `day` to the start of the view. */
+    scrollToDay(day, smooth = true) {
+        const scroller = this.scroller;
+        const column = this.columnOf(day);
+        if (!scroller || column < 0)
+            return;
+        const cell = scroller.querySelector(".cell")?.getBoundingClientRect().width ?? 30;
+        const reduce = matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        const rtl = getComputedStyle(this).direction === "rtl";
+        scroller.scrollTo({ left: (rtl ? -1 : 1) * column * cell, behavior: smooth && !reduce ? "smooth" : "auto" });
+        this.visible = startOfMonth(day);
+    }
+    /** Moves the view a month back or on; past the months drawn, the months move with it. */
+    step(by) {
+        const target = addMonths(this.visible ?? this.firstMonth, by);
+        const first = this.firstMonth;
+        const end = addMonths(first, this.monthCount);
+        if (target < first || target >= end) {
+            this.start = addMonths(first, by).slice(0, 7);
+            this.announceMonth(addMonths(first, by));
+            void this.updateComplete.then(() => this.scrollToDay(target, false));
+            return;
+        }
+        this.scrollToDay(target);
+    }
+    /** The month before, as the previous arrow does. */
+    previousMonth() { this.step(-1); }
+    /** The month after, as the next arrow does. */
+    nextMonth() { this.step(1); }
+    /** Brings today into view, moving the months drawn when it is outside them. */
+    showToday() {
+        const today = this.todayDay;
+        if (today < this.weekStarts[0] || today > this.lastDay) {
+            const first = addMonths(startOfMonth(today), -1);
+            this.start = first.slice(0, 7);
+            this.announceMonth(first);
+            void this.updateComplete.then(() => this.scrollToDay(startOfMonth(today), false));
+        }
+        else {
+            this.scrollToDay(startOfMonth(today));
+        }
+        this.focusDay = today;
+    }
+    get tabDay() {
+        const first = this.weekStarts[0], last = this.lastDay;
+        for (const day of [this.focusDay, this.chosen.start, this.todayDay])
+            if (day && day >= first && day <= last)
+                return day;
+        return this.firstMonth;
+    }
+    renderHeader() {
+        if (this.noHeader)
+            return nothing;
+        const arrow = (which) => html `<button
+      class="ds-button ds-button--icon nav"
+      part=${which}
+      type="button"
+      aria-label=${this.words(which === "previous" ? "Previous month" : "Next month")}
+      @click=${() => (which === "previous" ? this.previousMonth() : this.nextMonth())}
+    ><ds-icon type=${which === "previous" ? "chevron-left" : "chevron-right"} size="large" aria-hidden="true"></ds-icon></button>`;
+        return html `<div class="header" part="header">
+      <span class="title" aria-live="polite">${monthTitle(this.visible ?? this.firstMonth)}</span>
+      <span class="controls">
+        ${arrow("previous")}
+        <button class="ds-button ds-button--secondary" part="today" type="button" @click=${() => this.showToday()}>${this.words("Today")}</button>
+        ${arrow("next")}
+      </span>
+    </div>`;
+    }
+    render() {
+        const weeks = this.weekStarts;
+        const first = weeks[0], last = this.lastDay;
+        this.byDay = eventsByDay(this.events ?? [], first, last);
+        const short = weekdayNames(this.firstDay, "short");
+        const narrow = weekdayNames(this.firstDay, "narrow");
+        const long = weekdayNames(this.firstDay, "long");
+        const today = this.todayDay;
+        const tab = this.tabDay;
+        // Each month's name stands over the week holding its first day.
+        const labels = [];
+        for (let month = this.firstMonth, index = 0; index < this.monthCount; index++, month = addMonths(month, 1)) {
+            const column = this.columnOf(month);
+            const next = this.columnOf(addMonths(month, 1));
+            labels.push({ column, span: Math.max(1, (next < 0 ? weeks.length : next) - column), day: month });
+        }
+        const ends = new Set();
+        for (const event of this.events ?? []) {
+            ends.add(event.start);
+            if (event.end)
+                ends.add(event.end);
+        }
+        return html `<div class="calendar" part="calendar" style=${`--ds-calendar-weeks: ${weeks.length}`}>
+      ${this.renderHeader()}
+      <div class="body">
+        <div class="rail" part="weekdays" aria-hidden="true">
+          ${short.map((name, row) => html `<span class="weekday" data-narrow=${narrow[row]}>${row % 2 === 1 ? name : ""}</span>`)}
+        </div>
+        <div class="scroller" part="scroller" @scroll=${this.onScroll}>
+          <div class="months" aria-hidden="true">
+            ${labels.map(({ column, span, day }) => html `<span class="month" style=${`grid-column: ${column + 1} / span ${span}`}>${day.slice(5, 7) === "01" || day === this.firstMonth ? monthTitle(day, "short") : monthName(day, "short")}</span>`)}
+          </div>
+          <div class="frame" part="frame">
+            <div
+              class="grid"
+              part="grid"
+              role="grid"
+              aria-label=${this.nameOr(`${monthTitle(this.firstMonth)} – ${monthTitle(addMonths(this.firstMonth, this.monthCount - 1))}`)}
+              @keydown=${this.onKeyDown}
+              @click=${this.onClick}
+            >
+              ${short.map((_, row) => html `<div role="row" class="row">
+                <span role="rowheader" class="hidden">${long[row]}</span>
+                ${weeks.map((start, column) => {
+            const day = addDays(start, row);
+            const events = this.eventsOn(day);
+            const isToday = day === today;
+            const { selected, inside } = this.selection(day);
+            const written = isToday || selected || (events.length > 0 && ends.has(day));
+            const fill = fillOf(events);
+            return html `<div
+                    role="gridcell"
+                    class="cell"
+                    part=${["cell", isToday ? "today" : "", selected ? "selected" : "", events.length ? "filled" : ""].filter(Boolean).join(" ")}
+                    data-day=${day}
+                    tabindex=${day === tab ? 0 : -1}
+                    aria-label=${this.cellLabel(day, events)}
+                    aria-selected=${this.selectable ? String(selected || inside) : nothing}
+                    aria-current=${isToday ? "date" : nothing}
+                    aria-disabled=${this.allowed(day) ? nothing : "true"}
+                    ?data-today=${isToday}
+                    ?data-selected=${selected}
+                    ?data-inside=${inside}
+                    ?data-filled=${events.length > 0}
+                    ?data-first-row=${row === 0}
+                    ?data-first-column=${column === 0}
+                    style=${`grid-row: ${row + 1}; grid-column: ${column + 1};${fill ? ` --ds-calendar-cell-fill: ${fill};` : ""}`}
+                  >${written ? html `<span class="date" aria-hidden="true">${dateNumber(day)}</span>` : nothing}</div>`;
+        })}
+              </div>`)}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>`;
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (this.placed && changed.has("start") && this.visible && !this.focusDay)
+            this.scrollToDay(this.visible, false);
+    }
+}
+CalendarLarge.properties = {
+    ...CalendarBase.properties,
+    start: { type: String, reflect: true },
+    months: { type: Number },
+    scale: { type: Number },
+    noHeader: { type: Boolean, attribute: "no-header", reflect: true },
+    visible: { state: true },
+};
+CalendarLarge.styles = [unsafeCSS(metrics), unsafeCSS(controls), unsafeCSS(styles)];
+define("ds-calendar-large", CalendarLarge);

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

@@ -0,0 +1,175 @@
+import { type PropertyValues } from "lit";
+import { type CalendarEvent, type Day } from "../0-face/calendar";
+import { CalendarBase } from "./calendar-base";
+import "../2-core/ds-icon";
+export * from "./calendar-base";
+/**
+ * @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 {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
+ *   when compact.
+ * @prop {number} lines - Lines of events under a day's date: 2 by default.
+ * @prop {boolean} weekNumbers - Write the week's number (`week-numbers`) on
+ *   its first day.
+ * @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.
+ * @prop {string} max - The last day a person may choose.
+ * @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 {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 event-press - An event was pressed; `{ event, day }`.
+ * @fires navigate - A person moved to another month; `{ month }`.
+ *
+ * @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>
+ */
+export declare class Calendar extends CalendarBase {
+    static properties: {
+        month: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        compact: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        dayWidth: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        lines: {
+            type: NumberConstructor;
+        };
+        weekNumbers: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        fixed: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        outsideDays: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        noHeader: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        noToday: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        open: {
+            state: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        min: {
+            type: StringConstructor;
+        };
+        max: {
+            type: StringConstructor;
+        };
+        today: {
+            type: StringConstructor;
+        };
+        weekStart: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        selectable: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        range: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        literal: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        events: {
+            attribute: boolean;
+        };
+        focusDay: {
+            state: boolean;
+        };
+        hoverDay: {
+            state: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult[];
+    month: string | undefined;
+    compact: boolean;
+    dayWidth: number | undefined;
+    lines: number | undefined;
+    weekNumbers: boolean;
+    fixed: boolean;
+    outsideDays: boolean;
+    noHeader: boolean;
+    noToday: boolean;
+    /** The day whose hidden events are unfolded. */
+    open: Day | undefined;
+    protected readonly weeksRun: "rows";
+    private byDay;
+    constructor();
+    /** 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;
+    /** Shows another month and says so with `navigate`. */
+    showMonth(month: string, announce?: boolean): void;
+    /** The month before, as the previous arrow does. */
+    previousMonth(): void;
+    /** The month after, as the next arrow does. */
+    nextMonth(): void;
+    /** Today's month, as the Today button does. */
+    showToday(): void;
+    /** The day holding the Tab stop: the one moved to, the selected day, today, or the first. */
+    private get tabDay();
+    private onKeyDown;
+    private onClick;
+    /** While a range waits for its end, the day under the pointer previews it. */
+    private onPointerOver;
+    private onFocusOut;
+    private renderHeader;
+    private renderDay;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-calendar": Calendar;
+    }
+}
+//# sourceMappingURL=ds-calendar.d.ts.map

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

@@ -0,0 +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"}