@eunomia/elements 1.0.0-beta.9 → 1.0.0

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

@@ -12,7 +12,10 @@ import { css } from "lit";
  * [--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
  * [--toolbar-gap-end] - Set a custom gap between items inside the end slot, falling back to --toolbar-gap
+ * [--toolbar-columns] - Set custom grid columns for start/center/end, overriding the ones set by layout
  * [--toolbar-background] - Set a custom background color, overriding both light/dark variants below
+ * [--toolbar-background-at-top] - Set a custom background while transparent-at-top applies, default transparent
+ * [--toolbar-backdrop-blur] - Set a custom backdrop-filter blur radius for the bar itself
  * [--toolbar-color] - Set a custom text color, overriding both light/dark variants below
  * [--toolbar-background-light] - Set a custom background color for theme="light"
  * [--toolbar-color-light] - Set a custom text color for theme="light"
@@ -22,6 +25,8 @@ 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-color-transition-duration] - Set a custom duration for the bar's background/color/border/shadow transitions, falling back to --toolbar-transition-duration
+ * [--toolbar-transition-easing] - Set a custom timing function for every transition
  * [--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
@@ -33,13 +38,20 @@ import { css } from "lit";
  * [--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-burger-color] - Set a custom color for the burger button, default the bar's text color (the panel's once open)
+ * [--toolbar-burger-background-hover] - Set a custom hover background for the burger button
+ * [--toolbar-burger-background-active] - Set a custom pressed background for the burger button
  * [--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-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
  * [--toolbar-skip-links-separator-color] - Set a custom color for the divider drawn between skip links
+ * [--toolbar-skip-links-separator] - Replace the divider drawn between skip links with a glyph, as a CSS content string
  * [--toolbar-skip-links-gap] - Set a custom gap between skip links, with the divider centered in it
+ * [--toolbar-skip-links-padding-inline] - Set a custom horizontal padding for the skip-links bar
+ * [--toolbar-skip-links-font-size] - Set a custom font size for the skip links
+ * [--toolbar-skip-link-padding] - Set a custom padding for each skip link
  */
 const base = css `
   :host {
@@ -79,6 +91,14 @@ const base = css `
       --toolbar-transition-duration,
       var(--eun-duration-l, 250ms)
     );
+    --_colorTransitionDuration: var(
+      --toolbar-color-transition-duration,
+      var(--_transitionDuration)
+    );
+    --_easing: var(
+      --toolbar-transition-easing,
+      var(--eun-easing-default, ease)
+    );
     --_panelSize: var(--toolbar-panel-size, 100%);
     --_panelBackground: var(
       --toolbar-panel-background,
@@ -116,6 +136,10 @@ const base = css `
     );
     --_skipLinksColor: var(--toolbar-skip-links-color, #fff);
     --_skipLinksGap: var(--toolbar-skip-links-gap, var(--eun-space-m, 16px));
+    --_skipLinkPadding: var(
+      --toolbar-skip-link-padding,
+      var(--eun-space-xs, 4px)
+    );
     --_skipLinksSeparatorColor: var(
       --toolbar-skip-links-separator-color,
       color-mix(in srgb, var(--_skipLinksColor) 50%, transparent)
@@ -148,7 +172,8 @@ const base = css `
     box-sizing: border-box;
     position: relative;
     display: grid;
-    grid-template-columns: 1fr auto 1fr;
+    grid-template-columns: var(--toolbar-columns, 1fr auto 1fr);
+    grid-template-rows: minmax(0, 1fr);
     align-items: center;
     gap: var(--_gap);
     height: var(--_currentHeight);
@@ -157,21 +182,26 @@ const base = css `
     color: var(--_color);
     border-block-end: var(--eun-border-width-s, 1px) solid var(--_borderColor);
     box-shadow: var(--_shadow);
+    backdrop-filter: blur(var(--toolbar-backdrop-blur));
+    -webkit-backdrop-filter: blur(var(--toolbar-backdrop-blur));
     transition:
-      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);
+      height var(--_transitionDuration) var(--_easing),
+      background-color var(--_colorTransitionDuration) var(--_easing),
+      color var(--_colorTransitionDuration) var(--_easing),
+      border-color var(--_colorTransitionDuration) var(--_easing),
+      box-shadow var(--_colorTransitionDuration) var(--_easing);
+  }
+  :host([layout="between"]) #bar {
+    grid-template-columns: var(--toolbar-columns, auto 1fr auto);
   }
   :host([transparent-at-top][at-top]) #bar {
-    background: transparent;
+    background: var(--toolbar-background-at-top, transparent);
     border-color: transparent;
     box-shadow: none;
   }
 
   #start {
+    align-self: stretch;
     grid-column: 1;
     justify-self: start;
     display: flex;
@@ -180,6 +210,7 @@ const base = css `
     min-width: 0;
   }
   #center {
