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

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

@@ -1,5 +1,5 @@
 import { css } from "lit";
-import { EUNOMIA_BREAKPOINTS } from "../../../../breakpoints.js";
+import { cssFrom } from "../../../../utils/media.styles.js";
 /**
  * Base style for the tab.
  *
@@ -7,15 +7,21 @@ import { EUNOMIA_BREAKPOINTS } from "../../../../breakpoints.js";
  * [--tab-background-color] - Set a custom background color for the tab
  * [--tab-hover-background-color] - Set a custom background color for the tab in case of hover state
  * [--tab-active-background-color] - Set a custom background color for the tab in case of active state
+ * [--tab-focus-background-color] - Set a custom background color for the tab in case of keyboard focus
  * [--tab-text-color] - Set a custom color for the tab label
  * [--tab-hover-text-color] - Set a custom color to the tab label in case of hover state
  * [--tab-active-text-color] - Set a custom color to the tab label in case of active state
  * [--tab-padding] - Set a custom padding into the tab
+ * [--tab-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --tab-padding is set
+ * [--tab-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --tab-padding is set
  * [--tab-border] - Set a custom border to the tab
  * [--tab-border-active] - Set a custom border to the tab on active state
  * [--tab-border-radius] - Set a custom border radius to the tab
  * [--tab-focus-outline] - Set a custom color to the focus outline
+ * [--tab-focus-outline-width] - Set a custom width to the focus outline
  * [--tab-focus-outline-offset] - Set a custom offset to the focus outline
+ * [--tab-font-size] - Set a custom font size to the tab label
+ * [--tab-font-weight] - Set a custom font weight to the tab label
  * [--tab-notification-color] - Set a custom color to the notification badge
  * [--tab-disabled-display] - Set a custom `display` for a disabled tab, e.g. `none` to hide it entirely instead of showing it dimmed
  */
@@ -33,14 +39,15 @@ const base = css `
     --_background: var(--tab-background-color, transparent);
     --_padding: var(
       --tab-padding,
-      var(--eun-space-s, 8px) var(--eun-space-m, 16px)
+      var(--tab-padding-block, var(--eun-space-s, 8px))
+        var(--tab-padding-inline, var(--eun-space-m, 16px))
     );
     --_border: var(--tab-border);
     --_border-radius: var(--tab-border-radius, 8px);
     --_pointerEvents: all;
-    font-size: var(--eun-font-size-s, 14px);
-    font-weight: var(--eun-font-weight-m, 500);
-    outline: none;
+    font-size: var(--tab-font-size, var(--eun-font-size-s, 14px));
+    font-weight: var(--tab-font-weight, var(--eun-font-weight-m, 500));
+    outline: none !important;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     z-index: 1;
   }
@@ -80,16 +87,19 @@ const base = css `
     border: var(--_border);
     border-radius: var(--_border-radius);
     background: var(--_background);
-    outline: 2px solid transparent;
-    outline-offset: -8px;
+    outline: var(--tab-focus-outline-width, 2px) solid transparent;
+    outline-offset: var(--tab-focus-outline-offset, -2px);
     user-select: none;
-    transition: all 0.2s ease-out;
+    transition: all var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
     color: var(--_textColor);
     fill: var(--_textColor);
   }
   :host(:focus-visible) div {
-    outline-offset: var(--tab-focus-outline-offset, -6px);
     outline-color: var(--_focusIndicator);
+    background: var(
+      --tab-focus-background-color,
+      var(--eun-color-primary-alpha-10, #3d6fff1a)
+    );
   }
   :host([badge]) div,
   div[has-badge] {
@@ -138,13 +148,12 @@ const base = css `
       var(--eun-color-critical-100, #aa0014)
     );
     border-radius: var(--eun-border-radius-xl, 999px);
-    transition: scale 0.2s cubic-bezier(0.35, 0.92, 0.65, 1.28);
+    transition: scale var(--eun-duration-m, 200ms)
+      cubic-bezier(0.35, 0.92, 0.65, 1.28);
     scale: 1;
     place-self: var(--_badge-place, start);
     translate: var(--_y-correction, 0 -2px);
   }
-  /* A real slotted badge (slot="badge") takes priority over the plain
-     dot indicator when both are present, rather than rendering both. */
   :host([badge]) div[has-badge]::after {
     display: none;
   }
@@ -163,10 +172,7 @@ const base = css `
     }
   }
 
-  @media (min-width: ${EUNOMIA_BREAKPOINTS.tablet}px) {
-    :host {
-      font-size: var(--eun-font-size-s, 14px);
-    }
+  @media ${cssFrom("tablet")} {
     :host([badge]) div::after {
       --_y-correction: none;
     }

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

@@ -15,6 +15,7 @@ import { createSwipeGesture, } from "../../../../utils/swipe-gesture.utils.js";
 import { TabChangeEvent } from "../../../../events/tabchange.event.js";
 import { EunomiaTab } from "../tab/tab.js";
 import { tabGroupStyle } from "./tab-group.styles.js";
+import { cssTimeToMs } from "../../../../utils/motion.utils.js";
 /**
  * Tag name of the tab group component.
  */
@@ -355,7 +356,7 @@ let EunomiaTabGroup = EunomiaTabGroup_1 = class EunomiaTabGroup extends Navigati
         if (previousPanel) {
             this.dispatchEvent(new TabChangeEvent({ active: newTab.panel }));
         }
-        this.updateComplete.then(this.debounceAnimation);
+        void this.updateComplete.then(this.debounceAnimation);
     }
     /**
      * Initialize the slide animation if initialized.
@@ -505,15 +506,15 @@ let EunomiaTabGroup = EunomiaTabGroup_1 = class EunomiaTabGroup extends Navigati
         const edgeSign = this.dragDirection === DirectionFocus.NEXT ? 1 : -1;
         const activeFinal = commit ? `${-edgeSign * 100}%` : "0px";
         const targetFinal = commit ? "0px" : `${edgeSign * 100}%`;
-        const duration = getComputedStyle(this).getPropertyValue("--_swipe-duration");
-        const instant = Number.parseFloat(duration) <= 0;
+        const duration = cssTimeToMs(getComputedStyle(this).getPropertyValue("--_swipe-duration")) ?? 0;
+        const instant = duration <= 0;
         [activePanel, targetPanel].forEach((panel) => {
             if (!panel) {
                 return;
             }
             panel.style.transition = instant
                 ? "none"
-                : "transform var(--_swipe-duration) ease-out";
+                : "transform var(--_swipe-duration) var(--eun-easing-out, ease-out)";
         });
         activePanel?.style.setProperty("transform", `translateX(${activeFinal})`);
         targetPanel?.style.setProperty("transform", `translateX(${targetFinal})`);
@@ -530,10 +531,8 @@ let EunomiaTabGroup = EunomiaTabGroup_1 = class EunomiaTabGroup extends Navigati
             this.finalizeDrag(commit);
         };
         activePanel?.addEventListener("transitionend", onSettled, { once: true });
-        // Belt-and-braces : a panel with e.g. `display:none` sneaking in
-        // through external code mid-drag would never fire `transitionend`.
-        this.updateComplete.then(() => {
-            window.setTimeout(onSettled, Number.parseFloat(duration) || 0);
+        void this.updateComplete.then(() => {
+            window.setTimeout(onSettled, duration);
         });
     }
     /**

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;