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

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

@@ -18,7 +18,10 @@ import { css } from "lit";
  */
 const base = css `
   :host {
-    --_swipe-duration: var(--tab-panel-swipe-duration, 200ms);
+    --_swipe-duration: var(
+      --tab-panel-swipe-duration,
+      var(--eun-duration-m, 200ms)
+    );
     --_indicator-height: var(--tab-indicator-height, 2px);
     --_indicator-color: var(
       --tab-indicator-color,
@@ -26,7 +29,7 @@ const base = css `
     );
     --_hover-indicator-color: var(
       --tab-hover-indicator-color,
-      var(--eun-color-primary-transparent, #3d6fff33)
+      var(--eun-color-primary-alpha-20, #3d6fff33)
     );
     --_divider-gap: var(--tab-divider-gap, 0px);
     --_divider-color: var(
@@ -79,8 +82,9 @@ const base = css `
     opacity: 0;
     z-index: 1;
     transition:
-      opacity 0.2s ease-out,
-      background-color 0.2s ease-out;
+      opacity var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out);
   }
 
   ::slotted(eun-tab:not([disabled]):hover)::after {
@@ -91,10 +95,10 @@ const base = css `
     height: var(--_indicator-height);
     background: var(--_indicator-color);
     position: absolute;
-    bottom: 0;
+    bottom: var(--_outline-padding);
     transition:
-      width 0.1s linear,
-      transform 0.15s ease;
+      width var(--eun-duration-xs, 100ms) linear,
+      transform var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
     will-change: width, transform;
     z-index: 1;
   }
@@ -107,10 +111,10 @@ const base = css `
   [role="tablist"] {
     display: flex;
     gap: var(--_tabs-gap);
-    padding-bottom: var(--_divider-gap);
+    padding-bottom: calc(var(--_divider-gap) + var(--_outline-padding));
     padding-top: var(--_outline-padding);
     padding-inline: var(--_outline-padding);
-    margin-bottom: var(--_panel-gap);
+    margin-bottom: calc(var(--_panel-gap) - var(--_outline-padding));
     scrollbar-width: none;
     position: relative;
   }
@@ -136,7 +140,8 @@ const base = css `
     opacity: 0;
     min-width: 30px;
     pointer-events: none;
-    transition: opacity 0.2s ease;
+    transition: opacity var(--eun-duration-m, 200ms)
+      var(--eun-easing-default, ease);
     display: flex;
     align-items: center;
   }
@@ -170,7 +175,7 @@ const base = css `
     border-top: var(--_divider-size) solid var(--_divider-color);
     margin: 0;
     position: absolute;
-    bottom: 0;
+    bottom: var(--_outline-padding);
     left: 0;
     right: 0;
     width: 100%;
@@ -197,20 +202,20 @@ const base = css `
 
   :host([animation="fade"]) slot:not([name])::slotted(eun-tab-panel),
   :host(:not([animation])) slot:not([name])::slotted(eun-tab-panel) {
-    --_animationTime: var(--tab-panel-animation, 150ms);
+    --_animationTime: var(--tab-panel-animation, var(--eun-duration-s, 150ms));
     animation: var(--_animationTime) ease-in fade-in;
   }
 
   :host([animation="slide"])
     slot:not([name])::slotted(eun-tab-panel.slide-left) {
     --_animationTime: var(--tab-panel-animation, 500ms);
-    animation: var(--_animationTime) ease-out slide-left;
+    animation: var(--_animationTime) var(--eun-easing-out, ease-out) slide-left;
   }
 
   :host([animation="slide"])
     slot:not([name])::slotted(eun-tab-panel.slide-right) {
     --_animationTime: var(--tab-panel-animation, 500ms);
-    animation: var(--_animationTime) ease-out slide-right;
+    animation: var(--_animationTime) var(--eun-easing-out, ease-out) slide-right;
   }
 
   @keyframes fade-in {

package/dist/components/navigation/tabs/tab-panel/tab-panel.d.ts

@@ -8,6 +8,10 @@ export declare const EunomiaTabPanelTagName = "eun-tab-panel";
  * Note that it must be used inside a `eun-tab-group` component.
  *
  * @slot [default] - The panel content
+ * @cssprop [--tab-panel-font-size] - Set a custom font size to the panel content
+ * @cssprop [--tab-panel-focus-outline] - Set a custom color to the focus outline, shown when the panel itself takes focus
+ * @cssprop [--tab-panel-focus-outline-width] - Set a custom width to the focus outline
+ * @cssprop [--tab-panel-focus-outline-offset] - Set a custom offset to the focus outline
  */
 export declare class EunomiaTabPanel extends LitElement {
     /**

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

@@ -17,6 +17,10 @@ export const EunomiaTabPanelTagName = "eun-tab-panel";
  * Note that it must be used inside a `eun-tab-group` component.
  *
  * @slot [default] - The panel content
+ * @cssprop [--tab-panel-font-size] - Set a custom font size to the panel content
+ * @cssprop [--tab-panel-focus-outline] - Set a custom color to the focus outline, shown when the panel itself takes focus
+ * @cssprop [--tab-panel-focus-outline-width] - Set a custom width to the focus outline
+ * @cssprop [--tab-panel-focus-outline-offset] - Set a custom offset to the focus outline
  */
 let EunomiaTabPanel = class EunomiaTabPanel extends LitElement {
     constructor() {

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

@@ -1,9 +1,26 @@
 import { css } from "lit";
+/**
+ * Base style for the tab panel.
+ *
+ * Custom css variables:
+ * [--tab-panel-font-size] - Set a custom font size to the panel content
+ * [--tab-panel-focus-outline] - Set a custom color to the focus outline, shown when the panel itself takes focus
+ * [--tab-panel-focus-outline-width] - Set a custom width to the focus outline
+ * [--tab-panel-focus-outline-offset] - Set a custom offset to the focus outline
+ */
 const base = css `
   :host {
     display: block;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-font-size-s, 14px);
+    font-size: var(--tab-panel-font-size, var(--eun-font-size-s, 14px));
+    outline: var(--tab-panel-focus-outline-width, 2px) solid transparent;
+    outline-offset: var(--tab-panel-focus-outline-offset, 2px);
+  }
+  :host(:focus-visible) {
+    outline-color: var(
+      --tab-panel-focus-outline,
+      var(--eun-color-primary-500, #3d6fff)
+    );
   }
   :host([is-hidden]) {
     display: none;

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

@@ -17,9 +17,10 @@ export type EunomiaToolbarPanelDirection = "top" | "bottom" | "left" | "right";
 export type EunomiaToolbarTheme = "light" | "dark";
 declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/dialog-surface.mixin.js").DialogSurfaceMixinInterface> & 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
@@ -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.
@@ -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,7 +7,6 @@ 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";
@@ -16,9 +15,10 @@ import { toolbarStyles } from "./toolbar.styles.js";
  */
 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 +55,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
@@ -106,10 +100,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,24 +113,26 @@ 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
@@ -149,16 +146,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.
@@ -334,16 +321,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 +346,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 +466,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 +524,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 +749,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 +778,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>
     `;
@@ -937,15 +898,6 @@ EunomiaToolbar.styles = toolbarStyles;
 __decorate([
     property({ reflect: 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);