@eunomia/elements 1.0.0-beta.5 → 1.0.0-beta.7

package/dist/components/navigation/toolbar/toolbar.styles.js

@@ -6,6 +6,8 @@ import { css } from "lit";
  * [--toolbar-height] - Set a custom expanded bar height
  * [--toolbar-height-collapsed] - Set a custom collapsed bar height (collapse-on-scroll mode only)
  * [--toolbar-padding] - Set a custom padding for the bar
+ * [--toolbar-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toolbar-padding is set
+ * [--toolbar-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --toolbar-padding is set
  * [--toolbar-gap] - Set a custom gap between the start/center/end columns themselves, and the fallback for the three below
  * [--toolbar-gap-start] - Set a custom gap between items inside the start slot, falling back to --toolbar-gap
  * [--toolbar-gap-center] - Set a custom gap between items inside the center slot, falling back to --toolbar-gap
@@ -20,16 +22,18 @@ import { css } from "lit";
  * [--toolbar-shadow] - Set a custom shadow
  * [--toolbar-z-index] - Set a custom stacking order
  * [--toolbar-transition-duration] - Set a custom duration for the collapse/transparent/theme/panel transitions
- * [--toolbar-logo-height] - Set a custom height for the default logo image ; never rendered taller than the bar itself regardless
  * [--toolbar-panel-size] - Set a custom open size for the mobile panel (height for top/bottom, width for left/right)
  * [--toolbar-panel-background] - Set a custom background for the mobile panel, default a translucent mix of the bar's own background
  * [--toolbar-panel-color] - Set a custom text color for the mobile panel
  * [--toolbar-panel-padding] - Set a custom padding for the mobile panel
+ * [--toolbar-panel-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toolbar-panel-padding is set
+ * [--toolbar-panel-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --toolbar-panel-padding is set
  * [--toolbar-burger-align] - Set the vertical alignment of the burger button within the bar's height, default center ; set flex-start to pin it to the top instead
  * [--toolbar-burger-padding] - Set a custom padding around the burger button, default 0 on the block axis and --toolbar-panel-padding on the inline axis
+ * [--toolbar-burger-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toolbar-burger-padding is set
+ * [--toolbar-burger-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --toolbar-burger-padding is set
  * [--toolbar-panel-gap] - Set a custom gap inside the mobile panel
  * [--toolbar-panel-backdrop-blur] - Set a custom backdrop-filter blur radius for the mobile panel
- * [--toolbar-logo-filter-dark] - Apply style filter on the logo on dark navbar
  * [--toolbar-skip-links-height] - Set a custom height for the skip-links bar
  * [--toolbar-skip-links-background] - Set a custom background for the skip-links bar, default a darker mix of the bar's own background
  * [--toolbar-skip-links-color] - Set a custom text color for the skip-links bar
@@ -41,7 +45,10 @@ const base = css `
     --_height: var(--toolbar-height, 72px);
     --_heightCollapsed: var(--toolbar-height-collapsed, 56px);
     --_currentHeight: var(--_height);
-    --_padding: var(--toolbar-padding, 0 24px);
+    --_padding: var(
+      --toolbar-padding,
+      var(--toolbar-padding-block, 0) var(--toolbar-padding-inline, 24px)
+    );
     --_gap: var(--toolbar-gap, 16px);
     --_gapStart: var(--toolbar-gap-start, var(--_gap));
     --_gapCenter: var(--toolbar-gap-center, var(--_gap));
@@ -51,8 +58,14 @@ const base = css `
       var(--eun-surface-color, #ffffff)
     );
     --_colorLight: var(--toolbar-color-light, var(--eun-text-color, #071621));
-    --_backgroundDark: var(--toolbar-background-dark, #0b1620);
-    --_colorDark: var(--toolbar-color-dark, #f5f7fa);
+    --_backgroundDark: var(
+      --toolbar-background-dark,
+      var(--eun-surface-inverse, #0b1620)
+    );
+    --_colorDark: var(
+      --toolbar-color-dark,
+      var(--eun-text-on-inverse, #f5f7fa)
+    );
     --_background: var(--toolbar-background, var(--_backgroundLight));
     --_color: var(--toolbar-color, var(--_colorLight));
     --_borderColor: var(
@@ -61,17 +74,30 @@ const base = css `
     );
     --_shadow: var(--toolbar-shadow, none);
     --_zIndex: var(--toolbar-z-index, 100);
-    --_transitionDuration: var(--toolbar-transition-duration, 0.25s);
-    --_logoHeight: var(--toolbar-logo-height, 32px);
+    --_transitionDuration: var(
+      --toolbar-transition-duration,
+      var(--eun-duration-l, 250ms)
+    );
     --_panelSize: var(--toolbar-panel-size, 100%);
     --_panelBackground: var(
       --toolbar-panel-background,
       color-mix(in srgb, var(--_background) 90%, transparent)
     );
     --_panelColor: var(--toolbar-panel-color, var(--_color));
-    --_panelPadding: var(--toolbar-panel-padding, 14px);
+    --_panelPaddingBlock: var(
+      --toolbar-panel-padding,
+      var(--toolbar-panel-padding-block, 14px)
+    );
+    --_panelPaddingInline: var(
+      --toolbar-panel-padding,
+      var(--toolbar-panel-padding-inline, 14px)
+    );
     --_burgerAlign: var(--toolbar-burger-align, center);
-    --_burgerPadding: var(--toolbar-burger-padding, 0 var(--_panelPadding));
+    --_burgerPadding: var(
+      --toolbar-burger-padding,
+      var(--toolbar-burger-padding-block, 0)
+        var(--toolbar-burger-padding-inline, var(--_panelPaddingInline))
+    );
     --_panelGap: var(--toolbar-panel-gap, 8px);
     --_panelBackdropBlur: var(--toolbar-panel-backdrop-blur, 8px);
     --_skipLinksHeight: var(--toolbar-skip-links-height, 40px);
@@ -109,9 +135,8 @@ const base = css `
   :host([theme="dark"]) {
     --_background: var(--toolbar-background, var(--_backgroundDark));
     --_color: var(--toolbar-color, var(--_colorDark));
-  }
-  :host([theme="dark"]) #logo-image {
-    filter: var(--toolbar-logo-filter-dark, brightness(0) invert(1));
+    --_skipLinksBase: var(--toolbar-background, var(--_backgroundDark));
+    --_skipLinksColor: var(--toolbar-skip-links-color, var(--_color));
   }
 
   #bar {
@@ -128,11 +153,12 @@ const base = css `
     border-block-end: var(--eun-border-width-s, 1px) solid var(--_borderColor);
     box-shadow: var(--_shadow);
     transition:
-      height var(--_transitionDuration) ease,
-      background-color var(--_transitionDuration) ease,
-      color var(--_transitionDuration) ease,
-      border-color var(--_transitionDuration) ease,
-      box-shadow var(--_transitionDuration) ease;
+      height var(--_transitionDuration) var(--eun-easing-default, ease),
+      background-color var(--_transitionDuration)
+        var(--eun-easing-default, ease),
+      color var(--_transitionDuration) var(--eun-easing-default, ease),
+      border-color var(--_transitionDuration) var(--eun-easing-default, ease),
+      box-shadow var(--_transitionDuration) var(--eun-easing-default, ease);
   }
   :host([transparent-at-top][at-top]) #bar {
     background: transparent;
@@ -175,25 +201,21 @@ const base = css `
   #center ::slotted(eun-link),
   #end ::slotted(eun-link) {
     --link-padding: var(--eun-space-xs, 4px);
-    --link-background-focus: var(--eun-color-primary-transparent, #3d6fff33);
+    --link-background-focus: var(--eun-color-primary-alpha-20, #3d6fff33);
   }
 
-  #logo-link {
+  #start ::slotted(a) {
     display: inline-flex;
     align-items: center;
     outline-offset: 2px;
     outline: 2px solid transparent;
-    transition: outline 0.2s ease-out;
+    transition: outline var(--eun-duration-m, 200ms)
+      var(--eun-easing-out, ease-out);
     border-radius: var(--eun-border-radius-s);
   }
-  #logo-link:focus-visible {
+  #start ::slotted(a:focus-visible) {
     outline-color: var(--eun-color-primary-500);
   }
-  #logo-image {
-    display: block;
-    height: min(var(--_logoHeight), var(--_currentHeight));
-    width: auto;
-  }
 
   #burger {
     flex-shrink: 0;
@@ -217,8 +239,8 @@ const base = css `
     transform: translateY(-100%);
     opacity: 0;
     transition:
-      transform var(--_transitionDuration) ease,
-      opacity var(--_transitionDuration) ease;
+      transform var(--_transitionDuration) var(--eun-easing-default, ease),
+      opacity var(--_transitionDuration) var(--eun-easing-default, ease);
   }
   #skip-links:focus-within {
     transform: translateY(0);
@@ -241,7 +263,7 @@ const base = css `
     --link-color-hover: var(--_skipLinksColor);
     --link-color-focus: var(--_skipLinksColor);
     --link-padding: var(--eun-space-xs, 4px);
-    --link-background-focus: var(--eun-color-secondary-transparent, #edbd6f33);
+    --link-background-focus: var(--eun-color-secondary-alpha-20, #edbd6f33);
     --link-border-radius: var(--eun-border-radius-l, 999px);
   }
 
@@ -252,8 +274,8 @@ const base = css `
     outline-offset: 2px;
     border-radius: var(--eun-border-radius-l, 999px);
     transition:
-      outline 0.2s ease-out,
-      background 0.2s ease-out;
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      background var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
 
   #skip-links ::slotted(a:not(:first-child)),
@@ -278,7 +300,7 @@ const base = css `
   #skip-links ::slotted(a:focus-visible),
   .skip-link:focus-visible {
     outline-color: var(--_skipLinksColor);
-    background: var(--eun-color-secondary-transparent, #edbd6f33);
+    background: var(--eun-color-secondary-alpha-20, #edbd6f33);
   }
 
   #panel {
@@ -329,7 +351,8 @@ const base = css `
     height: calc(var(--_currentHeight) - var(--eun-border-width-s, 1px));
     padding: var(--_burgerPadding);
     pointer-events: auto;
-    transition: height var(--_transitionDuration) ease;
+    transition: height var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
 
   #panel-body {
@@ -337,7 +360,7 @@ const base = css `
     inset: 0;
     display: flex;
     flex-direction: column;
-    padding: var(--_panelPadding);
+    padding: var(--_panelPaddingBlock) var(--_panelPaddingInline);
     background: var(--_panelBackground);
     backdrop-filter: blur(var(--_panelBackdropBlur));
     -webkit-backdrop-filter: blur(var(--_panelBackdropBlur));
@@ -346,8 +369,8 @@ const base = css `
     opacity: 0;
     pointer-events: none;
     transition:
-      opacity var(--_transitionDuration) ease,
-      transform var(--_transitionDuration) ease;
+      opacity var(--_transitionDuration) var(--eun-easing-default, ease),
+      transform var(--_transitionDuration) var(--eun-easing-default, ease);
   }
   #panel[data-direction="top"] #panel-body {
     transform: translateY(-100%);

package/dist/events/table-row-click.event.d.ts

@@ -1,8 +1,9 @@
 /**
- * Dispatched by `eun-table-item` on a row click outside its checkbox/action
- * cell and outside selection mode (while any row is selected, a click
- * toggles that row's own selection instead — see `eun-table`'s own class
- * doc).
+ * Dispatched by `eun-table` on a body row click outside its checkbox, its
+ * action cell, and any interactive content, and outside selection mode
+ * (while any row is selected, a click toggles that row's own selection
+ * instead). Cancelable: `preventDefault()` keeps the table from
+ * following the row's `data-table-row-link` link.
  */
 export declare class TableRowClickEvent extends Event {
     /**

package/dist/events/table-row-click.event.js

@@ -1,12 +1,17 @@
 /**
- * Dispatched by `eun-table-item` on a row click outside its checkbox/action
- * cell and outside selection mode (while any row is selected, a click
- * toggles that row's own selection instead — see `eun-table`'s own class
- * doc).
+ * Dispatched by `eun-table` on a body row click outside its checkbox, its
+ * action cell, and any interactive content, and outside selection mode
+ * (while any row is selected, a click toggles that row's own selection
+ * instead). Cancelable: `preventDefault()` keeps the table from
+ * following the row's `data-table-row-link` link.
  */
 export class TableRowClickEvent extends Event {
     constructor(rowKey) {
-        super(TableRowClickEvent.eventName, { bubbles: true, composed: false });
+        super(TableRowClickEvent.eventName, {
+            bubbles: true,
+            cancelable: true,
+            composed: false,
+        });
         this.rowKey = rowKey;
     }
 }

package/dist/features/scheduler/calendar/calendar.d.ts

@@ -488,9 +488,9 @@ export declare class EunomiaCalendar extends LitElement {
      * but the user's intent there was "move it," not "open it."
      * @private
      */
-    private handleEventClick;
+    private readonly handleEventClick;
     /** @private */
-    private handleSlotClick;
+    private readonly handleSlotClick;
     /**
      * Starts tracking a potential event drag — see the class doc's own
      * paragraph on this feature. Mouse/pen only (touch is left to scroll/
@@ -570,17 +570,17 @@ export declare class EunomiaCalendar extends LitElement {
      * click, year's day click.
      * @private
      */
-    private goToDayView;
+    private readonly goToDayView;
     /**
      * Starts tracking a potential swipe gesture — finger-only, same as
      * `eun-date-picker`.
      * @private
      */
-    private handleSwipeStart;
+    private readonly handleSwipeStart;
     /** @private */
-    private handleSwipeEnd;
+    private readonly handleSwipeEnd;
     /** @private */
-    private handleSwipeCancel;
+    private readonly handleSwipeCancel;
     /**
      * Replays the CSS slide-in animation after a touch swipe steps the
      * period — removing the state before re-adding it (past a forced reflow)

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

@@ -22,6 +22,7 @@ import { EventClickEvent } from "../../../events/event-click.event.js";
 import { SlotClickEvent } from "../../../events/slot-click.event.js";
 import { PeriodChangeEvent } from "../../../events/period-change.event.js";
 import { EventUpdateEvent } from "../../../events/event-update.event.js";
+import { mediaBelow } from "../../../breakpoints.js";
 /**
  * Tag name of the calendar component.
  */
@@ -39,7 +40,7 @@ const SWIPE_THRESHOLD = 40;
  * `eun-scheduler` uses for its own desktop/mobile split.
  * @internal
  */
-const MOBILE_BREAKPOINT = "(max-width: 767px)";
+const MOBILE_BREAKPOINT = mediaBelow("tablet");
 /**
  * How far, in pixels, a pointer must travel before a press on an event chip
  * counts as a drag-to-move rather than a click, the same idea as
@@ -609,7 +610,7 @@ let EunomiaCalendar = class EunomiaCalendar extends LitElement {
     moveMonthFocus(delta) {
         this.focusedDate = addDays(this.focusedDate, delta);
         this.syncDisplayedMonth();
-        this.updateComplete.then(() => this.focusMonthCell());
+        void this.updateComplete.then(() => this.focusMonthCell());
     }
     /**
      * Jumps {@link focusedDate} directly to `date` (`Home`/`End`/`PageUp`/
@@ -623,7 +624,7 @@ let EunomiaCalendar = class EunomiaCalendar extends LitElement {
     jumpMonthFocus(date) {
         this.focusedDate = date;
         this.syncDisplayedMonth();
-        this.updateComplete.then(() => this.focusMonthCell());
+        void this.updateComplete.then(() => this.focusMonthCell());
     }
     /**
      * Re-dispatches `eunperiodchange` whenever the visible period changes.
@@ -957,9 +958,9 @@ let EunomiaCalendar = class EunomiaCalendar extends LitElement {
      */
     playSwipeAnimation(direction) {
         this.swipeDirection = null;
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             const view = this.shadowRoot?.querySelector("#view");
-            void view?.offsetWidth;
+            view?.getBoundingClientRect();
             this.swipeDirection = direction;
         });
     }
@@ -1102,7 +1103,7 @@ __decorate([
     property({ attribute: false })
 ], EunomiaCalendar.prototype, "events", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaCalendar.prototype, "view", void 0);
 __decorate([
     property({ attribute: false })

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

@@ -1,5 +1,5 @@
 import { css } from "lit";
-import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
+import { cssBelow } from "../../../utils/media.styles.js";
 /**
  * Base style for `eun-calendar`'s own shell : the swipe container and its
  * slide-in replay animation, plus the mobile week/work-week day-selector
@@ -27,13 +27,15 @@ const base = css `
   }
 
   #view.swiping-next #view-content {
-    animation: scheduler-slide-from-right var(--scheduler-swipe-duration, 200ms)
-      ease-out;
+    animation: scheduler-slide-from-right
+      var(--scheduler-swipe-duration, var(--eun-duration-m, 200ms))
+      var(--eun-easing-out, ease-out);
   }
 
   #view.swiping-previous #view-content {
-    animation: scheduler-slide-from-left var(--scheduler-swipe-duration, 200ms)
-      ease-out;
+    animation: scheduler-slide-from-left
+      var(--scheduler-swipe-duration, var(--eun-duration-m, 200ms))
+      var(--eun-easing-out, ease-out);
   }
 
   @keyframes scheduler-slide-from-right {
@@ -123,7 +125,7 @@ const base = css `
     outline-offset: 1px;
   }
 
-  @media (max-width: ${EUNOMIA_BREAKPOINTS.tablet}px) {
+  @media ${cssBelow("tablet")} {
     :host {
       display: flex;
       flex-direction: column;

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

@@ -43,8 +43,8 @@ declare const EunomiaScheduler_base: import("../../../utils/constructor.type.js"
  * @prop {boolean} [noAnimation=false] - Disables the mobile swipe slide animation and the drawer or modal's own transitions
  * @prop {string} [todayLabel='Today'] - The label of the jump-to-today button
  * @prop {string} [newEventLabel='New event'] - The label of the create-a-new-event button
- * @prop {string} [ariaLabelPrevious='Previous period'] - The accessible label of the previous-period button
- * @prop {string} [ariaLabelNext='Next period'] - The accessible label of the next-period button
+ * @prop {string} [previousLabel] - The accessible label of the previous-period button. Defaults to the localized string for the current locale (English: "Previous period")
+ * @prop {string} [nextLabel] - The accessible label of the next-period button. Defaults to the localized string for the current locale (English: "Next period")
  * @prop {string} [viewDayLabel='Day'] - The label of the day view switcher option
  * @prop {string} [viewWeekLabel='Week'] - The label of the week view switcher option
  * @prop {string} [viewWorkWeekLabel='Work week'] - The label of the work week view switcher option
@@ -126,9 +126,9 @@ export declare class EunomiaScheduler extends EunomiaScheduler_base {
     /** @default New event */
     newEventLabel: string;
     /** @default Previous period */
-    ariaLabelPrevious: string;
+    previousLabel?: string;
     /** @default Next period */
-    ariaLabelNext: string;
+    nextLabel?: string;
     /** @default Day */
     viewDayLabel: string;
     /** @default Week */
@@ -142,7 +142,7 @@ export declare class EunomiaScheduler extends EunomiaScheduler_base {
     /** @default Apply */
     applyLabel: string;
     /** @default Cancel */
-    cancelLabel: string;
+    cancelLabel?: string;
     /** @default Delete */
     deleteLabel: string;
     /**
@@ -152,9 +152,9 @@ export declare class EunomiaScheduler extends EunomiaScheduler_base {
     editLabel: string;
     /**
      * Accessible label of the read-only event popover's close (✕) button.
-     * @default Close
+     * Falls back to the localized string for the current locale when unset.
      */
-    closeLabel: string;
+    closeLabel?: string;
     /** @default +{count} more */
     moreEventsLabel: string;
     /**
@@ -365,7 +365,7 @@ export declare class EunomiaScheduler extends EunomiaScheduler_base {
      * The event popover's open/close animation duration, in ms : `0` if
      * `noAnimation` is set or the browser reports `prefers-reduced-motion:
      * reduce`, otherwise `--scheduler-popover-transition-duration` (default
-     * `160ms`).
+     * `--eun-duration-s`).
      *
      * @param el the popover to read `--scheduler-popover-transition-duration` off.
      * @private

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

@@ -18,6 +18,8 @@ import { EventCreateEvent } from "../../../events/event-create.event.js";
 import { EventUpdateEvent } from "../../../events/event-update.event.js";
 import { EventDeleteEvent } from "../../../events/event-delete.event.js";
 import { PeriodChangeEvent } from "../../../events/period-change.event.js";
+import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
+import { mediaBelow } from "../../../breakpoints.js";
 /**
  * Tag name of the scheduler component.
  */
@@ -65,8 +67,8 @@ const VIEWS = [
  * @prop {boolean} [noAnimation=false] - Disables the mobile swipe slide animation and the drawer or modal's own transitions
  * @prop {string} [todayLabel='Today'] - The label of the jump-to-today button
  * @prop {string} [newEventLabel='New event'] - The label of the create-a-new-event button
- * @prop {string} [ariaLabelPrevious='Previous period'] - The accessible label of the previous-period button
- * @prop {string} [ariaLabelNext='Next period'] - The accessible label of the next-period button
+ * @prop {string} [previousLabel] - The accessible label of the previous-period button. Defaults to the localized string for the current locale (English: "Previous period")
+ * @prop {string} [nextLabel] - The accessible label of the next-period button. Defaults to the localized string for the current locale (English: "Next period")
  * @prop {string} [viewDayLabel='Day'] - The label of the day view switcher option
  * @prop {string} [viewWeekLabel='Week'] - The label of the week view switcher option
  * @prop {string} [viewWorkWeekLabel='Work week'] - The label of the work week view switcher option
@@ -141,10 +143,6 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         this.todayLabel = "Today";
         /** @default New event */
         this.newEventLabel = "New event";
-        /** @default Previous period */
-        this.ariaLabelPrevious = "Previous period";
-        /** @default Next period */
-        this.ariaLabelNext = "Next period";
         /** @default Day */
         this.viewDayLabel = "Day";
         /** @default Week */
@@ -157,8 +155,6 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         this.viewYearLabel = "Year";
         /** @default Apply */
         this.applyLabel = "Apply";
-        /** @default Cancel */
-        this.cancelLabel = "Cancel";
         /** @default Delete */
         this.deleteLabel = "Delete";
         /**
@@ -166,11 +162,6 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
          * @default Edit
          */
         this.editLabel = "Edit";
-        /**
-         * Accessible label of the read-only event popover's close (✕) button.
-         * @default Close
-         */
-        this.closeLabel = "Close";
         /** @default +{count} more */
         this.moreEventsLabel = "+{count} more";
         /**
@@ -283,7 +274,9 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
             if (!this.calendarEl) {
                 return;
             }
-            this.view = this.calendarEl.view;
+            if (this.view !== this.calendarEl.view) {
+                this.view = this.calendarEl.view;
+            }
             this.displayedDate = this.calendarEl.displayedDate;
         };
         /**
@@ -482,7 +475,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
      */
     updateMobileMediaQuery() {
         this.mobileMediaQuery?.removeEventListener("change", this.handleMobileMediaChange);
-        this.mobileMediaQuery = window.matchMedia("(max-width: 767px)");
+        this.mobileMediaQuery = window.matchMedia(mediaBelow("tablet"));
         this.mobileMediaQuery.addEventListener("change", this.handleMobileMediaChange);
         this.isMobile = this.mobileMediaQuery.matches;
     }
@@ -539,14 +532,11 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
     openEventPopover(event, anchor) {
         this.selectedEvent = event;
         this.popoverTriggerEl = anchor;
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             const popover = this.eventPopoverEl;
             if (!popover) {
                 return;
             }
-            // Also true when reopened mid-close — see playEventPopoverCloseAnimation's
-            // own doc for why that needs to force a fresh open animation even
-            // though the popover never actually left :popover-open.
             const hadRunningAnimation = this.eventPopoverAnimation !== undefined;
             this.eventPopoverAnimation?.cancel();
             this.eventPopoverAnimation = undefined;
@@ -563,7 +553,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
      * The event popover's open/close animation duration, in ms : `0` if
      * `noAnimation` is set or the browser reports `prefers-reduced-motion:
      * reduce`, otherwise `--scheduler-popover-transition-duration` (default
-     * `160ms`).
+     * `--eun-duration-s`).
      *
      * @param el the popover to read `--scheduler-popover-transition-duration` off.
      * @private
@@ -573,18 +563,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
             window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
             return 0;
         }
-        const raw = getComputedStyle(el)
-            .getPropertyValue("--scheduler-popover-transition-duration")
-            .trim();
-        if (raw) {
-            const parsed = raw.endsWith("ms")
-                ? Number.parseFloat(raw)
-                : Number.parseFloat(raw) * 1000;
-            if (Number.isFinite(parsed) && parsed >= 0) {
-                return parsed;
-            }
-        }
-        return 160;
+        return resolveDurationMs(el, "--scheduler-popover-transition-duration", "s", 160);
     }
     /**
      * Plays the fade/scale-in, replacing any {@link eventPopoverAnimation}
@@ -602,7 +581,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         this.eventPopoverAnimation = popover.animate([
             { opacity: 0, transform: "scale(0.98)" },
             { opacity: 1, transform: "scale(1)" },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(popover), fill: "forwards" });
     }
     /**
      * Closes the popover, if open — accepting an instant, unanimated close
@@ -645,7 +624,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         const animation = popover.animate([
             { opacity: 1, transform: "scale(1)" },
             { opacity: 0, transform: "scale(0.98)" },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(popover), fill: "forwards" });
         this.eventPopoverAnimation = animation;
         animation.finished
             .then(() => {
@@ -688,7 +667,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         <eun-button
           appearance="ghost"
           size="s"
-          aria-label=${this.ariaLabelPrevious}
+          aria-label=${this.previousLabel ?? this.dictionary.scheduler.previous}
           @click=${this.handlePrevious}
         >
           <eun-icon name="chevron_left" size="18"></eun-icon>
@@ -699,7 +678,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         <eun-button
           appearance="ghost"
           size="s"
-          aria-label=${this.ariaLabelNext}
+          aria-label=${this.nextLabel ?? this.dictionary.scheduler.next}
           @click=${this.handleNext}
         >
           <eun-icon name="chevron_right" size="18"></eun-icon>
@@ -832,7 +811,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
             : nothing}
           <span style="flex: 1 1 auto;"></span>
           <eun-button appearance="ghost" @click=${this.handleDrawerCancel}
-            >${this.cancelLabel}</eun-button
+            >${this.cancelLabel ?? this.dictionary.common.cancel}</eun-button
           >
           <eun-button color="primary" @click=${this.handleDrawerSave}
             >${this.applyLabel}</eun-button
@@ -861,15 +840,13 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         ></eun-scheduler-event-editor>
         <div slot="footer">
           ${this.editingEvent
-            ? html `<eun-button
-                color="critical"
-                @click=${this.handleModalDelete}
+            ? html `<eun-button color="critical" @click=${this.handleModalDelete}
                 >${this.deleteLabel}</eun-button
               >`
             : nothing}
           <span style="flex: 1 1 auto;"></span>
           <eun-button color="secondary" @click=${this.handleModalCancel}
-            >${this.cancelLabel}</eun-button
+            >${this.cancelLabel ?? this.dictionary.common.cancel}</eun-button
           >
           <eun-button color="primary" @click=${this.handleModalSave}
             >${this.applyLabel}</eun-button
@@ -884,7 +861,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
                 locale: this.locale,
                 editLabel: this.editLabel,
                 deleteLabel: this.deleteLabel,
-                closeLabel: this.closeLabel,
+                closeLabel: this.closeLabel ?? this.dictionary.common.close,
                 priorityLabels: {
                     low: "Low",
                     medium: "Medium",
@@ -930,7 +907,7 @@ __decorate([
     property({ attribute: false })
 ], EunomiaScheduler.prototype, "events", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaScheduler.prototype, "view", void 0);
 __decorate([
     property({ attribute: false })
@@ -960,11 +937,11 @@ __decorate([
     property({ attribute: "new-event-label" })
 ], EunomiaScheduler.prototype, "newEventLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-previous" })
-], EunomiaScheduler.prototype, "ariaLabelPrevious", void 0);
+    property({ attribute: "previous-label" })
+], EunomiaScheduler.prototype, "previousLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-next" })
-], EunomiaScheduler.prototype, "ariaLabelNext", void 0);
+    property({ attribute: "next-label" })
+], EunomiaScheduler.prototype, "nextLabel", void 0);
 __decorate([
     property({ attribute: "view-day-label" })
 ], EunomiaScheduler.prototype, "viewDayLabel", void 0);