@eunomia/elements 1.0.0-beta.9 → 1.0.0

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

@@ -11,7 +11,7 @@ import { DialogSurfaceMixin } from "../../../mixins/dialog-surface.mixin.js";
 import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
 import { toolbarStyles } from "./toolbar.styles.js";
 import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
-import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
+import { isScrollLocked } from "../../../utils/scroll-lock.utils.js";
 /**
  * Tag name of the toolbar component.
  */
@@ -55,6 +55,7 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * 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 +64,7 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @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 +74,8 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @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 +96,10 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @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 +107,7 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @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 +117,10 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @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 +130,8 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @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 +143,24 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @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
  */
 let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LocalizableMixin(LitElement)) {
@@ -151,6 +171,13 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
          * @default sticky
          */
         this.position = "sticky";
+        /**
+         * 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
+         */
+        this.layout = "centered";
         /**
          * Viewport width (px) below which the burger button and its sliding
          * panel become available.
@@ -169,9 +196,9 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
         this.panelDirection = "top";
         /**
          * Whether clicking outside the mobile panel closes it.
-         * @default true
+         * @default false
          */
-        this.closeOnBackdrop = true;
+        this.closeOnBackdrop = false;
         /**
          * Enables the scroll-triggered collapse mode.
          * @default false
@@ -207,11 +234,10 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
          */
         this.adaptiveTheme = false;
         /**
-         * 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
          */
-        this.adaptiveThemeSelector = "[data-toolbar-theme]";
+        this.adaptiveThemeAttribute = "data-toolbar-theme";
         /**
          * The toolbar's current color scheme. A plain manual switch when
          * `adaptiveTheme` is off ; driven by the marker observer (still settable
@@ -260,6 +286,11 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
          * @internal
          */
         this.intersectingThemeEls = new Set();
+        /**
+         * Marker elements the adaptive-theme observer currently observes.
+         * @internal
+         */
+        this.observedThemeEls = new Set();
         /**
          * Reacts to the viewport crossing `mobileBreakpoint`. Force-closes the
          * panel when leaving mobile while it's open — the panel itself is about
@@ -288,6 +319,20 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
                 this.updateScrollState();
             });
         };
+        /**
+         * Coalesces document mutations into one marker sync per frame, since a
+         * client-side navigation swaps many nodes at once.
+         * @private
+         */
+        this.handleThemeMutation = () => {
+            if (this.themeMarkerRafId !== undefined) {
+                return;
+            }
+            this.themeMarkerRafId = requestAnimationFrame(() => {
+                this.themeMarkerRafId = undefined;
+                this.syncThemeMarkers();
+            });
+        };
         /**
          * Tracks which marker elements currently cross the trigger line and
          * resolves `theme` from them.
@@ -330,12 +375,12 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
                         }
                     },
                 });
-                this.dispatchEvent(new ChangeEvent());
+                this.dispatchChange("open");
                 void this.updateComplete.then(() => this.focusInitialElement());
                 return;
             }
             this.closeDialogSurface(this.burgerEl);
-            this.dispatchEvent(new ChangeEvent());
+            this.dispatchChange("open");
         };
         /**
          * Explicitly focuses a skip link's target on click, on top of (not
@@ -385,7 +430,7 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
         this.mediaQueryList?.removeEventListener("change", this.handleMediaChange);
         this.detachScrollListener();
         this.teardownAdaptiveThemeObserver();
-        this.teardownDialogSurface(this.open);
+        this.teardownDialogSurface();
         super.disconnectedCallback();
     }
     /**
@@ -440,8 +485,9 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
      * 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
@@ -462,6 +508,7 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
         }
         if (this.adaptiveTheme &&
             (changed.has("adaptiveThemeSelector") ||
+                changed.has("adaptiveThemeAttribute") ||
                 changed.has("collapsed") ||
                 changed.has("scrollTarget"))) {
             this.setupAdaptiveThemeObserver();
@@ -486,21 +533,23 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
         this.open = !this.open;
     }
     /**
-     * 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() {
-        if (!this.themeObserver) {
-            return;
-        }
-        this.themeObserver.disconnect();
-        this.intersectingThemeEls.clear();
-        document
-            .querySelectorAll(this.adaptiveThemeSelector)
-            .forEach((el) => this.themeObserver?.observe(el));
-        this.resolveAdaptiveTheme();
+        this.syncThemeMarkers();
+    }
+    /**
+     * The selector matching the marker elements, `adaptiveThemeSelector`
+     * when set, every element carrying `adaptiveThemeAttribute` otherwise.
+     * @private
+     */
+    get themeMarkerSelector() {
+        return this.adaptiveThemeSelector ?? `[${this.adaptiveThemeAttribute}]`;
     }
     /**
      * (Re)builds the `mobile` matchMedia listener for the current
@@ -603,10 +652,17 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
     }
     /**
      * 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
      */
     updateScrollState() {
+        if (this.scrollTargetEl === window && isScrollLocked()) {
+            return;
+        }
         const scrollY = this.currentScrollY();
         if (this.collapseOnScroll) {
             this.setCollapsed(scrollY > this.collapseThreshold);
@@ -627,7 +683,7 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
             return;
         }
         this.collapsed = collapsed;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchChange("collapsed");
     }
     /**
      * Sets `theme`, dispatching `eunchange` only for a genuine transition.
@@ -640,7 +696,22 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
             return;
         }
         this.theme = theme;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchChange("theme");
+    }
+    /**
+     * Dispatches `eunchange` for `property`, with the toolbar's current state
+     * as its value.
+     *
+     * @param property the property that just changed.
+     * @private
+     */
+    dispatchChange(property) {
+        this.dispatchEvent(new ChangeEvent({
+            property,
+            open: this.open,
+            collapsed: this.collapsed,
+            theme: this.theme,
+        }));
     }
     /**
      * The bar's current live height, used to anchor the adaptive-theme
@@ -669,20 +740,67 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
             root: this.resolveIntersectionRoot(),
             rootMargin: `-${barHeight}px 0px -85% 0px`,
         });
-        document
-            .querySelectorAll(this.adaptiveThemeSelector)
-            .forEach((el) => this.themeObserver?.observe(el));
+        document.querySelectorAll(this.themeMarkerSelector).forEach((el) => {
+            this.themeObserver?.observe(el);
+            this.observedThemeEls.add(el);
+        });
+        this.themeMarkerObserver = new MutationObserver(this.handleThemeMutation);
+        this.themeMarkerObserver.observe(document.documentElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: [this.adaptiveThemeAttribute],
+        });
         this.resolveAdaptiveTheme();
     }
     /**
-     * Disconnects and clears the adaptive-theme observer, if any.
+     * Disconnects and clears the adaptive-theme observers, if any.
      * @private
      */
     teardownAdaptiveThemeObserver() {
         this.themeObserver?.disconnect();
         this.themeObserver = undefined;
+        this.themeMarkerObserver?.disconnect();
+        this.themeMarkerObserver = undefined;
+        if (this.themeMarkerRafId !== undefined) {
+            cancelAnimationFrame(this.themeMarkerRafId);
+            this.themeMarkerRafId = undefined;
+        }
+        this.observedThemeEls.clear();
         this.intersectingThemeEls.clear();
     }
+    /**
+     * 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
+     */
+    syncThemeMarkers() {
+        if (!this.themeObserver) {
+            return;
+        }
+        const matches = new Set(document.querySelectorAll(this.themeMarkerSelector));
+        for (const el of this.observedThemeEls) {
+            if (!matches.has(el)) {
+                this.themeObserver.unobserve(el);
+                this.observedThemeEls.delete(el);
+                this.intersectingThemeEls.delete(el);
+            }
+        }
+        let observedNew = false;
+        for (const el of matches) {
+            if (!this.observedThemeEls.has(el)) {
+                this.themeObserver.observe(el);
+                this.observedThemeEls.add(el);
+                observedNew = true;
+            }
+        }
+        if (!observedNew) {
+            this.resolveAdaptiveTheme();
+        }
+    }
     /**
      * Resolves `theme` from whichever marked section currently intersects the
      * trigger line — the last one in document order among current matches,
@@ -695,10 +813,10 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
             this.setTheme(this.defaultTheme);
             return;
         }
-        const all = document.querySelectorAll(this.adaptiveThemeSelector);
+        const all = document.querySelectorAll(this.themeMarkerSelector);
         for (let i = all.length - 1; i >= 0; i -= 1) {
             if (this.intersectingThemeEls.has(all[i])) {
-                this.setTheme(all[i].getAttribute("data-toolbar-theme") === "dark"
+                this.setTheme(all[i].getAttribute(this.adaptiveThemeAttribute) === "dark"
                     ? "dark"
                     : "light");
                 return;
@@ -707,8 +825,10 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
         this.setTheme(this.defaultTheme);
     }
     /**
-     * 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
      */
     focusInitialElement() {
@@ -717,7 +837,7 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
             autofocusTarget.focus();
             return;
         }
-        this.panelEl?.focus();
+        this.burgerEl?.focus();
     }
     /**
      * Whether anything should render in the skip-links area at all — either
@@ -810,10 +930,15 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(Localizable
             : (this.menuOpenLabel ?? this.dictionary.toolbar.menuOpen)}
         @click=${() => this.toggle()}
       >
-        <slot name=${slotName} @slotchange=${this.handleIconSlotChange}>
-          ${hasSlotted
+        <!-- burger-icon holds the per-state slots as its fallback, so a
+          single element slotted into it stays put across both states, free
+          to animate between them, and wins over menu-icon/close-icon. -->
+        <slot name="burger-icon">
+          <slot name=${slotName} @slotchange=${this.handleIconSlotChange}>
+            ${hasSlotted
             ? nothing
             : html `<eun-icon name=${iconName} size="20"></eun-icon>`}
+          </slot>
         </slot>
       </eun-button>
     `;
@@ -886,6 +1011,9 @@ EunomiaToolbar.styles = toolbarStyles;
 __decorate([
     property({ reflect: true, useDefault: true })
 ], EunomiaToolbar.prototype, "position", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], EunomiaToolbar.prototype, "layout", void 0);
 __decorate([
     property({ type: Number, attribute: "mobile-breakpoint" })
 ], EunomiaToolbar.prototype, "mobileBreakpoint", void 0);
@@ -902,7 +1030,7 @@ __decorate([
     property({ reflect: true, attribute: "mobile-hide" })
 ], EunomiaToolbar.prototype, "mobileHide", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter, attribute: "close-on-backdrop" })
+    property({ type: Boolean, attribute: "close-on-backdrop" })
 ], EunomiaToolbar.prototype, "closeOnBackdrop", void 0);
 __decorate([
     property({ attribute: "menu-open-label" })
@@ -934,6 +1062,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: "adaptive-theme" })
 ], EunomiaToolbar.prototype, "adaptiveTheme", void 0);
+__decorate([
+    property({ attribute: "adaptive-theme-attribute" })
+], EunomiaToolbar.prototype, "adaptiveThemeAttribute", void 0);
 __decorate([
     property({ attribute: "adaptive-theme-selector" })
 ], EunomiaToolbar.prototype, "adaptiveThemeSelector", void 0);