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

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

@@ -15,11 +15,12 @@ export type EunomiaToolbarPanelDirection = "top" | "bottom" | "left" | "right";
  * The two color schemes the toolbar itself can render in.
  */
 export type EunomiaToolbarTheme = "light" | "dark";
-declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/dialog-surface.mixin.js").DialogSurfaceMixinInterface> & typeof LitElement;
+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, an
- * optional home-linking logo, and a burger button that opens a slide-in
- * panel below a mobile breakpoint.
+ * A sticky top page toolbar with start, center, and end layout slots, and
+ * a burger button that opens a slide-in panel below a mobile breakpoint.
+ * The logo is a link of your own slotted into start, so a framework's
+ * link component keeps its client-side navigation.
  *
  * Three independent, all opt-in behaviors layer on top of the base bar.
  * Collapse on scroll shrinks the bar once the page, or a custom scroll
@@ -56,18 +57,12 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  *
  * @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, rendered after a logo image linking to logoHref whenever logoSrc is set
+ * @slot start - Left-side content, such as the logo, as a link of your own wrapping an image
  * @slot center - Center content, truly centered independently of the start and end widths
  * @slot end - Right-side content
  * @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 {string} logoSrc - The image URL for the start slot's fallback logo
- * @attr {string} logo-src - The image URL for the start slot's fallback logo
- * @prop {string} [logoAlt='Home'] - The alt text for the fallback logo image
- * @attr {string} [logo-alt='Home'] - The alt text for the fallback logo image
- * @prop {string} [logoHref='#'] - The destination the fallback logo links to
- * @attr {string} [logo-href='#'] - The destination the fallback logo links to
  * @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
@@ -77,12 +72,12 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @attr {string} panel-size - A custom open size for the mobile panel
  * @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 {string} [ariaLabelMenuOpen='Open menu'] - The accessible label of the burger button while the panel is closed
- * @attr {string} [aria-label-menu-open='Open menu'] - The accessible label of the burger button while the panel is closed
- * @prop {string} [ariaLabelMenuClose='Close menu'] - The accessible label of the burger button while the panel is open
- * @attr {string} [aria-label-menu-close='Close menu'] - The accessible label of the burger button while the panel is open
- * @prop {string} [ariaLabelMenu='Menu'] - The accessible name of the mobile panel itself
- * @attr {string} [aria-label-menu='Menu'] - The accessible name of the mobile panel itself
+ * @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")
+ * @attr {string} [menu-close-label] - The accessible label of the burger button while the panel is open. Defaults to the localized string for the current locale (English: "Close menu")
+ * @prop {string} [menuLabel] - The accessible name of the mobile panel itself. Defaults to the localized string for the current locale (English: "Menu")
+ * @attr {string} [menu-label] - The accessible name of the mobile panel itself. Defaults to the localized string for the current locale (English: "Menu")
  * @attr {string} [aria-label='Main navigation'] - The accessible name of the toolbar's navigation landmark
  * @prop {boolean} [collapseOnScroll=false] - Enables the scroll-triggered collapse mode
  * @attr {boolean} [collapse-on-scroll=false] - Enables the scroll-triggered collapse mode
@@ -107,10 +102,11 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @prop {string} [skipLinkLabel='Skip to main content'] - The text of the default skip link built from skipLinkTarget
  * @attr {string} [skip-link-label='Skip to main content'] - The text of the default skip link built from skip-link-target
  * @fires {ChangeEvent} eunchange - Fired whenever open, collapsed, or, under adaptiveTheme, theme changes
- * @fires {NavigationEvent} eunnavigate - Fired before following the fallback logo's link, so a client-side router can intercept the navigation. Cancelable
  * @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
