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

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

@@ -1,4 +1,5 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
+import { EUNOMIA_BREAKPOINTS, mediaBelow, } from "../../../breakpoints.js";
 /**
  * Base style for the sidebar component.
  *
@@ -6,13 +7,16 @@ import { css } from "lit";
  * [--sidebar-width] - Set a custom expanded width to the sidebar ; also the floor of the drag-resize range and, once resized, holds the user's chosen width
  * [--sidebar-mini-width] - Set a custom width for the collapse-mode="mini" state ; also the floor of the drag-resize range
  * [--sidebar-max-width] - Set a custom ceiling for the drag-resize range
- * [--sidebar-background] - Set a custom background color to the sidebar
- * [--sidebar-color] - Set a custom text color to the sidebar (pair with --sidebar-background for contrast)
+ * [--sidebar-background] - Set a custom background color to the sidebar, for both themes. Use an opaque color : the sidebar always paints its own background, so a translucent one adds up with whatever is painted behind it. Use transparent to show the background behind the sidebar instead
+ * [--sidebar-color] - Set a custom text color to the sidebar, for both themes (pair with --sidebar-background for contrast)
  * [--sidebar-border-color] - Set a custom color to the sidebar's side border
  * [--sidebar-padding] - Set a custom padding to the header/body/footer
  * [--sidebar-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --sidebar-padding is set
  * [--sidebar-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --sidebar-padding is set
  * [--sidebar-gap] - Set a custom gap inside the header/footer rows
+ * [--sidebar-toggle-color] - Set a custom color to the toggle button
+ * [--sidebar-toggle-background-hover] - Set a custom background color to the toggle button on hover
+ * [--sidebar-resize-handle-delay] - Set how long the pointer must rest on the border before the resize handle shows (default 300ms, 0 to show it right away)
  * [--sidebar-transition-duration] - Set a custom duration for the collapse/resize transition
  */
 const base = css `
@@ -25,6 +29,14 @@ const base = css `
       --sidebar-border-color,
       var(--eun-border-color, #dee0e7)
     );
