@eunomia/elements 1.0.0-beta.9 → 1.0.0

package/dist/features/scheduler/shared/scheduler.utils.d.ts

@@ -29,6 +29,56 @@ export declare const GUEST_STATUS_ICON: Record<EunomiaSchedulerGuestStatus, Euno
  * `severity` prop in the editor.
  */
 export declare const GUEST_STATUS_SEMANTIC_STATE: Record<EunomiaSchedulerGuestStatus, EunomiaChipSeverity>;
+/**
+ * The six preset event colors, each with its `500` hex (the value the
+ * editor's swatches store, and an alias of the name itself) and the two
+ * token shades the chip is tinted with.
+ */
+export declare const EVENT_COLOR_PRESETS: readonly [{
+    readonly name: "red";
+    readonly hex: "#f14959";
+    readonly accent: "#ed1b2f";
+}, {
+    readonly name: "purple";
+    readonly hex: "#9562e3";
+    readonly accent: "#991bed";
+}, {
+    readonly name: "yellow";
+    readonly hex: "#f0f050";
+    readonly accent: "#e0e000";
+}, {
+    readonly name: "blue";
+    readonly hex: "#3bb3b9";
+    readonly accent: "#0aa5a8";
+}, {
+    readonly name: "green";
+    readonly hex: "#49f15f";
+    readonly accent: "#1bed22";
+}, {
+    readonly name: "pink";
+    readonly hex: "#d05df3";
+    readonly accent: "#c300ff";
+}];
+/**
+ * Normalizes an event color to a lowercase `#rrggbb` hex : a preset name
+ * becomes its `500` hex, a color `normalizeHexColor` recognizes its hex,
+ * and anything else is returned as is.
+ *
+ * @param color a preset name or a color.
+ */
+export declare function toEventColorHex(color: string): string;
+/**
+ * The CSS colors an event color resolves to : the preset's own token
+ * shades for a preset name or its `500` hex, the normalized hex for any
+ * other color `normalizeHexColor` recognizes (`#rgb`, `#rrggbb`,
+ * `rgb()`), and `null` for anything else.
+ *
+ * @param color a preset name or a color.
+ */
+export declare function resolveEventColor(color: string): {
+    accent: string;
+    tint: string;
+} | null;
 /**
  * An inclusive `[start, end]` calendar range, at day boundaries.
  */
