@fieldia/calendar 0.0.0-stage → 0.23.0

package/src/lib/move-to.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.placeUnder = placeUnder;
+exports.moveTo = moveTo;
+const dates_1 = require("./dates");
+const events_1 = require("./events");
+const labels_1 = require("./labels");
+/** How far Move to… reaches, in years either side of the record's own day: a year typed short (26) or long (2062) is caught. */
+const YEARS = 10;
+/** A small box of the calendar's own (Move to…, a crowded slot's list) put under what opened it, kept inside the calendar. */
+function placeUnder(cal, box, under) {
+    cal.element.append(box);
+    const room = cal.element.getBoundingClientRect();
+    const mark = under.getBoundingClientRect();
+    box.style.top = `${Math.max(0, mark.bottom - room.top + 4)}px`;
+    box.style.insetInlineStart = `${Math.max(8, Math.min(cal.rtl() ? room.right - mark.right : mark.left - room.left, room.width - 328))}px`;
+    box.scrollIntoView?.({ block: 'nearest' });
+}
+/**
+ * "Move to…", the keyboard's way to move a record and a phone's: a small
+ * dialog under the record with its day, its time and its person, kept inside
+ * the calendar. Move writes it as a drag does, with Undo; Escape, Cancel or a
+ * press outside closes it, the focus back on the record. A day that is no
+ * day, or one more than ten years from the record's, is refused in words.
+ */
+function moveTo(cal) {
+    let box = null;
+    const outside = (e) => {
+        if (box && !box.contains(e.target))
+            close();
+    };
+    function close(back) {
+        box?.remove();
+        box = null;
+        cal.doc.removeEventListener('pointerdown', outside, true);
+        back?.focus();
+    }
+    function open(event, block) {
+        close();
+        const { body, labels, make, page, spec } = cal;
+        /** The record again, as it was: its block, or the one drawn in its place, else wherever the record is now. */
+        const again = () => (block.isConnected ? block : (body.querySelector(`[data-focus="${block.dataset['focus']}"]`) ?? cal.place(event.id, event.start)));
+        const heading = make('h3', { class: 'fd-cal-move-title', id: `${cal.id}-move` }, (0, labels_1.fill)(labels.moveTitle, { name: event.title }));
+        // The days it may go to, which a browser's own picker keeps to as well.
+        const [first, last] = [-YEARS, YEARS].map((by) => {
+            const d = new Date(event.start);
+            d.setFullYear(d.getFullYear() + by);
+            return d;
+        });
+        const day = make('input', { type: 'date', class: 'fd-input', min: (0, dates_1.dayKey)(first), max: (0, dates_1.dayKey)(last) });
+        day.value = (0, dates_1.dayKey)(event.start);
+        const at = make('input', { type: 'time', class: 'fd-input', step: String(cal.slot * 60) });
+        at.value = `${String(event.start.getHours()).padStart(2, '0')}:${String(event.start.getMinutes()).padStart(2, '0')}`;
+        const who = make('select', { class: 'fd-input fd-select' });
+        const people = cal.state.resources.filter((r) => !!r);
+        for (const person of people)
+            who.append(make('option', { value: person.key }, person.label));
+        who.value = event.resource ?? '';
+        const moveButton = make('button', { type: 'button', class: 'fd-button fd-button-primary' }, labels.move);
+        const cancel = make('button', { type: 'button', class: 'fd-button' }, labels.cancel);
+        const problem = make('p', { class: 'fd-cal-move-problem', id: `${cal.id}-move-problem`, role: 'alert' });
+        const rows = [heading, make('label', {}, labels.moveDay, day)];
+        if (!event.allDay)
+            rows.push(make('label', {}, labels.moveTime, at));
+        if (spec.resource && people.length)
+            rows.push(make('label', {}, page.fields[spec.resource]?.label ?? '', who));
+        rows.push(problem, make('div', { class: 'fd-cal-move-actions' }, cancel, moveButton));
+        const opened = make('div', { class: 'fd-cal-move', role: 'dialog', 'aria-labelledby': heading.id }, ...rows);
+        box = opened;
+        placeUnder(cal, opened, block);
+        day.focus();
+        /** Said what is wrong, under the box it is wrong in, and the keys back in that box. */
+        const refuse = (input, words) => {
+            for (const one of [day, at]) {
+                one.removeAttribute('aria-invalid');
+                one.removeAttribute('aria-describedby');
+            }
+            problem.textContent = words;
+            input.setAttribute('aria-invalid', 'true');
+            input.setAttribute('aria-describedby', problem.id);
+            input.focus();
+        };
+        const apply = () => {
+            const when = (0, dates_1.readDay)(day.value);
+            const shortDay = (d) => (0, dates_1.format)(cal.locale, { day: 'numeric', month: 'short', year: 'numeric' }).format(d);
+            if (!when || when < new Date(first.getFullYear(), first.getMonth(), first.getDate()) || when > last)
+                return refuse(day, (0, labels_1.fill)(labels.badDay, { from: shortDay(first), to: shortDay(last) }));
+            const time = /^(\d\d):(\d\d)/.exec(at.value);
+            if (!event.allDay && !time)
+                return refuse(at, labels.badTime);
+            const start = time && !event.allDay ? (0, dates_1.atMinutes)(when, Number(time[1]) * 60 + Number(time[2])) : when;
+            const person = people.find((p) => p.key === who.value);
+            const values = (0, events_1.moved)(event, start, spec, page, person ?? undefined);
+            close();
+            if (!Object.keys(values).length)
+                return again().focus();
+            void cal.commit(event, values, (0, labels_1.fill)(labels.moved, { name: event.title, when: (0, events_1.whereTo)(event, start, cal.locale) })).then((saved) => {
+                // Where the record now is (its new day, when shown), or the bar's step toward that day; as it was, when refused.
+                // Unless the person has gone on somewhere else meanwhile.
+                const active = cal.doc.activeElement;
+                if (!active || active === cal.doc.body)
+                    (saved ? cal.place(event.id, start) : again()).focus();
+            });
+        };
+        moveButton.addEventListener('click', apply);
+        cancel.addEventListener('click', () => close(again()));
+        opened.addEventListener('keydown', (k) => {
+            if (k.key === 'Escape') {
+                k.preventDefault();
+                k.stopPropagation();
+                close(again());
+            }
+            else if (k.key === 'Enter' && k.target.tagName === 'INPUT') {
+                k.preventDefault();
+                apply();
+            }
+        });
+        cal.doc.addEventListener('pointerdown', outside, true);
+    }
+    return { open, close };
+}
+//# sourceMappingURL=move-to.js.map

package/src/lib/move-to.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"move-to.js","sourceRoot":"","sources":["../../../../../libs/calendar/src/lib/move-to.ts"],"names":[],"mappings":"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"}

package/src/lib/move-to.mjs

