@eunomia/elements 1.0.0-beta.9 → 1.0.0

package/dist/features/scheduler/scheduler/scheduler.js

@@ -7,13 +7,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, property, query, state } from "lit/decorators.js";
 import { html, LitElement, nothing } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { addHours } from "../../../utils/date.utils.js";
 import { AnchorPositionMixin } from "../../../mixins/anchor-position.mixin.js";
 import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 import { schedulerStyles } from "./scheduler.styles.js";
 import { schedulerEventPopoverStyles } from "../shared/scheduler-event-popover.styles.js";
 import { renderEventPopover } from "../shared/scheduler-event-popover.js";
-import { addPeriod, getVisibleRange } from "../shared/scheduler.utils.js";
+import { addPeriod, getVisibleRange, } from "../shared/scheduler.utils.js";
 import { EventCreateEvent } from "../../../events/event-create.event.js";
 import { EventUpdateEvent } from "../../../events/event-update.event.js";
 import { EventDeleteEvent } from "../../../events/event-delete.event.js";
@@ -62,7 +61,7 @@ const VIEWS = [
  * @prop {number} [dayStartHour=0] - The first visible hour row in day, week, and work week
  * @prop {number} [dayEndHour=24] - The last visible hour row, exclusive, in day, week, and work week
  * @prop {number} [slotDuration=30] - The grid's row granularity, in minutes, also the default duration for a newly created event
- * @prop {string} [locale] - The locale used throughout. Defaults to the runtime's own
+ * @prop {string} [locale] - The locale used throughout. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {boolean} [readonly=false] - Disables creating, editing, and deleting. View only
  * @prop {boolean} [noAnimation=false] - Disables the mobile swipe slide animation and the drawer or modal's own transitions
  * @prop {boolean} [hideNowLine=false] - Hides the line marking the current time in day, week and work week views
@@ -78,21 +77,23 @@ const VIEWS = [
  * @prop {string} [viewYearLabel] - The label of the year view switcher option. Defaults to the localized string for the current locale (English: "Year")
  * @prop {string} [applyLabel] - The label of the event editor's save button. Defaults to the localized string for the current locale (English: "Apply")
  * @prop {string} [deleteLabel] - The label of the delete button, in the event editor and the read-only event popover. Defaults to the localized string for the current locale (English: "Delete")
+ * @prop {string} [deleteConfirmLabel] - The question the read-only event popover asks before deleting. Defaults to the localized string for the current locale (English: "Delete this event?")
  * @prop {string} [moreEventsLabel] - The template for the month view's overflow affordance, with the placeholder replaced by the hidden event count. Defaults to the localized string for the current locale (English: "+{count} more")
  * @prop {'default' | 'transparent' | 'ghost'} [eventAppearance='default'] - The appearance applied to day, week, and work week event chips. Month view is unaffected, always picking ghost, or default for multi-day bars, itself
  * @attr {'default' | 'transparent' | 'ghost'} [event-appearance='default'] - The visual variant applied to day, week, and work week event chips
  * @fires {EventCreateEvent} euneventcreate - Fired when a new event is saved
  * @fires {EventUpdateEvent} euneventupdate - Fired when an existing event is saved, or a day, week, or work week chip is dragged to a new time or day
  * @fires {EventDeleteEvent} euneventdelete - Fired when an event is deleted
- * @fires {PeriodChangeEvent} eunperiodchange - Fired whenever the visible period changes, from navigation, a swipe, a view switch, or an external view or displayedDate assignment
+ * @fires {PeriodChangeEvent} eunperiodchange - Fired whenever the visible period changes, from navigation, a swipe, a view switch, or an external view or displayedDate assignment. Not fired for the initial render, read visibleRange instead
  * @cssprop [--scheduler-border-color] - Sets the border color throughout the shell and grids
  * @cssprop [--scheduler-background] - Sets the background color
  * @cssprop [--scheduler-slot-height] - Sets the pixel height per slotDuration row in day, week, and work week
  * @cssprop [--scheduler-gutter-width] - Sets the width of the hour-label gutter
- * @cssprop [--scheduler-body-max-height] - Sets the maximum height, with scroll, of the day, week, and work week grid body
+ * @cssprop [--scheduler-body-max-height] - Sets the maximum height, with scroll, of the day, week, and work week grid body and the year view, and of the month view when set (uncapped by default)
  * @cssprop [--scheduler-month-cell-min-height] - Sets the minimum height of month view cells
  * @cssprop [--scheduler-swipe-duration=200ms] - Sets the duration of the mobile swipe slide animation
  * @cssprop [--scheduler-accent-color] - Sets the color marking today, the selected day and the focus ring. Defaults to the theme's primary color
+ * @cssprop [--scheduler-focus-outline-color] - Sets the keyboard focus outline color, falling back to --scheduler-accent-color, or to each event's own color on an event
  * @cssprop [--scheduler-accent-text-color] - Sets the text color shown on the accent color, such as today's number in month view
  * @cssprop [--scheduler-now-line-color] - Sets the color of the line marking the current time. Defaults to the critical color
  * @element eun-scheduler
@@ -189,7 +190,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
          */
         this.createStart = nextHour(new Date());
         /** @internal */
-        this.createEnd = addHours(this.createStart, 1);
+        this.createEnd = this.defaultCreateEnd(this.createStart);
         /**
          * Whether `eun-drawer`'s `dirty` unsaved-changes guard should be active
          * — kept in sync with the embedded editor's own `dirty` getter via its
@@ -217,6 +218,18 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
          * @internal
          */
         this.selectedEvent = null;
+        /**
+         * Whether the popover's Delete was pressed once and now waits for its
+         * confirmation. Reset on every {@link openEventPopover}.
+         * @internal
+         */
+        this.confirmingDelete = false;
+        /**
+         * Whether the drawer or modal footer's Delete was pressed once and now
+         * waits for its confirmation. Reset whenever the editor opens.
+         * @internal
+         */
+        this.confirmingEditorDelete = false;
         /** @private */
         this.handleMobileMediaChange = (event) => {
             this.isMobile = event.matches;
@@ -345,8 +358,17 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
                 this.openEditEditor(event);
             }
         };
-        /** @private */
+        /**
+         * Swaps the popover's actions for the delete confirmation, moving focus
+         * onto its Cancel button since the pressed Delete button goes away.
+         * @private
+         */
         this.handlePopoverDelete = () => {
+            this.confirmingDelete = true;
+            void this.updateComplete.then(() => this.focusPopoverButton("#event-popover-confirm-cancel"));
+        };
+        /** @private */
+        this.handlePopoverConfirmDelete = () => {
             const event = this.selectedEvent;
             this.closeEventPopover();
             if (event) {
@@ -354,6 +376,11 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
             }
         };
         /** @private */
+        this.handlePopoverCancelDelete = () => {
+            this.confirmingDelete = false;
+            void this.updateComplete.then(() => this.focusPopoverButton("#event-popover-delete"));
+        };
+        /** @private */
         this.handlePopoverClose = () => {
             this.closeEventPopover();
         };
@@ -393,8 +420,8 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
             this.closeEditor();
         };
         /** @private */