+    align-self: stretch;
     grid-column: 2;
     justify-self: center;
     display: flex;
@@ -188,6 +219,7 @@ const base = css `
     min-width: 0;
   }
   #end {
+    align-self: stretch;
     grid-column: 3;
     justify-self: end;
     display: flex;
@@ -205,14 +237,18 @@ const base = css `
   #start ::slotted(*),
   #center ::slotted(*),
   #end ::slotted(*) {
-    max-height: var(--_currentHeight);
+    max-height: 100%;
   }
 
   #start ::slotted(eun-link),
   #center ::slotted(eun-link),
   #end ::slotted(eun-link) {
     --link-padding: var(--eun-space-xs, 4px);
-    --link-background-focus: var(--eun-color-primary-alpha-20, #3d6fff33);
+    --link-background-focus: var(
+      --toolbar-link-background-focus,
+      var(--eun-color-primary-alpha-20, #3d6fff33)
+    );
+    --link-focus-outline-color: var(--toolbar-focus-outline-color);
   }
 
   #start ::slotted(a) {
@@ -225,12 +261,28 @@ const base = css `
     border-radius: var(--eun-border-radius-s);
   }
   #start ::slotted(a:focus-visible) {
-    outline-color: var(--eun-color-primary-500);
+    outline-color: var(
+      --toolbar-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
   }
 
   #burger {
+    --_burgerColor: var(--toolbar-burger-color, var(--_color));
+    --button-text: var(--_burgerColor);
+    --button-background-hover: var(
+      --toolbar-burger-background-hover,
+      color-mix(in srgb, var(--_burgerColor) 10%, transparent)
+    );
+    --button-background-active: var(
+      --toolbar-burger-background-active,
+      color-mix(in srgb, var(--_burgerColor) 16%, transparent)
+    );
     flex-shrink: 0;
   }
+  :host([open]) #burger {
+    --_burgerColor: var(--toolbar-burger-color, var(--_panelColor));
+  }
 
   #skip-links {
     box-sizing: border-box;
@@ -243,15 +295,18 @@ const base = css `
     gap: var(--_skipLinksGap);
     overflow: hidden;
     height: var(--_skipLinksHeight);
-    padding-inline: var(--eun-space-m);
+    padding-inline: var(
+      --toolbar-skip-links-padding-inline,
+      var(--eun-space-m, 16px)
+    );
     background: var(--_skipLinksBackground);
     color: var(--_skipLinksColor);
     box-shadow: var(--eun-shadow-m, rgba(0, 0, 0, 0.1) 0 4px 6px -2px);
     transform: translateY(-100%);
     opacity: 0;
     transition:
-      transform var(--_transitionDuration) var(--eun-easing-default, ease),
-      opacity var(--_transitionDuration) var(--eun-easing-default, ease);
+      transform var(--_transitionDuration) var(--_easing),
+      opacity var(--_transitionDuration) var(--_easing);
   }
   #skip-links:focus-within {
     transform: translateY(0);
@@ -264,7 +319,10 @@ const base = css `
     display: inline-flex;
     align-items: center;
     color: inherit;
-    font-size: var(--eun-font-size-s, 13px);
+    font-size: var(
+      --toolbar-skip-links-font-size,
+      var(--eun-font-size-s, 13px)
+    );
     text-decoration: none;
     white-space: nowrap;
   }
@@ -273,14 +331,21 @@ const base = css `
     --link-color: var(--_skipLinksColor);
     --link-color-hover: var(--_skipLinksColor);
     --link-color-focus: var(--_skipLinksColor);