@@ -59,6 +109,17 @@ export declare function getVisibleRange(view: EunomiaSchedulerView, displayedDat
  * @returns the new anchor date.
  */
 export declare function addPeriod(view: EunomiaSchedulerView, date: Date, direction: 1 | -1): Date;
+/**
+ * The last instant `event` actually covers. A timed event's `end` is
+ * exclusive, so one ending exactly at midnight stops on the day before :
+ * 29 00:00 → 31 00:00 covers the 29th and 30th only, and 10:00 → 00:00
+ * the next day stays a same-day event. An all-day event's `end` names its
+ * last day instead, so it's returned as is.
+ *
+ * @param event the event to check.
+ * @returns the event's inclusive end.
+ */
+export declare function inclusiveEnd(event: EunomiaSchedulerEvent): Date;
 /**
  * Whether `event` is all-day, or spans more than one calendar day — either
  * way, it belongs in the all-day row above the hour grid rather than as a

package/dist/features/scheduler/shared/scheduler.utils.js

@@ -1,4 +1,5 @@
 import { addDays, addMonths, addWeeks, addYears, endOfDay, endOfYear, getCalendarMonthMatrix, isSameDay, isWeekend, startOfDay, startOfYear, } from "../../../utils/date.utils.js";
+import { normalizeHexColor } from "../../../utils/color.utils.js";
 /**
  * `priority` → the `eun-tag` severity it's rendered with in the read-only
  * popover (`--eun-color-<state>-*`) — the only color scale in the library
@@ -37,6 +38,59 @@ export const GUEST_STATUS_SEMANTIC_STATE = {
     confirmed: "success",
     declined: "critical",
 };
+/**
+ * The six preset event colors, each with its `500` hex (the value the
+ * editor's swatches store, and an alias of the name itself) and the two
+ * token shades the chip is tinted with.
+ */
+export const EVENT_COLOR_PRESETS = [
+    { name: "red", hex: "#f14959", accent: "#ed1b2f" },
+    { name: "purple", hex: "#9562e3", accent: "#991bed" },
+    { name: "yellow", hex: "#f0f050", accent: "#e0e000" },
+    { name: "blue", hex: "#3bb3b9", accent: "#0aa5a8" },
+    { name: "green", hex: "#49f15f", accent: "#1bed22" },
+    { name: "pink", hex: "#d05df3", accent: "#c300ff" },
+];
+/**
+ * The preset an event color names, by its name or its `500` hex alike,
+ * the hex being compared once normalized by `eun-color-picker`'s own
+ * `normalizeHexColor`.
+ * @internal
+ */
+function findColorPreset(color, hex) {
+    const name = color.trim().toLowerCase();
+    return EVENT_COLOR_PRESETS.find((preset) => preset.name === name || preset.hex === hex);
+}
+/**
+ * Normalizes an event color to a lowercase `#rrggbb` hex : a preset name
+ * becomes its `500` hex, a color `normalizeHexColor` recognizes its hex,
+ * and anything else is returned as is.
+ *
+ * @param color a preset name or a color.
+ */
+export function toEventColorHex(color) {
+    const hex = normalizeHexColor(color);
+    return findColorPreset(color, hex)?.hex ?? hex ?? color;
+}
+/**
+ * The CSS colors an event color resolves to : the preset's own token
+ * shades for a preset name or its `500` hex, the normalized hex for any
+ * other color `normalizeHexColor` recognizes (`#rgb`, `#rrggbb`,
+ * `rgb()`), and `null` for anything else.
+ *
+ * @param color a preset name or a color.
+ */
+export function resolveEventColor(color) {
+    const hex = normalizeHexColor(color);
+    const preset = findColorPreset(color, hex);
+    if (preset) {
+        return {
+            accent: `var(--eun-color-${preset.name}-600, ${preset.accent})`,
+            tint: `var(--eun-color-${preset.name}-500, ${preset.hex})`,
+        };
+    }
+    return hex ? { accent: hex, tint: hex } : null;
+}
 /**
  * The full visible range for `view`, anchored on `displayedDate` : the day
  * itself, the 7-day week/work-week containing it, the 6-week grid a month
@@ -105,6 +159,23 @@ export function addPeriod(view, date, direction) {
             return date;
     }
 }
+/**
+ * The last instant `event` actually covers. A timed event's `end` is
+ * exclusive, so one ending exactly at midnight stops on the day before :
+ * 29 00:00 → 31 00:00 covers the 29th and 30th only, and 10:00 → 00:00
+ * the next day stays a same-day event. An all-day event's `end` names its
+ * last day instead, so it's returned as is.
+ *
+ * @param event the event to check.
+ * @returns the event's inclusive end.
+ */
+export function inclusiveEnd(event) {
+    const endsAtMidnight = startOfDay(event.end).getTime() === event.end.getTime();
+    if (event.allDay || !endsAtMidnight || event.end <= event.start) {
+        return event.end;
+    }
+    return new Date(event.end.getTime() - 1);
+}
 /**
  * Whether `event` is all-day, or spans more than one calendar day — either
  * way, it belongs in the all-day row above the hour grid rather than as a
@@ -113,7 +184,7 @@ export function addPeriod(view, date, direction) {
  * @param event the event to check.
  */
 export function isMultiDay(event) {
-    return !!event.allDay || !isSameDay(event.start, event.end);
+    return !!event.allDay || !isSameDay(event.start, inclusiveEnd(event));
 }
 /**
  * The *timed*, same-day events starting on `day` (local calendar day),
@@ -143,7 +214,8 @@ export function eventsOnDay(events, day) {
     const dayStart = startOfDay(day).getTime();
     const dayEnd = endOfDay(day).getTime();
     return events
-        .filter((event) => event.start.getTime() <= dayEnd && event.end.getTime() >= dayStart)
+        .filter((event) => event.start.getTime() <= dayEnd &&
+        inclusiveEnd(event).getTime() >= dayStart)
         .sort((a, b) => a.start.getTime() - b.start.getTime());
 }
 /**
@@ -219,12 +291,14 @@ function layoutBars(candidates, days) {
     const rangeStart = startOfDay(days[0]).getTime();
     const rangeEnd = endOfDay(days[days.length - 1]).getTime();
     const bars = candidates
-        .filter((event) => event.start.getTime() <= rangeEnd && event.end.getTime() >= rangeStart)
+        .filter((event) => event.start.getTime() <= rangeEnd &&
+        inclusiveEnd(event).getTime() >= rangeStart)
         .map((event) => {
+        const end = inclusiveEnd(event).getTime();
         const startIndex = Math.max(days.findIndex((day) => endOfDay(day).getTime() >= event.start.getTime()), 0);
         let endIndex = days.length - 1;
         for (let index = 0; index < days.length; index += 1) {
-            if (startOfDay(days[index]).getTime() > event.end.getTime()) {
+            if (startOfDay(days[index]).getTime() > end) {
                 endIndex = index - 1;
                 break;
             }

package/dist/features/table/table/table-native.styles.js

@@ -1,4 +1,5 @@
 import { css } from "lit";
+import { cssBelow } from "../../../utils/media.styles.js";
 /**
  * Light DOM style of the native `<table>` slotted into `eun-table`. A
  * shadow root can't reach a slotted table's rows and cells, so `eun-table`
@@ -319,7 +320,7 @@ export const tableNativeStyles = css `
     );
     text-align: center;
     font-size: var(--eun-font-size-s, 13px);
-    color: var(--table-empty-color, var(--eun-text-secondary, #484e61));
+    color: var(--table-empty-color, var(--eun-text-secondary, #666e8a));
   }
 
   eun-table:not(:defined):is([loading], :has(> table > tbody > tr))
@@ -387,7 +388,10 @@ export const tableNativeStyles = css `
       var(--eun-surface-color, #ffffff)
     );
     font-weight: var(--table-column-font-weight, var(--eun-font-weight-m, 500));
-    color: var(--table-column-color, var(--eun-text-secondary, #484e61));
+    color: var(
+      --table-header-color,
+      var(--table-column-color, var(--eun-text-secondary, #666e8a))
+    );
     white-space: nowrap;
   }
 
@@ -510,7 +514,7 @@ export const tableNativeStyles = css `
     text-align: center;
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
-    color: var(--table-row-number-color, var(--eun-text-secondary, #484e61));
+    color: var(--table-row-number-color, var(--eun-text-secondary, #666e8a));
     background-color: var(
       --table-sticky-column-background,
       var(--table-row-background, var(--eun-surface-color, #ffffff))
@@ -617,7 +621,7 @@ export const tableNativeStyles = css `
     --_table-action-opacity: 0 !important;
   }
 
-  @media (hover: none) {
+  @media (hover: none), ${cssBelow("laptop")} {
     eun-table > table > tbody > tr > [data-table-select] eun-checkbox {
       opacity: 1;
     }

package/dist/features/table/table/table.d.ts

@@ -131,7 +131,8 @@ declare const EunomiaTable_base: import("../../../utils/constructor.type.js").Co
  * @cssprop [--table-row-selected-background] - Sets the tint of a selected body row
  * @cssprop [--table-row-dragging-background] - Sets the tint of a row being reordered with `createDragReorder`
  * @cssprop [--table-row-transition-duration] - Sets the duration of the hover and selection tint transitions
- * @cssprop [--table-column-color] - Sets the text color of the header cells
+ * @cssprop [--table-header-color] - Sets the text color of the header cells
+ * @cssprop [--table-column-color] - Sets the text color of the header cells, while `--table-header-color` is unset
  * @cssprop [--table-column-font-weight] - Sets the font weight of the header cells
  * @cssprop [--table-header-padding-block] - Sets the vertical padding of the header cells, the body cells' own by default
  * @cssprop [--table-header-padding-inline] - Sets the horizontal padding of the header cells, the body cells' own by default

package/dist/features/table/table/table.js

@@ -201,7 +201,8 @@ const INTERACTIVE_SELECTOR = 'a[href], button, input, select, textarea, summary,
  * @cssprop [--table-row-selected-background] - Sets the tint of a selected body row
  * @cssprop [--table-row-dragging-background] - Sets the tint of a row being reordered with `createDragReorder`
  * @cssprop [--table-row-transition-duration] - Sets the duration of the hover and selection tint transitions
- * @cssprop [--table-column-color] - Sets the text color of the header cells
+ * @cssprop [--table-header-color] - Sets the text color of the header cells
+ * @cssprop [--table-column-color] - Sets the text color of the header cells, while `--table-header-color` is unset
  * @cssprop [--table-column-font-weight] - Sets the font weight of the header cells
  * @cssprop [--table-header-padding-block] - Sets the vertical padding of the header cells, the body cells' own by default
  * @cssprop [--table-header-padding-inline] - Sets the horizontal padding of the header cells, the body cells' own by default

package/dist/features/table/table/table.styles.js

@@ -4,10 +4,12 @@ import { cssBelow } from "../../../utils/media.styles.js";
  * Style for `eun-table`'s own shadow root. `#frame` is the table's border
  * and its scroll container: a sticky header, column, or footer sticks
  * relative to whichever ancestor actually scrolls, and this is the one
- * meant to. The host only reserves room above it for the `<caption>`,
+ * meant to. Its top margin reserves room above it for the `<caption>`,
  * which the light DOM sheet positions against the host, outside the
- * frame's clipping. The slotted native table itself is styled from the light DOM
- * (see `table-native.styles.ts`).
+ * frame's clipping. That room is kept off `:host`, where a page reset
+ * such as `* { padding: 0 }` would win over it. The slotted native
+ * table itself is styled from the light DOM (see
+ * `table-native.styles.ts`).
  *
  * Custom css variables:
  * [--table-border-color] - Set a custom border color
@@ -25,7 +27,6 @@ const base = css `
     position: relative;
     box-sizing: border-box;
     max-height: var(--table-max-height, none);
-    padding-top: var(--_table-caption-height, 0px);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
   }
 
@@ -48,6 +49,7 @@ const base = css `
   #frame {
     flex: 1 1 auto;
     min-height: 0;
+    margin-top: var(--_table-caption-height, 0px);
     box-sizing: border-box;
     border: var(--table-border-width, var(--eun-border-width-s, 1px)) solid
       var(--table-border-color, var(--eun-border-color, #dee0e7));

package/dist/i18n/en.d.ts

@@ -20,6 +20,8 @@ export declare const en: {
         noResults: string;
         keepEditing: string;
         discard: string;
+        discardChangesHeading: string;
+        discardChangesDescription: string;
     };
     datePicker: {
         openCalendar: string;
@@ -96,6 +98,7 @@ export declare const en: {
         next: string;
         calendarView: string;
         newEvent: string;
+        deleteConfirm: string;
         viewDay: string;
         viewWeek: string;
         viewWorkWeek: string;
@@ -263,6 +266,8 @@ export declare const en: {
         priority: string;
         color: string;
         required: string;
+        titleRequired: string;
+        endBeforeStart: string;
         guests: string;
         addGuest: string;
         removeGuest: string;
@@ -272,13 +277,25 @@ export declare const en: {
     };
     stepper: {
         label: string;
+        substep: (index: number, total: number, label: string) => string;
     };
     validation: {
         valueMissing: string;
+        typeMismatch: {
+            email: string;
+            url: string;
+        };
+        patternMismatch: string;
         tooShort: (min: number, length: number) => string;
         tooLong: (max: number, length: number) => string;
+        rangeUnderflow: (min: string) => string;
+        rangeOverflow: (max: string) => string;
+        stepMismatch: (lower: string, upper: string) => string;
+        badInput: string;
         invalidDate: string;
+        unavailableDate: string;
         invalidTime: string;
+        invalidColor: string;
     };
 };
 /**

package/dist/i18n/en.js

@@ -20,6 +20,8 @@ export const en = {
         noResults: "No results",
         keepEditing: "Keep editing",
         discard: "Discard",
+        discardChangesHeading: "Discard changes?",
+        discardChangesDescription: "You have unsaved changes. This action can't be undone.",
     },
     datePicker: {
         openCalendar: "Open calendar",
@@ -78,6 +80,7 @@ export const en = {
         next: "Next period",
         calendarView: "Calendar view",
         newEvent: "New event",
+        deleteConfirm: "Delete this event?",
         viewDay: "Day",
         viewWeek: "Week",
         viewWorkWeek: "Work week",
@@ -245,6 +248,8 @@ export const en = {
         priority: "Priority",
         color: "Color",
         required: "is required",
+        titleRequired: "Title is required",
+        endBeforeStart: "The end must be after the start",
         guests: "Guests",
         addGuest: "Add guest",
         removeGuest: "Remove",
@@ -254,12 +259,24 @@ export const en = {
     },
     stepper: {
         label: "Progress",
+        substep: (index, total, label) => `, step ${index} of ${total}: ${label}`,
     },
     validation: {
         valueMissing: "This field is required",
+        typeMismatch: {
+            email: "Enter a valid email address",
+            url: "Enter a valid URL",
+        },
+        patternMismatch: "Match the requested format",
         tooShort: (min, length) => `Please lengthen this text to ${min} characters or more (you are currently using ${length} characters).`,
         tooLong: (max, length) => `Please shorten this text to ${max} characters or less (you are currently using ${length} characters).`,
+        rangeUnderflow: (min) => `Enter a value greater than or equal to ${min}`,
+        rangeOverflow: (max) => `Enter a value less than or equal to ${max}`,
+        stepMismatch: (lower, upper) => `Enter a valid value. The two nearest valid values are ${lower} and ${upper}`,
+        badInput: "Enter a valid value",
         invalidDate: "Enter a valid date",
+        unavailableDate: "This date isn't available",
         invalidTime: "Enter a valid time",
+        invalidColor: "Enter a valid color",
     },
 };

package/dist/i18n/fr.js

@@ -18,6 +18,8 @@ export const fr = {
         noResults: "Aucun résultat",
         keepEditing: "Continuer la modification",
         discard: "Abandonner",
+        discardChangesHeading: "Abandonner les modifications\u00a0?",
+        discardChangesDescription: "Vos modifications non enregistrées seront perdues. Cette action est irréversible.",
     },
     datePicker: {
         openCalendar: "Ouvrir le calendrier",
@@ -94,6 +96,7 @@ export const fr = {
         next: "Période suivante",
         calendarView: "Vue du calendrier",
         newEvent: "Nouvel événement",
+        deleteConfirm: "Supprimer cet événement\u00a0?",
         viewDay: "Jour",
         viewWeek: "Semaine",
         viewWorkWeek: "Semaine de travail",
@@ -265,6 +268,8 @@ export const fr = {
         priority: "Priorité",
         color: "Couleur",
         required: "est obligatoire",
+        titleRequired: "Le titre est obligatoire",
+        endBeforeStart: "La fin doit être après le début",
         guests: "Invités",
         addGuest: "Ajouter un invité",
         removeGuest: "Retirer",
@@ -274,12 +279,24 @@ export const fr = {
     },
     stepper: {
         label: "Progression",
+        substep: (index, total, label) => `, étape ${index} sur ${total}\u00a0: ${label}`,
     },
     validation: {
         valueMissing: "Ce champ est obligatoire",
+        typeMismatch: {
+            email: "Saisissez une adresse e-mail valide",
+            url: "Saisissez une URL valide",
+        },
+        patternMismatch: "Respectez le format demandé",
         tooShort: (min, length) => `Saisissez au moins ${min} caractères (actuellement ${length}).`,
         tooLong: (max, length) => `Saisissez au plus ${max} caractères (actuellement ${length}).`,
+        rangeUnderflow: (min) => `Saisissez une valeur supérieure ou égale à ${min}`,
+        rangeOverflow: (max) => `Saisissez une valeur inférieure ou égale à ${max}`,
+        stepMismatch: (lower, upper) => `Saisissez une valeur valide. Les deux valeurs valides les plus proches sont ${lower} et ${upper}`,
+        badInput: "Saisissez une valeur valide",
         invalidDate: "Saisissez une date valide",
+        unavailableDate: "Cette date n'est pas disponible",
         invalidTime: "Saisissez une heure valide",
+        invalidColor: "Saisissez une couleur valide",
     },
 };

package/dist/index.d.ts

@@ -43,6 +43,8 @@ export { EunomiaTabPanel, EunomiaTabPanelTagName, } from "./components/navigatio
 export { EunomiaCarousel, EunomiaCarouselTagName, } from "./components/navigation/carousel/carousel.js";
 export type { EunomiaCarouselLayout } from "./components/navigation/carousel/carousel.js";
 export { EunomiaBreadcrumb, EunomiaBreadcrumbTagName, } from "./components/navigation/breadcrumb/breadcrumb.js";
+export { EunomiaNavMenu, EunomiaNavMenuTagName, } from "./components/navigation/nav-menu/nav-menu.js";
+export type { EunomiaNavMenuPlacement, EunomiaNavMenuTrigger, } from "./components/navigation/nav-menu/nav-menu.js";
 export { EunomiaPagination, EunomiaPaginationTagName, } from "./components/navigation/pagination/pagination.js";
 export { EunomiaStepper, EunomiaStepperTagName, } from "./components/navigation/stepper/stepper.js";
 export type { EunomiaStepperItemState, EunomiaStepperOrientation, EunomiaStepperStepData, EunomiaStepperSubstepData, EunomiaStepperVariant, } from "./components/navigation/stepper/stepper.js";
@@ -96,6 +98,8 @@ export { EunomiaSchedulerEventCard, EunomiaSchedulerEventCardTagName, } from "./
 export type { EunomiaSchedulerEventAppearance } from "./features/scheduler/scheduler-event/scheduler-event.js";
 export { EunomiaSchedulerEventEditor, EunomiaSchedulerEventEditorTagName, } from "./features/scheduler/scheduler-event-editor/scheduler-event-editor.js";
 export type { EunomiaSchedulerEvent, EunomiaSchedulerEventColor, EunomiaSchedulerEventPriority, EunomiaSchedulerGuest, EunomiaSchedulerGuestStatus, EunomiaSchedulerView, } from "./features/scheduler/shared/scheduler.types.js";
+export { addPeriod, getVisibleRange, } from "./features/scheduler/shared/scheduler.utils.js";
+export type { DateRange as EunomiaSchedulerDateRange } from "./features/scheduler/shared/scheduler.utils.js";
 export { EunomiaTable, EunomiaTableTagName, } from "./features/table/table/table.js";
 export { EunomiaTableActionBar, EunomiaTableActionBarTagName, } from "./features/table/table-action-bar/table-action-bar.js";
 export type { EunomiaTableAction, EunomiaTableColumnDef, EunomiaTableColumnSort, EunomiaTableRowButtonActionDef, EunomiaTableRowDropdownActionDef, EunomiaTableRowActionDef, } from "./features/table/table/table.types.js";
@@ -130,6 +134,8 @@ export { FileRejectEvent } from "./events/file-reject.event.js";
 export { EventCreateEvent } from "./events/event-create.event.js";
 export { EventUpdateEvent } from "./events/event-update.event.js";
 export { EventDeleteEvent } from "./events/event-delete.event.js";
+export { EventCancelEvent } from "./events/event-cancel.event.js";
+export { EditorStateChangeEvent } from "./events/editor-state-change.event.js";
 export { GuestInviteEvent } from "./events/event-guest-invite.event.js";
 export { PeriodChangeEvent } from "./events/period-change.event.js";
 export { EventClickEvent } from "./events/event-click.event.js";

package/dist/index.js

@@ -62,6 +62,7 @@ export { EunomiaTab, EunomiaTabTagName, } from "./components/navigation/tabs/tab
 export { EunomiaTabPanel, EunomiaTabPanelTagName, } from "./components/navigation/tabs/tab-panel/tab-panel.js";
 export { EunomiaCarousel, EunomiaCarouselTagName, } from "./components/navigation/carousel/carousel.js";
 export { EunomiaBreadcrumb, EunomiaBreadcrumbTagName, } from "./components/navigation/breadcrumb/breadcrumb.js";
+export { EunomiaNavMenu, EunomiaNavMenuTagName, } from "./components/navigation/nav-menu/nav-menu.js";
 export { EunomiaPagination, EunomiaPaginationTagName, } from "./components/navigation/pagination/pagination.js";
 export { EunomiaStepper, EunomiaStepperTagName, } from "./components/navigation/stepper/stepper.js";
 export { EunomiaStep, EunomiaStepTagName, } from "./components/navigation/stepper/step.js";
@@ -97,6 +98,7 @@ export { EunomiaScheduler, EunomiaSchedulerTagName, } from "./features/scheduler
 export { EunomiaCalendar, EunomiaCalendarTagName, } from "./features/scheduler/calendar/calendar.js";
 export { EunomiaSchedulerEventCard, EunomiaSchedulerEventCardTagName, } from "./features/scheduler/scheduler-event/scheduler-event.js";
 export { EunomiaSchedulerEventEditor, EunomiaSchedulerEventEditorTagName, } from "./features/scheduler/scheduler-event-editor/scheduler-event-editor.js";
+export { addPeriod, getVisibleRange, } from "./features/scheduler/shared/scheduler.utils.js";
 export { EunomiaTable, EunomiaTableTagName, } from "./features/table/table/table.js";
 export { EunomiaTableActionBar, EunomiaTableActionBarTagName, } from "./features/table/table-action-bar/table-action-bar.js";
 export { debounce, throttle } from "./utils/time.utils.js";
@@ -124,6 +126,8 @@ export { FileRejectEvent } from "./events/file-reject.event.js";
 export { EventCreateEvent } from "./events/event-create.event.js";
 export { EventUpdateEvent } from "./events/event-update.event.js";
 export { EventDeleteEvent } from "./events/event-delete.event.js";
+export { EventCancelEvent } from "./events/event-cancel.event.js";
+export { EditorStateChangeEvent } from "./events/editor-state-change.event.js";
 export { GuestInviteEvent } from "./events/event-guest-invite.event.js";
 export { PeriodChangeEvent } from "./events/period-change.event.js";
 export { EventClickEvent } from "./events/event-click.event.js";

package/dist/jsx.d.ts

@@ -27,24 +27,66 @@
 import type { HTMLAttributes, Key, Ref } from "react";
 type EunomiaTagName = Extract<keyof HTMLElementTagNameMap, `eun-${string}`>;
 type EunomiaOwnProps<T> = Partial<Omit<T, keyof HTMLElement | keyof HTMLOrSVGElement>>;
+type KebabCase<S extends string> = S extends `${infer Head}${infer Tail}` ? `${Head extends Lowercase<Head> ? Head : `-${Lowercase<Head>}`}${KebabCase<Tail>}` : S;
+/**
+ * Properties mirroring a native HTML attribute keep its all-lowercase
+ * spelling (`commandfor`, `popovertarget`) instead of the kebab-case one.
+ */
+type NativeAttributeName = "commandFor" | "popoverTarget";
+type AttributeName<K extends string> = K extends NativeAttributeName ? Lowercase<K> : KebabCase<K>;
+/**
+ * The attribute twin of every camelCase own property holding a string,
+ * number or boolean (`transparent-at-top` for `transparentAtTop`),
+ * following the library-wide `attribute: "kebab-case"` convention. React 19
+ * renders a camelCase prop as a camelCase attribute during SSR, which the
+ * component doesn't observe and its `*-ssr.css` selectors don't match, so
+ * server-rendered markup has to use these names. Object/array properties
+ * (`attribute: false`) have no attribute and are left out.
+ */
+type EunomiaAttributeProps<T> = {
+    [K in keyof EunomiaOwnProps<T> as K extends string ? AttributeName<K> extends K ? never : NonNullable<EunomiaOwnProps<T>[K]> extends string | number | boolean ? AttributeName<K> : never : never]: EunomiaOwnProps<T>[K];
+};
+/**
+ * Attributes a component parses from a string although the property
+ * behind them holds an array or a date (`steps` as JSON, `default-value`
+ * as yyyy-mm-dd), declared by each component's own module next to its
+ * `HTMLElementTagNameMap` entry. Being strings, they're the only form of
+ * these values a server render writes into the markup.
+ */
+type EunomiaStringAttributeName<K extends EunomiaTagName> = K extends keyof EunomiaStringAttributeMap ? EunomiaStringAttributeMap[K] : never;
+type EunomiaStringAttributeProps<K extends EunomiaTagName> = {
+    [A in EunomiaStringAttributeName<K>]?: A extends keyof EunomiaOwnProps<HTMLElementTagNameMap[K]> ? EunomiaOwnProps<HTMLElementTagNameMap[K]>[A] | string : string;
+};
 /**
  * Props allowed on a `<eun-*>` tag in TSX: the element's own reactive
- * properties, plus every standard HTML/ARIA attribute and event handler
+ * properties and their kebab-case attribute names, the attributes parsed
+ * from a string ({@link EunomiaStringAttributeName}), plus every standard
+ * HTML/ARIA attribute and event handler
  * React already knows about (id, style, title, tabIndex, aria-*, onClick,
  * ...). `className` is deliberately excluded: React only rewrites it to
  * the `class` attribute for elements it recognizes, not arbitrary custom
- * elements — `class` is the one that actually works here. Custom events
- * (`eunnavigate`, `eunchange`, ...) aren't included — those are typed and
- * wired per-component with a ref, when that component is migrated.
+ * elements, `class` is the one that actually works here. Custom events
+ * (`eunnavigate`, `eunchange`, ...) aren't included: React never attaches
+ * them to a server-rendered element on hydration, which is why
+ * `eunProps` (see react.ts) sets them, and object properties, from a ref.
  */
-type EunomiaElementProps<T> = EunomiaOwnProps<T> & Omit<HTMLAttributes<T>, "className" | keyof EunomiaOwnProps<T>> & {
+type EunomiaElementProps<K extends EunomiaTagName, T = HTMLElementTagNameMap[K]> = Omit<EunomiaOwnProps<T>, EunomiaStringAttributeName<K>> & Omit<EunomiaAttributeProps<T>, EunomiaStringAttributeName<K>> & EunomiaStringAttributeProps<K> & Omit<HTMLAttributes<T>, "className" | keyof EunomiaOwnProps<T> | keyof EunomiaAttributeProps<T> | EunomiaStringAttributeName<K>> & {
     ref?: Ref<T>;
     key?: Key | null;
     class?: string;
 };
 type EunomiaJSXElements = {
-    [K in EunomiaTagName]: EunomiaElementProps<HTMLElementTagNameMap[K]>;
+    [K in EunomiaTagName]: EunomiaElementProps<K>;
 };
+declare global {
+    /**
+     * Each tag's attributes parsed from a string, see
+     * {@link EunomiaStringAttributeName}. Filled by the components' own
+     * modules.
+     */
+    interface EunomiaStringAttributeMap {
+    }
+}
 declare module "react" {
     namespace JSX {
         interface IntrinsicElements extends EunomiaJSXElements {

package/dist/mixins/anchor-position.mixin.d.ts

@@ -23,6 +23,23 @@ export interface AnchorPositionOptions {
      * @default "vertical"
      */
     axis?: "vertical" | "horizontal";
+    /**
+     * On the fallback path's `"vertical"` axis, the side `floating` prefers
+     * : `"bottom"` opens below the anchor and flips above it, `"top"` the
+     * other way around. The native path's preferred side comes from the
+     * consumer's own CSS.
+     * @default "bottom"
+     */
+    side?: "bottom" | "top";
+    /**
+     * On the fallback path's `"vertical"` axis, which edge of the anchor
+     * `floating` lines up with : its left edge (`"start"`), its center, or
+     * its right edge (`"end"`). Once set, `floating` is also kept within the
+     * viewport horizontally. Left unset, `floating` lines up with the
+     * anchor's left edge, unclamped. The native path's alignment comes from
+     * the consumer's own CSS.
+     */
+    align?: "start" | "center" | "end";
     /**
      * Forces the fallback (`getBoundingClientRect`-based) positioning path
      * even on a browser that otherwise supports native CSS Anchor