-        this.handleEditorInput = () => {
-            this.editorDirty = this.drawerEditorEl?.dirty ?? false;
+        this.handleEditorInput = (event) => {
+            this.editorDirty = event.currentTarget.dirty;
         };
         /**
          * Drives the drawer's Save button — the drawer's own footer holds the
@@ -434,21 +461,44 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         this.handleModalCancel = () => {
             this.closeEditor();
         };
+        /**
+         * Swaps the open footer for the delete confirmation, moving focus onto
+         * its Cancel button since the pressed Delete button goes away.
+         * @private
+         */
+        this.handleEditorDeleteClick = () => {
+            this.confirmingEditorDelete = true;
+            void this.updateComplete.then(() => this.focusOpenFooterButton(".editor-confirm-cancel"));
+        };
+        /** @private */
+        this.handleEditorCancelDelete = () => {
+            this.confirmingEditorDelete = false;
+            void this.updateComplete.then(() => this.focusOpenFooterButton(".editor-delete"));
+        };
+    }
+    /**
+     * The range currently visible for {@link view} and {@link displayedDate},
+     * the same one `eunperiodchange` reports. In `month` view, it covers the
+     * whole 6-week grid, leading and trailing days included.
+     */
+    get visibleRange() {
+        return getVisibleRange(this.view, this.displayedDate, this.weekStartsOn);
     }
     /**
      * Re-dispatches `eunperiodchange` whenever the visible period changes —
      * `view`/`displayedDate` are otherwise entirely self-managed (nav
      * buttons, swipe, view switch) but always overridable from outside.
+     * Skipped on the first update, same as `eun-calendar` : {@link
+     * visibleRange} gives the initial range instead.
      *
      * @param changed the changed properties.
      */
     updated(changed) {
         super.updated(changed);
-        if (changed.has("view") ||
-            changed.has("displayedDate") ||
-            changed.has("weekStartsOn")) {
-            const range = getVisibleRange(this.view, this.displayedDate, this.weekStartsOn);
-            this.dispatchEvent(new PeriodChangeEvent(this.view, range.start, range.end));
+        const periodChanged = ["view", "displayedDate", "weekStartsOn"].some((key) => changed.has(key) && changed.get(key) !== undefined);
+        if (periodChanged) {
+            const range = this.visibleRange;
+            this.dispatchEvent(new PeriodChangeEvent(this.view, range.start, range.end, this.displayedDate));
         }
     }
     /**
@@ -484,6 +534,14 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
     navigate(direction) {
         this.displayedDate = addPeriod(this.view, this.displayedDate, direction);
     }
+    /**
+     * The end a new event starting at `start` is seeded with, one
+     * {@link slotDuration} later.
+     * @private
+     */
+    defaultCreateEnd(start) {
+        return new Date(start.getTime() + this.slotDuration * 60_000);
+    }
     /**
      * Opens the editor in "create" mode, seeded at `start`.
      * @private
@@ -494,7 +552,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         }
         this.editingEvent = null;
         this.createStart = start;
-        this.createEnd = addHours(start, 1);
+        this.createEnd = this.defaultCreateEnd(start);
         this.openEditorSurface();
     }
     /**
@@ -519,6 +577,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
      */
     openEventPopover(event, anchor) {
         this.selectedEvent = event;
+        this.confirmingDelete = false;
         this.popoverTriggerEl = anchor;
         void this.updateComplete.then(() => {
             const popover = this.eventPopoverEl;
@@ -626,8 +685,13 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         });
     }
     /** @private */
+    focusPopoverButton(selector) {
+        this.eventPopoverEl?.querySelector(selector)?.focus();
+    }
+    /** @private */
     openEditorSurface() {
         this.editorDirty = false;
+        this.confirmingEditorDelete = false;
         if (this.isMobile) {
             this.isModalOpen = true;
         }
@@ -642,6 +706,73 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         this.editingEvent = null;
         this.editorDirty = false;
     }
+    /**
+     * Renders the drawer or modal footer : Delete/Cancel/Apply, or the delete
+     * confirmation that replaces them once Delete was pressed, same as the
+     * event popover. Apply stays disabled while an edited event has no
+     * changes.
+     * @private
+     */
+    renderEditorFooter(onSave, onCancel, onDelete) {
+        const deleteLabel = this.deleteLabel ?? this.dictionary.common.delete;
+        const cancelLabel = this.cancelLabel ?? this.dictionary.common.cancel;
+        if (this.confirmingEditorDelete) {
+            return html `
+        <span class="editor-confirm-text"
+          >${this.deleteConfirmLabel ??
+                this.dictionary.scheduler.deleteConfirm}</span
+        >
+        <eun-button
+          class="editor-confirm-cancel"
+          appearance="ghost"
+          @click=${this.handleEditorCancelDelete}
+          >${cancelLabel}</eun-button
+        >
+        <eun-button
+          class="editor-confirm-delete"
+          color="critical"
+          @click=${() => {
+                this.confirmingEditorDelete = false;
+                onDelete();
+            }}
+          >${deleteLabel}</eun-button
+        >
+      `;
+        }
+        return html `
+      ${this.editingEvent
+            ? html `<eun-button
+            class="editor-delete"
+            color="critical"
+            appearance="outline"
+            @click=${this.handleEditorDeleteClick}
+            >${deleteLabel}</eun-button
+          >`
+            : nothing}
+      <span style="flex: 1 1 auto;"></span>
+      <eun-button appearance="ghost" @click=${onCancel}
+        >${cancelLabel}</eun-button
+      >
+      <eun-button
+        class="editor-apply"
+        color="primary"
+        ?disabled=${!!this.editingEvent && !this.editorDirty}
+        @click=${onSave}
+        >${this.applyLabel ?? this.dictionary.common.apply}</eun-button
+      >
+    `;
+    }
+    /**
+     * Focuses `selector` inside whichever editor surface is open, the drawer
+     * and the modal rendering the same footer.
+     * @private
+     */
+    focusOpenFooterButton(selector) {
+        const surface = this.isModalOpen ? "#modal" : "#drawer";
+        this.shadowRoot
+            ?.querySelector(`${surface} ${selector}`)
+            ?.focus();
+    }
     /**
      * The prev/today/next navigation cluster, shared verbatim between the
      * desktop header (inside `#header-nav`) and the mobile one (inside
@@ -697,12 +828,12 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
     `;
     }
     render() {
-        const range = getVisibleRange(this.view, this.displayedDate, this.weekStartsOn);
+        const range = this.visibleRange;
         return html `
       <div id="header">
         <div id="header-nav">
           <span id="period-label" role="status" aria-live="polite">
-            ${formatPeriodLabel(this.view, this.displayedDate, range.start, range.end, this.locale)}
+            ${formatPeriodLabel(this.view, this.displayedDate, range.start, range.end, this.resolvedLocale)}
           </span>
           ${!this.isMobile ? this.renderNavArrows() : nothing}
         </div>
@@ -770,6 +901,8 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
       <eun-drawer
         id="drawer"
         position="end"
+        closeable
+        close-on-backdrop
         heading=${this.editingEvent
             ? this.editingEvent.title
             : (this.newEventLabel ?? this.dictionary.scheduler.newEvent)}
@@ -791,27 +924,14 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
           @input=${this.handleEditorInput}
         ></eun-scheduler-event-editor>
         <div slot="footer" style="display: contents">
-          ${this.editingEvent
-            ? html `<eun-button
-                color="critical"
-                appearance="outline"
-                @click=${this.handleDrawerDelete}
-                >${this.deleteLabel ??
-                this.dictionary.common.delete}</eun-button
-              >`
-            : nothing}
-          <span style="flex: 1 1 auto;"></span>
-          <eun-button appearance="ghost" @click=${this.handleDrawerCancel}
-            >${this.cancelLabel ?? this.dictionary.common.cancel}</eun-button
-          >
-          <eun-button color="primary" @click=${this.handleDrawerSave}
-            >${this.applyLabel ?? this.dictionary.common.apply}</eun-button
-          >
+          ${this.renderEditorFooter(this.handleDrawerSave, this.handleDrawerCancel, this.handleDrawerDelete)}
         </div>
       </eun-drawer>
 
       <eun-modal
         id="modal"
+        closeable
+        close-on-backdrop
         heading=${this.editingEvent
             ? this.editingEvent.title
             : (this.newEventLabel ?? this.dictionary.scheduler.newEvent)}
@@ -829,21 +949,10 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
           @euneventcreate=${this.handleEditorCreate}
           @euneventupdate=${this.handleEditorUpdate}
           @euneventdelete=${this.handleEditorDelete}
+          @input=${this.handleEditorInput}
         ></eun-scheduler-event-editor>
         <div slot="footer">
-          ${this.editingEvent
-            ? html `<eun-button color="critical" @click=${this.handleModalDelete}
-                >${this.deleteLabel ??
-                this.dictionary.common.delete}</eun-button
-              >`
-            : nothing}
-          <span style="flex: 1 1 auto;"></span>
-          <eun-button color="secondary" @click=${this.handleModalCancel}
-            >${this.cancelLabel ?? this.dictionary.common.cancel}</eun-button
-          >
-          <eun-button color="primary" @click=${this.handleModalSave}
-            >${this.applyLabel ?? this.dictionary.common.apply}</eun-button
-          >
+          ${this.renderEditorFooter(this.handleModalSave, this.handleModalCancel, this.handleModalDelete)}
         </div>
       </eun-modal>
 
@@ -851,14 +960,21 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         ${this.selectedEvent
             ? renderEventPopover({
                 event: this.selectedEvent,
-                locale: this.locale,
+                locale: this.resolvedLocale,
                 editLabel: this.editLabel ?? this.dictionary.common.edit,
                 deleteLabel: this.deleteLabel ?? this.dictionary.common.delete,
+                deleteConfirmLabel: this.deleteConfirmLabel ??
+                    this.dictionary.scheduler.deleteConfirm,
+                cancelLabel: this.cancelLabel ?? this.dictionary.common.cancel,
                 closeLabel: this.closeLabel ?? this.dictionary.common.close,
+                allDayLabel: this.dictionary.schedulerEventEditor.allDay,
                 priorityLabels: this.dictionary.scheduler.priorities,
                 readonly: this.readonly,
+                confirmingDelete: this.confirmingDelete,
                 onEdit: this.handlePopoverEdit,
                 onDelete: this.handlePopoverDelete,
+                onConfirmDelete: this.handlePopoverConfirmDelete,
+                onCancelDelete: this.handlePopoverCancelDelete,
                 onClose: this.handlePopoverClose,
             })
             : nothing}
@@ -957,6 +1073,9 @@ __decorate([
 __decorate([
     property({ attribute: "delete-label" })
 ], EunomiaScheduler.prototype, "deleteLabel", void 0);
+__decorate([
+    property({ attribute: "delete-confirm-label" })
+], EunomiaScheduler.prototype, "deleteConfirmLabel", void 0);
 __decorate([
     property({ attribute: "edit-label" })
 ], EunomiaScheduler.prototype, "editLabel", void 0);
@@ -999,6 +1118,12 @@ __decorate([
 __decorate([
     state()
 ], EunomiaScheduler.prototype, "selectedEvent", void 0);
+__decorate([
+    state()
+], EunomiaScheduler.prototype, "confirmingDelete", void 0);
+__decorate([
+    state()
+], EunomiaScheduler.prototype, "confirmingEditorDelete", void 0);
 __decorate([
     query("#event-popover")
 ], EunomiaScheduler.prototype, "eventPopoverEl", void 0);

package/dist/features/scheduler/scheduler/scheduler.styles.js

@@ -10,6 +10,12 @@ import { css } from "lit";
  * [--scheduler-background] - Set a custom background color
  */
 const base = css `
+  .editor-confirm-text {
+    flex: 1 1 auto;
+    align-self: center;
+    font-weight: 600;
+  }
+
   :host {
     display: block;
     box-sizing: border-box;

package/dist/features/scheduler/scheduler-event/scheduler-event.d.ts

@@ -41,11 +41,11 @@ export type EunomiaSchedulerEventCardDirection = "row" | "column";
  * @prop {string} label - The event's title
  * @prop {Date} start - The event's start time, shown as the chip's compact time label
  * @prop {Date} [end] - The event's end time. Used only to build a fuller accessible name, such as "Team sync, 9:00 AM to 10:00 AM", never shown visually on the chip
- * @prop {string} [color='blue'] - The event's accent color : one of the six preset names (red/purple/yellow/blue/green/pink), each with its own tuned two-tone CSS, or a `#rrggbb` hex string for a fully custom color
+ * @prop {string} [color='blue'] - The event's accent color : a hex string, where each of the six preset hex values (red #f14959, purple #9562e3, yellow #f0f050, blue #3bb3b9, green #49f15f, pink #d05df3) keeps its own tuned two-tone CSS, or a preset name as an alias of its hex. A #rgb or rgb() color is accepted too. Any other value falls back to blue with a console warning
  * @prop {'default' | 'transparent' | 'ghost'} [appearance='default'] - How the chip's surface is drawn
  * @prop {'row' | 'column'} [direction='column'] - Column stacks the title above the time as two lines. Row lays them out side by side on one line instead, the title truncating with an ellipsis while the time never does, for the month view's single-day chips on desktop, where a cell is wide but not tall
  * @attr {'row' | 'column'} [direction='column'] - Column stacks the title above the time as two lines. Row lays them out side by side on one line instead
- * @prop {string} [locale] - The locale used to format the time label. Defaults to the runtime's own
+ * @prop {string} [locale] - The locale used to format the time label. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {boolean} [hideTime=false] - Hides the visual time line, showing only the title. The accessible name still includes the time
  * @attr {boolean} [hide-time=false] - Hides the visual time line, showing only the title
  * @fires click - The native click event, fired on mouse or touch activation, or Enter or Space
@@ -89,13 +89,15 @@ export declare class EunomiaSchedulerEventCard extends LitElement {
      */
     color: EunomiaSchedulerEventColor;
     /**
-     * The six preset color names `scheduler-event.styles.ts` gives their own
-     * byte-identical, tuned two-tone CSS (a separate `--_accent`/`--_tintBase`
-     * pair per name, not derivable from one hex value alone) — see
-     * {@link updated} below.
+     * Configuration options for the component Shadow DOM : delegates focus,
+     * so `focus()` on the host lands on the inner button.
      * @internal
      */
-    private static readonly PRESET_COLORS;
+    static readonly shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
     /**
      * How the chip's surface is drawn.
      * @default default
@@ -111,8 +113,8 @@ export declare class EunomiaSchedulerEventCard extends LitElement {
      */
     direction: EunomiaSchedulerEventCardDirection;
     /**
-     * The locale used to format the time label ; defaults to the runtime's
-     * own.
+     * The locale used to format the time label ; defaults to the one set
+     * with `setDefaultLocale()`, English otherwise.
      */
     locale?: string;
     /**
@@ -123,17 +125,13 @@ export declare class EunomiaSchedulerEventCard extends LitElement {
     hideTime: boolean;
     /**
      * Lifecycle hook called whenever reactive properties change.
-     * Drives `--_accent`/`--_tintBase` inline whenever `color` is a custom
-     * hex value rather than one of the six preset names : those presets keep
-     * their own byte-identical CSS attribute-selector rules (see
-     * `scheduler-event.styles.ts`) untouched by clearing any leftover inline
-     * override, so existing events render pixel-identically to before this
-     * field accepted arbitrary colors. A hex value drives both custom
-     * properties from that one value, a deliberate simplification : it
-     * flattens what the six presets each render as two distinct tuned
-     * shades (a lighter tint base, a darker accent) down to one, since
-     * there's no single "correct" way to derive a second shade from an
-     * arbitrary color the way the presets were hand-picked to.
+     * Drives `--_accent`/`--_tintBase` inline from {@link resolveEventColor} :
+     * a preset name or its hex gets the preset's two tuned token shades,
+     * which is what the attribute selectors in `scheduler-event.styles.ts`
+     * also give a preset name before the upgrade. Any other hex drives both
+     * from that one value, a deliberate simplification since there's no
+     * single "correct" way to derive a second shade from an arbitrary
+     * color. An invalid value warns and falls back to blue.
      *
      * @param changedProperties - Map of changed properties
      */

package/dist/features/scheduler/scheduler-event/scheduler-event.js

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var EunomiaSchedulerEventCard_1;
 import { customElement, property } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import { schedulerEventStyles } from "./scheduler-event.styles.js";
-import { formatEventChipTime } from "../shared/scheduler.utils.js";
+import { formatEventChipTime, resolveEventColor, } from "../shared/scheduler.utils.js";
+import { getDefaultLocale } from "../../../i18n/index.js";
 /**
  * Tag name of the scheduler event chip component.
  */
@@ -40,11 +40,11 @@ export const EunomiaSchedulerEventCardTagName = "eun-scheduler-event";
  * @prop {string} label - The event's title
  * @prop {Date} start - The event's start time, shown as the chip's compact time label
  * @prop {Date} [end] - The event's end time. Used only to build a fuller accessible name, such as "Team sync, 9:00 AM to 10:00 AM", never shown visually on the chip
- * @prop {string} [color='blue'] - The event's accent color : one of the six preset names (red/purple/yellow/blue/green/pink), each with its own tuned two-tone CSS, or a `#rrggbb` hex string for a fully custom color
+ * @prop {string} [color='blue'] - The event's accent color : a hex string, where each of the six preset hex values (red #f14959, purple #9562e3, yellow #f0f050, blue #3bb3b9, green #49f15f, pink #d05df3) keeps its own tuned two-tone CSS, or a preset name as an alias of its hex. A #rgb or rgb() color is accepted too. Any other value falls back to blue with a console warning
  * @prop {'default' | 'transparent' | 'ghost'} [appearance='default'] - How the chip's surface is drawn
  * @prop {'row' | 'column'} [direction='column'] - Column stacks the title above the time as two lines. Row lays them out side by side on one line instead, the title truncating with an ellipsis while the time never does, for the month view's single-day chips on desktop, where a cell is wide but not tall
  * @attr {'row' | 'column'} [direction='column'] - Column stacks the title above the time as two lines. Row lays them out side by side on one line instead
- * @prop {string} [locale] - The locale used to format the time label. Defaults to the runtime's own
+ * @prop {string} [locale] - The locale used to format the time label. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {boolean} [hideTime=false] - Hides the visual time line, showing only the title. The accessible name still includes the time
  * @attr {boolean} [hide-time=false] - Hides the visual time line, showing only the title
  * @fires click - The native click event, fired on mouse or touch activation, or Enter or Space
@@ -60,7 +60,7 @@ export const EunomiaSchedulerEventCardTagName = "eun-scheduler-event";
  * @cssprop [--scheduler-event-time-color] - Sets the time text color
  * @element eun-scheduler-event
  */
-let EunomiaSchedulerEventCard = EunomiaSchedulerEventCard_1 = class EunomiaSchedulerEventCard extends LitElement {
+let EunomiaSchedulerEventCard = class EunomiaSchedulerEventCard extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -99,17 +99,13 @@ let EunomiaSchedulerEventCard = EunomiaSchedulerEventCard_1 = class EunomiaSched
     }
     /**
      * Lifecycle hook called whenever reactive properties change.
-     * Drives `--_accent`/`--_tintBase` inline whenever `color` is a custom
-     * hex value rather than one of the six preset names : those presets keep
-     * their own byte-identical CSS attribute-selector rules (see
-     * `scheduler-event.styles.ts`) untouched by clearing any leftover inline
-     * override, so existing events render pixel-identically to before this
-     * field accepted arbitrary colors. A hex value drives both custom
-     * properties from that one value, a deliberate simplification : it
-     * flattens what the six presets each render as two distinct tuned
-     * shades (a lighter tint base, a darker accent) down to one, since
-     * there's no single "correct" way to derive a second shade from an
-     * arbitrary color the way the presets were hand-picked to.
+     * Drives `--_accent`/`--_tintBase` inline from {@link resolveEventColor} :
+     * a preset name or its hex gets the preset's two tuned token shades,
+     * which is what the attribute selectors in `scheduler-event.styles.ts`
+     * also give a preset name before the upgrade. Any other hex drives both
+     * from that one value, a deliberate simplification since there's no
+     * single "correct" way to derive a second shade from an arbitrary
+     * color. An invalid value warns and falls back to blue.
      *
      * @param changedProperties - Map of changed properties
      */
@@ -118,23 +114,24 @@ let EunomiaSchedulerEventCard = EunomiaSchedulerEventCard_1 = class EunomiaSched
         if (!changedProperties.has("color")) {
             return;
         }
-        if (EunomiaSchedulerEventCard_1.PRESET_COLORS.has(this.color)) {
-            this.style.removeProperty("--_accent");
-            this.style.removeProperty("--_tintBase");
-        }
-        else {
-            this.style.setProperty("--_accent", this.color);
-            this.style.setProperty("--_tintBase", this.color);
+        let resolved = resolveEventColor(this.color);
+        if (!resolved) {
+            console.warn(`<${this.localName}>: color "${this.color}" is neither a preset ` +
+                "name nor a color, falling back to blue.", this);
+            resolved = resolveEventColor("blue");
         }
+        this.style.setProperty("--_accent", resolved.accent);
+        this.style.setProperty("--_tintBase", resolved.tint);
     }
     /**
      * Renders the chip template.
      * @returns The rendered HTML template
      */
     render() {
-        const time = formatEventChipTime(this.start, this.locale);
+        const locale = this.locale ?? getDefaultLocale();
+        const time = formatEventChipTime(this.start, locale);
         const accessibleName = this.end
-            ? `${this.label}, ${time} – ${this.end.toLocaleTimeString(this.locale, { hour: "numeric", minute: "2-digit" })}`
+            ? `${this.label}, ${time} – ${this.end.toLocaleTimeString(locale, { hour: "numeric", minute: "2-digit" })}`
             : `${this.label}, ${time}`;
         return html `
       <button type="button" id="chip" aria-label=${accessibleName}>
@@ -158,20 +155,14 @@ let EunomiaSchedulerEventCard = EunomiaSchedulerEventCard_1 = class EunomiaSched
  */
 EunomiaSchedulerEventCard.styles = schedulerEventStyles;
 /**
- * The six preset color names `scheduler-event.styles.ts` gives their own
- * byte-identical, tuned two-tone CSS (a separate `--_accent`/`--_tintBase`
- * pair per name, not derivable from one hex value alone) — see
- * {@link updated} below.
+ * Configuration options for the component Shadow DOM : delegates focus,
+ * so `focus()` on the host lands on the inner button.
  * @internal
  */
-EunomiaSchedulerEventCard.PRESET_COLORS = new Set([
-    "red",
-    "purple",
-    "yellow",
-    "blue",
-    "green",
-    "pink",
-]);
+EunomiaSchedulerEventCard.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
 __decorate([
     property()
 ], EunomiaSchedulerEventCard.prototype, "label", void 0);
@@ -196,7 +187,7 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: "hide-time" })
 ], EunomiaSchedulerEventCard.prototype, "hideTime", void 0);
-EunomiaSchedulerEventCard = EunomiaSchedulerEventCard_1 = __decorate([
+EunomiaSchedulerEventCard = __decorate([
     customElement(EunomiaSchedulerEventCardTagName)
 ], EunomiaSchedulerEventCard);
 export { EunomiaSchedulerEventCard };

package/dist/features/scheduler/scheduler-event/scheduler-event.styles.js

@@ -102,7 +102,7 @@ const base = css `
   }
 
   #chip:focus-visible {
-    outline-color: var(--_accent);
+    outline-color: var(--scheduler-focus-outline-color, var(--_accent));
     outline-offset: 1px;
   }
 
@@ -160,7 +160,7 @@ const base = css `
     white-space: nowrap;
     color: var(
       --scheduler-event-time-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
     font-size: 11px;
     line-height: 1.3;