-    --link-padding: var(--eun-space-xs, 4px);
-    --link-background-focus: var(--eun-color-secondary-alpha-20, #edbd6f33);
+    --link-focus-outline-color: var(
+      --toolbar-skip-links-focus-outline-color,
+      var(--_skipLinksColor)
+    );
+    --link-padding: var(--_skipLinkPadding);
+    --link-background-focus: var(
+      --toolbar-skip-links-background-focus,
+      var(--eun-color-secondary-alpha-20, #edbd6f33)
+    );
     --link-border-radius: var(--eun-border-radius-l, 999px);
   }
 
   #skip-links ::slotted(a),
   .skip-link {
-    padding: var(--eun-space-xs, 4px);
+    padding: var(--_skipLinkPadding);
     outline: 2px solid transparent;
     outline-offset: 2px;
     border-radius: var(--eun-border-radius-l, 999px);
@@ -295,12 +360,27 @@ const base = css `
   }
   #skip-links ::slotted(a:not(:first-child))::before,
   #skip-links ::slotted(eun-link:not(:first-child))::before {
-    content: "";
+    content: var(--toolbar-skip-links-separator, "");
     position: absolute;
-    inset-inline-start: calc(var(--_skipLinksGap) / -2);
+    inset-inline-start: calc(var(--_skipLinksGap) * -1);
     inset-block: 0;
-    width: 1px;
-    background: var(--_skipLinksSeparatorColor);
+    width: var(--_skipLinksGap);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--_skipLinksSeparatorColor);
+    /* The 1px line, centered in the gap. A glyph set through
+       --toolbar-skip-links-separator turns it off : a string is never a
+       valid image, so the declaration falls back to none. */
+    background: var(
+        --toolbar-skip-links-separator,
+        linear-gradient(
+          var(--_skipLinksSeparatorColor),
+          var(--_skipLinksSeparatorColor)
+        )
+      )
+      center / 1px 100% no-repeat;
+    pointer-events: none;
   }
   #skip-links ::slotted(a:hover),
   #skip-links ::slotted(a:focus-visible),
@@ -310,8 +390,14 @@ const base = css `
   }
   #skip-links ::slotted(a:focus-visible),
   .skip-link:focus-visible {
-    outline-color: var(--_skipLinksColor);
-    background: var(--eun-color-secondary-alpha-20, #edbd6f33);
+    outline-color: var(
+      --toolbar-skip-links-focus-outline-color,
+      var(--_skipLinksColor)
+    );
+    background: var(
+      --toolbar-skip-links-background-focus,
+      var(--eun-color-secondary-alpha-20, #edbd6f33)
+    );
   }
 
   #panel {
@@ -346,8 +432,7 @@ const base = css `
     height: calc(var(--_currentHeight) - var(--eun-border-width-s, 1px));
     padding: var(--_burgerPadding);
     pointer-events: auto;
-    transition: height var(--_transitionDuration)
-      var(--eun-easing-default, ease);
+    transition: height var(--_transitionDuration) var(--_easing);
   }
 
   #panel-body {
@@ -365,8 +450,8 @@ const base = css `
     opacity: 0;
     pointer-events: none;
     transition:
-      opacity var(--_transitionDuration) var(--eun-easing-default, ease),
-      transform var(--_transitionDuration) var(--eun-easing-default, ease);
+      opacity var(--_transitionDuration) var(--_easing),
+      transform var(--_transitionDuration) var(--_easing);
   }
   #panel[data-direction="top"] #panel-body {
     inset-block-end: calc(100% - var(--_panelSize));

package/dist/events/editor-state-change.event.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Dispatched by `eun-scheduler-event-editor` whenever its `dirty` or
+ * `valid` getter changes value, so a custom footer can enable or disable
+ * its own buttons without listening to every field. Not fired for the
+ * initial render : read the getters for that.
+ */
+export declare class EditorStateChangeEvent extends Event {
+    /**
+     * The name of the editor-state-change event.
+     * @static
+     * @readonly
+     */
+    static readonly eventName = "euneditorstatechange";
+    /**
+     * Whether any field has changed since the last seed or save.
+     */
+    readonly dirty: boolean;
+    /**
+     * Whether the form currently passes validation.
+     */
+    readonly valid: boolean;
+    constructor(dirty: boolean, valid: boolean);
+}
+declare global {
+    interface GlobalEventHandlersEventMap {
+        [EditorStateChangeEvent.eventName]: EditorStateChangeEvent;
+    }
+}

package/dist/events/editor-state-change.event.js

@@ -0,0 +1,22 @@
+/**
+ * Dispatched by `eun-scheduler-event-editor` whenever its `dirty` or
+ * `valid` getter changes value, so a custom footer can enable or disable
+ * its own buttons without listening to every field. Not fired for the
+ * initial render : read the getters for that.
+ */
+export class EditorStateChangeEvent extends Event {
+    constructor(dirty, valid) {
+        super(EditorStateChangeEvent.eventName, {
+            bubbles: true,
+            composed: false,
+        });
+        this.dirty = dirty;
+        this.valid = valid;
+    }
+}
+/**
+ * The name of the editor-state-change event.
+ * @static
+ * @readonly
+ */
+EditorStateChangeEvent.eventName = "euneditorstatechange";

package/dist/events/event-cancel.event.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Dispatched by `eun-scheduler-event-editor` when its Cancel button, or
+ * `requestCancel()`, discards the form's changes, once the form is reset
+ * to its last-seeded values. A host modal or drawer listens for it to
+ * close itself.
+ */
+export declare class EventCancelEvent extends Event {
+    /**
+     * The name of the event-cancel event.
+     * @static
+     * @readonly
+     */
+    static readonly eventName = "euneventcancel";
+    constructor();
+}
+declare global {
+    interface GlobalEventHandlersEventMap {
+        [EventCancelEvent.eventName]: EventCancelEvent;
+    }
+}

package/dist/events/event-cancel.event.js

@@ -0,0 +1,17 @@
+/**
+ * Dispatched by `eun-scheduler-event-editor` when its Cancel button, or
+ * `requestCancel()`, discards the form's changes, once the form is reset
+ * to its last-seeded values. A host modal or drawer listens for it to
+ * close itself.
+ */
+export class EventCancelEvent extends Event {
+    constructor() {
+        super(EventCancelEvent.eventName, { bubbles: true, composed: false });
+    }
+}
+/**
+ * The name of the event-cancel event.
+ * @static
+ * @readonly
+ */
+EventCancelEvent.eventName = "euneventcancel";

package/dist/events/period-change.event.d.ts

@@ -1,10 +1,12 @@
 import { EunomiaSchedulerView } from "../features/scheduler/shared/scheduler.types.js";
 /**
- * Dispatched by `eun-scheduler` whenever the visible period changes — a
- * prev/next/"Today" click, a mobile swipe, a view switch, or an external
- * `displayedDate`/`view` assignment. Meant for consumers that lazy-load
- * events per range : listen for this and fetch/filter for
- * `[rangeStart, rangeEnd]` instead of loading everything up front.
+ * Dispatched by `eun-scheduler` and `eun-calendar` whenever the visible
+ * period changes — a prev/next/"Today" click, a mobile swipe, a view
+ * switch, or an external `displayedDate`/`view` assignment. Never fired for
+ * the initial render : read the component's own `visibleRange` for that.
+ * Meant for consumers that lazy-load events per range : listen for this and
+ * fetch/filter for `[rangeStart, rangeEnd]` instead of loading everything
+ * up front.
  */
 export declare class PeriodChangeEvent extends Event {
     /**
@@ -25,7 +27,13 @@ export declare class PeriodChangeEvent extends Event {
      * The end of the now-visible period (inclusive, end of day).
      */
     readonly rangeEnd: Date;
-    constructor(view: EunomiaSchedulerView, rangeStart: Date, rangeEnd: Date);
+    /**
+     * The now-active anchor date. In `month` view, the range covers the whole
+     * 6-week grid, leading and trailing days included, while this date stays
+     * inside the displayed month.
+     */
+    readonly displayedDate: Date;
+    constructor(view: EunomiaSchedulerView, rangeStart: Date, rangeEnd: Date, displayedDate: Date);
 }
 declare global {
     interface GlobalEventHandlersEventMap {

package/dist/events/period-change.event.js

@@ -1,16 +1,19 @@
 /**
- * Dispatched by `eun-scheduler` whenever the visible period changes — a
- * prev/next/"Today" click, a mobile swipe, a view switch, or an external
- * `displayedDate`/`view` assignment. Meant for consumers that lazy-load
- * events per range : listen for this and fetch/filter for
- * `[rangeStart, rangeEnd]` instead of loading everything up front.
+ * Dispatched by `eun-scheduler` and `eun-calendar` whenever the visible
+ * period changes — a prev/next/"Today" click, a mobile swipe, a view
+ * switch, or an external `displayedDate`/`view` assignment. Never fired for
+ * the initial render : read the component's own `visibleRange` for that.
+ * Meant for consumers that lazy-load events per range : listen for this and
+ * fetch/filter for `[rangeStart, rangeEnd]` instead of loading everything
+ * up front.
  */
 export class PeriodChangeEvent extends Event {
-    constructor(view, rangeStart, rangeEnd) {
+    constructor(view, rangeStart, rangeEnd, displayedDate) {
         super(PeriodChangeEvent.eventName, { bubbles: true, composed: false });
         this.view = view;
         this.rangeStart = rangeStart;
         this.rangeEnd = rangeEnd;
+        this.displayedDate = displayedDate;
     }
 }
 /**

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

@@ -2,6 +2,7 @@ import { LitElement, PropertyValues, TemplateResult } from "lit";
 import { WeekStartsOn } from "../../../utils/date.utils.js";
 import { EunomiaSchedulerEvent, EunomiaSchedulerView } from "../shared/scheduler.types.js";
 import { type EunomiaSchedulerEventAppearance } from "../scheduler-event/scheduler-event.js";
+import { DateRange } from "../shared/scheduler.utils.js";
 /**
  * Tag name of the calendar component.
  */
@@ -48,7 +49,7 @@ declare const EunomiaCalendar_base: import("../../../utils/constructor.type.js")
  * @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
- * @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 the slot click event, removing the create-here affordance, and event-chip dragging. View only
  * @prop {boolean} [noAnimation=false] - Disables the mobile swipe slide animation
  * @prop {boolean} [hideNowLine=false] - Hides the line marking the current time in day, week and work week views
@@ -59,13 +60,14 @@ declare const EunomiaCalendar_base: import("../../../utils/constructor.type.js")
  * @fires {EventClickEvent} euneventclick - Fired when an event chip is clicked
  * @fires {SlotClickEvent} eunslotclick - Fired when an empty hour-grid slot is clicked
  * @fires {EventUpdateEvent} euneventupdate - Fired when a day, week, or work week event chip is dragged to a new time or day and dropped
- * @fires {PeriodChangeEvent} eunperiodchange - Fired whenever the visible period changes, from a swipe, a drill-down, or an external view or displayedDate assignment
+ * @fires {PeriodChangeEvent} eunperiodchange - Fired whenever the visible period changes, from a swipe, a drill-down, a navigation method, or an external view or displayedDate assignment. Not fired for the initial render, read visibleRange instead
  * @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=640px] - Sets the maximum height, with scroll, of the day, week, and work week grid body and the year view. Below a small viewport, the grid also fills its own host's height first, still capped at this same value
+ * @cssprop [--scheduler-body-max-height=640px] - 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). Below a small viewport, the grid also fills its own host's height first, still capped at this same value
  * @cssprop [--scheduler-month-cell-height] - Sets the 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
  * @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-calendar
@@ -114,7 +116,8 @@ export declare class EunomiaCalendar extends EunomiaCalendar_base {
      */
     slotDuration: number;
     /**
-     * The locale used throughout ; defaults to the runtime's own.
+     * The locale used throughout ; defaults to the one set with
+     * `setDefaultLocale()`, English otherwise.
      */
     locale?: string;
     /**
@@ -387,15 +390,36 @@ export declare class EunomiaCalendar extends EunomiaCalendar_base {
      * @private
      */
     private readonly handleMonthDayKeydown;
+    /**
+     * 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(): DateRange;
+    /**
+     * Moves the displayed period one `view`-sized unit forward.
+     */
+    next(): void;
+    /**
+     * Moves the displayed period one `view`-sized unit back.
+     */
+    previous(): void;
+    /**
+     * Brings the period containing today into view.
+     */
+    today(): void;
     /**
      * Re-dispatches `eunperiodchange` whenever the visible period changes.
+     * Skipped on the first update (every old value is still `undefined`
+     * then), since a listener attached after the upgrade could never catch
+     * it : {@link visibleRange} gives the initial range instead.
      *
      * @param changed the changed properties.
      */
     protected updated(changed: PropertyValues): void;
     /**
-     * Positions the very first render on "now" instead of opening scrolled
-     * to midnight/January : {@link displayedDate} already defaults to today
+     * Positions the very first render, and every later view change, on
+     * "now" instead of opening scrolled to midnight/January : {@link displayedDate} already defaults to today
      * (see its own doc), which is enough for `month` view, but the
      * scrollable views need their own scroll position set explicitly.
      * Deferred to {@link runOnceVisible} rather than applied directly here,
@@ -404,19 +428,25 @@ export declare class EunomiaCalendar extends EunomiaCalendar_base {
      * zero layout at this point — `scrollTop` silently no-ops on a
      * zero-height/`display: none` box, so scrolling only once the box
      * actually has size is what makes this work regardless of where the
-     * calendar happens to live. Runs once total, matching "open the
-     * calendar and land on the current period" rather than fighting the
-     * user's own scroll position on every later render.
+     * calendar happens to live. Runs on the first render and on view
+     * changes only, matching "open a view and land on the current period"
+     * rather than fighting the user's own scroll position on every other
+     * render.
      *
      * @param changed the changed properties.
      */
     protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Scrolls the current view to "now", see {@link firstUpdated}.
+     * @private
+     */
+    private scrollToCurrentPeriod;
     /**
      * Calls `action` as soon as the element matching `selector` in the
      * shadow root actually has layout (`clientHeight > 0`) — immediately, if
      * it already does, otherwise once a {@link ResizeObserver} sees it gain
      * size (e.g. its `eun-tab-panel` ancestor becomes the active tab) —
-     * and only once, ever. See {@link firstUpdated}'s own doc for why this
+     * and only once per call. See {@link firstUpdated}'s own doc for why this
      * indirection exists.
      * @param selector a shadow-root selector for the element to watch.
      * @param action called exactly once, as soon as that element is visible.
@@ -425,7 +455,8 @@ export declare class EunomiaCalendar extends EunomiaCalendar_base {
     private runOnceVisible;
     /**
      * Scrolls day/week/work-week's `#hour-grid-scroll` so the current time
-     * sits roughly a third of the way down the visible area, rather than
+     * sits roughly a third of the way down the area left visible below the
+     * sticky header and all-day rows, rather than
      * opening scrolled to {@link dayStartHour}. Computed from the time math
      * directly (not the `.hour-grid-now-line` element, which only renders
      * within {@link dayStartHour}/{@link dayEndHour}'s own bounds) so a
@@ -437,12 +468,13 @@ export declare class EunomiaCalendar extends EunomiaCalendar_base {
      */
     private scrollHourGridToNow;
     /**
-     * Scrolls `year` view's `.year-scroll` so the current month's section
-     * starts right below the sticky weekday header, rather than opening
-     * scrolled to January. The header's own height is subtracted from the
-     * target, since it stays pinned to the top of the scroll container and
-     * would otherwise overlap the very section just scrolled into view. A
-     * no-op if {@link displayedDate} isn't showing the current year.
+     * Scrolls `year` view's `.year-scroll` so {@link displayedDate}'s month
+     * section (the current month by default, or the month just left when
+     * coming back from `month` view) starts right below the sticky weekday
+     * header, rather than opening scrolled to January. The header's own
+     * height is subtracted from the target, since it stays pinned to the top
+     * of the scroll container and would otherwise overlap the very section
+     * just scrolled into view.
      * @private
      */
     private scrollYearViewToCurrentMonth;
@@ -490,9 +522,9 @@ export declare class EunomiaCalendar extends EunomiaCalendar_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**
-     * Moves the displayed period by one `view`-sized unit — swipe only ; the
-     * header's own prev/next/"Today" buttons live in the consumer (see
-     * `eun-scheduler`) and simply reassign {@link displayedDate} from outside.
+     * Moves the displayed period by one `view`-sized unit — swipe and
+     * {@link next}/{@link previous}, the header itself living in the consumer
+     * (see `eun-scheduler`).
      * @private
      */
     private navigate;