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

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

@@ -3,6 +3,10 @@ import { css } from "lit";
  * Base style for the carousel component.
  *
  * Custom css variables:
+ * [--carousel-visible-slides] - Set how many slides are shown at once, overriding `visibleSlides` ; meant for the consumer's own media/container queries
+ * [--carousel-scroll-step] - Set how many slides a prev/next/dot click advances by, overriding `scrollStep`
+ * [--carousel-responsive-breakpoint] - Set the width (px) below which an `inline` layout moves its buttons into the header row, overriding `responsiveBreakpoint`
+ * [--carousel-fade-display] - Set to `none` to hide the edge fades via pure CSS (e.g. in a container query), regardless of `edgeFade`
  * [--carousel-gap] - Set a custom gap between slides
  * [--carousel-track-padding] - Set a custom vertical padding on the track, giving slides' own effects that bleed outside their box (a hover shadow, `eun-sliding-card`'s bottom fade, ...) room to render before `overflow-y: hidden` clips them
  * [--carousel-min-slide-width] - Set a custom minimum slide width ; on a narrow viewport, this wins over `visibleSlides` so slides never get uncomfortably small — fewer of them just become scrollable off-screen instead
@@ -33,6 +37,10 @@ const base = css `
   :host {
     display: block;
     --_visibleCount: 1;
+    --_effectiveVisibleCount: var(
+      --carousel-visible-slides,
+      var(--_visibleCount)
+    );
     --_snapAlign: start;
   }
 
@@ -50,7 +58,7 @@ const base = css `
 
   #carousel-header {
     display: flex;
-    align-items: var(--carousel-header-align, baseline);
+    align-items: var(--carousel-header-align, flex-end);
     justify-content: space-between;
     gap: var(--carousel-header-gap, var(--eun-space-m, 16px));
     margin-bottom: var(--eun-space-m, 16px);
@@ -84,6 +92,7 @@ const base = css `
   #viewport::before,
   #viewport::after {
     content: "";
+    display: var(--carousel-fade-display, block);
     position: absolute;
     top: 0;
     bottom: 0;
@@ -125,7 +134,7 @@ const base = css `
     scrollbar-width: none;
     outline: 2px solid transparent;
     outline-offset: 8px;
-    border-radius: var(--eun-borderRadius-m);
+    border-radius: var(--eun-border-radius-m);
     transition: outline 0.2s ease-out;
   }
   #track::-webkit-scrollbar {
@@ -156,8 +165,11 @@ const base = css `
     flex-basis: max(
       var(--carousel-min-slide-width, 220px),
       calc(
-        (100% - (var(--_visibleCount) - 1) * var(--carousel-gap, 16px)) /
-          var(--_visibleCount)
+        (
+            100% - (var(--_effectiveVisibleCount) - 1) *
+              var(--carousel-gap, 16px)
+          ) /
+          var(--_effectiveVisibleCount)
       )
     );
   }
@@ -167,9 +179,9 @@ const base = css `
       calc(
         (
             100% - var(--carousel-peek-size, 32px) -
-              (var(--_visibleCount) - 1) * var(--carousel-gap, 16px)
+              (var(--_effectiveVisibleCount) - 1) * var(--carousel-gap, 16px)
           ) /
-          var(--_visibleCount)
+          var(--_effectiveVisibleCount)
       )
     );
   }
