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

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;
   }
 
@@ -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

@@ -131,6 +131,8 @@ 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

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

@@ -130,6 +130,8 @@ 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

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

@@ -25,6 +25,8 @@ import { css } from "lit";
  * [--toolbar-panel-background] - Set a custom background for the mobile panel, default a translucent mix of the bar's own background
  * [--toolbar-panel-color] - Set a custom text color for the mobile panel
  * [--toolbar-panel-padding] - Set a custom padding for the mobile panel
+ * [--toolbar-burger-align] - Set the vertical alignment of the burger button within the bar's height, default center ; set flex-start to pin it to the top instead
+ * [--toolbar-burger-padding] - Set a custom padding around the burger button, default 0 on the block axis and --toolbar-panel-padding on the inline axis
  * [--toolbar-panel-gap] - Set a custom gap inside the mobile panel
  * [--toolbar-panel-backdrop-blur] - Set a custom backdrop-filter blur radius for the mobile panel
  * [--toolbar-logo-filter-dark] - Apply style filter on the logo on dark navbar
@@ -67,7 +69,9 @@ const base = css `
       color-mix(in srgb, var(--_background) 90%, transparent)
     );
     --_panelColor: var(--toolbar-panel-color, var(--_color));
-    --_panelPadding: var(--toolbar-panel-padding, 24px);
+    --_panelPadding: var(--toolbar-panel-padding, 14px);
+    --_burgerAlign: var(--toolbar-burger-align, center);
+    --_burgerPadding: var(--toolbar-burger-padding, 0 var(--_panelPadding));
     --_panelGap: var(--toolbar-panel-gap, 8px);
     --_panelBackdropBlur: var(--toolbar-panel-backdrop-blur, 8px);
     --_skipLinksHeight: var(--toolbar-skip-links-height, 40px);
@@ -121,7 +125,7 @@ const base = css `
     padding: var(--_padding);
     background: var(--_background);
     color: var(--_color);
-    border-block-end: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    border-block-end: var(--eun-border-width-s, 1px) solid var(--_borderColor);
     box-shadow: var(--_shadow);
     transition:
       height var(--_transitionDuration) ease,
@@ -180,7 +184,7 @@ const base = css `
     outline-offset: 2px;
     outline: 2px solid transparent;
     transition: outline 0.2s ease-out;
-    border-radius: var(--eun-borderRadius-s);
+    border-radius: var(--eun-border-radius-s);
   }
   #logo-link:focus-visible {
     outline-color: var(--eun-color-primary-500);
@@ -227,7 +231,7 @@ const base = css `
     display: inline-flex;
     align-items: center;
     color: inherit;
-    font-size: var(--eun-fontSize-s, 13px);
+    font-size: var(--eun-font-size-s, 13px);
     text-decoration: none;
     white-space: nowrap;
   }
@@ -238,7 +242,7 @@ const base = css `
     --link-color-focus: var(--_skipLinksColor);
     --link-padding: var(--eun-space-xs, 4px);
     --link-background-focus: var(--eun-color-secondary-transparent, #edbd6f33);
-    --link-border-radius: var(--eun-borderRadius-l, 999px);
+    --link-border-radius: var(--eun-border-radius-l, 999px);
   }
 
   #skip-links ::slotted(a),
@@ -246,7 +250,7 @@ const base = css `
     padding: var(--eun-space-xs, 4px);
     outline: 2px solid transparent;
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-l, 999px);
+    border-radius: var(--eun-border-radius-l, 999px);
     transition:
       outline 0.2s ease-out,
       background 0.2s ease-out;
@@ -315,13 +319,17 @@ const base = css `
   }
 
   #panel-header {
+    box-sizing: border-box;
     position: absolute;
     inset-block-start: 0;
     inset-inline-end: 0;
     z-index: 1;
     display: flex;
-    padding: var(--_panelPadding);
+    align-items: var(--_burgerAlign);
+    height: calc(var(--_currentHeight) - var(--eun-border-width-s, 1px));
+    padding: var(--_burgerPadding);
     pointer-events: auto;
+    transition: height var(--_transitionDuration) ease;
   }
 
   #panel-body {
@@ -386,6 +394,7 @@ const base = css `
   @media (prefers-reduced-motion: reduce) {
     #bar,
     #panel,
+    #panel-header,
     #panel-body,
     #skip-links {
       transition-duration: 0.01ms;

package/dist/features/scheduler/calendar/calendar.d.ts

@@ -1,7 +1,7 @@
 import { LitElement, PropertyValues, TemplateResult } from "lit";
 import { WeekStartsOn } from "../../../utils/date.utils.js";
 import { EunomiaSchedulerEvent, EunomiaSchedulerView } from "../shared/scheduler.types.js";
-import { type EunomiaSchedulerEventCardVariant } from "../scheduler-event/scheduler-event.js";
+import { type EunomiaSchedulerEventAppearance } from "../scheduler-event/scheduler-event.js";
 /**
  * Tag name of the calendar component.
  */
@@ -51,8 +51,8 @@ export declare const EunomiaCalendarTagName = "eun-calendar";
  * @prop {boolean} [readonly=false] - Disables the slot click event, removing the create-here affordance, and event-chip dragging. View only
  * @prop {boolean} [noAnimation=false] - Disables the mobile swipe slide animation
  * @prop {string} [moreEventsLabel='+{count} more'] - The template for the month view's overflow affordance, with the placeholder replaced by the hidden event count
- * @prop {'default' | 'transparent' | 'ghost'} [eventVariant='default'] - The visual variant applied to day, week, and work week event chips. Month view is unaffected, always picking ghost, or default for multi-day bars, itself
- * @attr {'default' | 'transparent' | 'ghost'} [event-variant='default'] - The visual variant applied to day, week, and work week event chips
+ * @prop {'default' | 'transparent' | 'ghost'} [eventAppearance='default'] - The appearance applied to day, week, and work week event chips. Month view is unaffected, always picking ghost, or default for multi-day bars, itself
+ * @attr {'default' | 'transparent' | 'ghost'} [event-appearance='default'] - The visual variant applied to day, week, and work week event chips
  * @fires {EventClickEvent} euneventclick - Fired when an event chip is clicked
  * @fires {SlotClickEvent} eunslotclick - Fired when an empty hour-grid slot is clicked
  * @fires {EventUpdateEvent} euneventupdate - Fired when a day, week, or work week event chip is dragged to a new time or day and dropped
@@ -124,13 +124,13 @@ export declare class EunomiaCalendar extends LitElement {
     /** @default +{count} more */
     moreEventsLabel: string;
     /**
-     * The visual variant applied to day/week/work-week event chips.
-     * `month` view is unaffected — it always picks its own variant per
+     * The appearance applied to day/week/work-week event chips.
+     * `month` view is unaffected — it always picks its own appearance per
      * event (`ghost` unless the event spans multiple days ; see
      * `scheduler-month-view.ts`'s own doc on `MonthViewProps`).
      * @default default
      */
-    eventVariant: EunomiaSchedulerEventCardVariant;
+    eventAppearance: EunomiaSchedulerEventAppearance;
     /**
      * The calendar cell currently in the roving-tabindex focus position, in
      * month/year view — kept in sync with {@link displayedDate} (see