+    --_toggleColor: var(
+      --sidebar-toggle-color,
+      var(--eun-text-secondary, #484e61)
+    );
+    --_toggleBackgroundHover: var(
+      --sidebar-toggle-background-hover,
+      var(--eun-content-hover, #edeff0)
+    );
     --_paddingBlock: var(
       --sidebar-padding,
       var(--sidebar-padding-block, var(--eun-space-m, 16px))
@@ -51,22 +63,37 @@ const base = css `
   :host([dragging]) {
     transition: none;
   }
+  :host([theme="dark"]) {
+    --_background: var(
+      --sidebar-background,
+      var(--eun-surface-inverse, #0b1620)
+    );
+    --_color: var(--sidebar-color, var(--eun-text-on-inverse, #f5f7fa));
+    --_borderColor: var(
+      --sidebar-border-color,
+      color-mix(in srgb, var(--_color) 16%, transparent)
+    );
+    --_toggleColor: var(
+      --sidebar-toggle-color,
+      color-mix(in srgb, var(--_color) 75%, transparent)
+    );
+    --_toggleBackgroundHover: var(
+      --sidebar-toggle-background-hover,
+      color-mix(in srgb, var(--_color) 12%, transparent)
+    );
+  }
   :host([position="end"]) {
     border-inline-end: none;
     border-inline-start: var(--eun-border-width-s, 1px) solid
       var(--_borderColor);
   }
-  :host([collapsed][collapse-mode="mini"]) {
+  :host([collapsed]:is([collapse-mode="mini"], :not([collapse-mode]))) {
     --_width: var(--_miniWidth);
   }
   :host([collapsed][collapse-mode="hidden"]) {
     --_width: 0px;
     border-color: transparent;
   }
-  :host([dragged-hidden]) {
-    --_width: 0px !important;
-    border-color: transparent !important;
-  }
 
   #surface {
     box-sizing: border-box;
@@ -118,20 +145,20 @@ const base = css `
     inset-inline-end: -4px;
     z-index: 0;
     width: 8px;
-    cursor: ew-resize;
     touch-action: none;
     background: transparent;
-    transition: background-color var(--eun-duration-s, 150ms)
-      var(--eun-easing-default, ease);
   }
   :host([position="end"]) #resize-handle {
     inset-inline-end: auto;
     inset-inline-start: -4px;
   }
-  #resize-handle:hover,
+  #resize-handle.armed,
   #resize-handle:focus-visible {
+    cursor: ew-resize;
     background: var(--eun-color-primary-500, #3d6fff);
     opacity: 0.35;
+    transition: background-color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   #resize-handle:focus-visible {
     outline: none;
@@ -155,17 +182,25 @@ const base = css `
     background: var(--_background);
     border: var(--eun-border-width-s, 1px) solid var(--_borderColor);
     border-radius: var(--eun-border-radius-xl, 999px);
-    color: var(--eun-text-secondary, #484e61);
+    color: var(--_toggleColor);
     cursor: pointer;
-    transition: background-color var(--eun-duration-s, 150ms)
-      var(--eun-easing-default, ease);
+    outline: 2px solid transparent;
+    transition:
+      background-color var(--eun-duration-s, 150ms)
+        var(--eun-easing-default, ease),
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
   :host([position="end"]) #collapse-toggle:not(.inline) {
     inset-inline-end: auto;
     inset-inline-start: -14px;
   }
   #collapse-toggle:not(.inline):hover {
-    background: var(--eun-content-hover, #edeff0);
+    background:
+      linear-gradient(
+        var(--_toggleBackgroundHover),
+        var(--_toggleBackgroundHover)
+      ),
+      var(--_background);
   }
 
   #collapse-toggle.inline {
@@ -179,33 +214,45 @@ const base = css `
     border-top: var(--eun-border-width-s, 1px) solid var(--_borderColor);
     border-radius: 0;
     background: transparent;
-    color: var(--eun-text-secondary, #484e61);
+    color: var(--_toggleColor);
     font: inherit;
     font-size: var(--eun-font-size-s, 14px);
     text-align: start;
     cursor: pointer;
-    transition: background-color var(--eun-duration-s, 150ms)
-      var(--eun-easing-default, ease);
+    outline: 2px solid transparent;
+    transition:
+      background-color var(--eun-duration-s, 150ms)
+        var(--eun-easing-default, ease),
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
   #collapse-toggle.inline:hover {
-    background: var(--eun-content-hover, #edeff0);
+    background: var(--_toggleBackgroundHover);
   }
   #collapse-toggle-label {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
-  :host([collapsed][collapse-mode="mini"]) #collapse-toggle.inline {
+  :host([collapsed]:is([collapse-mode="mini"], :not([collapse-mode])))
+    #collapse-toggle.inline {
     justify-content: center;
   }
-  :host([collapsed][collapse-mode="mini"]) #collapse-toggle-label {
+  :host([collapsed]:is([collapse-mode="mini"], :not([collapse-mode])))
+    #collapse-toggle-label {
     display: none;
   }
 
   #collapse-toggle:focus-visible {
-    outline: 2px solid var(--eun-color-primary-500, #3d6fff);
+    outline-color: var(--eun-color-primary-500, #3d6fff);
     outline-offset: 1px;
   }
+  #collapse-toggle.inline:focus-visible {
+    outline-offset: -2px;
+    outline-color: var(--eun-color-primary-500, #3d6fff);
+    border-start-start-radius: var(--eun-border-radius-m, 8px);
+    border-start-end-radius: var(--eun-border-radius-m, 8px);
+    background: var(--_toggleBackgroundHover);
+  }
 
   @media (prefers-reduced-motion: reduce) {
     :host {
@@ -213,4 +260,7 @@ const base = css `
     }
   }
 `;
-export const sidebarStyles = base;
+const hideBelow = unsafeCSS(Object.keys(EUNOMIA_BREAKPOINTS)
+    .map((name) => `@media ${mediaBelow(name)} { :host([hide-below="${name}"]) { display: none; } }`)
+    .join("\n"));
+export const sidebarStyles = [base, hideBelow];

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

@@ -140,13 +140,14 @@ let EunomiaStep = class EunomiaStep extends LitElement {
         type="button"
         class=${controlClasses}
         @click=${this.handleClick}
-        >${indicator}${content}</button
-      >`;
+      >
+        ${indicator}${content}
+      </button>`;
         }
         else {
-            control = html `<button type="button" class=${controlClasses} disabled
-        >${indicator}${content}</button
-      >`;
+            control = html `<button type="button" class=${controlClasses} disabled>
+        ${indicator}${content}
+      </button>`;
         }
         return html `${control}<span class="connector" aria-hidden="true"></span>`;
     }
@@ -163,10 +164,10 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaStep.prototype, "disabled", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaStep.prototype, "state", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaStep.prototype, "status", void 0);
 __decorate([
     property({ type: Boolean })
@@ -175,7 +176,7 @@ __decorate([
     property({ type: Number })
 ], EunomiaStep.prototype, "index", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaStep.prototype, "orientation", void 0);
 __decorate([
     queryAssignedElements({ slot: "description" })

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

@@ -98,7 +98,6 @@ export type EunomiaStepperVariant = "numbered" | "progress";
  * @prop {'horizontal' | 'vertical'} [orientation='horizontal'] - The numbered display's layout direction. Has no effect on the progress variant
  * @prop {'numbered' | 'progress'} [variant='numbered'] - Which of the two displays to render
  * @prop {boolean} [linear=true] - Restricts direct navigation to steps before activeStep. Set to false to allow jumping to any non-disabled step in any order
- * @attr {'true' | 'false'} [linear='true'] - Unlike most boolean attributes here, the literal string false genuinely means false, needed since linear is the one that defaults to true
  * @prop {boolean} [disabled=false] - Disables every step's control, leaving a read-only progress summary with no navigation at all, the same way an individual step's own disabled does
  * @attr {string} [aria-label='Progress'] - The accessible label for the navigation landmark. Numbered display only
  * @fires {StepChangeEvent} eunstepchange - Fired with the requested step whenever a reachable step is activated. ActiveStep and activeSubstep are never updated internally
@@ -176,8 +175,7 @@ export declare class EunomiaStepper extends LitElement {
     /**
      * Restricts direct navigation to steps before {@link activeStep} ; set
      * to `false` (either as the JS property, or the literal `linear="false"`
-     * attribute — see {@link linearConverter} for why that works here,
-     * unlike most other boolean attributes) to allow jumping to any
+     * attribute — see {@link defaultTrueConverter}) to allow jumping to any
      * non-`disabled` step in any order.
      * @default true
      */

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

@@ -9,27 +9,11 @@ import { html, LitElement, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { StepChangeEvent } from "../../../events/stepchange.event.js";
 import { stepperStyles } from "./stepper.styles.js";
+import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the stepper component.
  */
 export const EunomiaStepperTagName = "eun-stepper";
-/**
- * Attribute converter for `linear`, making an explicit `linear="false"`
- * actually mean false. Lit's standard boolean converter only ever looks
- * at whether the attribute is *present*, the same way native HTML boolean
- * attributes work (`disabled="false"` is still disabled) — fine for every
- * other boolean here, which default to `false` and so are only ever
- * turned on by adding the attribute. `linear` is the one exception,
- * defaulting to `true` : without this, there would be no way to turn it
- * back off from plain HTML, only from script (`el.linear = false`).
- * @internal
- */
-const linearConverter = {
-    fromAttribute(value) {
-        return value !== null && value !== "false";
-    },
-    toAttribute: String,
-};
 /**
  * A status and progression indicator for a multi-step process, such as a
  * checkout flow, a multi-page form, or an onboarding wizard.
@@ -86,7 +70,6 @@ const linearConverter = {
  * @prop {'horizontal' | 'vertical'} [orientation='horizontal'] - The numbered display's layout direction. Has no effect on the progress variant
  * @prop {'numbered' | 'progress'} [variant='numbered'] - Which of the two displays to render
  * @prop {boolean} [linear=true] - Restricts direct navigation to steps before activeStep. Set to false to allow jumping to any non-disabled step in any order
- * @attr {'true' | 'false'} [linear='true'] - Unlike most boolean attributes here, the literal string false genuinely means false, needed since linear is the one that defaults to true
  * @prop {boolean} [disabled=false] - Disables every step's control, leaving a read-only progress summary with no navigation at all, the same way an individual step's own disabled does
  * @attr {string} [aria-label='Progress'] - The accessible label for the navigation landmark. Numbered display only
  * @fires {StepChangeEvent} eunstepchange - Fired with the requested step whenever a reachable step is activated. ActiveStep and activeSubstep are never updated internally
@@ -153,8 +136,7 @@ let EunomiaStepper = class EunomiaStepper extends LitElement {
         /**
          * Restricts direct navigation to steps before {@link activeStep} ; set
          * to `false` (either as the JS property, or the literal `linear="false"`
-         * attribute — see {@link linearConverter} for why that works here,
-         * unlike most other boolean attributes) to allow jumping to any
+         * attribute — see {@link defaultTrueConverter}) to allow jumping to any
          * non-`disabled` step in any order.
          * @default true
          */
@@ -218,8 +200,15 @@ let EunomiaStepper = class EunomiaStepper extends LitElement {
     syncSlottedSteps() {
         this.slottedSteps.forEach((step, index) => {
             step.index = index;
-            step.orientation = this.orientation;
-            step.status = this.statusOf(index, this.activeStep, step.state);
+            // Only assigned when they differ: assigning a step's default again
+            // would reflect it.
+            if (step.orientation !== this.orientation) {
+                step.orientation = this.orientation;
+            }
+            const status = this.statusOf(index, this.activeStep, step.state);
+            if (step.status !== status) {
+                step.status = status;
+            }
             const isCurrent = index === this.activeStep;
             step.reachable =
                 !isCurrent &&
@@ -508,7 +497,7 @@ let EunomiaStepper = class EunomiaStepper extends LitElement {
  */
 EunomiaStepper.styles = [stepperStyles];
 __decorate([
-    property({ type: Array, reflect: true })
+    property({ type: Array, reflect: true, useDefault: true })
 ], EunomiaStepper.prototype, "steps", void 0);
 __decorate([
     property({ type: Number, attribute: "active-step" })
@@ -517,13 +506,13 @@ __decorate([
     property({ type: Number, attribute: "active-substep" })
 ], EunomiaStepper.prototype, "activeSubstep", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaStepper.prototype, "orientation", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaStepper.prototype, "variant", void 0);
 __decorate([
-    property({ reflect: true, converter: linearConverter })
+    property({ reflect: true, converter: defaultTrueConverter })
 ], EunomiaStepper.prototype, "linear", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

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

@@ -710,13 +710,13 @@ EunomiaTabGroup.styles = tabGroupStyle;
  */
 EunomiaTabGroup.EDGE_RESISTANCE = 0.3;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTabGroup.prototype, "align", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaTabGroup.prototype, "full", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTabGroup.prototype, "animation", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

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

@@ -206,13 +206,13 @@ const base = css `
     animation: var(--_animationTime) ease-in fade-in;
   }
 
-  :host([animation="slide"])
+  :host(:is([animation="slide"], :not([animation])))
     slot:not([name])::slotted(eun-tab-panel.slide-left) {
     --_animationTime: var(--tab-panel-animation, 500ms);
     animation: var(--_animationTime) var(--eun-easing-out, ease-out) slide-left;
   }
 
-  :host([animation="slide"])
+  :host(:is([animation="slide"], :not([animation])))
     slot:not([name])::slotted(eun-tab-panel.slide-right) {
     --_animationTime: var(--tab-panel-animation, 500ms);
     animation: var(--_animationTime) var(--eun-easing-out, ease-out) slide-right;

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

@@ -15,7 +15,7 @@ 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, and
  * a burger button that opens a slide-in panel below a mobile breakpoint.
@@ -70,14 +70,16 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @attr {'top' | 'bottom' | 'left' | 'right'} [panel-direction='top'] - Which edge the mobile panel slides in from
  * @prop {string} panelSize - A custom open size for the mobile panel, height for top or bottom, width for left or right. Any CSS length, defaulting to 100%
  * @attr {string} panel-size - A custom open size for the mobile panel
+ * @prop {string} mobileHide - The bar slots hidden below the mobile breakpoint, as a space-separated list of start, center and end, such as "center end" when their content is repeated in the panel. Applied by toolbar-ssr.css before the upgrade too
+ * @attr {string} mobile-hide - The bar slots hidden below the mobile breakpoint, as a space-separated list of start, center and end
  * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the mobile panel closes it
  * @attr {boolean} [close-on-backdrop=true] - Whether clicking outside the mobile panel closes it
- * @prop {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
@@ -127,6 +129,7 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @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-panel-offset] - Sets the room reserved above the mobile panel content for the burger, added to its padding. Defaults to the bar's height, or 0 with panel-direction="bottom"
  * @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
@@ -175,6 +178,13 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
      * left/right) ; any CSS length, defaults to `100%`.
      */
     panelSize?: string;
+    /**
+     * The bar slots hidden below `mobileBreakpoint`, as a space-separated
+     * list of `start`, `center` and `end`, such as `"center end"` once their
+     * content is repeated in the panel. Reflected, since the hiding is pure
+     * CSS on the attribute, also matched by `toolbar-ssr.css` before upgrade.
+     */
+    mobileHide?: string;
     /**
      * Whether clicking outside the mobile panel closes it.
      * @default true
@@ -182,19 +192,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

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

@@ -10,6 +10,8 @@ import { ChangeEvent } from "../../../events/change.event.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";
+import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the toolbar component.
  */
@@ -68,14 +70,16 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @attr {'top' | 'bottom' | 'left' | 'right'} [panel-direction='top'] - Which edge the mobile panel slides in from
  * @prop {string} panelSize - A custom open size for the mobile panel, height for top or bottom, width for left or right. Any CSS length, defaulting to 100%
  * @attr {string} panel-size - A custom open size for the mobile panel
+ * @prop {string} mobileHide - The bar slots hidden below the mobile breakpoint, as a space-separated list of start, center and end, such as "center end" when their content is repeated in the panel. Applied by toolbar-ssr.css before the upgrade too
+ * @attr {string} mobile-hide - The bar slots hidden below the mobile breakpoint, as a space-separated list of start, center and end
  * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the mobile panel closes it
  * @attr {boolean} [close-on-backdrop=true] - Whether clicking outside the mobile panel closes it
- * @prop {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
@@ -125,6 +129,7 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @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-panel-offset] - Sets the room reserved above the mobile panel content for the burger, added to its padding. Defaults to the bar's height, or 0 with panel-direction="bottom"
  * @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
@@ -138,7 +143,7 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @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);
         /**
@@ -167,21 +172,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
@@ -821,8 +811,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}>
@@ -859,7 +849,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}
@@ -896,7 +886,7 @@ 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({ type: Number, attribute: "mobile-breakpoint" })
@@ -905,23 +895,26 @@ __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" })
 ], EunomiaToolbar.prototype, "panelSize", void 0);
 __decorate([
-    property({ type: Boolean, attribute: "close-on-backdrop" })
+    property({ reflect: true, attribute: "mobile-hide" })
+], EunomiaToolbar.prototype, "mobileHide", void 0);
+__decorate([
+    property({ converter: defaultTrueConverter, 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);
@@ -947,7 +940,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" })