@eunomia/elements 1.0.0-beta.9 → 1.0.0

package/dist/components/navigation/stepper/stepper.js

@@ -9,7 +9,6 @@ import { html, LitElement, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { StepChangeEvent } from "../../../events/stepchange.event.js";
 import { stepperStyles } from "./stepper.styles.js";
-import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the stepper component.
@@ -52,11 +51,11 @@ export const EunomiaStepperTagName = "eun-stepper";
  *
  * Whether, and how far, someone can jump between steps by activating them
  * directly is controlled by linear and each step's own disabled setting.
- * With the default linear, only steps before activeStep are reachable:
- * revisiting a past step is always allowed, while skipping ahead of the
- * current one is not, since that's exactly the case where something isn't
- * filled in yet. Set linear to false to make every non-disabled step
- * freely reachable in any order. Disabled on the stepper itself disables
+ * By default every non-disabled step is freely reachable in any order.
+ * With linear, only steps before activeStep are reachable: revisiting a
+ * past step is always allowed, while skipping ahead of the current one is
+ * not, since that's exactly the case where something isn't filled in
+ * yet. Disabled on the stepper itself disables
  * every step's control the same way an individual step's own disabled
  * does, leaving a read-only progress summary with no navigation at all,
  * the current step still rendered as non-interactive text either way.
@@ -66,11 +65,11 @@ export const EunomiaStepperTagName = "eun-stepper";
  * @attr {string} [steps='[]'] - The process's steps, as a JSON array
  * @prop {number} [activeStep=0] - The zero-based index of the current step
  * @attr {number} [active-step=0] - The zero-based index of the current step
- * @prop {number} [activeSubstep] - The zero-based index, into the active step's substeps, of the current substep. Meaningless when that step has no substeps
- * @attr {number} [active-substep] - The zero-based index, into the active step's substeps, of the current substep. Meaningless when that step has no substeps
+ * @prop {number} [activeSubstep] - The zero-based index, into the active step's substeps, of the current substep, bounded to the last one. Meaningless when that step has no substeps
+ * @attr {number} [active-substep] - The zero-based index, into the active step's substeps, of the current substep, bounded to the last one. Meaningless when that step has no substeps
  * @prop {'horizontal' | 'vertical'} [orientation='horizontal'] - The numbered display's layout direction. Has no effect on the progress variant
  * @prop {'numbered' | 'progress'} [variant='numbered'] - Which of the two displays to render
- * @prop {boolean} [linear=true] - Restricts direct navigation to steps before activeStep. Set to false to allow jumping to any non-disabled step in any order
+ * @prop {boolean} [linear=false] - Restricts direct navigation to steps before activeStep. Left off, any non-disabled step can be reached in any order
  * @prop {boolean} [disabled=false] - Disables every step's control, leaving a read-only progress summary with no navigation at all, the same way an individual step's own disabled does
  * @attr {string} [aria-label] - The accessible label for the navigation landmark. Numbered display only. Defaults to the localized string for the current locale (English: "Progress")
  * @fires {StepChangeEvent} eunstepchange - Fired with the requested step whenever a reachable step is activated. ActiveStep and activeSubstep are never updated internally
@@ -135,13 +134,11 @@ let EunomiaStepper = class EunomiaStepper extends LocalizableMixin(LitElement) {
          */
         this.variant = "numbered";
         /**
-         * Restricts direct navigation to steps before {@link activeStep} ; set
-         * to `false` (either as the JS property, or the literal `linear="false"`
-         * attribute — see {@link defaultTrueConverter}) to allow jumping to any
-         * non-`disabled` step in any order.
-         * @default true
+         * Restricts direct navigation to steps before {@link activeStep}. Left
+         * off, any non-`disabled` step can be reached in any order.
+         * @default false
          */
-        this.linear = true;
+        this.linear = false;
         /**
          * Disables every step's control (a read-only progress summary with no
          * navigation at all), the same way an individual step's own `disabled`
@@ -280,6 +277,22 @@ let EunomiaStepper = class EunomiaStepper extends LocalizableMixin(LitElement) {
         }
         return `${index + 1}`;
     }
+    /**
+     * {@link activeSubstep}, bounded to the active step's `substeps` : an
+     * index past the last substep reads as the last one, a negative one as
+     * the first, and an unset or non-numeric one as none.
+     *
+     * @param substeps the active step's `substeps`.
+     * @returns the bounded index, or `undefined`.
+     * @private
+     */
+    currentSubstepIndex(substeps) {
+        const index = this.activeSubstep;
+        if (index === undefined || !Number.isFinite(index) || !substeps.length) {
+            return undefined;
+        }
+        return Math.min(Math.max(Math.trunc(index), 0), substeps.length - 1);
+    }
     /**
      * Renders the current step's substep-progress ring : purely decorative
      * (`aria-hidden`, see {@link renderStep} for the accessible text
@@ -294,10 +307,8 @@ let EunomiaStepper = class EunomiaStepper extends LocalizableMixin(LitElement) {
      * @private
      */
     renderSubstepRing(substeps) {
-        const activeSubstep = this.activeSubstep ?? -1;
-        const fraction = substeps.length > 0
-            ? Math.min(Math.max((activeSubstep + 1) / substeps.length, 0), 1)
-            : 0;
+        const activeSubstep = this.currentSubstepIndex(substeps) ?? -1;
+        const fraction = substeps.length > 0 ? (activeSubstep + 1) / substeps.length : 0;
         const hasError = substeps[activeSubstep]?.state === "error";
         return html `<span
       class=${classMap({ "substep-ring": true, error: hasError })}
@@ -357,10 +368,12 @@ let EunomiaStepper = class EunomiaStepper extends LocalizableMixin(LitElement) {
         // A screen reader alternative to the (aria-hidden) substep-progress
         // ring : visually hidden, not omitted, so the current step's control
         // still announces where the process stands within its substeps.
-        const substep = isCurrent && step.substeps?.length && this.activeSubstep !== undefined
+        const substepIndex = isCurrent
+            ? this.currentSubstepIndex(step.substeps ?? [])
+            : undefined;
+        const substep = substepIndex !== undefined
             ? html `<span class="sr-only"
-            >, step ${this.activeSubstep + 1} of ${step.substeps.length}:
-            ${step.substeps[this.activeSubstep]?.label}</span
+            >${this.dictionary.stepper.substep(substepIndex + 1, step.substeps.length, step.substeps[substepIndex].label)}</span
           >`
             : nothing;
         let control;
@@ -513,7 +526,7 @@ __decorate([
     property({ reflect: true, useDefault: true })
 ], EunomiaStepper.prototype, "variant", void 0);
 __decorate([
-    property({ reflect: true, converter: defaultTrueConverter })
+    property({ type: Boolean, reflect: true })
 ], EunomiaStepper.prototype, "linear", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

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

@@ -207,7 +207,7 @@ export const stepperStyles = css `
       --stepper-indicator-background,
       var(--eun-content-hover, #edeff0)
     );
-    color: var(--stepper-indicator-color, var(--eun-text-secondary, #484e61));
+    color: var(--stepper-indicator-color, var(--eun-text-secondary, #666e8a));
     font-size: var(
       --stepper-indicator-font-size,
       var(--eun-font-size-xs, 12px)
@@ -328,7 +328,7 @@ export const stepperStyles = css `
       --stepper-description-font-size,
       var(--eun-font-size-xs, 12px)
     );
-    color: var(--stepper-description-color, var(--eun-text-secondary, #484e61));
+    color: var(--stepper-description-color, var(--eun-text-secondary, #666e8a));
   }
   .step-control:disabled .label,
   .step-control:disabled .description {

package/dist/components/navigation/tabs/tab-group/tab-group.js

@@ -730,7 +730,7 @@ __decorate([
     property({ reflect: true, useDefault: true })
 ], EunomiaTabGroup.prototype, "animation", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
+    property({ type: Boolean, reflect: true, attribute: "hide-indicator" })
 ], EunomiaTabGroup.prototype, "hideIndicator", void 0);
 __decorate([
     queryAssignedElements()

package/dist/components/navigation/tabs/tab-panel/tab-panel.styles.js

@@ -23,7 +23,7 @@ const base = css `
     );
   }
   :host([is-hidden]) {
-    display: none;
+    display: none !important;
   }
 `;
 export const tabPanelStyle = base;

package/dist/components/navigation/toolbar/toolbar.d.ts

@@ -15,6 +15,20 @@ export type EunomiaToolbarPanelDirection = "top" | "bottom" | "left" | "right";
  * The two color schemes the toolbar itself can render in.
  */
 export type EunomiaToolbarTheme = "light" | "dark";
+/**
+ * How start, center, and end share the bar.
+ */
+export type EunomiaToolbarLayout = "centered" | "between";
+/**
+ * The value of the toolbar's `eunchange` event : which property changed,
+ * and the toolbar's state right after the change.
+ */
+export interface EunomiaToolbarChange {
+    property: "open" | "collapsed" | "theme";
+    open: boolean;
+    collapsed: boolean;
+    theme: EunomiaToolbarTheme;
+}
 declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/dialog-surface.mixin.js").DialogSurfaceMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A sticky top page toolbar with start, center, and end layout slots, and
@@ -55,6 +69,7 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * everything behind it, including the logo and any other bar content;
  * the burger is the only thing that stays visible in front of it.
  *
+ * @slot [burger-icon] - Replaces both burger icons with a single piece of content, kept in place while the panel opens and closes, so it can animate between the two states itself, styled from the host's own open attribute (eun-toolbar[open]). Takes priority over menu-icon and close-icon
  * @slot [menu-icon] - Replaces the burger's default open icon (an `eun-icon name="menu"`) with any content, shown while the panel is closed. Useful wherever `eun-icon`'s own dynamic SVG resolution doesn't fit, e.g. some bundler setups
  * @slot [close-icon] - Replaces the burger's default close icon (an `eun-icon name="close"`) with any content, shown while the panel is open. See `menu-icon` above
  * @slot start - Left-side content, such as the logo, as a link of your own wrapping an image
@@ -63,6 +78,7 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @slot [default] - The mobile slide-in panel's content, opened by the burger button below the mobile breakpoint. Entirely up to the consumer ; never rendered anywhere else
  * @slot skip-links - Custom skip to X links, such as skip to navigation, main content, or footer, replacing the single default skip link built from skipLinkTarget and skipLinkLabel. Accepts plain `a` elements or `eun-link`, styled the same either way, separated by a thin divider drawn between them rather than on either link itself, so it never ends up inside either one's own focus ring. Hidden as a group, revealed as a small panel opening from the top-start corner as soon as focus lands on any of them, staying open while Tab cycles between them. Clicking any of them, default or slotted, also focuses its `href` target directly, on top of the native anchor jump, since that native jump alone doesn't reliably move focus across browsers
  * @prop {'sticky' | 'fixed' | 'static'} [position='sticky'] - How the toolbar is positioned relative to the page
+ * @prop {'centered' | 'between'} [layout='centered'] - How start, center, and end share the bar. centered keeps center truly centered on the bar whatever the widths of start and end, while between spaces the three out evenly, like a flexbox space-between
  * @prop {number} [mobileBreakpoint=768] - The viewport width in pixels below which the burger button and its sliding panel become available
  * @attr {number} [mobile-breakpoint=768] - The viewport width in pixels below which the burger button and its sliding panel become available
  * @prop {boolean} [open=false] - Whether the mobile menu panel is open
@@ -72,8 +88,8 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @attr {string} panel-size - A custom open size for the mobile panel
  * @prop {string} mobileHide - The bar slots hidden below the mobile breakpoint, as a space-separated list of start, center and end, such as "center end" when their content is repeated in the panel. Applied by toolbar-ssr.css before the upgrade too
  * @attr {string} mobile-hide - The bar slots hidden below the mobile breakpoint, as a space-separated list of start, center and end
- * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the mobile panel closes it
- * @attr {boolean} [close-on-backdrop=true] - Whether clicking outside the mobile panel closes it
+ * @prop {boolean} [closeOnBackdrop=false] - Whether clicking outside the mobile panel closes it
+ * @attr {boolean} [close-on-backdrop=false] - Whether clicking outside the mobile panel closes it
  * @prop {string} [menuOpenLabel] - The accessible label of the burger button while the panel is closed. Defaults to the localized string for the current locale (English: "Open menu")
  * @attr {string} [menu-open-label] - The accessible label of the burger button while the panel is closed. Defaults to the localized string for the current locale (English: "Open menu")
  * @prop {string} [menuCloseLabel] - The accessible label of the burger button while the panel is open. Defaults to the localized string for the current locale (English: "Close menu")
@@ -94,8 +110,10 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @attr {string} scroll-target - A CSS selector for a custom scroll container to track instead of the page
  * @prop {boolean} [adaptiveTheme=false] - Enables automatic theme switching driven by marked page sections scrolling underneath the bar
  * @attr {boolean} [adaptive-theme=false] - Enables automatic theme switching driven by marked page sections
- * @prop {string} [adaptiveThemeSelector='[data-toolbar-theme]'] - A selector for the marker elements adaptiveTheme observes. Each should carry a dark or light marker attribute
- * @attr {string} [adaptive-theme-selector='[data-toolbar-theme]'] - A selector for the marker elements adaptive-theme observes
+ * @prop {string} [adaptiveThemeAttribute='data-toolbar-theme'] - The marker attribute adaptiveTheme reads dark or light from, for a page that already marks its sections with an attribute of its own
+ * @attr {string} [adaptive-theme-attribute='data-toolbar-theme'] - The marker attribute adaptive-theme reads dark or light from
+ * @prop {string} adaptiveThemeSelector - A selector for the marker elements adaptiveTheme observes, defaulting to every element carrying adaptiveThemeAttribute. Each should carry that attribute set to dark or light
+ * @attr {string} adaptive-theme-selector - A selector for the marker elements adaptive-theme observes, defaulting to every element carrying adaptive-theme-attribute
  * @prop {'light' | 'dark'} [theme='light'] - The toolbar's current color scheme. A plain manual switch when adaptiveTheme is off, and driven by the marker observer, though still settable to seed the initial value, when it's on
  * @prop {'light' | 'dark'} [defaultTheme='light'] - The fallback theme used while adaptiveTheme is on and no marked section currently intersects the bar
  * @attr {'light' | 'dark'} [default-theme='light'] - The fallback theme used while adaptive-theme is on and no marked section currently intersects the bar
@@ -103,7 +121,7 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @attr {string} skip-link-target - The id of the page's main-content landmark
  * @prop {string} [skipLinkLabel] - The text of the default skip link built from skipLinkTarget. Defaults to the localized string for the current locale (English: "Skip to main content")
  * @attr {string} [skip-link-label] - The text of the default skip link built from skip-link-target. Defaults to the localized string for the current locale (English: "Skip to main content")
- * @fires {ChangeEvent} eunchange - Fired whenever open, collapsed, or, under adaptiveTheme, theme changes
+ * @fires {ChangeEvent} eunchange - Fired once whenever open, collapsed, or, under adaptiveTheme, theme changes. Its value holds the property that changed and the current open, collapsed, and theme. On close, it fires once the panel has finished closing and page scroll is released
  * @cssprop [--toolbar-height] - Sets the expanded height of the bar
  * @cssprop [--toolbar-height-collapsed] - Sets the collapsed height of the bar, for collapseOnScroll only
  * @cssprop [--toolbar-padding] - Sets the padding of the bar
@@ -113,7 +131,10 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @cssprop [--toolbar-gap-start] - Sets the gap between items inside the start slot, falling back to --toolbar-gap
  * @cssprop [--toolbar-gap-center] - Sets the gap between items inside the center slot, falling back to --toolbar-gap
  * @cssprop [--toolbar-gap-end] - Sets the gap between items inside the end slot, falling back to --toolbar-gap
+ * @cssprop [--toolbar-columns] - Sets the grid columns of start, center, and end, overriding the ones set by layout
  * @cssprop [--toolbar-background] - Sets the background color, overriding both light and dark variants below
+ * @cssprop [--toolbar-background-at-top] - Sets the background of the bar while transparent-at-top applies, transparent by default
+ * @cssprop [--toolbar-backdrop-blur] - Sets a backdrop blur radius for the bar itself, for a frosted glass effect behind a translucent background
  * @cssprop [--toolbar-color] - Sets the text color, overriding both light and dark variants below
  * @cssprop [--toolbar-background-light] - Sets the background color for the light theme
  * @cssprop [--toolbar-color-light] - Sets the text color for the light theme
@@ -123,6 +144,8 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @cssprop [--toolbar-shadow] - Sets the shadow of the bar
  * @cssprop [--toolbar-z-index] - Sets the stacking order of the bar
  * @cssprop [--toolbar-transition-duration] - Sets the duration of the collapse, transparency, theme, and panel transitions
+ * @cssprop [--toolbar-color-transition-duration] - Sets the duration of the background, text color, border, and shadow transitions of the bar, falling back to --toolbar-transition-duration
+ * @cssprop [--toolbar-transition-easing] - Sets the timing function of every transition of the toolbar
  * @cssprop [--toolbar-panel-size] - Sets a custom open size for the mobile panel, also settable through the panel-size attribute
  * @cssprop [--toolbar-panel-background] - Sets the background of the mobile panel, defaulting to a translucent mix of the bar's own background
  * @cssprop [--toolbar-panel-color] - Sets the text color of the mobile panel
@@ -134,13 +157,24 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @cssprop [--toolbar-burger-padding] - Sets the padding around the burger button, defaulting to 0 on the block axis and --toolbar-panel-padding on the inline axis
  * @cssprop [--toolbar-burger-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toolbar-burger-padding is set
  * @cssprop [--toolbar-burger-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toolbar-burger-padding is set
+ * @cssprop [--toolbar-burger-color] - Sets the color of the burger button, defaulting to the bar's text color, or the panel's once open
+ * @cssprop [--toolbar-burger-background-hover] - Sets the background of the burger button on hover, defaulting to a light mix of its own color
+ * @cssprop [--toolbar-burger-background-active] - Sets the background of the burger button while pressed, defaulting to a light mix of its own color
  * @cssprop [--toolbar-panel-gap] - Sets the gap inside the mobile panel
  * @cssprop [--toolbar-panel-backdrop-blur] - Sets a backdrop blur radius for the mobile panel
  * @cssprop [--toolbar-skip-links-height] - Sets the height of the skip-links bar
  * @cssprop [--toolbar-skip-links-background] - Sets the background of the skip-links bar, defaulting to a darker mix of the bar's background, or of primary-600 in the light theme without --toolbar-background
  * @cssprop [--toolbar-skip-links-color] - Sets the text color of the skip-links bar
+ * @cssprop [--toolbar-skip-links-focus-outline-color] - Sets the keyboard focus outline color of the skip links, defaulting to their text color
+ * @cssprop [--toolbar-skip-links-background-focus] - Sets the background color of a skip link on keyboard focus
  * @cssprop [--toolbar-skip-links-separator-color] - Sets the color of the divider drawn between skip links
+ * @cssprop [--toolbar-skip-links-separator] - Replaces the thin divider drawn between skip links with a glyph, as a CSS content string such as "/"
  * @cssprop [--toolbar-skip-links-gap] - Sets the gap between skip links, with the divider centered in it
+ * @cssprop [--toolbar-skip-links-padding-inline] - Sets the horizontal padding of the skip-links bar
+ * @cssprop [--toolbar-skip-links-font-size] - Sets the font size of the skip links
+ * @cssprop [--toolbar-skip-link-padding] - Sets the padding of each skip link
+ * @cssprop [--toolbar-focus-outline-color] - Sets the keyboard focus outline color of the links in the bar
+ * @cssprop [--toolbar-link-background-focus] - Sets the background color of an eun-link in the bar on keyboard focus
  * @element eun-toolbar
  */
 export declare class EunomiaToolbar extends EunomiaToolbar_base {
@@ -157,6 +191,13 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
      * @default sticky
      */
     position: EunomiaToolbarPosition;
+    /**
+     * How start, center, and end share the bar. Reflected, since the layout
+     * is pure CSS on the attribute, also matched by `toolbar-ssr.css` before
+     * upgrade.
+     * @default centered
+     */
+    layout: EunomiaToolbarLayout;
     /**
      * Viewport width (px) below which the burger button and its sliding
      * panel become available.
@@ -187,7 +228,7 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
     mobileHide?: string;
     /**
      * Whether clicking outside the mobile panel closes it.
-     * @default true
+     * @default false
      */
     closeOnBackdrop: boolean;
     /**
@@ -245,11 +286,16 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
      */
     adaptiveTheme: boolean;
     /**
-     * Selector for the marker elements `adaptiveTheme` observes ; each should
-     * carry a `data-toolbar-theme="dark"` or `"light"` attribute.
-     * @default [data-toolbar-theme]
+     * The marker attribute `adaptiveTheme` reads `"dark"` or `"light"` from.
+     * @default data-toolbar-theme
+     */
+    adaptiveThemeAttribute: string;
+    /**
+     * Selector for the marker elements `adaptiveTheme` observes, defaulting
+     * to every element carrying `adaptiveThemeAttribute` ; each should carry
+     * that attribute set to `"dark"` or `"light"`.
      */
-    adaptiveThemeSelector: string;
+    adaptiveThemeSelector?: string;
     /**
      * The toolbar's current color scheme. A plain manual switch when
      * `adaptiveTheme` is off ; driven by the marker observer (still settable
@@ -357,6 +403,23 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
      * @internal
      */
     private readonly intersectingThemeEls;
+    /**
+     * Marker elements the adaptive-theme observer currently observes.
+     * @internal
+     */
+    private readonly observedThemeEls;
+    /**
+     * Watches the document for marker elements being added, removed, or
+     * re-marked, so client-side navigation needs no manual refresh.
+     * @internal
+     */
+    private themeMarkerObserver?;
+    /**
+     * The pending frame coalescing {@link themeMarkerObserver}'s mutations
+     * into a single marker sync.
+     * @internal
+     */
+    private themeMarkerRafId?;
     /**
      * Lifecycle callback triggered when the component is connected to the
      * DOM. Sets up the `mobile` matchMedia listener and the scroll listener
@@ -400,8 +463,9 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
      * The `updated()` slice handling `adaptiveTheme` : sets up or tears down
      * the marker observer when the mode itself toggles, and re-anchors it
      * when anything its setup depends on changes while already on
-     * (`adaptiveThemeSelector`, `collapsed` — the bar height the trigger
-     * line is measured from — or `scrollTarget` — the observer's root).
+     * (`adaptiveThemeSelector`, `adaptiveThemeAttribute`, `collapsed` — the
+     * bar height the trigger line is measured from — or `scrollTarget` — the
+     * observer's root).
      *
      * @param changed the changed properties.
      * @private
@@ -420,12 +484,20 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
      */
     toggle(): void;
     /**
-     * Re-queries `adaptiveThemeSelector` and re-observes every match — for
-     * pages that inject newly-marked sections after the toolbar has already
-     * connected (e.g. client-side-rendered content), which the observer has
-     * no other way of discovering on its own.
+     * Re-queries `adaptiveThemeSelector` and syncs the observed markers with
+     * the current matches. Marker sections added, removed, or re-marked
+     * through their `adaptiveThemeAttribute` are already picked up on their
+     * own ; this is left for a change the document watch can't see, such as
+     * an element starting to match a custom `adaptiveThemeSelector` through
+     * a class.
      */
     refreshAdaptiveTheme(): void;
+    /**
+     * The selector matching the marker elements, `adaptiveThemeSelector`
+     * when set, every element carrying `adaptiveThemeAttribute` otherwise.
+     * @private
+     */
+    private get themeMarkerSelector();
     /**
      * (Re)builds the `mobile` matchMedia listener for the current
      * `mobileBreakpoint`, replacing any previous one.
@@ -493,7 +565,11 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
     private currentScrollY;
     /**
      * Recomputes `collapsed`/`atTop` from the current scroll position,
-     * dispatching `eunchange` for a genuine `collapsed` transition.
+     * dispatching `eunchange` for a genuine `collapsed` transition. Skipped
+     * while page scroll is locked (the mobile panel, or any other overlay, is
+     * open) : the pinned `<body>` makes `window.scrollY` read `0`, which would
+     * otherwise expand the bar and fire `eunchange` for a scroll that never
+     * happened. The real position comes back with the unlock.
      * @private
      */
     private updateScrollState;
@@ -512,6 +588,14 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
      * @private
      */
     private setTheme;
+    /**
+     * Dispatches `eunchange` for `property`, with the toolbar's current state
+     * as its value.
+     *
+     * @param property the property that just changed.
+     * @private
+     */
+    private dispatchChange;
     /**
      * The bar's current live height, used to anchor the adaptive-theme
      * observer's trigger line right at its bottom edge. Falls back to the
@@ -532,10 +616,25 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
      */
     private setupAdaptiveThemeObserver;
     /**
-     * Disconnects and clears the adaptive-theme observer, if any.
+     * Disconnects and clears the adaptive-theme observers, if any.
      * @private
      */
     private teardownAdaptiveThemeObserver;
+    /**
+     * Coalesces document mutations into one marker sync per frame, since a
+     * client-side navigation swaps many nodes at once.
+     * @private
+     */
+    private readonly handleThemeMutation;
+    /**
+     * Observes markers that newly match `adaptiveThemeSelector` and drops
+     * the ones gone from the document, then resolves `theme`. Resolving waits
+     * for the observer when new markers were just observed : it reports each
+     * of them once, and resolving before that would briefly fall back to
+     * `defaultTheme` while the new page's section is already under the bar.
+     * @private
+     */
+    private syncThemeMarkers;
     /**
      * Tracks which marker elements currently cross the trigger line and
      * resolves `theme` from them.
@@ -553,8 +652,10 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
      */
     private resolveAdaptiveTheme;
     /**
-     * Focuses the `[autofocus]` slotted element if present, otherwise the
-     * panel surface itself — same fallback `eun-drawer` uses on open.
+     * Focuses the `[autofocus]` slotted element if present, otherwise keeps
+     * it on the burger button, which lives inside the panel : the button just
+     * activated keeps its visible focus ring, and since the panel header
+     * comes first in the DOM, the next `Tab` lands on the panel's first item.
      * @private
      */
     private focusInitialElement;