@@ -0,0 +1,118 @@
+import { atMinutes, dayKey, format, readDay } from './dates.mjs';
+import { moved, whereTo } from './events.mjs';
+import { fill } from './labels.mjs';
+/** How far Move to… reaches, in years either side of the record's own day: a year typed short (26) or long (2062) is caught. */
+const YEARS = 10;
+/** A small box of the calendar's own (Move to…, a crowded slot's list) put under what opened it, kept inside the calendar. */
+export function placeUnder(cal, box, under) {
+    cal.element.append(box);
+    const room = cal.element.getBoundingClientRect();
+    const mark = under.getBoundingClientRect();
+    box.style.top = `${Math.max(0, mark.bottom - room.top + 4)}px`;
+    box.style.insetInlineStart = `${Math.max(8, Math.min(cal.rtl() ? room.right - mark.right : mark.left - room.left, room.width - 328))}px`;
+    box.scrollIntoView?.({ block: 'nearest' });
+}
+/**
+ * "Move to…", the keyboard's way to move a record and a phone's: a small
+ * dialog under the record with its day, its time and its person, kept inside
+ * the calendar. Move writes it as a drag does, with Undo; Escape, Cancel or a
+ * press outside closes it, the focus back on the record. A day that is no
+ * day, or one more than ten years from the record's, is refused in words.
+ */
+export function moveTo(cal) {
+    let box = null;
+    const outside = (e) => {
+        if (box && !box.contains(e.target))
+            close();
+    };
+    function close(back) {
+        box?.remove();
+        box = null;
+        cal.doc.removeEventListener('pointerdown', outside, true);
+        back?.focus();
+    }
+    function open(event, block) {
+        close();
+        const { body, labels, make, page, spec } = cal;
+        /** The record again, as it was: its block, or the one drawn in its place, else wherever the record is now. */
+        const again = () => (block.isConnected ? block : (body.querySelector(`[data-focus="${block.dataset['focus']}"]`) ?? cal.place(event.id, event.start)));
+        const heading = make('h3', { class: 'fd-cal-move-title', id: `${cal.id}-move` }, fill(labels.moveTitle, { name: event.title }));
+        // The days it may go to, which a browser's own picker keeps to as well.
+        const [first, last] = [-YEARS, YEARS].map((by) => {
+            const d = new Date(event.start);
+            d.setFullYear(d.getFullYear() + by);
+            return d;
+        });
+        const day = make('input', { type: 'date', class: 'fd-input', min: dayKey(first), max: dayKey(last) });
+        day.value = dayKey(event.start);
+        const at = make('input', { type: 'time', class: 'fd-input', step: String(cal.slot * 60) });
+        at.value = `${String(event.start.getHours()).padStart(2, '0')}:${String(event.start.getMinutes()).padStart(2, '0')}`;
+        const who = make('select', { class: 'fd-input fd-select' });
+        const people = cal.state.resources.filter((r) => !!r);
+        for (const person of people)
+            who.append(make('option', { value: person.key }, person.label));
+        who.value = event.resource ?? '';
+        const moveButton = make('button', { type: 'button', class: 'fd-button fd-button-primary' }, labels.move);
+        const cancel = make('button', { type: 'button', class: 'fd-button' }, labels.cancel);
+        const problem = make('p', { class: 'fd-cal-move-problem', id: `${cal.id}-move-problem`, role: 'alert' });
+        const rows = [heading, make('label', {}, labels.moveDay, day)];
+        if (!event.allDay)
+            rows.push(make('label', {}, labels.moveTime, at));
+        if (spec.resource && people.length)
+            rows.push(make('label', {}, page.fields[spec.resource]?.label ?? '', who));
+        rows.push(problem, make('div', { class: 'fd-cal-move-actions' }, cancel, moveButton));
+        const opened = make('div', { class: 'fd-cal-move', role: 'dialog', 'aria-labelledby': heading.id }, ...rows);
+        box = opened;
+        placeUnder(cal, opened, block);
+        day.focus();
+        /** Said what is wrong, under the box it is wrong in, and the keys back in that box. */
+        const refuse = (input, words) => {
+            for (const one of [day, at]) {
+                one.removeAttribute('aria-invalid');
+                one.removeAttribute('aria-describedby');
+            }
+            problem.textContent = words;
+            input.setAttribute('aria-invalid', 'true');
+            input.setAttribute('aria-describedby', problem.id);
+            input.focus();
+        };
+        const apply = () => {
+            const when = readDay(day.value);
+            const shortDay = (d) => format(cal.locale, { day: 'numeric', month: 'short', year: 'numeric' }).format(d);
+            if (!when || when < new Date(first.getFullYear(), first.getMonth(), first.getDate()) || when > last)
+                return refuse(day, fill(labels.badDay, { from: shortDay(first), to: shortDay(last) }));
+            const time = /^(\d\d):(\d\d)/.exec(at.value);
+            if (!event.allDay && !time)
+                return refuse(at, labels.badTime);
+            const start = time && !event.allDay ? atMinutes(when, Number(time[1]) * 60 + Number(time[2])) : when;
+            const person = people.find((p) => p.key === who.value);
+            const values = moved(event, start, spec, page, person ?? undefined);
+            close();
+            if (!Object.keys(values).length)
+                return again().focus();
+            void cal.commit(event, values, fill(labels.moved, { name: event.title, when: whereTo(event, start, cal.locale) })).then((saved) => {
+                // Where the record now is (its new day, when shown), or the bar's step toward that day; as it was, when refused.
+                // Unless the person has gone on somewhere else meanwhile.
+                const active = cal.doc.activeElement;
+                if (!active || active === cal.doc.body)
+                    (saved ? cal.place(event.id, start) : again()).focus();
+            });
+        };
+        moveButton.addEventListener('click', apply);
+        cancel.addEventListener('click', () => close(again()));
+        opened.addEventListener('keydown', (k) => {
+            if (k.key === 'Escape') {
+                k.preventDefault();
+                k.stopPropagation();
+                close(again());
+            }
+            else if (k.key === 'Enter' && k.target.tagName === 'INPUT') {
+                k.preventDefault();
+                apply();
+            }
+        });
+        cal.doc.addEventListener('pointerdown', outside, true);
+    }
+    return { open, close };
+}
+//# sourceMappingURL=move-to.mjs.map

package/src/lib/move-to.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"move-to.mjs","sourceRoot":"","sources":["../../../../../libs/calendar/src/lib/move-to.ts"],"names":[],"mappings":"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"}

package/src/lib/settings.d.mts

@@ -0,0 +1,11 @@
+import type { Locale } from '@fieldia/core';
+import type { CalendarLabels } from './labels.mjs';
+/** How an app's calendars behave, for `calendarListViews`. */
+export interface CalendarSettings {
+    /** Words over the calendar's own, by language: `{ ar: { today: 'النهارده' } }`. */
+    labels?: Partial<Record<Locale, Partial<CalendarLabels>>>;
+    /** The moment it is now: the clock unless given, as a demo or a test pinned to a day gives it. */
+    now?: () => Date;
+    /** How many records a span asks for at most: 500 unless said. Past it, the calendar says how many it leaves out. */
+    limit?: number;
+}

package/src/lib/settings.d.ts

@@ -0,0 +1,11 @@
+import type { Locale } from '@fieldia/core';
+import type { CalendarLabels } from './labels';
+/** How an app's calendars behave, for `calendarListViews`. */
+export interface CalendarSettings {
+    /** Words over the calendar's own, by language: `{ ar: { today: 'النهارده' } }`. */
+    labels?: Partial<Record<Locale, Partial<CalendarLabels>>>;
+    /** The moment it is now: the clock unless given, as a demo or a test pinned to a day gives it. */
+    now?: () => Date;
+    /** How many records a span asks for at most: 500 unless said. Past it, the calendar says how many it leaves out. */
+    limit?: number;
+}

package/src/lib/settings.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=settings.js.map

package/src/lib/settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.js","sourceRoot":"","sources":["../../../../../libs/calendar/src/lib/settings.ts"],"names":[],"mappings":""}

package/src/lib/settings.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=settings.mjs.map

package/src/lib/settings.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.mjs","sourceRoot":"","sources":["../../../../../libs/calendar/src/lib/settings.ts"],"names":[],"mappings":""}

package/src/lib/styles.d.mts