@@ -190,7 +202,7 @@ const base = css `
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--carousel-nav-border-color, var(--eun-border-color, #dee0e7));
     background: var(
       --carousel-nav-background,
@@ -274,7 +286,7 @@ const base = css `
     width: calc(var(--carousel-dot-size, 6px) * 3.5);
     border-radius: var(
       --carousel-dot-border-radius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     background: var(
       --carousel-dot-active-color,

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

@@ -55,8 +55,8 @@ export const paginationStyles = css `
     height: var(--pagination-item-size, 32px);
     padding-inline: var(--eun-space-xs, 4px);
     font-family: inherit;
-    font-size: var(--pagination-font-size, var(--eun-fontSize-s, 14px));
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-size: var(--pagination-font-size, var(--eun-font-size-s, 14px));
+    font-weight: var(--eun-font-weight-m, 500);
     line-height: 1;
   }
   :host([show-labels]) button.control {
@@ -71,7 +71,7 @@ export const paginationStyles = css `
     border: none;
     border-radius: var(
       --pagination-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
     background: transparent;
     color: var(--pagination-item-color, var(--eun-text-secondary, #484e61));

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

@@ -34,14 +34,14 @@ const base = css `
     box-sizing: border-box;
     width: var(--_width);
     transition: width var(--_transitionDuration) ease;
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    border-inline-end: var(--eun-border-width-s, 1px) solid var(--_borderColor);
   }
   :host([dragging]) {
     transition: none;
   }
   :host([position="end"]) {
     border-inline-end: none;
-    border-inline-start: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    border-inline-start: var(--eun-border-width-s, 1px) solid var(--_borderColor);
   }
   :host([collapsed][collapse-mode="mini"]) {
     --_width: var(--_miniWidth);
@@ -80,8 +80,8 @@ const base = css `
   }
   #heading {
     margin: 0;
-    font-size: var(--eun-fontSize-l, 18px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-l, 18px);
+    font-weight: var(--eun-font-weight-l, 700);
     color: inherit;
   }
   #body {
@@ -89,7 +89,7 @@ const base = css `
     min-height: 0;
     overflow-y: auto;
     padding: var(--_gap) var(--_padding);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
   }
   #footer {
     flex: none;
@@ -139,8 +139,8 @@ const base = css `
     height: 28px;
     padding: 0;
     background: var(--_background);
-    border: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border: var(--eun-border-width-s, 1px) solid var(--_borderColor);
+    border-radius: var(--eun-border-radius-xl, 999px);
     color: var(--eun-text-secondary, #484e61);
     cursor: pointer;
     transition: background-color 0.15s ease;
@@ -161,12 +161,12 @@ const base = css `
     width: 100%;
     padding: var(--eun-space-s, 8px) var(--_padding);
     border: none;
-    border-top: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    border-top: var(--eun-border-width-s, 1px) solid var(--_borderColor);
     border-radius: 0;
     background: transparent;
     color: var(--eun-text-secondary, #484e61);
     font: inherit;
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     text-align: start;
     cursor: pointer;
     transition: background-color 0.15s ease;

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

@@ -61,7 +61,7 @@ export const stepStyles = css `
     text-align: left;
     outline: 2px solid transparent;
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-m, 8px);
+    border-radius: var(--eun-border-radius-m, 8px);
     flex: 0 1 auto;
     min-width: 0;
   }
@@ -100,17 +100,17 @@ export const stepStyles = css `
     height: var(--_indicatorSize);
     border-radius: var(
       --stepper-indicator-border-radius,
-      var(--eun-borderRadius-xl, 999px)
+      var(--eun-border-radius-xl, 999px)
     );
     background: var(
       --stepper-indicator-background,
       var(--eun-content-hover, #edeff0)
     );
     color: var(--stepper-indicator-color, var(--eun-text-secondary, #484e61));
-    font-size: var(--stepper-indicator-font-size, var(--eun-fontSize-xs, 12px));
+    font-size: var(--stepper-indicator-font-size, var(--eun-font-size-xs, 12px));
     font-weight: var(
       --stepper-indicator-font-weight,
-      var(--eun-fontWeight-m, 500)
+      var(--eun-font-weight-m, 500)
     );
     transition:
       background var(--stepper-transition-duration, 0.2s) ease-out,
@@ -163,18 +163,18 @@ export const stepStyles = css `
     min-width: 0;
   }
   .label {
-    font-size: var(--stepper-label-font-size, var(--eun-fontSize-s, 14px));
-    font-weight: var(--stepper-label-font-weight, var(--eun-fontWeight-m, 500));
+    font-size: var(--stepper-label-font-size, var(--eun-font-size-s, 14px));
+    font-weight: var(--stepper-label-font-weight, var(--eun-font-weight-m, 500));
     color: var(--stepper-label-color, var(--eun-text-color, #071621));
   }
   :host([status="current"]) .label {
     color: var(--stepper-label-color-current, var(--eun-text-color, #071621));
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
   }
   .description {
     font-size: var(
       --stepper-description-font-size,
-      var(--eun-fontSize-xs, 12px)
+      var(--eun-font-size-xs, 12px)
     );
     color: var(--stepper-description-color, var(--eun-text-secondary, #484e61));
   }

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

@@ -161,7 +161,7 @@ export const stepperStyles = css `
     text-align: left;
     outline: 2px solid transparent;
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-m, 8px);
+    border-radius: var(--eun-border-radius-m, 8px);
   }
 
   .step-control.has-description {
@@ -199,17 +199,17 @@ export const stepperStyles = css `
     height: var(--_indicatorSize);
     border-radius: var(
       --stepper-indicator-border-radius,
-      var(--eun-borderRadius-xl, 999px)
+      var(--eun-border-radius-xl, 999px)
     );
     background: var(
       --stepper-indicator-background,
       var(--eun-content-hover, #edeff0)
     );
     color: var(--stepper-indicator-color, var(--eun-text-secondary, #484e61));
-    font-size: var(--stepper-indicator-font-size, var(--eun-fontSize-xs, 12px));
+    font-size: var(--stepper-indicator-font-size, var(--eun-font-size-xs, 12px));
     font-weight: var(
       --stepper-indicator-font-weight,
-      var(--eun-fontWeight-m, 500)
+      var(--eun-font-weight-m, 500)
     );
     transition:
       background var(--stepper-transition-duration, 0.2s) ease-out,
@@ -304,18 +304,18 @@ export const stepperStyles = css `
     min-width: 0;
   }
   .label {
-    font-size: var(--stepper-label-font-size, var(--eun-fontSize-s, 14px));
-    font-weight: var(--stepper-label-font-weight, var(--eun-fontWeight-m, 500));
+    font-size: var(--stepper-label-font-size, var(--eun-font-size-s, 14px));
+    font-weight: var(--stepper-label-font-weight, var(--eun-font-weight-m, 500));
     color: var(--stepper-label-color, var(--eun-text-color, #071621));
   }
   li.step[data-status="current"] .label {
     color: var(--stepper-label-color-current, var(--eun-text-color, #071621));
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
   }
   .description {
     font-size: var(
       --stepper-description-font-size,
-      var(--eun-fontSize-xs, 12px)
+      var(--eun-font-size-xs, 12px)
     );
     color: var(--stepper-description-color, var(--eun-text-secondary, #484e61));
   }

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

@@ -38,8 +38,8 @@ const base = css `
     --_border: var(--tab-border);
     --_border-radius: var(--tab-border-radius, 8px);
     --_pointerEvents: all;
-    font-size: var(--eun-fontSize-s, 14px);
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-size: var(--eun-font-size-s, 14px);
+    font-weight: var(--eun-font-weight-m, 500);
     outline: none;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     z-index: 1;
@@ -110,7 +110,7 @@ const base = css `
   :host([icon]) div slot[name="icon"],
   div[has-icon] slot[name="icon"] {
     grid-area: icon;
-    font-size: var(--eun-fontSize-m, 16px);
+    font-size: var(--eun-font-size-m, 16px);
     line-height: 1;
     display: block;
   }
@@ -137,7 +137,7 @@ const base = css `
       --tab-notification-color,
       var(--eun-color-critical-100, #aa0014)
     );
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
     transition: scale 0.2s cubic-bezier(0.35, 0.92, 0.65, 1.28);
     scale: 1;
     place-self: var(--_badge-place, start);
@@ -165,7 +165,7 @@ const base = css `
 
   @media (min-width: ${EUNOMIA_BREAKPOINTS.tablet}px) {
     :host {
-      font-size: var(--eun-fontSize-s, 14px);
+      font-size: var(--eun-font-size-s, 14px);
     }
     :host([badge]) div::after {
       --_y-correction: none;

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

@@ -30,6 +30,7 @@ declare const EunomiaTabGroup_base: import("../../../../utils/constructor.type.j
  * @prop { 'start' | 'center' | 'end' } align - The tabs position alignment according to the component
  * @prop { 'fade' | 'slide' | 'none' } animation - The animation to apply to a click/keyboard-triggered panel switch ; a touch swipe's own release settling into place is never this, see the class doc and `--tab-panel-swipe-duration`
  * @prop { boolean } hideIndicator - Indicates whether the indicators under a tab should be displayed or not
+ * @prop { boolean } [full=false] - Stretches the tab header to 100% of the group's width, dividing it equally between the tabs and centering each label. Makes align irrelevant. Combines with overflow scrolling : a tab whose label doesn't fit its share keeps the room it needs
  * @attr {string} aria-label - Accessible name for the tablist, forwarded to the internal `role="tablist"` element. Recommended when the group's purpose isn't already clear from a preceding heading, or when several tab groups appear on the same page
  * @fires { TabChangeEvent } tabchange - Emitted event on active panel change (click, keyboard, or a committed touch swipe alike)
  * @cssprop [--tab-header-background] - Set a custom color to the background of the tab header
@@ -58,6 +59,13 @@ export declare class EunomiaTabGroup extends EunomiaTabGroup_base {
      * @default start
      */
     align: "start" | "center" | "end";
+    /**
+     * Stretches the tab header to 100% of the group's width, dividing it
+     * equally between the tabs. Ignores `align`, since nothing is left to
+     * align.
+     * @default false
+     */
+    full: boolean;
     /**
      * The animation type, for a tab switch triggered by a click or a keyboard
      * activation only. A touch swipe always tracks the finger 1:1 during the
@@ -173,6 +181,7 @@ export declare class EunomiaTabGroup extends EunomiaTabGroup_base {
     connectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues): void;
     disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
     /**
      * Update the displayed indicator under the active tab.
      * @internal

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

@@ -60,6 +60,7 @@ const eunTabTagName = "eun-tab";
  * @prop { 'start' | 'center' | 'end' } align - The tabs position alignment according to the component
  * @prop { 'fade' | 'slide' | 'none' } animation - The animation to apply to a click/keyboard-triggered panel switch ; a touch swipe's own release settling into place is never this, see the class doc and `--tab-panel-swipe-duration`
  * @prop { boolean } hideIndicator - Indicates whether the indicators under a tab should be displayed or not
+ * @prop { boolean } [full=false] - Stretches the tab header to 100% of the group's width, dividing it equally between the tabs and centering each label. Makes align irrelevant. Combines with overflow scrolling : a tab whose label doesn't fit its share keeps the room it needs
  * @attr {string} aria-label - Accessible name for the tablist, forwarded to the internal `role="tablist"` element. Recommended when the group's purpose isn't already clear from a preceding heading, or when several tab groups appear on the same page
  * @fires { TabChangeEvent } tabchange - Emitted event on active panel change (click, keyboard, or a committed touch swipe alike)
  * @cssprop [--tab-header-background] - Set a custom color to the background of the tab header
@@ -83,6 +84,13 @@ let EunomiaTabGroup = EunomiaTabGroup_1 = class EunomiaTabGroup extends Navigati
          * @default start
          */
         this.align = "start";
+        /**
+         * Stretches the tab header to 100% of the group's width, dividing it
+         * equally between the tabs. Ignores `align`, since nothing is left to
+         * align.
+         * @default false
+         */
+        this.full = false;
         /**
          * The animation type, for a tab switch triggered by a click or a keyboard
          * activation only. A touch swipe always tracks the finger 1:1 during the
@@ -267,6 +275,12 @@ let EunomiaTabGroup = EunomiaTabGroup_1 = class EunomiaTabGroup extends Navigati
         this.swipeGesture?.destroy();
         super.disconnectedCallback?.();
     }
+    updated(changedProperties) {
+        super.updated?.(changedProperties);
+        if (changedProperties.has("full")) {
+            this.updateIndicator();
+        }
+    }
     /**
      * Update the displayed indicator under the active tab.
      * @internal
@@ -281,7 +295,7 @@ let EunomiaTabGroup = EunomiaTabGroup_1 = class EunomiaTabGroup extends Navigati
         }
         const { clientWidth, offsetLeft } = this.activeTab;
         let translateOffset;
-        if (this.align === "center" && !this.overflowState) {
+        if (this.align === "center" && !this.overflowState && !this.full) {
             translateOffset =
                 -this.scrollableContent.clientWidth +
                     this.scrollableContent.clientWidth / 2 +
@@ -289,7 +303,7 @@ let EunomiaTabGroup = EunomiaTabGroup_1 = class EunomiaTabGroup extends Navigati
                     clientWidth -
                     clientWidth / 2;
         }
-        else if (this.align === "end" && !this.overflowState) {
+        else if (this.align === "end" && !this.overflowState && !this.full) {
             translateOffset =
                 offsetLeft -
                     this.scrollableContent.clientWidth +
@@ -699,6 +713,9 @@ EunomiaTabGroup.EDGE_RESISTANCE = 0.3;
 __decorate([
     property({ reflect: true })
 ], EunomiaTabGroup.prototype, "align", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EunomiaTabGroup.prototype, "full", void 0);
 __decorate([
     property({ reflect: true })
 ], EunomiaTabGroup.prototype, "animation", void 0);

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

@@ -52,6 +52,14 @@ const base = css `
     justify-content: center;
   }
 
+  :host([full]) [role="tablist"] {
+    justify-content: flex-start;
+  }
+
+  :host([full]) ::slotted(eun-tab) {
+    flex: 1 1 0%;
+  }
+
   :host([hide-indicator]) ::slotted(eun-tab:hover)::after {
     display: none;
   }
@@ -142,8 +150,8 @@ const base = css `
     justify-content: flex-start;
     background: linear-gradient(
       90deg,
-      var(--tab-arrows-color, var(--eun-color-grey-0, #ffffff)) 0%,
-      var(--tab-arrows-color, var(--eun-color-grey-0, #ffffff)) 60%,
+      var(--tab-arrows-color, var(--eun-surface-color, #ffffff)) 0%,
+      var(--tab-arrows-color, var(--eun-surface-color, #ffffff)) 60%,
       transparent 100%
     );
   }
@@ -153,8 +161,8 @@ const base = css `
     background: linear-gradient(
       90deg,
       transparent 0%,
-      var(--tab-arrows-color, var(--eun-color-grey-0, #ffffff)) 40%,
-      var(--tab-arrows-color, var(--eun-color-grey-0, #ffffff)) 100%
+      var(--tab-arrows-color, var(--eun-surface-color, #ffffff)) 40%,
+      var(--tab-arrows-color, var(--eun-surface-color, #ffffff)) 100%
     );
   }
   hr {

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

@@ -3,7 +3,7 @@ const base = css `
   :host {
     display: block;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
   }
   :host([is-hidden]) {
     display: none;

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

@@ -54,6 +54,8 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * everything behind it, including the logo and any other bar content;
  * the burger is the only thing that stays visible in front of it.
  *
+ * @slot [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 center - Center content, truly centered independently of the start and end widths
  * @slot end - Right-side content
@@ -129,12 +131,15 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @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-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-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-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
  */
 export declare class EunomiaToolbar extends EunomiaToolbar_base {
@@ -302,6 +307,25 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
      * @readonly
      */
     private readonly burgerEl?;
+    /**
+     * Elements assigned to the `menu-icon` slot, if any ; queried live so the
+     * default `eun-icon` fallback correctly appears/disappears as content is
+     * slotted/removed, same pattern `eun-collapse`'s `chevron` slot uses.
+     * @internal
+     */
+    private readonly menuIconSlotEls;
+    /**
+     * Elements assigned to the `close-icon` slot, if any ; see
+     * {@link menuIconSlotEls}.
+     * @internal
+     */
+    private readonly closeIconSlotEls;
+    /**
+     * Re-renders once a `menu-icon`/`close-icon` slot's content changes, so
+     * the default `eun-icon` fallback correctly appears/disappears.
+     * @private
+     */
+    private handleIconSlotChange;
     /**
      * The live `matchMedia` list backing {@link mobile}, rebuilt whenever
      * `mobileBreakpoint` changes.

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, property, query } from "lit/decorators.js";
+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";
@@ -53,6 +53,8 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * everything behind it, including the logo and any other bar content;
  * the burger is the only thing that stays visible in front of it.
  *
+ * @slot [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 center - Center content, truly centered independently of the start and end widths
  * @slot end - Right-side content
@@ -128,12 +130,15 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @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-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-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-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) {
@@ -256,6 +261,14 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
          * @internal
          */
         this.mobile = false;
+        /**
+         * Re-renders once a `menu-icon`/`close-icon` slot's content changes, so
+         * the default `eun-icon` fallback correctly appears/disappears.
+         * @private
+         */
+        this.handleIconSlotChange = () => {
+            this.requestUpdate();
+        };
         /**
          * The element (or `window`) {@link handleScroll} is currently listening
          * on, resolved from `scrollTarget`.
@@ -834,6 +847,11 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
      * @private
      */
     renderBurger() {
+        const slotName = this.open ? "close-icon" : "menu-icon";
+        const iconName = this.open ? "close" : "menu";
+        const hasSlotted = this.open
+            ? this.closeIconSlotEls.length
+            : this.menuIconSlotEls.length;
         return html `
       <eun-button
         id="burger"
@@ -846,7 +864,11 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
             : this.ariaLabelMenuOpen}
         @click=${() => this.toggle()}
       >
-        <eun-icon name=${this.open ? "close" : "menu"} size="20"></eun-icon>
+        <slot name=${slotName} @slotchange=${this.handleIconSlotChange}>
+          ${hasSlotted
+            ? nothing
+            : html `<eun-icon name=${iconName} size="20"></eun-icon>`}
+        </slot>
       </eun-button>
     `;
     }
@@ -996,6 +1018,12 @@ __decorate([
 __decorate([
     query("#burger")
 ], EunomiaToolbar.prototype, "burgerEl", void 0);
+__decorate([
+    queryAssignedElements({ slot: "menu-icon" })
+], EunomiaToolbar.prototype, "menuIconSlotEls", void 0);
+__decorate([
+    queryAssignedElements({ slot: "close-icon" })
+], EunomiaToolbar.prototype, "closeIconSlotEls", void 0);
 EunomiaToolbar = __decorate([
     customElement(EunomiaToolbarTagName)
 ], EunomiaToolbar);