@nxgt/material 3.92.0 → 3.94.0

package/dist/lib/components/ui/fields/index.d.ts

@@ -10,6 +10,7 @@ export * from './form-section/index.js';
 export * from './inline-edit/index.js';
 export * from './input-group-field/index.js';
 export * from './localized-text-fields/index.js';
+export * from './markdown-textarea-field/index.js';
 export * from './number-field/index.js';
 export * from './opening-hours/index.js';
 export * from './otp-field/index.js';

package/dist/lib/components/ui/fields/markdown-textarea-field/index.d.ts

@@ -0,0 +1,2 @@
+export * from './markdown-textarea-field.js';
+export * from './markdown-textarea-form-field.js';

package/dist/lib/components/ui/fields/markdown-textarea-field/markdown-preview.d.ts

@@ -0,0 +1,6 @@
+/** The body of the Preview tab: the rendered Markdown, or a hint when empty. */
+export declare function MarkdownPreview({ text, math, mermaid, }: {
+    text: string;
+    math: boolean;
+    mermaid: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/fields/markdown-textarea-field/markdown-syntax-help.d.ts

@@ -0,0 +1,4 @@
+/** The short syntax reminder under a Markdown textarea, collapsed by default. */
+export declare function MarkdownSyntaxHelp({ id }: {
+    id: string;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/fields/markdown-textarea-field/markdown-tabs.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+type MarkdownTabsProps = {
+    /** The textarea (the Write tab). */
+    children: ReactNode;
+    text: string;
+    minRows: number;
+    math: boolean;
+    mermaid: boolean;
+    previewClassName?: string;
+};
+/** The Write / Preview tab list and its two panels. */
+export declare function MarkdownTabs({ children, text, minRows, math, mermaid, previewClassName, }: MarkdownTabsProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/markdown-textarea-field/markdown-textarea-field.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps, ReactNode } from 'react';
+export type MarkdownTextareaProps = {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: boolean;
+    /** Minimum height of the textarea, in lines. Default 6. */
+    minRows?: number;
+    /** Show the character counter. Default: when `maxLength` is set. */
+    showCount?: boolean;
+    /** Render `$...$` and `$$...$$` with KaTeX in the preview. Default `true`. */
+    math?: boolean;
+    /** Draw ```` ```mermaid ```` fences as diagrams in the preview. Default `false`. */
+    mermaid?: boolean;
+    /** Show the collapsible syntax help. Default `true`. */
+    showHelp?: boolean;
+    /** Class of the preview panel. */
+    previewClassName?: string;
+} & ComponentProps<'textarea'>;
+/**
+ * A textarea for Markdown with a Write / Preview tab list. The preview is
+ * rendered with `Markdown` (raw HTML is never rendered).
+ */
+export declare function MarkdownTextareaField({ error, helperText, label, className, minRows, showCount, maxLength, math, mermaid, showHelp, previewClassName, value, defaultValue, onChange, ...props }: MarkdownTextareaProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/markdown-textarea-field/markdown-textarea-form-field.d.ts

@@ -0,0 +1,3 @@
+import { UseControllerProps } from 'react-hook-form';
+import { MarkdownTextareaProps } from './markdown-textarea-field.js';
+export declare function MarkdownTextareaFormField<T extends Record<string, any>>({ control, name, ...props }: Pick<UseControllerProps<T>, 'control' | 'name'> & Omit<MarkdownTextareaProps, 'name'>): import("react").JSX.Element;

package/dist/lib/components/ui/fields/markdown-textarea-field/use-text-value.d.ts

@@ -0,0 +1,6 @@
+import { ChangeEventHandler, ComponentProps } from 'react';
+/** The text of a textarea that may be controlled or not, for the counter and the preview. */
+export declare function useTextValue(value: ComponentProps<'textarea'>['value'], defaultValue: ComponentProps<'textarea'>['defaultValue'], onChange: ComponentProps<'textarea'>['onChange']): {
+    text: string;
+    handleChange: ChangeEventHandler<HTMLTextAreaElement>;
+};

package/dist/lib/components/ui/layout/record-page/record-details.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { CardTitleElement } from '../../primitives/card/card.js';
 /** One « label date » segment of the meta line. */
 export type RecordDetailsStamp = {
@@ -7,8 +7,8 @@ export type RecordDetailsStamp = {
     /** The instant: a `Date`, an ISO string or a timestamp. */
     at: Date | string | number;
 };
-export type RecordDetailsProps = {
-    /** The card's heading. */
+export type RecordDetailsProps = Omit<ComponentProps<'div'>, 'title'> & {
+    /** The card's heading, set in `title-md` emphasized like a section title, whatever its level. */
     title?: ReactNode;
     /** The heading level of `title`, `'h2'` by default (under the page's `h1`). */
     titleAs?: CardTitleElement;
@@ -28,13 +28,13 @@ export type RecordDetailsProps = {
     maxColumns?: number;
     /** The `Description`s. */
     children?: ReactNode;
-    className?: string;
 };
 /**
  * RecordDetails - the record's facts as one card: a title and a status, the
  * `Description`s in a `DescriptionList` (one column in a side panel, up to
  * `maxColumns` once the panel is stacked and wide) and a muted
  * « Added on … · Updated on … » line under them, the dates written without
- * seconds in `timeZone`. Made for `RecordPage`'s `details`.
+ * seconds in `timeZone`. Made for `RecordPage`'s `details`. Any other `div`
+ * prop (`data-*`, `id`, `aria-*`, `className`) goes to the root.
  */
-export declare function RecordDetails({ title, titleAs, status, created, updated, timeZone, maxColumns, children, className, }: RecordDetailsProps): import("react").JSX.Element;
+export declare function RecordDetails({ title, titleAs, status, created, updated, timeZone, maxColumns, children, className, ...props }: RecordDetailsProps): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/education/questions/index.d.ts

@@ -2,4 +2,4 @@ export { QuestionCard } from './question.js';
 export { answerParts, isAnswerCorrect, isAnswered, parseAnswerNumber, } from './question.utils.js';
 export { QuestionMediaView } from './question-media-view.js';
 export type { QuestionMediaFile, QuestionMediaViewProps, } from './question-media-view.types.js';
-export type { Question, QuestionAnswer, QuestionCodeField, QuestionImage, QuestionKind, QuestionMedia, QuestionMediaKind, QuestionOption, QuestionPoints, QuestionProps, QuestionVerdict, } from './types.js';
+export type { Question, QuestionAnswer, QuestionCodeField, QuestionExample, QuestionImage, QuestionKind, QuestionMedia, QuestionMediaKind, QuestionOption, QuestionPoints, QuestionProps, QuestionReference, QuestionVerdict, } from './types.js';

package/dist/lib/components/ui/widgets/education/questions/partials/question-hints.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hints revealed one at a time. The button names the next one ("Show hint 2
+ * of 3"); the revealed hint takes the focus, and a status line keeps the count
+ * ("Hint 2 of 3") for a screen reader.
+ */
+export declare function QuestionHints({ hints, markdown, }: {
+    hints: string[];
+    markdown?: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/education/questions/partials/question-reveal.d.ts

@@ -0,0 +1,13 @@
+import { Question } from '../types.js';
+/** Why each option is right or wrong, for the options that carry an `explanation`. */
+export declare function QuestionOptionExplanations({ question, }: {
+    question: Question;
+}): import("react").JSX.Element | null;
+/** The sources of a question: a labelled list, a link when there is a safe `url`. */
+export declare function QuestionReferences({ question }: {
+    question: Question;
+}): import("react").JSX.Element | null;
+/** A `code` question's examples: a table with an input and an expected column. */
+export declare function QuestionExamples({ question }: {
+    question: Question;
+}): import("react").JSX.Element | null;

package/dist/lib/components/ui/widgets/education/questions/partials/rich-text.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { Question } from '../types.js';
+/**
+ * A question's text: plain, or Markdown with math when the question's
+ * `markdown` is on. Raw HTML is never rendered; mermaid is off. `inline` keeps
+ * it to phrasing content (the prompt, a label, a sentence).
+ */
+export declare function RichText({ markdown, inline, children, className, }: {
+    markdown?: boolean;
+    inline?: boolean;
+    children: string;
+    className?: string;
+}): import("react").JSX.Element;
+/** An option label: inline Markdown only when it is a string and the question asks for it. */
+export declare function richLabel(label: ReactNode, markdown?: boolean): ReactNode;
+/** The answer parts of a sentence ("Correct answer: …"): option labels as inline Markdown, typed answers as they are. */
+export declare function richParts(question: Question, parts: ReactNode[]): ReactNode[];

package/dist/lib/components/ui/widgets/education/questions/types.d.ts

@@ -38,6 +38,22 @@ export type QuestionOption = {
     description?: ReactNode;
     /** A picture: the options of the question become picture cards. */
     image?: QuestionImage;
+    /**
+     * Why this option is right or wrong, shown once the card is revealed (and in
+     * a `preview`), in a list under the question. Markdown when the question's
+     * `markdown` is on.
+     */
+    explanation?: string;
+};
+/** A source quoted in the reveal: a plain title, or a link when it has a `url`. */
+export type QuestionReference = {
+    title: string;
+    url?: string;
+};
+/** A visible example of a `code` question: what goes in and what must come out. */
+export type QuestionExample = {
+    input: string;
+    expected: string;
 };
 /** A choice id, the ids of a multi, the text (or the number as text) typed. */
 export type QuestionAnswer = string | string[] | null;
@@ -47,14 +63,37 @@ export type Question = {
     kind: QuestionKind;
     options?: QuestionOption[];
     correct?: string | string[];
+    /** Markdown when `markdown` is on. */
     explanation?: string;
     required?: boolean;
     placeholder?: string;
     exact?: boolean;
     /** A picture shown with the prompt; give it an `alt` unless decorative. */
     media?: QuestionMedia;
-    /** Shown on demand, behind a "Show hint" button. */
+    /**
+     * Draws the `prompt`, the string option labels, the `explanation`, the
+     * option explanations and the hints as Markdown with math (`$x^2$`), through
+     * the library's safe `Markdown` (raw HTML is not rendered, mermaid is off).
+     * Default `false`: plain text, as before.
+     */
+    markdown?: boolean;
+    /**
+     * Shown on demand, behind a "Show hint" button.
+     * @deprecated Use `hints`. Ignored when `hints` is not empty.
+     */
     hint?: string;
+    /**
+     * Hints revealed one at a time, in order, behind a "Show hint 1 of N" button
+     * that moves the focus to the hint it reveals. Hidden once the card is
+     * revealed.
+     */
+    hints?: string[];
+    /** Sources listed in the reveal; a `url` makes an external link (`rel="noopener noreferrer"`). */
+    references?: QuestionReference[];
+    /** `code`: the code field starts with this when there is no draft (`value` is null or undefined). */
+    starterCode?: string;
+    /** `code`: examples shown as a table (input, expected output) above the field. */
+    examples?: QuestionExample[];
     /** `number`: how far off an answer may be and still count (default 0). */
     tolerance?: number;
     /** `number`: the unit shown after the field ("km", "%"). */

package/dist/lib/components/ui/widgets/event-calendar/backdrop.types.d.ts

@@ -0,0 +1,75 @@
+import { Tone } from '../../tones.js';
+import { CalendarEventBadge } from './types.js';
+/**
+ * A stretch of time the calendar shades behind its events, such as a holiday,
+ * a term, a closure or a half day off. It never blocks a slot: events can be
+ * made and dropped over it.
+ *
+ * `start` and `end` are ISO strings. A date-only value (`2026-12-25`) means
+ * whole days, read in the calendar's `timeZone`; `end` is always exclusive, so
+ * `2026-12-25` to `2026-12-26` is the single day of 25 December. A value with
+ * a time is an instant, which gives a half day (`2026-12-24T12:00:00` to
+ * `2026-12-25`).
+ */
+export type EventCalendarSpan = {
+    id: string;
+    start: string;
+    end: string;
+    label: string;
+    /** Default `'neutral'`. */
+    tone?: Tone;
+    /**
+     * The resource column the span belongs to. One with none shades every
+     * column; one with an unknown id shades none.
+     */
+    resourceId?: string;
+};
+/** The part of a span that falls on one day of the zone's calendar. */
+export type BackdropSegment = {
+    span: EventCalendarSpan;
+    /** The `YYYY-MM-DD` day. */
+    day: string;
+    /** Wall-clock minutes from midnight where the span starts on this day (0 for a whole day). */
+    fromMin: number;
+    /** Wall-clock minutes where it ends (1440 for a whole day or one running on). */
+    toMin: number;
+    /** The span covers the whole day, whatever its length (23 or 25 hours on a clock change). */
+    whole: boolean;
+};
+/** A span laid out as a bar over the day columns of the all-day strip. */
+export type BackdropLane = {
+    span: EventCalendarSpan;
+    /** The first column (day) of the bar. */
+    startCol: number;
+    /** The number of columns it covers. */
+    cols: number;
+    /** The lane (row) of the strip. */
+    row: number;
+    continuesBefore: boolean;
+    continuesAfter: boolean;
+};
+/** A label with a tone that marks a day or a week, keyed by date (`2026-12-24`). */
+export type EventCalendarBadges = Record<string, CalendarEventBadge>;
+/** The props that decorate the days: shaded spans and badges. */
+export type EventCalendarDayMarksProps = {
+    /**
+     * Stretches of time shaded behind the events (a holiday, a term, a half day
+     * off). They never block a slot, take no pointer event, and are read in the
+     * name of the day or column they fall on. Not a prop of `mode="template"`.
+     */
+    spans?: EventCalendarSpan[];
+    /**
+     * A badge on a day, keyed by its `YYYY-MM-DD` date (`{ '2026-12-24': { label:
+     * 'Eve', tone: 'info' } }`): in the day's header (week and day views) and
+     * next to its number (month). It is read in the name of the day. Not a prop of `mode="template"`, which has no dates. Where the
+     * room is short (a phone's week column or month cell) it becomes a short tone bar.
+     */
+    dayBadges?: EventCalendarBadges;
+    /**
+     * A badge on a week, keyed by the `YYYY-MM-DD` date of its first day, which
+     * follows `weekStartsOn` (Monday `2026-12-21` when weeks start on Monday). It
+     * is drawn in the time views' gutter corner and on the first cell of the
+     * month's row, and is read in that cell's name. Not a prop of `mode="template"`.
+     */
+    weekBadges?: EventCalendarBadges;
+};

package/dist/lib/components/ui/widgets/event-calendar/chrome.types.d.ts

@@ -0,0 +1,12 @@
+export type EventCalendarChromeState = {
+    focusedEventId: string | null;
+    query: string;
+    /** The way the last move went (-1 back, 1 forward): the view slides from it. */
+    direction: -1 | 0 | 1;
+    /** A view was picked in the switcher: `phoneView` no longer applies. */
+    viewPicked: boolean;
+    /** The keyboard moved the cursor: its day takes the focus once rendered. */
+    dayFocus: boolean;
+    /** The resource the phone's switcher shows; `null` is the first. */
+    resourceId: string | null;
+};

package/dist/lib/components/ui/widgets/event-calendar/event-calendar-context.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { EventChipVariant } from '../../display/event-chip/event-chip.classes.js';
+import { EventCalendarBadges, EventCalendarSpan } from './backdrop.types.js';
 import { TemplateContext } from './template.types.js';
 import { CalendarEvent, EventCalendarPreviewField, EventCalendarRenderEvent, EventCalendarSlot, EventCalendarView } from './types.js';
 import { EventCalendarModel } from './use-event-calendar.js';
@@ -8,7 +9,13 @@ export type EventCalendarContextValue = EventCalendarModel & {
     sourceEvents?: CalendarEvent[];
     /** Set in `mode="template"`: the lanes, and the lane of each event. */
     template?: TemplateContext;
-    dragLabel: string;
+    /** The spans to shade behind the events (see `EventCalendarProps.spans`). */
+    spans?: EventCalendarSpan[];
+    /** Badges on days and on weeks (see `EventCalendarProps.dayBadges`). */
+    dayBadges?: EventCalendarBadges;
+    weekBadges?: EventCalendarBadges;
+    /** The hint that events can be dragged, read as the board's description; unset when they cannot (`readOnlyEvents`). */
+    dragHint?: string;
     searchable: boolean;
     /** The views the switcher offers. */
     views?: EventCalendarView[];

package/dist/lib/components/ui/widgets/event-calendar/event-calendar-events.utils.d.ts

@@ -1,5 +1,5 @@
 import { closestCenter } from '@dnd-kit/core';
-import { CalendarEvent } from './types.js';
+import { CalendarEvent, CalendarEventBadge } from './types.js';
 export declare const calendarCollisionDetection: typeof closestCenter;
 export declare function snapToStep(date: Date, stepMinutes?: number): Date;
 /** `date` rounded to the nearest `stepMinutes` of the clock's epoch: right in a zone whose offset is a multiple of the step. */
@@ -15,3 +15,5 @@ export declare function moveEventToDay(event: CalendarEvent, day: Date): Calenda
 export declare function moveEventToDateTime(event: CalendarEvent, dateTime: Date, snap?: (date: Date) => Date): CalendarEvent;
 export declare function resizeEventEnd(event: CalendarEvent, end: Date, snap?: (date: Date) => Date): CalendarEvent;
 export declare function isToday(day: Date, now?: Date): boolean;
+/** Every badge of an event, `badge` first. */
+export declare function eventBadges(event: CalendarEvent): CalendarEventBadge[];

package/dist/lib/components/ui/widgets/event-calendar/event-calendar-shell.d.ts

@@ -12,4 +12,4 @@ export type EventCalendarShellProps = EventCalendarProps & {
  * mini-month side panel and a phone layout of its own. Events are props; the
  * chrome (search, focus, the last move's direction) lives in a slice.
  */
-export declare function EventCalendarShell({ template, visible, onEventClick, onSlotClick, eventPreview, previewFields, onEventEdit, onEventDelete, className, renderEvent, toolbar, searchable, views, phoneView, sidebar, eventVariant, scrollToHour, ...options }: EventCalendarShellProps): import("react").JSX.Element;
+export declare function EventCalendarShell({ template, visible, onEventClick, onSlotClick, eventPreview, previewFields, onEventEdit, onEventDelete, className, renderEvent, toolbar, searchable, views, phoneView, sidebar, eventVariant, scrollToHour, spans, dayBadges, weekBadges, ...options }: EventCalendarShellProps): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/event-calendar.backdrop.d.ts

@@ -0,0 +1,38 @@
+import { BackdropLane, BackdropSegment, EventCalendarSpan } from './backdrop.types.js';
+/** Whether a span value is a date (`2026-12-25`): whole days, not an instant. */
+export declare function isDateOnly(value: string): boolean;
+/**
+ * The instants a span covers, `end` exclusive. A date-only value is the first
+ * instant of that day in the zone; a time with no offset (`2026-12-24T12:00`)
+ * is that wall-clock time in the zone; one with an offset or `Z` is the
+ * instant it names. A span
+ * with an invalid value, or that ends at or before its start, gives `null`.
+ */
+export declare function spanRange(span: EventCalendarSpan, timeZone?: string): {
+    start: Date;
+    end: Date;
+} | null;
+/**
+ * Whether a span shades a resource column. Without `resourceId` (no
+ * resources) every span counts; `null` is the unassigned column, which only
+ * the spans with no `resourceId` shade.
+ */
+export declare function spanMatchesResource(span: EventCalendarSpan, resourceId?: string | null): boolean;
+/**
+ * The part of a span on the zone's day `day`, or `null` when it does not touch
+ * it. The day runs from its first instant to the next day's, so on a clock
+ * change it is 23 or 25 hours long and a span over all of it is `whole`.
+ */
+export declare function spanOnDay(span: EventCalendarSpan, day: string, timeZone?: string): BackdropSegment | null;
+/**
+ * The spans on one day, for one resource column when given, in the order of
+ * `spans`. Spans never block anything: this only says what to draw.
+ */
+export declare function spansForDay(spans: EventCalendarSpan[] | undefined, day: string, timeZone?: string, resourceId?: string | null): BackdropSegment[];
+/**
+ * The all-day strip: each span as a bar over the consecutive `days` it covers
+ * wholly, put in the first lane with room (longest and earliest first). A
+ * span that only covers part of a day (a half day) has no bar: it is drawn as
+ * a band in the time grid, and by `spansForDay` in the month.
+ */
+export declare function layoutBackdropLanes(spans: EventCalendarSpan[] | undefined, days: string[], timeZone?: string, resourceId?: string | null): BackdropLane[];

package/dist/lib/components/ui/widgets/event-calendar/event-calendar.badges.d.ts

@@ -0,0 +1,14 @@
+import { Locale } from 'date-fns';
+import { EventCalendarBadges } from './backdrop.types.js';
+import { CalendarEventBadge } from './types.js';
+type WeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/** The badge set on a day, keyed by its `YYYY-MM-DD` date. */
+export declare function dayBadgeOf(dayBadges: EventCalendarBadges | undefined, day: Date): CalendarEventBadge | undefined;
+/**
+ * The key of the week a day falls in: the date of its first day, which follows
+ * `weekStartsOn` (the locale's when unset), whatever the view draws of it.
+ */
+export declare function weekBadgeKey(day: Date, locale?: Locale, weekStartsOn?: WeekStart): string;
+/** The badge set on the week a day falls in. */
+export declare function weekBadgeOf(weekBadges: EventCalendarBadges | undefined, day: Date, locale?: Locale, weekStartsOn?: WeekStart): CalendarEventBadge | undefined;
+export {};

package/dist/lib/components/ui/widgets/event-calendar/event-calendar.labels.d.ts

@@ -1,5 +1,6 @@
 import { Locale } from 'date-fns';
-import { CalendarEvent } from './types.js';
+import { BackdropSegment } from './backdrop.types.js';
+import { CalendarEvent, CalendarEventBadge } from './types.js';
 /**
  * The times a chip or an agenda row shows. In a zone they are read from the
  * true instants with the zone's own clock (`wallOf`), never through the
@@ -10,9 +11,21 @@ export declare function eventTimes(drawn: CalendarEvent, source: CalendarEvent,
     time?: string;
     endTime?: string;
 };
+/**
+ * The accessible name of an event's group: its title, then its badge, then
+ * `cancelled` (the translated word) when its status says so.
+ */
+export declare function eventName(event: CalendarEvent, title: string, cancelled: string): string;
 /**
  * The range label of the popover, in the zone: the day is read at noon and
  * the time on a fixed day, so a wall time the browser's own clock skips never
  * shifts what is said.
  */
 export declare function zonedRangeLabel(event: CalendarEvent, locale: Locale, zone: string): string;
+/** A day's name with its spans' labels after it: the cell or the column reads them out, the shading is decoration. */
+export declare function nameWithSpans(date: string, segments: BackdropSegment[]): string;
+/** A day's name with its badges after it, for the cell or column that reads them out. */
+export declare function nameWithBadges(name: string, day: CalendarEventBadge | undefined, week: {
+    badge: CalendarEventBadge | undefined;
+    text: (label: string) => string;
+}): string;

package/dist/lib/components/ui/widgets/event-calendar/event-calendar.lanes.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The lane (row) of each item, already in the order they should win a lane:
+ * the first lane with room over its columns, a new one when none has. An item
+ * covers `cols` columns from `startCol`; `columns` is the width of a lane.
+ */
+export declare function packLanes(items: {
+    startCol: number;
+    cols: number;
+}[], columns: number): number[];

package/dist/lib/components/ui/widgets/event-calendar/event-calendar.read-only.d.ts

@@ -0,0 +1,57 @@
+import { CalendarEvent } from './types.js';
+/**
+ * What a read-only event's draggable wrapper must not say: dnd-kit marks it
+ * "draggable", points to its pick-up instructions and gives it a tab stop of
+ * its own. The chip's own button stays the one focusable, named control.
+ */
+export declare function readOnlyDragProps(readOnly: boolean): {
+    readonly 'aria-roledescription': undefined;
+    readonly 'aria-describedby': undefined;
+    readonly 'aria-disabled': undefined;
+    readonly tabIndex: undefined;
+} | {
+    readonly 'aria-roledescription'?: undefined;
+    'aria-describedby'?: undefined;
+    readonly 'aria-disabled'?: undefined;
+    readonly tabIndex?: undefined;
+};
+/**
+ * The props of an event's draggable wrapper (`Draggable`), the same in the
+ * time grid, the all-day strip and the month's overflow list: its drag
+ * switches (off with `disabled`, `readOnlyEvents` or the event's own
+ * `disabled`), a named group in place of dnd-kit's `button` (which would hold
+ * the chip's own button), and the focus that follows the event.
+ */
+export declare function useEventDragProps(event: CalendarEvent, title: string): {
+    readonly role: "group";
+    readonly 'aria-label': string;
+    readonly onFocus: () => void;
+    readonly onClick: (click: {
+        stopPropagation: () => void;
+    }) => void;
+    readonly 'aria-roledescription': undefined;
+    readonly 'aria-describedby': undefined;
+    readonly 'aria-disabled': undefined;
+    readonly tabIndex: undefined;
+    readonly id: string;
+    readonly data: {
+        readonly type: "event";
+    };
+    readonly disabled: boolean;
+} | {
+    readonly role: "group";
+    readonly 'aria-label': string;
+    readonly onFocus: () => void;
+    readonly onClick: (click: {
+        stopPropagation: () => void;
+    }) => void;
+    readonly 'aria-roledescription'?: undefined;
+    readonly 'aria-describedby'?: undefined;
+    readonly 'aria-disabled'?: undefined;
+    readonly tabIndex?: undefined;
+    readonly id: string;
+    readonly data: {
+        readonly type: "event";
+    };
+    readonly disabled: boolean;
+};

package/dist/lib/components/ui/widgets/event-calendar/event-calendar.resources.d.ts

@@ -24,7 +24,12 @@ export declare function withColumn(event: CalendarEvent, column: string | null):
 export declare function columnKey(column: ResourceColumn): string;
 /** The resource an event belongs to; none when it has none or an unknown one. */
 export declare function ownerOf(event: CalendarEvent, resources?: EventCalendarResource[]): EventCalendarResource | undefined;
-/** The event drawn in its resource's tone when it sets no colour of its own. */
+/** The tone an event is drawn in: its own, else its resource's. */
+export declare function toneOf(event: CalendarEvent, owner?: EventCalendarResource): Tone | undefined;
+/**
+ * The event drawn in its tone when it sets no colour of its own: its `color`
+ * wins, then its `tone`, then its resource's.
+ */
 export declare function withOwnerTone(event: CalendarEvent, owner?: EventCalendarResource): CalendarEvent;
 /**
  * The column an event is dropped into, or the event itself when it is already

package/dist/lib/components/ui/widgets/event-calendar/index.d.ts

@@ -1,6 +1,7 @@
+export type { EventCalendarBadges, EventCalendarDayMarksProps, EventCalendarSpan, } from './backdrop.types.js';
 export type { EventCalendarProps } from './event-calendar.js';
 export { EventCalendar } from './event-calendar.js';
 export { EventCalendarProvider, useEventCalendarContext, } from './event-calendar-context.js';
 export type { EventCalendarLane, EventCalendarTemplateChange, EventCalendarTemplateEvent, EventCalendarTemplateProps, EventCalendarTemplateSlot, EventCalendarWeekday, } from './template.types.js';
-export type { CalendarEvent, CalendarEventBadge, EventCalendarChange, EventCalendarDensity, EventCalendarPreviewField, EventCalendarRenderEvent, EventCalendarResource, EventCalendarSlot, EventCalendarView, } from './types.js';
+export type { CalendarEvent, CalendarEventBadge, CalendarEventStatus, EventCalendarChange, EventCalendarDensity, EventCalendarPreviewField, EventCalendarRenderEvent, EventCalendarResource, EventCalendarSlot, EventCalendarView, } from './types.js';
 export { useEventCalendar } from './use-event-calendar.js';

package/dist/lib/components/ui/widgets/event-calendar/partials/all-day-bars.d.ts

@@ -0,0 +1,14 @@
+import { BackdropLane } from '../backdrop.types.js';
+import { SpanSegment } from '../event-calendar.spans.js';
+/**
+ * What the all-day strip draws: the backdrop spans as bars in the rows on
+ * top, then the multi-day events below them.
+ */
+export declare function AllDayBars({ days, segments, backdrop, }: {
+    days: Date[];
+    segments: SpanSegment[];
+    backdrop: {
+        lanes: BackdropLane[];
+        rows: number;
+    };
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/backdrop-bands.d.ts

@@ -0,0 +1,11 @@
+import { BackdropSegment } from '../backdrop.types.js';
+import { DayAxis } from '../event-calendar.axis.js';
+/**
+ * The spans of one column of hours: a hatched band under the events (z-0)
+ * with its label at the top. Decoration only: `aria-hidden`, no pointer
+ * events, no tab stop; the column's name carries the text.
+ */
+export declare function BackdropBands({ segments, axis, }: {
+    segments: BackdropSegment[];
+    axis: DayAxis;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/backdrop-bar.d.ts

@@ -0,0 +1,11 @@
+import { BackdropLane } from '../backdrop.types.js';
+/**
+ * A whole-day span as a bar of the all-day strip, in the rows above the
+ * events. Decoration: `aria-hidden`, no pointer events (a click reaches the
+ * day under it).
+ */
+export declare function BackdropBar({ lane, showLabel, }: {
+    lane: BackdropLane;
+    /** False where the columns are too narrow for a label (a phone's week). */
+    showLabel?: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/backdrop-cell.d.ts

@@ -0,0 +1,13 @@
+import { BackdropSegment } from '../backdrop.types.js';
+/**
+ * The spans of a month cell: the cell shaded (a half day shades its half),
+ * the label in its top corner from 7rem of cell width, and under that a dot.
+ * Decoration: `aria-hidden`, no pointer events; the cell's name carries the
+ * text. The cell is the `day` container and an `isolate` stacking context, so
+ * the shading sits under its content.
+ */
+export declare function BackdropCell({ segments, below, }: {
+    segments: BackdropSegment[];
+    /** The labels sit at the cell's foot: its day badge takes the top row. */
+    below?: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/backdrop-row.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The spans of a day in the agenda and the phone's day list: a hatched row
+ * with the label, ahead of the events. It is text, not a control: no pointer
+ * events (a click reaches the day) and no tab stop.
+ */
+export declare function BackdropRow({ day }: {
+    day: Date;
+}): import("react").JSX.Element | null;

package/dist/lib/components/ui/widgets/event-calendar/partials/calendar-badge.d.ts

@@ -0,0 +1,16 @@
+import { CalendarEventBadge } from '../types.js';
+/**
+ * A day's or a week's badge: a small soft pill, or with `dot` (where the room
+ * is short, such as a phone's column) a short tone bar whose label is its tooltip
+ * and, hidden visually, its text. The container that names it (a button, a
+ * cell) holds the label in its own name.
+ */
+export declare function CalendarBadge({ badge, slot, dot, wrap, className, }: {
+    badge: CalendarEventBadge;
+    /** The `data-slot` of the pill; the dot adds `-dot`. */
+    slot: string;
+    dot?: boolean;
+    /** The label may take two lines instead of one clipped (a narrow corner). */
+    wrap?: boolean;
+    className?: string;
+}): import("react").JSX.Element;