@@ -0,0 +1,9 @@
+/**
+ * A list's calendar in Fieldia's tokens, so a theme, a host's own tokens and
+ * the dark scheme reach it: each record a tint of the surface with a bar in
+ * its colour, which reads on a light page and a dark one alike. Logical
+ * sides throughout, so right to left needs nothing of its own but the arrows.
+ */
+export declare const CALENDAR_CSS = "\n.fd-cal { position: relative; display: grid; gap: 10px; min-width: 0; color: var(--fd-text); container: fd-cal / inline-size; --fd-cal-hour: 48px; }\n.fd-cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }\n.fd-cal-nav { display: inline-flex; gap: 4px; align-items: center; }\n.fd-cal .fd-button { min-height: 32px; }\n.fd-cal-step { min-width: 32px; padding-inline: 6px; display: inline-grid; place-items: center; }\n.fd-cal-step svg { width: 16px; height: 16px; }\n.fd-cal-step:dir(rtl) svg { transform: scaleX(-1); }\n.fd-cal-title { margin: 0; flex: 1 1 12em; min-width: 0; font-size: 1.05rem; font-weight: 600; }\n.fd-cal-ranges { display: inline-flex; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); overflow: hidden; }\n.fd-cal-ranges .fd-button { border: 0; border-radius: 0; padding-inline: 10px; }\n.fd-cal-ranges .fd-button + .fd-button { border-inline-start: 1px solid var(--fd-border); }\n.fd-cal-ranges .fd-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); font-weight: 600; }\n.fd-cal-said:not(:empty), .fd-cal-alert:not(:empty) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 10px; border-radius: var(--fd-control-radius); font-size: 13.5px; }\n.fd-cal-said:not(:empty) { background: var(--fd-info-soft); color: var(--fd-text); }\n.fd-cal-alert:not(:empty) { background: var(--fd-error-soft); color: var(--fd-text); }\n.fd-cal-said .fd-button { min-height: 28px; }\n.fd-cal-note { margin: 0; color: var(--fd-muted); font-size: 13px; }\n.fd-cal-body { min-width: 0; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); overflow: hidden; }\n.fd-cal-body[aria-busy=\"true\"] { cursor: progress; }\n.fd-cal-failed { margin: 0; padding: 24px; text-align: center; }\n.fd-cal-empty { margin: 0; padding: 32px 16px; text-align: center; color: var(--fd-muted); }\n\n/* The day and the week: the hours down the side, a column for each day or each person. */\n.fd-cal-scroll { overflow-x: auto; }\n.fd-cal-grid { display: grid; grid-template-columns: 52px repeat(var(--fd-cal-cols), minmax(var(--fd-cal-min, 0px), 1fr)); min-width: min-content; }\n.fd-cal-corner, .fd-cal-head { box-sizing: border-box; padding: 6px 4px; border-bottom: 1px solid var(--fd-border); font-size: 12px; color: var(--fd-muted); text-align: center; min-width: 0; }\n.fd-cal-head { border-inline-start: 1px solid var(--fd-border); overflow-wrap: anywhere; }\n.fd-cal-head-day { display: inline-grid; justify-items: center; gap: 2px; border: 0; background: none; color: inherit; font: inherit; padding: 2px 6px; border-radius: var(--fd-control-radius); cursor: pointer; }\n.fd-cal-head-day:hover { background: var(--fd-accent-soft); }\n.fd-cal-head-day:focus-visible, .fd-cal-daynum:focus-visible, .fd-cal-more:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-cal-head-num { font-size: 18px; line-height: 28px; min-width: 28px; border-radius: 999px; color: var(--fd-text); }\n.fd-cal-head[aria-current=\"date\"] .fd-cal-head-num { background: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-cal-head-who { font-size: 13px; font-weight: 600; color: var(--fd-text); }\n.fd-cal-corner { font-size: 11px; display: grid; align-items: end; justify-items: end; padding-inline-end: 6px; }\n.fd-cal-allday { box-sizing: border-box; display: grid; align-content: start; gap: 2px; padding: 2px; min-height: 30px; min-width: 0; border-inline-start: 1px solid var(--fd-border); border-bottom: 1px solid var(--fd-border); }\n.fd-cal-allday[data-alone] { min-height: 240px; }\n.fd-cal-hours { position: relative; height: calc(var(--fd-cal-span) * var(--fd-cal-hour)); }\n.fd-cal-hour { position: absolute; inset-inline-end: 6px; transform: translateY(-50%); font-size: 11px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }\n.fd-cal-hour:first-child { transform: none; }\n.fd-cal-col {\n  position: relative; min-width: 0; border-inline-start: 1px solid var(--fd-border); height: calc(var(--fd-cal-span) * var(--fd-cal-hour));\n  background-image: repeating-linear-gradient(to bottom, var(--fd-border) 0 1px, transparent 1px calc(var(--fd-cal-hour) / 2), color-mix(in srgb, var(--fd-border) 50%, transparent) calc(var(--fd-cal-hour) / 2) calc(var(--fd-cal-hour) / 2 + 1px), transparent calc(var(--fd-cal-hour) / 2 + 1px) var(--fd-cal-hour));\n}\n.fd-cal-col[data-today] { background-color: color-mix(in srgb, var(--fd-accent) 4%, transparent); }\n.fd-cal-slot { box-sizing: border-box; height: calc(var(--fd-cal-hour) * var(--fd-cal-slot) / 60); }\n.fd-cal[data-creates] .fd-cal-slot, .fd-cal[data-creates] .fd-cal-allday, .fd-cal[data-creates] .fd-cal-day { cursor: cell; }\n.fd-cal-slot:focus { outline: none; }\n.fd-cal-slot:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; background: var(--fd-accent-soft); }\n.fd-cal-picking { position: absolute; inset-inline: 2px; z-index: 2; box-sizing: border-box; border: 1px dashed var(--fd-accent); border-radius: 4px; background: var(--fd-accent-soft); pointer-events: none; }\n/* Under the records, so a record's words are never struck through. */\n.fd-cal-now { position: absolute; inset-inline: 0; z-index: 0; height: 2px; margin-top: -1px; background: var(--fd-error); pointer-events: none; }\n.fd-cal-now::before { content: \"\"; position: absolute; inset-inline-start: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--fd-error); }\n\n/* A record: a tint of the surface, a bar in its colour. */\n.fd-cal-event {\n  --fd-cal-c: var(--fd-accent);\n  box-sizing: border-box; min-width: 0; overflow: hidden; padding: 2px 6px; border-radius: 4px; font-size: 12.5px; line-height: 1.3;\n  background: color-mix(in srgb, var(--fd-cal-c) 16%, var(--fd-surface)); color: var(--fd-text); border-inline-start: 3px solid var(--fd-cal-c);\n  cursor: default; user-select: none; -webkit-user-select: none;\n}\n.fd-cal-event[data-opens], .fd-cal-event[data-moves] { cursor: pointer; }\n.fd-cal-event:hover, .fd-cal-event.fd-cal-hot { background: color-mix(in srgb, var(--fd-cal-c) 26%, var(--fd-surface)); }\n.fd-cal-event:focus { outline: none; }\n.fd-cal-event:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; z-index: 3; }\n.fd-cal-col > .fd-cal-event { position: absolute; z-index: 1; box-shadow: 0 0 0 1px var(--fd-surface); line-height: 16px; container: fd-cal-ev / inline-size; }\n/* Its words in the whole lines its height holds (--fd-cal-lines, by linesIn): none cut through. */\n.fd-cal-col > .fd-cal-event > .fd-cal-event-text { display: block; max-height: calc(var(--fd-cal-lines, 1) * 16px); overflow: hidden; text-overflow: ellipsis; }\n/* Each word whole, a long one cut with \"\u2026\"; too narrow for its time, the name alone (the hours say when). */\n.fd-cal-col .fd-cal-event-title { overflow-wrap: normal; }\n.fd-cal-col .fd-cal-event-who { overflow: hidden; text-overflow: ellipsis; }\n@container fd-cal-ev (max-width: 56px) { .fd-cal-col .fd-cal-event-time, .fd-cal-col .fd-cal-event-who { display: none; } }\n.fd-cal-event[data-moving] { opacity: 0.9; z-index: 6; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); pointer-events: none; }\n.fd-cal-event[aria-busy=\"true\"] { opacity: 0.75; }\n.fd-cal-event-time { font-variant-numeric: tabular-nums; }\n.fd-cal-event-title { font-weight: 600; overflow-wrap: anywhere; text-align: match-parent; }\n.fd-cal-event-who { display: block; opacity: 0.85; }\n/* 24 pixels at least, so a finger or a pointer can hit each (WCAG 2.5.8). */\n.fd-cal-allday > .fd-cal-event, .fd-cal-day > .fd-cal-event { position: relative; min-height: 24px; box-sizing: border-box; line-height: 20px; white-space: nowrap; padding-inline-end: 24px; }\n.fd-cal-col > .fd-cal-event[data-short] .fd-cal-event-who { display: none; }\n/* One line (a short record, a month's day, all day): the name cut with \"\u2026\" at its own end, so a Latin one right to left\n   keeps its start; whole when pointed at, and to a screen reader. */\n.fd-cal-col > .fd-cal-event[data-short] > .fd-cal-event-text, .fd-cal-allday .fd-cal-event-text, .fd-cal-day .fd-cal-event-text { display: flex; gap: 0.3em; white-space: nowrap; }\n:is(.fd-cal-col > .fd-cal-event[data-short], .fd-cal-allday > .fd-cal-event, .fd-cal-day > .fd-cal-event) .fd-cal-event-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n.fd-cal-resize { position: absolute; inset-inline: 0; bottom: 0; height: 8px; cursor: ns-resize; touch-action: none; }\n.fd-cal-event-menu {\n  position: absolute; top: 0; inset-inline-end: 0; z-index: 2; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px;\n  display: none; place-items: center; background: var(--fd-surface); color: var(--fd-text); font: 700 14px/1 system-ui, sans-serif; cursor: pointer;\n}\n.fd-cal-event:hover > .fd-cal-event-menu, .fd-cal-event:focus-within > .fd-cal-event-menu, .fd-cal-event:focus > .fd-cal-event-menu { display: grid; }\n@media (hover: none) { .fd-cal-event-menu { display: grid; } }\n\n/* The month: whole weeks, each day its records, and how many more. */\n.fd-cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }\n.fd-cal-weekday { padding: 6px 4px; border-bottom: 1px solid var(--fd-border); font-size: 12px; color: var(--fd-muted); text-align: center; }\n.fd-cal-weekday + .fd-cal-weekday, .fd-cal-day:not(:nth-child(7n + 1)) { border-inline-start: 1px solid var(--fd-border); }\n.fd-cal-day { box-sizing: border-box; min-width: 0; min-height: 104px; padding: 3px; display: grid; align-content: start; gap: 2px; border-bottom: 1px solid var(--fd-border); }\n.fd-cal-day[data-out] { background: color-mix(in srgb, var(--fd-text) 3%, var(--fd-surface)); }\n.fd-cal-daynum { justify-self: start; min-width: 26px; height: 26px; padding: 0 6px; border: 0; border-radius: 999px; background: none; color: var(--fd-text); font: inherit; font-size: 12.5px; cursor: pointer; }\n.fd-cal-day[data-out] .fd-cal-daynum { color: var(--fd-muted); }\n.fd-cal-day[aria-current=\"date\"] .fd-cal-daynum { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n.fd-cal-more { justify-self: start; min-height: 24px; padding: 0 6px; border: 0; background: none; color: var(--fd-accent); font: inherit; font-size: 12px; cursor: pointer; }\n/* A crowded slot's \"+N more\", in the last lane over the records it holds. */\n.fd-cal-col > .fd-cal-more {\n  position: absolute; z-index: 1; box-sizing: border-box; display: block; padding: 3px 2px; line-height: 14px; text-align: center; overflow: hidden;\n  border-radius: 4px; border: 1px dashed color-mix(in srgb, var(--fd-accent) 55%, transparent); background: var(--fd-accent-soft); font-weight: 600;\n}\n.fd-cal-col > .fd-cal-more:hover { background: color-mix(in srgb, var(--fd-accent) 22%, var(--fd-surface)); }\n.fd-cal-day > .fd-cal-event .fd-cal-event-who { display: none; }\n\n/* The agenda: each day that has something, its records in order. */\n.fd-cal-agenda-day { display: grid; grid-template-columns: minmax(8em, 11em) minmax(0, 1fr); border-bottom: 1px solid var(--fd-border); }\n.fd-cal-agenda-day:last-child { border-bottom: 0; }\n.fd-cal-agenda-head { margin: 0; padding: 10px 12px; font-size: 13px; font-weight: 600; }\n.fd-cal-agenda-day[aria-current=\"date\"] .fd-cal-agenda-head { color: var(--fd-accent); }\n.fd-cal-agenda-list { list-style: none; margin: 0; padding: 6px 8px; display: grid; gap: 4px; min-width: 0; }\n.fd-cal-agenda-list .fd-cal-event { position: relative; padding: 0; font-size: 13.5px; }\n.fd-cal-event-open { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding-block: 8px; padding-inline: 10px 48px; border-radius: inherit; }\n.fd-cal-event[data-opens] .fd-cal-event-open { cursor: pointer; }\n.fd-cal-event-open:focus { outline: none; }\n.fd-cal-event-open:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-cal-agenda-list .fd-cal-event-who { grid-column: 2; }\n.fd-cal-agenda-list .fd-cal-event-menu { display: grid; top: 50%; transform: translateY(-50%); inset-inline-end: 6px; width: 36px; height: 36px; }\n.fd-cal-agenda-list .fd-cal-event-menu:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n@container fd-cal (max-width: 520px) {\n  .fd-cal-agenda-day { grid-template-columns: minmax(0, 1fr); }\n  .fd-cal-agenda-head { padding-bottom: 0; }\n  .fd-cal-title { flex-basis: 100%; order: -1; }\n}\n\n/* \"Move to\u2026\": its day, its time, its person; and a crowded slot's list, in the same kind of box. */\n.fd-cal-move, .fd-cal-crowd {\n  position: absolute; z-index: 30; box-sizing: border-box; width: min(320px, calc(100% - 16px)); padding: 14px; display: grid; gap: 10px;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: max(var(--fd-radius), 6px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);\n}\n.fd-cal-move-title { margin: 0; font-size: 14px; font-weight: 600; }\n.fd-cal-move label { display: grid; gap: 4px; font-size: 13px; }\n.fd-cal-move-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }\n.fd-cal-move-problem { margin: 0; color: var(--fd-error); font-size: 13px; }\n.fd-cal-move-problem:empty { display: none; }\n.fd-cal-move .fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-cal-crowd { padding: 10px; gap: 6px; }\n.fd-cal-crowd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline-start: 4px; }\n.fd-cal-crowd .fd-cal-agenda-list { padding: 0; max-height: min(60vh, 360px); overflow-y: auto; }\n";
+/** The calendar's stylesheet, once per document, before the page's own so an app's rule wins. */
+export declare function installCalendarStyles(doc: Document): void;