+ * @cssprop [--toolbar-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toolbar-padding is set
+ * @cssprop [--toolbar-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toolbar-padding is set
  * @cssprop [--toolbar-gap] - Sets the gap between the start, center, and end columns themselves, and the fallback for the three below wherever they're unset
  * @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
@@ -119,24 +115,26 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @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
- * @cssprop [--toolbar-background-dark] - Sets the background color for the dark theme
- * @cssprop [--toolbar-color-dark] - Sets the text color for the dark theme
+ * @cssprop [--toolbar-background-dark] - Sets the background color for the dark theme, --eun-surface-inverse by default
+ * @cssprop [--toolbar-color-dark] - Sets the text color for the dark theme, --eun-text-on-inverse by default
  * @cssprop [--toolbar-border-color] - Sets the bottom border color
  * @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-logo-height] - Sets the desired height of the default logo image ; never rendered taller than the bar's own current height regardless
- * @cssprop [--toolbar-logo-filter-dark] - Sets a filter applied to the logo image in dark toolbar mode
  * @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
  * @cssprop [--toolbar-panel-padding] - Sets the padding of the mobile panel
+ * @cssprop [--toolbar-panel-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toolbar-panel-padding is set
+ * @cssprop [--toolbar-panel-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toolbar-panel-padding is set
  * @cssprop [--toolbar-burger-align] - Sets the vertical alignment of the burger button within the bar's height, defaulting to center ; set flex-start to pin it to the top instead
  * @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-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 own background
+ * @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-separator-color] - Sets the color of the divider drawn between skip links
  * @cssprop [--toolbar-skip-links-gap] - Sets the gap between skip links, with the divider centered in it
@@ -156,20 +154,6 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
      * @default sticky
      */
     position: EunomiaToolbarPosition;
-    /**
-     * Image URL for the `start` slot's fallback logo.
-     */
-    logoSrc?: string;
-    /**
-     * Alt text for the fallback logo image.
-     * @default Home
-     */
-    logoAlt: string;
-    /**
-     * Destination the fallback logo links to.
-     * @default #
-     */
-    logoHref: string;
     /**
      * Viewport width (px) below which the burger button and its sliding
      * panel become available.
@@ -198,19 +182,19 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
     closeOnBackdrop: boolean;
     /**
      * Accessible label of the burger button while the panel is closed.
-     * @default Open menu
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelMenuOpen: string;
+    menuOpenLabel?: string;
     /**
      * Accessible label of the burger button while the panel is open.
-     * @default Close menu
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelMenuClose: string;
+    menuCloseLabel?: string;
     /**
      * Accessible name of the mobile panel itself.
-     * @default Menu
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelMenu: string;
+    menuLabel?: string;
     /**
      * Enables the scroll-triggered collapse mode.
      * @default false
@@ -558,14 +542,6 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
      * @private
      */
     private resolveAdaptiveTheme;
-    /**
-     * Gives an SPA router a chance to intercept the fallback logo's click, via
-     * the same cancelable `NavigationEvent` `eun-link` uses.
-     *
-     * @param event the native click event.
-     * @private
-     */
-    private readonly handleLogoClick;
     /**
      * Focuses the `[autofocus]` slotted element if present, otherwise the
      * panel surface itself — same fallback `eun-drawer` uses on open.
@@ -609,8 +585,7 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
      * Renders the skip-links area, the very first thing in the shadow DOM so
      * it's reachable with the very first `Tab` press. `skip-links` is a real
      * slot with the default single link (`skipLinkTarget`/`skipLinkLabel`) as
-     * its native fallback content — same fallback-content pattern as `start`'s
-     * logo — so a consumer needing more than one bypass target (navigation,
+     * its native fallback content, so a consumer needing more than one bypass target (navigation,
      * main content, footer, ...) just slots their own `<a href="#id">`
      * elements in instead. Visually it's a thin breadcrumb-style bar, hidden
      * (translated fully out of view) until one of the links is focused, at
@@ -619,15 +594,8 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
      */
     private renderSkipLinks;
     /**
-     * Renders the `start` slot. The logo is a plain sibling of `<slot
-     * name="start">`, not the slot's native fallback content — fallback
-     * content only renders when the slot has *no* assigned nodes at all, which
-     * would otherwise make the logo vanish the moment any real content is
-     * slotted into `start` instead of coexisting with it. Rendering it
-     * unconditionally off `logoSrc` keeps it showing (before whatever's
-     * slotted) regardless of what `start` carries, and it simply doesn't
-     * render at all when `logoSrc` is unset, leaving the slot free to carry a
-     * consumer-supplied logo of its own.
+     * Renders the `start` slot, which carries the logo as a link of the
+     * consumer's own.
      * @private
      */
     private renderStart;

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

@@ -7,18 +7,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, property, query, queryAssignedElements, } from "lit/decorators.js";
 import { html, LitElement, nothing } from "lit";
 import { ChangeEvent } from "../../../events/change.event.js";
-import { handleLinkNavigation } from "../../../utils/navigation.utils.js";
 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";
 /**
  * Tag name of the toolbar component.
  */
 export const EunomiaToolbarTagName = "eun-toolbar";
 /**
- * A sticky top page toolbar with start, center, and end layout slots, an
- * optional home-linking logo, and a burger button that opens a slide-in
- * panel below a mobile breakpoint.
+ * A sticky top page toolbar with start, center, and end layout slots, and
+ * a burger button that opens a slide-in panel below a mobile breakpoint.
+ * The logo is a link of your own slotted into start, so a framework's
+ * link component keeps its client-side navigation.
  *
  * Three independent, all opt-in behaviors layer on top of the base bar.
  * Collapse on scroll shrinks the bar once the page, or a custom scroll
@@ -55,18 +56,12 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  *
  * @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, rendered after a logo image linking to logoHref whenever logoSrc is set
+ * @slot start - Left-side content, such as the logo, as a link of your own wrapping an image
  * @slot center - Center content, truly centered independently of the start and end widths
  * @slot end - Right-side content
  * @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 {string} logoSrc - The image URL for the start slot's fallback logo
- * @attr {string} logo-src - The image URL for the start slot's fallback logo
- * @prop {string} [logoAlt='Home'] - The alt text for the fallback logo image
- * @attr {string} [logo-alt='Home'] - The alt text for the fallback logo image
- * @prop {string} [logoHref='#'] - The destination the fallback logo links to
- * @attr {string} [logo-href='#'] - The destination the fallback logo links to
  * @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
@@ -76,12 +71,12 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @attr {string} panel-size - A custom open size for the mobile panel
  * @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 {string} [ariaLabelMenuOpen='Open menu'] - The accessible label of the burger button while the panel is closed
- * @attr {string} [aria-label-menu-open='Open menu'] - The accessible label of the burger button while the panel is closed
- * @prop {string} [ariaLabelMenuClose='Close menu'] - The accessible label of the burger button while the panel is open
- * @attr {string} [aria-label-menu-close='Close menu'] - The accessible label of the burger button while the panel is open
- * @prop {string} [ariaLabelMenu='Menu'] - The accessible name of the mobile panel itself
- * @attr {string} [aria-label-menu='Menu'] - The accessible name of the mobile panel itself
+ * @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")
+ * @attr {string} [menu-close-label] - The accessible label of the burger button while the panel is open. Defaults to the localized string for the current locale (English: "Close menu")
+ * @prop {string} [menuLabel] - The accessible name of the mobile panel itself. Defaults to the localized string for the current locale (English: "Menu")
+ * @attr {string} [menu-label] - The accessible name of the mobile panel itself. Defaults to the localized string for the current locale (English: "Menu")
  * @attr {string} [aria-label='Main navigation'] - The accessible name of the toolbar's navigation landmark
  * @prop {boolean} [collapseOnScroll=false] - Enables the scroll-triggered collapse mode
  * @attr {boolean} [collapse-on-scroll=false] - Enables the scroll-triggered collapse mode
@@ -106,10 +101,11 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @prop {string} [skipLinkLabel='Skip to main content'] - The text of the default skip link built from skipLinkTarget
  * @attr {string} [skip-link-label='Skip to main content'] - The text of the default skip link built from skip-link-target
  * @fires {ChangeEvent} eunchange - Fired whenever open, collapsed, or, under adaptiveTheme, theme changes
- * @fires {NavigationEvent} eunnavigate - Fired before following the fallback logo's link, so a client-side router can intercept the navigation. Cancelable
  * @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
+ * @cssprop [--toolbar-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toolbar-padding is set
+ * @cssprop [--toolbar-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toolbar-padding is set
  * @cssprop [--toolbar-gap] - Sets the gap between the start, center, and end columns themselves, and the fallback for the three below wherever they're unset
  * @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
@@ -118,30 +114,32 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @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
- * @cssprop [--toolbar-background-dark] - Sets the background color for the dark theme
- * @cssprop [--toolbar-color-dark] - Sets the text color for the dark theme
+ * @cssprop [--toolbar-background-dark] - Sets the background color for the dark theme, --eun-surface-inverse by default
+ * @cssprop [--toolbar-color-dark] - Sets the text color for the dark theme, --eun-text-on-inverse by default
  * @cssprop [--toolbar-border-color] - Sets the bottom border color
  * @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-logo-height] - Sets the desired height of the default logo image ; never rendered taller than the bar's own current height regardless
- * @cssprop [--toolbar-logo-filter-dark] - Sets a filter applied to the logo image in dark toolbar mode
  * @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
  * @cssprop [--toolbar-panel-padding] - Sets the padding of the mobile panel
+ * @cssprop [--toolbar-panel-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toolbar-panel-padding is set
+ * @cssprop [--toolbar-panel-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toolbar-panel-padding is set
  * @cssprop [--toolbar-burger-align] - Sets the vertical alignment of the burger button within the bar's height, defaulting to center ; set flex-start to pin it to the top instead
  * @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-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 own background
+ * @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-separator-color] - Sets the color of the divider drawn between skip links
  * @cssprop [--toolbar-skip-links-gap] - Sets the gap between skip links, with the divider centered in it
  * @element eun-toolbar
  */
-let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement) {
+let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LocalizableMixin(LitElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -149,16 +147,6 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
          * @default sticky
          */
         this.position = "sticky";
-        /**
-         * Alt text for the fallback logo image.
-         * @default Home
-         */
-        this.logoAlt = "Home";
-        /**
-         * Destination the fallback logo links to.
-         * @default #
-         */
-        this.logoHref = "#";
         /**
          * Viewport width (px) below which the burger button and its sliding
          * panel become available.
@@ -180,21 +168,6 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
          * @default true
          */
         this.closeOnBackdrop = true;
-        /**
-         * Accessible label of the burger button while the panel is closed.
-         * @default Open menu
-         */
-        this.ariaLabelMenuOpen = "Open menu";
-        /**
-         * Accessible label of the burger button while the panel is open.
-         * @default Close menu
-         */
-        this.ariaLabelMenuClose = "Close menu";
-        /**
-         * Accessible name of the mobile panel itself.
-         * @default Menu
-         */
-        this.ariaLabelMenu = "Menu";
         /**
          * Enables the scroll-triggered collapse mode.
          * @default false
@@ -334,16 +307,6 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
             }
             this.resolveAdaptiveTheme();
         };
-        /**
-         * Gives an SPA router a chance to intercept the fallback logo's click, via
-         * the same cancelable `NavigationEvent` `eun-link` uses.
-         *
-         * @param event the native click event.
-         * @private
-         */
-        this.handleLogoClick = (event) => {
-            handleLinkNavigation(this, event, this.logoHref, "_self");
-        };
         /**
          * Reacts to the panel's native `toggle` event — the single source of
          * truth for its open/close state, whether triggered by `show()`/`hide()`
@@ -369,7 +332,7 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
                     },
                 });
                 this.dispatchEvent(new ChangeEvent());
-                this.updateComplete.then(() => this.focusInitialElement());
+                void this.updateComplete.then(() => this.focusInitialElement());
                 return;
             }
             this.closeDialogSurface(this.burgerEl);
@@ -489,7 +452,10 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
             if (this.adaptiveTheme) {
                 this.setupAdaptiveThemeObserver();
             }
-            else {
+            else if (changed.get("adaptiveTheme") === true) {
+                // Only on a real switch off : the first update also reports
+                // `adaptiveTheme` (as `undefined` → `false`), and resetting there
+                // would overwrite a `theme` set by the page.
                 this.teardownAdaptiveThemeObserver();
                 this.theme = this.defaultTheme;
             }
@@ -544,7 +510,7 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
      */
     updateMediaQuery() {
         this.mediaQueryList?.removeEventListener("change", this.handleMediaChange);
-        this.mediaQueryList = window.matchMedia(`(max-width: ${Math.max(this.mobileBreakpoint - 1, 0)}px)`);
+        this.mediaQueryList = window.matchMedia(`(width < ${this.mobileBreakpoint}px)`);
         this.mediaQueryList.addEventListener("change", this.handleMediaChange);
         this.mobile = this.mediaQueryList.matches;
     }
@@ -769,8 +735,7 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
      * Renders the skip-links area, the very first thing in the shadow DOM so
      * it's reachable with the very first `Tab` press. `skip-links` is a real
      * slot with the default single link (`skipLinkTarget`/`skipLinkLabel`) as
-     * its native fallback content — same fallback-content pattern as `start`'s
-     * logo — so a consumer needing more than one bypass target (navigation,
+     * its native fallback content, so a consumer needing more than one bypass target (navigation,
      * main content, footer, ...) just slots their own `<a href="#id">`
      * elements in instead. Visually it's a thin breadcrumb-style bar, hidden
      * (translated fully out of view) until one of the links is focused, at
@@ -799,31 +764,13 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
         /* eslint-enable lit-a11y/click-events-have-key-events */
     }
     /**
-     * Renders the `start` slot. The logo is a plain sibling of `<slot
-     * name="start">`, not the slot's native fallback content — fallback
-     * content only renders when the slot has *no* assigned nodes at all, which
-     * would otherwise make the logo vanish the moment any real content is
-     * slotted into `start` instead of coexisting with it. Rendering it
-     * unconditionally off `logoSrc` keeps it showing (before whatever's
-     * slotted) regardless of what `start` carries, and it simply doesn't
-     * render at all when `logoSrc` is unset, leaving the slot free to carry a
-     * consumer-supplied logo of its own.
+     * Renders the `start` slot, which carries the logo as a link of the
+     * consumer's own.
      * @private
      */
     renderStart() {
         return html `
       <div id="start">
-        ${this.logoSrc
-            ? html `
-              <a
-                id="logo-link"
-                href=${this.logoHref}
-                @click=${this.handleLogoClick}
-              >
-                <img id="logo-image" src=${this.logoSrc} alt=${this.logoAlt} />
-              </a>
-            `
-            : nothing}
         <slot name="start"></slot>
       </div>
     `;
@@ -860,8 +807,8 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
         size="s"
         aria-expanded=${this.open}
         aria-label=${this.open
-            ? this.ariaLabelMenuClose
-            : this.ariaLabelMenuOpen}
+            ? (this.menuCloseLabel ?? this.dictionary.toolbar.menuClose)
+            : (this.menuOpenLabel ?? this.dictionary.toolbar.menuOpen)}
         @click=${() => this.toggle()}
       >
         <slot name=${slotName} @slotchange=${this.handleIconSlotChange}>
@@ -898,7 +845,7 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
         popover="manual"
         role="dialog"
         aria-modal="true"
-        aria-label=${this.ariaLabelMenu}
+        aria-label=${this.menuLabel ?? this.dictionary.toolbar.menu}
         data-direction=${this.panelDirection}
         tabindex="-1"
         @toggle=${this.handlePanelToggle}
@@ -935,17 +882,8 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
  */
 EunomiaToolbar.styles = toolbarStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaToolbar.prototype, "position", void 0);
-__decorate([
-    property({ attribute: "logo-src" })
-], EunomiaToolbar.prototype, "logoSrc", void 0);
-__decorate([
-    property({ attribute: "logo-alt" })
-], EunomiaToolbar.prototype, "logoAlt", void 0);
-__decorate([
-    property({ attribute: "logo-href" })
-], EunomiaToolbar.prototype, "logoHref", void 0);
 __decorate([
     property({ type: Number, attribute: "mobile-breakpoint" })
 ], EunomiaToolbar.prototype, "mobileBreakpoint", void 0);
@@ -953,7 +891,7 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaToolbar.prototype, "open", void 0);
 __decorate([
-    property({ reflect: true, attribute: "panel-direction" })
+    property({ reflect: true, attribute: "panel-direction", useDefault: true })
 ], EunomiaToolbar.prototype, "panelDirection", void 0);
 __decorate([
     property({ attribute: "panel-size" })
@@ -962,14 +900,14 @@ __decorate([
     property({ type: Boolean, attribute: "close-on-backdrop" })
 ], EunomiaToolbar.prototype, "closeOnBackdrop", void 0);
 __decorate([
-    property({ attribute: "aria-label-menu-open" })
-], EunomiaToolbar.prototype, "ariaLabelMenuOpen", void 0);
+    property({ attribute: "menu-open-label" })
+], EunomiaToolbar.prototype, "menuOpenLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-menu-close" })
-], EunomiaToolbar.prototype, "ariaLabelMenuClose", void 0);
+    property({ attribute: "menu-close-label" })
+], EunomiaToolbar.prototype, "menuCloseLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-menu" })
-], EunomiaToolbar.prototype, "ariaLabelMenu", void 0);
+    property({ attribute: "menu-label" })
+], EunomiaToolbar.prototype, "menuLabel", void 0);
 __decorate([
     property({ type: Boolean, attribute: "collapse-on-scroll" })
 ], EunomiaToolbar.prototype, "collapseOnScroll", void 0);
@@ -995,7 +933,7 @@ __decorate([
     property({ attribute: "adaptive-theme-selector" })
 ], EunomiaToolbar.prototype, "adaptiveThemeSelector", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaToolbar.prototype, "theme", void 0);
 __decorate([
     property({ attribute: "default-theme" })