package/src/lib/styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A list's calendar in Fieldia's tokens, so a theme, a host's own tokens and
+ * the dark scheme reach it: each record a tint of the surface with a bar in
+ * its colour, which reads on a light page and a dark one alike. Logical
+ * sides throughout, so right to left needs nothing of its own but the arrows.
+ */
+export declare const CALENDAR_CSS = "\n.fd-cal { position: relative; display: grid; gap: 10px; min-width: 0; color: var(--fd-text); container: fd-cal / inline-size; --fd-cal-hour: 48px; }\n.fd-cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }\n.fd-cal-nav { display: inline-flex; gap: 4px; align-items: center; }\n.fd-cal .fd-button { min-height: 32px; }\n.fd-cal-step { min-width: 32px; padding-inline: 6px; display: inline-grid; place-items: center; }\n.fd-cal-step svg { width: 16px; height: 16px; }\n.fd-cal-step:dir(rtl) svg { transform: scaleX(-1); }\n.fd-cal-title { margin: 0; flex: 1 1 12em; min-width: 0; font-size: 1.05rem; font-weight: 600; }\n.fd-cal-ranges { display: inline-flex; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); overflow: hidden; }\n.fd-cal-ranges .fd-button { border: 0; border-radius: 0; padding-inline: 10px; }\n.fd-cal-ranges .fd-button + .fd-button { border-inline-start: 1px solid var(--fd-border); }\n.fd-cal-ranges .fd-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); font-weight: 600; }\n.fd-cal-said:not(:empty), .fd-cal-alert:not(:empty) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 10px; border-radius: var(--fd-control-radius); font-size: 13.5px; }\n.fd-cal-said:not(:empty) { background: var(--fd-info-soft); color: var(--fd-text); }\n.fd-cal-alert:not(:empty) { background: var(--fd-error-soft); color: var(--fd-text); }\n.fd-cal-said .fd-button { min-height: 28px; }\n.fd-cal-note { margin: 0; color: var(--fd-muted); font-size: 13px; }\n.fd-cal-body { min-width: 0; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); overflow: hidden; }\n.fd-cal-body[aria-busy=\"true\"] { cursor: progress; }\n.fd-cal-failed { margin: 0; padding: 24px; text-align: center; }\n.fd-cal-empty { margin: 0; padding: 32px 16px; text-align: center; color: var(--fd-muted); }\n\n/* The day and the week: the hours down the side, a column for each day or each person. */\n.fd-cal-scroll { overflow-x: auto; }\n.fd-cal-grid { display: grid; grid-template-columns: 52px repeat(var(--fd-cal-cols), minmax(var(--fd-cal-min, 0px), 1fr)); min-width: min-content; }\n.fd-cal-corner, .fd-cal-head { box-sizing: border-box; padding: 6px 4px; border-bottom: 1px solid var(--fd-border); font-size: 12px; color: var(--fd-muted); text-align: center; min-width: 0; }\n.fd-cal-head { border-inline-start: 1px solid var(--fd-border); overflow-wrap: anywhere; }\n.fd-cal-head-day { display: inline-grid; justify-items: center; gap: 2px; border: 0; background: none; color: inherit; font: inherit; padding: 2px 6px; border-radius: var(--fd-control-radius); cursor: pointer; }\n.fd-cal-head-day:hover { background: var(--fd-accent-soft); }\n.fd-cal-head-day:focus-visible, .fd-cal-daynum:focus-visible, .fd-cal-more:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-cal-head-num { font-size: 18px; line-height: 28px; min-width: 28px; border-radius: 999px; color: var(--fd-text); }\n.fd-cal-head[aria-current=\"date\"] .fd-cal-head-num { background: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-cal-head-who { font-size: 13px; font-weight: 600; color: var(--fd-text); }\n.fd-cal-corner { font-size: 11px; display: grid; align-items: end; justify-items: end; padding-inline-end: 6px; }\n.fd-cal-allday { box-sizing: border-box; display: grid; align-content: start; gap: 2px; padding: 2px; min-height: 30px; min-width: 0; border-inline-start: 1px solid var(--fd-border); border-bottom: 1px solid var(--fd-border); }\n.fd-cal-allday[data-alone] { min-height: 240px; }\n.fd-cal-hours { position: relative; height: calc(var(--fd-cal-span) * var(--fd-cal-hour)); }\n.fd-cal-hour { position: absolute; inset-inline-end: 6px; transform: translateY(-50%); font-size: 11px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }\n.fd-cal-hour:first-child { transform: none; }\n.fd-cal-col {\n  position: relative; min-width: 0; border-inline-start: 1px solid var(--fd-border); height: calc(var(--fd-cal-span) * var(--fd-cal-hour));\n  background-image: repeating-linear-gradient(to bottom, var(--fd-border) 0 1px, transparent 1px calc(var(--fd-cal-hour) / 2), color-mix(in srgb, var(--fd-border) 50%, transparent) calc(var(--fd-cal-hour) / 2) calc(var(--fd-cal-hour) / 2 + 1px), transparent calc(var(--fd-cal-hour) / 2 + 1px) var(--fd-cal-hour));\n}\n.fd-cal-col[data-today] { background-color: color-mix(in srgb, var(--fd-accent) 4%, transparent); }\n.fd-cal-slot { box-sizing: border-box; height: calc(var(--fd-cal-hour) * var(--fd-cal-slot) / 60); }\n.fd-cal[data-creates] .fd-cal-slot, .fd-cal[data-creates] .fd-cal-allday, .fd-cal[data-creates] .fd-cal-day { cursor: cell; }\n.fd-cal-slot:focus { outline: none; }\n.fd-cal-slot:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; background: var(--fd-accent-soft); }\n.fd-cal-picking { position: absolute; inset-inline: 2px; z-index: 2; box-sizing: border-box; border: 1px dashed var(--fd-accent); border-radius: 4px; background: var(--fd-accent-soft); pointer-events: none; }\n/* Under the records, so a record's words are never struck through. */\n.fd-cal-now { position: absolute; inset-inline: 0; z-index: 0; height: 2px; margin-top: -1px; background: var(--fd-error); pointer-events: none; }\n.fd-cal-now::before { content: \"\"; position: absolute; inset-inline-start: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--fd-error); }\n\n/* A record: a tint of the surface, a bar in its colour. */\n.fd-cal-event {\n  --fd-cal-c: var(--fd-accent);\n  box-sizing: border-box; min-width: 0; overflow: hidden; padding: 2px 6px; border-radius: 4px; font-size: 12.5px; line-height: 1.3;\n  background: color-mix(in srgb, var(--fd-cal-c) 16%, var(--fd-surface)); color: var(--fd-text); border-inline-start: 3px solid var(--fd-cal-c);\n  cursor: default; user-select: none; -webkit-user-select: none;\n}\n.fd-cal-event[data-opens], .fd-cal-event[data-moves] { cursor: pointer; }\n.fd-cal-event:hover, .fd-cal-event.fd-cal-hot { background: color-mix(in srgb, var(--fd-cal-c) 26%, var(--fd-surface)); }\n.fd-cal-event:focus { outline: none; }\n.fd-cal-event:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; z-index: 3; }\n.fd-cal-col > .fd-cal-event { position: absolute; z-index: 1; box-shadow: 0 0 0 1px var(--fd-surface); line-height: 16px; container: fd-cal-ev / inline-size; }\n/* Its words in the whole lines its height holds (--fd-cal-lines, by linesIn): none cut through. */\n.fd-cal-col > .fd-cal-event > .fd-cal-event-text { display: block; max-height: calc(var(--fd-cal-lines, 1) * 16px); overflow: hidden; text-overflow: ellipsis; }\n/* Each word whole, a long one cut with \"\u2026\"; too narrow for its time, the name alone (the hours say when). */\n.fd-cal-col .fd-cal-event-title { overflow-wrap: normal; }\n.fd-cal-col .fd-cal-event-who { overflow: hidden; text-overflow: ellipsis; }\n@container fd-cal-ev (max-width: 56px) { .fd-cal-col .fd-cal-event-time, .fd-cal-col .fd-cal-event-who { display: none; } }\n.fd-cal-event[data-moving] { opacity: 0.9; z-index: 6; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); pointer-events: none; }\n.fd-cal-event[aria-busy=\"true\"] { opacity: 0.75; }\n.fd-cal-event-time { font-variant-numeric: tabular-nums; }\n.fd-cal-event-title { font-weight: 600; overflow-wrap: anywhere; text-align: match-parent; }\n.fd-cal-event-who { display: block; opacity: 0.85; }\n/* 24 pixels at least, so a finger or a pointer can hit each (WCAG 2.5.8). */\n.fd-cal-allday > .fd-cal-event, .fd-cal-day > .fd-cal-event { position: relative; min-height: 24px; box-sizing: border-box; line-height: 20px; white-space: nowrap; padding-inline-end: 24px; }\n.fd-cal-col > .fd-cal-event[data-short] .fd-cal-event-who { display: none; }\n/* One line (a short record, a month's day, all day): the name cut with \"\u2026\" at its own end, so a Latin one right to left\n   keeps its start; whole when pointed at, and to a screen reader. */\n.fd-cal-col > .fd-cal-event[data-short] > .fd-cal-event-text, .fd-cal-allday .fd-cal-event-text, .fd-cal-day .fd-cal-event-text { display: flex; gap: 0.3em; white-space: nowrap; }\n:is(.fd-cal-col > .fd-cal-event[data-short], .fd-cal-allday > .fd-cal-event, .fd-cal-day > .fd-cal-event) .fd-cal-event-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n.fd-cal-resize { position: absolute; inset-inline: 0; bottom: 0; height: 8px; cursor: ns-resize; touch-action: none; }\n.fd-cal-event-menu {\n  position: absolute; top: 0; inset-inline-end: 0; z-index: 2; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px;\n  display: none; place-items: center; background: var(--fd-surface); color: var(--fd-text); font: 700 14px/1 system-ui, sans-serif; cursor: pointer;\n}\n.fd-cal-event:hover > .fd-cal-event-menu, .fd-cal-event:focus-within > .fd-cal-event-menu, .fd-cal-event:focus > .fd-cal-event-menu { display: grid; }\n@media (hover: none) { .fd-cal-event-menu { display: grid; } }\n\n/* The month: whole weeks, each day its records, and how many more. */\n.fd-cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }\n.fd-cal-weekday { padding: 6px 4px; border-bottom: 1px solid var(--fd-border); font-size: 12px; color: var(--fd-muted); text-align: center; }\n.fd-cal-weekday + .fd-cal-weekday, .fd-cal-day:not(:nth-child(7n + 1)) { border-inline-start: 1px solid var(--fd-border); }\n.fd-cal-day { box-sizing: border-box; min-width: 0; min-height: 104px; padding: 3px; display: grid; align-content: start; gap: 2px; border-bottom: 1px solid var(--fd-border); }\n.fd-cal-day[data-out] { background: color-mix(in srgb, var(--fd-text) 3%, var(--fd-surface)); }\n.fd-cal-daynum { justify-self: start; min-width: 26px; height: 26px; padding: 0 6px; border: 0; border-radius: 999px; background: none; color: var(--fd-text); font: inherit; font-size: 12.5px; cursor: pointer; }\n.fd-cal-day[data-out] .fd-cal-daynum { color: var(--fd-muted); }\n.fd-cal-day[aria-current=\"date\"] .fd-cal-daynum { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n.fd-cal-more { justify-self: start; min-height: 24px; padding: 0 6px; border: 0; background: none; color: var(--fd-accent); font: inherit; font-size: 12px; cursor: pointer; }\n/* A crowded slot's \"+N more\", in the last lane over the records it holds. */\n.fd-cal-col > .fd-cal-more {\n  position: absolute; z-index: 1; box-sizing: border-box; display: block; padding: 3px 2px; line-height: 14px; text-align: center; overflow: hidden;\n  border-radius: 4px; border: 1px dashed color-mix(in srgb, var(--fd-accent) 55%, transparent); background: var(--fd-accent-soft); font-weight: 600;\n}\n.fd-cal-col > .fd-cal-more:hover { background: color-mix(in srgb, var(--fd-accent) 22%, var(--fd-surface)); }\n.fd-cal-day > .fd-cal-event .fd-cal-event-who { display: none; }\n\n/* The agenda: each day that has something, its records in order. */\n.fd-cal-agenda-day { display: grid; grid-template-columns: minmax(8em, 11em) minmax(0, 1fr); border-bottom: 1px solid var(--fd-border); }\n.fd-cal-agenda-day:last-child { border-bottom: 0; }\n.fd-cal-agenda-head { margin: 0; padding: 10px 12px; font-size: 13px; font-weight: 600; }\n.fd-cal-agenda-day[aria-current=\"date\"] .fd-cal-agenda-head { color: var(--fd-accent); }\n.fd-cal-agenda-list { list-style: none; margin: 0; padding: 6px 8px; display: grid; gap: 4px; min-width: 0; }\n.fd-cal-agenda-list .fd-cal-event { position: relative; padding: 0; font-size: 13.5px; }\n.fd-cal-event-open { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding-block: 8px; padding-inline: 10px 48px; border-radius: inherit; }\n.fd-cal-event[data-opens] .fd-cal-event-open { cursor: pointer; }\n.fd-cal-event-open:focus { outline: none; }\n.fd-cal-event-open:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-cal-agenda-list .fd-cal-event-who { grid-column: 2; }\n.fd-cal-agenda-list .fd-cal-event-menu { display: grid; top: 50%; transform: translateY(-50%); inset-inline-end: 6px; width: 36px; height: 36px; }\n.fd-cal-agenda-list .fd-cal-event-menu:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n@container fd-cal (max-width: 520px) {\n  .fd-cal-agenda-day { grid-template-columns: minmax(0, 1fr); }\n  .fd-cal-agenda-head { padding-bottom: 0; }\n  .fd-cal-title { flex-basis: 100%; order: -1; }\n}\n\n/* \"Move to\u2026\": its day, its time, its person; and a crowded slot's list, in the same kind of box. */\n.fd-cal-move, .fd-cal-crowd {\n  position: absolute; z-index: 30; box-sizing: border-box; width: min(320px, calc(100% - 16px)); padding: 14px; display: grid; gap: 10px;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: max(var(--fd-radius), 6px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);\n}\n.fd-cal-move-title { margin: 0; font-size: 14px; font-weight: 600; }\n.fd-cal-move label { display: grid; gap: 4px; font-size: 13px; }\n.fd-cal-move-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }\n.fd-cal-move-problem { margin: 0; color: var(--fd-error); font-size: 13px; }\n.fd-cal-move-problem:empty { display: none; }\n.fd-cal-move .fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-cal-crowd { padding: 10px; gap: 6px; }\n.fd-cal-crowd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline-start: 4px; }\n.fd-cal-crowd .fd-cal-agenda-list { padding: 0; max-height: min(60vh, 360px); overflow-y: auto; }\n";
+/** The calendar's stylesheet, once per document, before the page's own so an app's rule wins. */
+export declare function installCalendarStyles(doc: Document): void;

package/src/lib/styles.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CALENDAR_CSS = void 0;
+exports.installCalendarStyles = installCalendarStyles;
+/**
+ * A list's calendar in Fieldia's tokens, so a theme, a host's own tokens and
+ * the dark scheme reach it: each record a tint of the surface with a bar in
+ * its colour, which reads on a light page and a dark one alike. Logical
+ * sides throughout, so right to left needs nothing of its own but the arrows.
+ */
+exports.CALENDAR_CSS = `
+.fd-cal { position: relative; display: grid; gap: 10px; min-width: 0; color: var(--fd-text); container: fd-cal / inline-size; --fd-cal-hour: 48px; }
+.fd-cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
+.fd-cal-nav { display: inline-flex; gap: 4px; align-items: center; }
+.fd-cal .fd-button { min-height: 32px; }
+.fd-cal-step { min-width: 32px; padding-inline: 6px; display: inline-grid; place-items: center; }
+.fd-cal-step svg { width: 16px; height: 16px; }
+.fd-cal-step:dir(rtl) svg { transform: scaleX(-1); }
+.fd-cal-title { margin: 0; flex: 1 1 12em; min-width: 0; font-size: 1.05rem; font-weight: 600; }
+.fd-cal-ranges { display: inline-flex; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); overflow: hidden; }
+.fd-cal-ranges .fd-button { border: 0; border-radius: 0; padding-inline: 10px; }
+.fd-cal-ranges .fd-button + .fd-button { border-inline-start: 1px solid var(--fd-border); }
+.fd-cal-ranges .fd-button[aria-pressed="true"] { background: var(--fd-accent-soft); color: var(--fd-accent); font-weight: 600; }
+.fd-cal-said:not(:empty), .fd-cal-alert:not(:empty) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 10px; border-radius: var(--fd-control-radius); font-size: 13.5px; }
+.fd-cal-said:not(:empty) { background: var(--fd-info-soft); color: var(--fd-text); }
+.fd-cal-alert:not(:empty) { background: var(--fd-error-soft); color: var(--fd-text); }
+.fd-cal-said .fd-button { min-height: 28px; }
+.fd-cal-note { margin: 0; color: var(--fd-muted); font-size: 13px; }
+.fd-cal-body { min-width: 0; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); overflow: hidden; }
+.fd-cal-body[aria-busy="true"] { cursor: progress; }
+.fd-cal-failed { margin: 0; padding: 24px; text-align: center; }
+.fd-cal-empty { margin: 0; padding: 32px 16px; text-align: center; color: var(--fd-muted); }
+
+/* The day and the week: the hours down the side, a column for each day or each person. */
+.fd-cal-scroll { overflow-x: auto; }
+.fd-cal-grid { display: grid; grid-template-columns: 52px repeat(var(--fd-cal-cols), minmax(var(--fd-cal-min, 0px), 1fr)); min-width: min-content; }
+.fd-cal-corner, .fd-cal-head { box-sizing: border-box; padding: 6px 4px; border-bottom: 1px solid var(--fd-border); font-size: 12px; color: var(--fd-muted); text-align: center; min-width: 0; }
+.fd-cal-head { border-inline-start: 1px solid var(--fd-border); overflow-wrap: anywhere; }
+.fd-cal-head-day { display: inline-grid; justify-items: center; gap: 2px; border: 0; background: none; color: inherit; font: inherit; padding: 2px 6px; border-radius: var(--fd-control-radius); cursor: pointer; }
+.fd-cal-head-day:hover { background: var(--fd-accent-soft); }
+.fd-cal-head-day:focus-visible, .fd-cal-daynum:focus-visible, .fd-cal-more:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+.fd-cal-head-num { font-size: 18px; line-height: 28px; min-width: 28px; border-radius: 999px; color: var(--fd-text); }
+.fd-cal-head[aria-current="date"] .fd-cal-head-num { background: var(--fd-accent); color: var(--fd-accent-text); }
+.fd-cal-head-who { font-size: 13px; font-weight: 600; color: var(--fd-text); }
+.fd-cal-corner { font-size: 11px; display: grid; align-items: end; justify-items: end; padding-inline-end: 6px; }
+.fd-cal-allday { box-sizing: border-box; display: grid; align-content: start; gap: 2px; padding: 2px; min-height: 30px; min-width: 0; border-inline-start: 1px solid var(--fd-border); border-bottom: 1px solid var(--fd-border); }
+.fd-cal-allday[data-alone] { min-height: 240px; }
+.fd-cal-hours { position: relative; height: calc(var(--fd-cal-span) * var(--fd-cal-hour)); }
+.fd-cal-hour { position: absolute; inset-inline-end: 6px; transform: translateY(-50%); font-size: 11px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }
+.fd-cal-hour:first-child { transform: none; }
+.fd-cal-col {
+  position: relative; min-width: 0; border-inline-start: 1px solid var(--fd-border); height: calc(var(--fd-cal-span) * var(--fd-cal-hour));
+  background-image: repeating-linear-gradient(to bottom, var(--fd-border) 0 1px, transparent 1px calc(var(--fd-cal-hour) / 2), color-mix(in srgb, var(--fd-border) 50%, transparent) calc(var(--fd-cal-hour) / 2) calc(var(--fd-cal-hour) / 2 + 1px), transparent calc(var(--fd-cal-hour) / 2 + 1px) var(--fd-cal-hour));
+}
+.fd-cal-col[data-today] { background-color: color-mix(in srgb, var(--fd-accent) 4%, transparent); }
+.fd-cal-slot { box-sizing: border-box; height: calc(var(--fd-cal-hour) * var(--fd-cal-slot) / 60); }
+.fd-cal[data-creates] .fd-cal-slot, .fd-cal[data-creates] .fd-cal-allday, .fd-cal[data-creates] .fd-cal-day { cursor: cell; }
+.fd-cal-slot:focus { outline: none; }
+.fd-cal-slot:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; background: var(--fd-accent-soft); }
+.fd-cal-picking { position: absolute; inset-inline: 2px; z-index: 2; box-sizing: border-box; border: 1px dashed var(--fd-accent); border-radius: 4px; background: var(--fd-accent-soft); pointer-events: none; }
+/* Under the records, so a record's words are never struck through. */
+.fd-cal-now { position: absolute; inset-inline: 0; z-index: 0; height: 2px; margin-top: -1px; background: var(--fd-error); pointer-events: none; }
+.fd-cal-now::before { content: ""; position: absolute; inset-inline-start: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--fd-error); }
+
+/* A record: a tint of the surface, a bar in its colour. */
+.fd-cal-event {
+  --fd-cal-c: var(--fd-accent);
+  box-sizing: border-box; min-width: 0; overflow: hidden; padding: 2px 6px; border-radius: 4px; font-size: 12.5px; line-height: 1.3;
+  background: color-mix(in srgb, var(--fd-cal-c) 16%, var(--fd-surface)); color: var(--fd-text); border-inline-start: 3px solid var(--fd-cal-c);
+  cursor: default; user-select: none; -webkit-user-select: none;
+}
+.fd-cal-event[data-opens], .fd-cal-event[data-moves] { cursor: pointer; }
+.fd-cal-event:hover, .fd-cal-event.fd-cal-hot { background: color-mix(in srgb, var(--fd-cal-c) 26%, var(--fd-surface)); }
+.fd-cal-event:focus { outline: none; }
+.fd-cal-event:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; z-index: 3; }
+.fd-cal-col > .fd-cal-event { position: absolute; z-index: 1; box-shadow: 0 0 0 1px var(--fd-surface); line-height: 16px; container: fd-cal-ev / inline-size; }
+/* Its words in the whole lines its height holds (--fd-cal-lines, by linesIn): none cut through. */
+.fd-cal-col > .fd-cal-event > .fd-cal-event-text { display: block; max-height: calc(var(--fd-cal-lines, 1) * 16px); overflow: hidden; text-overflow: ellipsis; }
+/* Each word whole, a long one cut with "…"; too narrow for its time, the name alone (the hours say when). */
+.fd-cal-col .fd-cal-event-title { overflow-wrap: normal; }
+.fd-cal-col .fd-cal-event-who { overflow: hidden; text-overflow: ellipsis; }
+@container fd-cal-ev (max-width: 56px) { .fd-cal-col .fd-cal-event-time, .fd-cal-col .fd-cal-event-who { display: none; } }
+.fd-cal-event[data-moving] { opacity: 0.9; z-index: 6; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); pointer-events: none; }
+.fd-cal-event[aria-busy="true"] { opacity: 0.75; }
+.fd-cal-event-time { font-variant-numeric: tabular-nums; }
+.fd-cal-event-title { font-weight: 600; overflow-wrap: anywhere; text-align: match-parent; }
+.fd-cal-event-who { display: block; opacity: 0.85; }
+/* 24 pixels at least, so a finger or a pointer can hit each (WCAG 2.5.8). */
+.fd-cal-allday > .fd-cal-event, .fd-cal-day > .fd-cal-event { position: relative; min-height: 24px; box-sizing: border-box; line-height: 20px; white-space: nowrap; padding-inline-end: 24px; }
+.fd-cal-col > .fd-cal-event[data-short] .fd-cal-event-who { display: none; }
+/* One line (a short record, a month's day, all day): the name cut with "…" at its own end, so a Latin one right to left
+   keeps its start; whole when pointed at, and to a screen reader. */
+.fd-cal-col > .fd-cal-event[data-short] > .fd-cal-event-text, .fd-cal-allday .fd-cal-event-text, .fd-cal-day .fd-cal-event-text { display: flex; gap: 0.3em; white-space: nowrap; }
+:is(.fd-cal-col > .fd-cal-event[data-short], .fd-cal-allday > .fd-cal-event, .fd-cal-day > .fd-cal-event) .fd-cal-event-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.fd-cal-resize { position: absolute; inset-inline: 0; bottom: 0; height: 8px; cursor: ns-resize; touch-action: none; }
+.fd-cal-event-menu {
+  position: absolute; top: 0; inset-inline-end: 0; z-index: 2; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px;
+  display: none; place-items: center; background: var(--fd-surface); color: var(--fd-text); font: 700 14px/1 system-ui, sans-serif; cursor: pointer;
+}
+.fd-cal-event:hover > .fd-cal-event-menu, .fd-cal-event:focus-within > .fd-cal-event-menu, .fd-cal-event:focus > .fd-cal-event-menu { display: grid; }
+@media (hover: none) { .fd-cal-event-menu { display: grid; } }
+
+/* The month: whole weeks, each day its records, and how many more. */
+.fd-cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
+.fd-cal-weekday { padding: 6px 4px; border-bottom: 1px solid var(--fd-border); font-size: 12px; color: var(--fd-muted); text-align: center; }
+.fd-cal-weekday + .fd-cal-weekday, .fd-cal-day:not(:nth-child(7n + 1)) { border-inline-start: 1px solid var(--fd-border); }
+.fd-cal-day { box-sizing: border-box; min-width: 0; min-height: 104px; padding: 3px; display: grid; align-content: start; gap: 2px; border-bottom: 1px solid var(--fd-border); }
+.fd-cal-day[data-out] { background: color-mix(in srgb, var(--fd-text) 3%, var(--fd-surface)); }
+.fd-cal-daynum { justify-self: start; min-width: 26px; height: 26px; padding: 0 6px; border: 0; border-radius: 999px; background: none; color: var(--fd-text); font: inherit; font-size: 12.5px; cursor: pointer; }
+.fd-cal-day[data-out] .fd-cal-daynum { color: var(--fd-muted); }
+.fd-cal-day[aria-current="date"] .fd-cal-daynum { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }
+.fd-cal-more { justify-self: start; min-height: 24px; padding: 0 6px; border: 0; background: none; color: var(--fd-accent); font: inherit; font-size: 12px; cursor: pointer; }
+/* A crowded slot's "+N more", in the last lane over the records it holds. */
+.fd-cal-col > .fd-cal-more {
+  position: absolute; z-index: 1; box-sizing: border-box; display: block; padding: 3px 2px; line-height: 14px; text-align: center; overflow: hidden;
+  border-radius: 4px; border: 1px dashed color-mix(in srgb, var(--fd-accent) 55%, transparent); background: var(--fd-accent-soft); font-weight: 600;
+}
+.fd-cal-col > .fd-cal-more:hover { background: color-mix(in srgb, var(--fd-accent) 22%, var(--fd-surface)); }
+.fd-cal-day > .fd-cal-event .fd-cal-event-who { display: none; }
+
+/* The agenda: each day that has something, its records in order. */
+.fd-cal-agenda-day { display: grid; grid-template-columns: minmax(8em, 11em) minmax(0, 1fr); border-bottom: 1px solid var(--fd-border); }
+.fd-cal-agenda-day:last-child { border-bottom: 0; }
+.fd-cal-agenda-head { margin: 0; padding: 10px 12px; font-size: 13px; font-weight: 600; }
+.fd-cal-agenda-day[aria-current="date"] .fd-cal-agenda-head { color: var(--fd-accent); }
+.fd-cal-agenda-list { list-style: none; margin: 0; padding: 6px 8px; display: grid; gap: 4px; min-width: 0; }
+.fd-cal-agenda-list .fd-cal-event { position: relative; padding: 0; font-size: 13.5px; }
+.fd-cal-event-open { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding-block: 8px; padding-inline: 10px 48px; border-radius: inherit; }
+.fd-cal-event[data-opens] .fd-cal-event-open { cursor: pointer; }
+.fd-cal-event-open:focus { outline: none; }
+.fd-cal-event-open:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+.fd-cal-agenda-list .fd-cal-event-who { grid-column: 2; }
+.fd-cal-agenda-list .fd-cal-event-menu { display: grid; top: 50%; transform: translateY(-50%); inset-inline-end: 6px; width: 36px; height: 36px; }
+.fd-cal-agenda-list .fd-cal-event-menu:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+@container fd-cal (max-width: 520px) {
+  .fd-cal-agenda-day { grid-template-columns: minmax(0, 1fr); }
+  .fd-cal-agenda-head { padding-bottom: 0; }
+  .fd-cal-title { flex-basis: 100%; order: -1; }
+}
+
+/* "Move to…": its day, its time, its person; and a crowded slot's list, in the same kind of box. */
+.fd-cal-move, .fd-cal-crowd {
+  position: absolute; z-index: 30; box-sizing: border-box; width: min(320px, calc(100% - 16px)); padding: 14px; display: grid; gap: 10px;
+  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: max(var(--fd-radius), 6px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
+}
+.fd-cal-move-title { margin: 0; font-size: 14px; font-weight: 600; }
+.fd-cal-move label { display: grid; gap: 4px; font-size: 13px; }
+.fd-cal-move-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
+.fd-cal-move-problem { margin: 0; color: var(--fd-error); font-size: 13px; }
+.fd-cal-move-problem:empty { display: none; }
+.fd-cal-move .fd-input[aria-invalid="true"] { border-color: var(--fd-error); }
+.fd-cal-crowd { padding: 10px; gap: 6px; }
+.fd-cal-crowd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline-start: 4px; }
+.fd-cal-crowd .fd-cal-agenda-list { padding: 0; max-height: min(60vh, 360px); overflow-y: auto; }
+`;
+/** The calendar's stylesheet, once per document, before the page's own so an app's rule wins. */
+function installCalendarStyles(doc) {
+    if (doc.getElementById('fieldia-calendar-styles'))
+        return;
+    const style = doc.createElement('style');
+    style.id = 'fieldia-calendar-styles';
+    style.textContent = exports.CALENDAR_CSS;
+    doc.head.prepend(style);
+}
+//# sourceMappingURL=styles.js.map

package/src/lib/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/calendar/src/lib/styles.ts"],"names":[],"mappings":";;;AAyJA,sDAMC;AA/JD;;;;;GAKG;AACU,QAAA,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgJ3B,CAAC;AAEF,iGAAiG;AACjG,SAAgB,qBAAqB,CAAC,GAAa;IACjD,IAAI,GAAG,CAAC,cAAc,CAAC,yBAAyB,CAAC;QAAE,OAAO;IAC1D,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,GAAG,yBAAyB,CAAC;IACrC,KAAK,CAAC,WAAW,GAAG,oBAAY,CAAC;IACjC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAC1B,CAAC"}