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

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

@@ -7,7 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, property, query, queryAssignedElements, } from "lit/decorators.js";
 import { html, LitElement, nothing } from "lit";
 import { ChangeEvent } from "../../../events/change.event.js";
-import { handleLinkNavigation } from "../../../utils/navigation.utils.js";
 import { DialogSurfaceMixin } from "../../../mixins/dialog-surface.mixin.js";
 import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
 import { toolbarStyles } from "./toolbar.styles.js";
@@ -16,9 +15,10 @@ import { toolbarStyles } from "./toolbar.styles.js";
  */
 export const EunomiaToolbarTagName = "eun-toolbar";
 /**
- * A sticky top page toolbar with start, center, and end layout slots, an
- * optional home-linking logo, and a burger button that opens a slide-in
- * panel below a mobile breakpoint.
+ * A sticky top page toolbar with start, center, and end layout slots, and
+ * a burger button that opens a slide-in panel below a mobile breakpoint.
+ * The logo is a link of your own slotted into start, so a framework's
+ * link component keeps its client-side navigation.
  *
  * Three independent, all opt-in behaviors layer on top of the base bar.
  * Collapse on scroll shrinks the bar once the page, or a custom scroll
@@ -55,18 +55,12 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  *
  * @slot [menu-icon] - Replaces the burger's default open icon (an `eun-icon name="menu"`) with any content, shown while the panel is closed. Useful wherever `eun-icon`'s own dynamic SVG resolution doesn't fit, e.g. some bundler setups
  * @slot [close-icon] - Replaces the burger's default close icon (an `eun-icon name="close"`) with any content, shown while the panel is open. See `menu-icon` above
- * @slot start - Left-side content, rendered after a logo image linking to logoHref whenever logoSrc is set
+ * @slot start - Left-side content, such as the logo, as a link of your own wrapping an image
  * @slot center - Center content, truly centered independently of the start and end widths
  * @slot end - Right-side content
  * @slot [default] - The mobile slide-in panel's content, opened by the burger button below the mobile breakpoint. Entirely up to the consumer ; never rendered anywhere else
  * @slot skip-links - Custom skip to X links, such as skip to navigation, main content, or footer, replacing the single default skip link built from skipLinkTarget and skipLinkLabel. Accepts plain `a` elements or `eun-link`, styled the same either way, separated by a thin divider drawn between them rather than on either link itself, so it never ends up inside either one's own focus ring. Hidden as a group, revealed as a small panel opening from the top-start corner as soon as focus lands on any of them, staying open while Tab cycles between them. Clicking any of them, default or slotted, also focuses its `href` target directly, on top of the native anchor jump, since that native jump alone doesn't reliably move focus across browsers
  * @prop {'sticky' | 'fixed' | 'static'} [position='sticky'] - How the toolbar is positioned relative to the page
- * @prop {string} logoSrc - The image URL for the start slot's fallback logo
- * @attr {string} logo-src - The image URL for the start slot's fallback logo
- * @prop {string} [logoAlt='Home'] - The alt text for the fallback logo image
- * @attr {string} [logo-alt='Home'] - The alt text for the fallback logo image
- * @prop {string} [logoHref='#'] - The destination the fallback logo links to
- * @attr {string} [logo-href='#'] - The destination the fallback logo links to
  * @prop {number} [mobileBreakpoint=768] - The viewport width in pixels below which the burger button and its sliding panel become available
  * @attr {number} [mobile-breakpoint=768] - The viewport width in pixels below which the burger button and its sliding panel become available
  * @prop {boolean} [open=false] - Whether the mobile menu panel is open
@@ -106,10 +100,11 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @prop {string} [skipLinkLabel='Skip to main content'] - The text of the default skip link built from skipLinkTarget
  * @attr {string} [skip-link-label='Skip to main content'] - The text of the default skip link built from skip-link-target
  * @fires {ChangeEvent} eunchange - Fired whenever open, collapsed, or, under adaptiveTheme, theme changes
- * @fires {NavigationEvent} eunnavigate - Fired before following the fallback logo's link, so a client-side router can intercept the navigation. Cancelable
  * @cssprop [--toolbar-height] - Sets the expanded height of the bar
  * @cssprop [--toolbar-height-collapsed] - Sets the collapsed height of the bar, for collapseOnScroll only
  * @cssprop [--toolbar-padding] - Sets the padding of the bar
+ * @cssprop [--toolbar-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toolbar-padding is set
+ * @cssprop [--toolbar-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toolbar-padding is set
  * @cssprop [--toolbar-gap] - Sets the gap between the start, center, and end columns themselves, and the fallback for the three below wherever they're unset
  * @cssprop [--toolbar-gap-start] - Sets the gap between items inside the start slot, falling back to --toolbar-gap
  * @cssprop [--toolbar-gap-center] - Sets the gap between items inside the center slot, falling back to --toolbar-gap
@@ -118,24 +113,26 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @cssprop [--toolbar-color] - Sets the text color, overriding both light and dark variants below
  * @cssprop [--toolbar-background-light] - Sets the background color for the light theme
  * @cssprop [--toolbar-color-light] - Sets the text color for the light theme
- * @cssprop [--toolbar-background-dark] - Sets the background color for the dark theme
- * @cssprop [--toolbar-color-dark] - Sets the text color for the dark theme
+ * @cssprop [--toolbar-background-dark] - Sets the background color for the dark theme, --eun-surface-inverse by default
+ * @cssprop [--toolbar-color-dark] - Sets the text color for the dark theme, --eun-text-on-inverse by default
  * @cssprop [--toolbar-border-color] - Sets the bottom border color
  * @cssprop [--toolbar-shadow] - Sets the shadow of the bar
  * @cssprop [--toolbar-z-index] - Sets the stacking order of the bar
  * @cssprop [--toolbar-transition-duration] - Sets the duration of the collapse, transparency, theme, and panel transitions
- * @cssprop [--toolbar-logo-height] - Sets the desired height of the default logo image ; never rendered taller than the bar's own current height regardless
- * @cssprop [--toolbar-logo-filter-dark] - Sets a filter applied to the logo image in dark toolbar mode
  * @cssprop [--toolbar-panel-size] - Sets a custom open size for the mobile panel, also settable through the panel-size attribute
  * @cssprop [--toolbar-panel-background] - Sets the background of the mobile panel, defaulting to a translucent mix of the bar's own background
  * @cssprop [--toolbar-panel-color] - Sets the text color of the mobile panel
  * @cssprop [--toolbar-panel-padding] - Sets the padding of the mobile panel
+ * @cssprop [--toolbar-panel-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toolbar-panel-padding is set
+ * @cssprop [--toolbar-panel-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toolbar-panel-padding is set
  * @cssprop [--toolbar-burger-align] - Sets the vertical alignment of the burger button within the bar's height, defaulting to center ; set flex-start to pin it to the top instead
  * @cssprop [--toolbar-burger-padding] - Sets the padding around the burger button, defaulting to 0 on the block axis and --toolbar-panel-padding on the inline axis
+ * @cssprop [--toolbar-burger-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toolbar-burger-padding is set
+ * @cssprop [--toolbar-burger-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toolbar-burger-padding is set
  * @cssprop [--toolbar-panel-gap] - Sets the gap inside the mobile panel
  * @cssprop [--toolbar-panel-backdrop-blur] - Sets a backdrop blur radius for the mobile panel
  * @cssprop [--toolbar-skip-links-height] - Sets the height of the skip-links bar
- * @cssprop [--toolbar-skip-links-background] - Sets the background of the skip-links bar, defaulting to a darker mix of the bar's own background
+ * @cssprop [--toolbar-skip-links-background] - Sets the background of the skip-links bar, defaulting to a darker mix of the bar's background, or of primary-600 in the light theme without --toolbar-background
  * @cssprop [--toolbar-skip-links-color] - Sets the text color of the skip-links bar
  * @cssprop [--toolbar-skip-links-separator-color] - Sets the color of the divider drawn between skip links
  * @cssprop [--toolbar-skip-links-gap] - Sets the gap between skip links, with the divider centered in it
@@ -149,16 +146,6 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
          * @default sticky
          */
         this.position = "sticky";
-        /**
-         * Alt text for the fallback logo image.
-         * @default Home
-         */
-        this.logoAlt = "Home";
-        /**
-         * Destination the fallback logo links to.
-         * @default #
-         */
-        this.logoHref = "#";
         /**
          * Viewport width (px) below which the burger button and its sliding
          * panel become available.
@@ -334,16 +321,6 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
             }
             this.resolveAdaptiveTheme();
         };
-        /**
-         * Gives an SPA router a chance to intercept the fallback logo's click, via
-         * the same cancelable `NavigationEvent` `eun-link` uses.
-         *
-         * @param event the native click event.
-         * @private
-         */
-        this.handleLogoClick = (event) => {
-            handleLinkNavigation(this, event, this.logoHref, "_self");
-        };
         /**
          * Reacts to the panel's native `toggle` event — the single source of
          * truth for its open/close state, whether triggered by `show()`/`hide()`
@@ -369,7 +346,7 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
                     },
                 });
                 this.dispatchEvent(new ChangeEvent());
-                this.updateComplete.then(() => this.focusInitialElement());
+                void this.updateComplete.then(() => this.focusInitialElement());
                 return;
             }
             this.closeDialogSurface(this.burgerEl);
@@ -489,7 +466,10 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
             if (this.adaptiveTheme) {
                 this.setupAdaptiveThemeObserver();
             }
-            else {
+            else if (changed.get("adaptiveTheme") === true) {
+                // Only on a real switch off : the first update also reports
+                // `adaptiveTheme` (as `undefined` → `false`), and resetting there
+                // would overwrite a `theme` set by the page.
                 this.teardownAdaptiveThemeObserver();
                 this.theme = this.defaultTheme;
             }
@@ -544,7 +524,7 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
      */
     updateMediaQuery() {
         this.mediaQueryList?.removeEventListener("change", this.handleMediaChange);
-        this.mediaQueryList = window.matchMedia(`(max-width: ${Math.max(this.mobileBreakpoint - 1, 0)}px)`);
+        this.mediaQueryList = window.matchMedia(`(width < ${this.mobileBreakpoint}px)`);
         this.mediaQueryList.addEventListener("change", this.handleMediaChange);
         this.mobile = this.mediaQueryList.matches;
     }
@@ -769,8 +749,7 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
      * Renders the skip-links area, the very first thing in the shadow DOM so
      * it's reachable with the very first `Tab` press. `skip-links` is a real
      * slot with the default single link (`skipLinkTarget`/`skipLinkLabel`) as
-     * its native fallback content — same fallback-content pattern as `start`'s
-     * logo — so a consumer needing more than one bypass target (navigation,
+     * its native fallback content, so a consumer needing more than one bypass target (navigation,
      * main content, footer, ...) just slots their own `<a href="#id">`
      * elements in instead. Visually it's a thin breadcrumb-style bar, hidden
      * (translated fully out of view) until one of the links is focused, at
@@ -799,31 +778,13 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
         /* eslint-enable lit-a11y/click-events-have-key-events */
     }
     /**
-     * Renders the `start` slot. The logo is a plain sibling of `<slot
-     * name="start">`, not the slot's native fallback content — fallback
-     * content only renders when the slot has *no* assigned nodes at all, which
-     * would otherwise make the logo vanish the moment any real content is
-     * slotted into `start` instead of coexisting with it. Rendering it
-     * unconditionally off `logoSrc` keeps it showing (before whatever's
-     * slotted) regardless of what `start` carries, and it simply doesn't
-     * render at all when `logoSrc` is unset, leaving the slot free to carry a
-     * consumer-supplied logo of its own.
+     * Renders the `start` slot, which carries the logo as a link of the
+     * consumer's own.
      * @private
      */
     renderStart() {
         return html `
       <div id="start">
-        ${this.logoSrc
-            ? html `
-              <a
-                id="logo-link"
-                href=${this.logoHref}
-                @click=${this.handleLogoClick}
-              >
-                <img id="logo-image" src=${this.logoSrc} alt=${this.logoAlt} />
-              </a>
-            `
-            : nothing}
         <slot name="start"></slot>
       </div>
     `;
@@ -937,15 +898,6 @@ EunomiaToolbar.styles = toolbarStyles;
 __decorate([
     property({ reflect: true })
 ], EunomiaToolbar.prototype, "position", void 0);
-__decorate([
-    property({ attribute: "logo-src" })
-], EunomiaToolbar.prototype, "logoSrc", void 0);
-__decorate([
-    property({ attribute: "logo-alt" })
-], EunomiaToolbar.prototype, "logoAlt", void 0);
-__decorate([
-    property({ attribute: "logo-href" })
-], EunomiaToolbar.prototype, "logoHref", void 0);
 __decorate([
     property({ type: Number, attribute: "mobile-breakpoint" })
 ], EunomiaToolbar.prototype, "mobileBreakpoint", void 0);

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

@@ -6,6 +6,8 @@ import { css } from "lit";
  * [--toolbar-height] - Set a custom expanded bar height
  * [--toolbar-height-collapsed] - Set a custom collapsed bar height (collapse-on-scroll mode only)
  * [--toolbar-padding] - Set a custom padding for the bar
+ * [--toolbar-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toolbar-padding is set
+ * [--toolbar-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --toolbar-padding is set
  * [--toolbar-gap] - Set a custom gap between the start/center/end columns themselves, and the fallback for the three below
  * [--toolbar-gap-start] - Set a custom gap between items inside the start slot, falling back to --toolbar-gap
  * [--toolbar-gap-center] - Set a custom gap between items inside the center slot, falling back to --toolbar-gap
@@ -20,16 +22,18 @@ import { css } from "lit";
  * [--toolbar-shadow] - Set a custom shadow
  * [--toolbar-z-index] - Set a custom stacking order
  * [--toolbar-transition-duration] - Set a custom duration for the collapse/transparent/theme/panel transitions
- * [--toolbar-logo-height] - Set a custom height for the default logo image ; never rendered taller than the bar itself regardless
  * [--toolbar-panel-size] - Set a custom open size for the mobile panel (height for top/bottom, width for left/right)
  * [--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-panel-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toolbar-panel-padding is set
+ * [--toolbar-panel-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --toolbar-panel-padding is set
  * [--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-burger-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toolbar-burger-padding is set
+ * [--toolbar-burger-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --toolbar-burger-padding is set
  * [--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
  * [--toolbar-skip-links-height] - Set a custom height for the skip-links bar
  * [--toolbar-skip-links-background] - Set a custom background for the skip-links bar, default a darker mix of the bar's own background
  * [--toolbar-skip-links-color] - Set a custom text color for the skip-links bar
@@ -41,7 +45,10 @@ const base = css `
     --_height: var(--toolbar-height, 72px);
     --_heightCollapsed: var(--toolbar-height-collapsed, 56px);
     --_currentHeight: var(--_height);
-    --_padding: var(--toolbar-padding, 0 24px);
+    --_padding: var(
+      --toolbar-padding,
+      var(--toolbar-padding-block, 0) var(--toolbar-padding-inline, 24px)
+    );
     --_gap: var(--toolbar-gap, 16px);
     --_gapStart: var(--toolbar-gap-start, var(--_gap));
     --_gapCenter: var(--toolbar-gap-center, var(--_gap));
@@ -51,8 +58,14 @@ const base = css `
       var(--eun-surface-color, #ffffff)
     );
     --_colorLight: var(--toolbar-color-light, var(--eun-text-color, #071621));
-    --_backgroundDark: var(--toolbar-background-dark, #0b1620);
-    --_colorDark: var(--toolbar-color-dark, #f5f7fa);
+    --_backgroundDark: var(
+      --toolbar-background-dark,
+      var(--eun-surface-inverse, #0b1620)
+    );
+    --_colorDark: var(
+      --toolbar-color-dark,
+      var(--eun-text-on-inverse, #f5f7fa)
+    );
     --_background: var(--toolbar-background, var(--_backgroundLight));
     --_color: var(--toolbar-color, var(--_colorLight));
     --_borderColor: var(
@@ -61,17 +74,30 @@ const base = css `
     );
     --_shadow: var(--toolbar-shadow, none);
     --_zIndex: var(--toolbar-z-index, 100);
-    --_transitionDuration: var(--toolbar-transition-duration, 0.25s);
-    --_logoHeight: var(--toolbar-logo-height, 32px);
+    --_transitionDuration: var(
+      --toolbar-transition-duration,
+      var(--eun-duration-l, 250ms)
+    );
     --_panelSize: var(--toolbar-panel-size, 100%);
     --_panelBackground: var(
       --toolbar-panel-background,
       color-mix(in srgb, var(--_background) 90%, transparent)
     );
     --_panelColor: var(--toolbar-panel-color, var(--_color));
-    --_panelPadding: var(--toolbar-panel-padding, 14px);
+    --_panelPaddingBlock: var(
+      --toolbar-panel-padding,
+      var(--toolbar-panel-padding-block, 14px)
+    );
+    --_panelPaddingInline: var(
+      --toolbar-panel-padding,
+      var(--toolbar-panel-padding-inline, 14px)
+    );
     --_burgerAlign: var(--toolbar-burger-align, center);
-    --_burgerPadding: var(--toolbar-burger-padding, 0 var(--_panelPadding));
+    --_burgerPadding: var(
+      --toolbar-burger-padding,
+      var(--toolbar-burger-padding-block, 0)
+        var(--toolbar-burger-padding-inline, var(--_panelPaddingInline))
+    );
     --_panelGap: var(--toolbar-panel-gap, 8px);
     --_panelBackdropBlur: var(--toolbar-panel-backdrop-blur, 8px);
     --_skipLinksHeight: var(--toolbar-skip-links-height, 40px);
@@ -109,9 +135,8 @@ const base = css `
   :host([theme="dark"]) {
     --_background: var(--toolbar-background, var(--_backgroundDark));
     --_color: var(--toolbar-color, var(--_colorDark));
-  }
-  :host([theme="dark"]) #logo-image {
-    filter: var(--toolbar-logo-filter-dark, brightness(0) invert(1));
+    --_skipLinksBase: var(--toolbar-background, var(--_backgroundDark));
+    --_skipLinksColor: var(--toolbar-skip-links-color, var(--_color));
   }
 
   #bar {
@@ -128,11 +153,12 @@ const base = css `
     border-block-end: var(--eun-border-width-s, 1px) solid var(--_borderColor);
     box-shadow: var(--_shadow);
     transition:
-      height var(--_transitionDuration) ease,
-      background-color var(--_transitionDuration) ease,
-      color var(--_transitionDuration) ease,
-      border-color var(--_transitionDuration) ease,
-      box-shadow var(--_transitionDuration) ease;
+      height var(--_transitionDuration) var(--eun-easing-default, ease),
+      background-color var(--_transitionDuration)
+        var(--eun-easing-default, ease),
+      color var(--_transitionDuration) var(--eun-easing-default, ease),
+      border-color var(--_transitionDuration) var(--eun-easing-default, ease),
+      box-shadow var(--_transitionDuration) var(--eun-easing-default, ease);
   }
   :host([transparent-at-top][at-top]) #bar {
     background: transparent;
@@ -175,25 +201,21 @@ const base = css `
   #center ::slotted(eun-link),
   #end ::slotted(eun-link) {
     --link-padding: var(--eun-space-xs, 4px);
-    --link-background-focus: var(--eun-color-primary-transparent, #3d6fff33);
+    --link-background-focus: var(--eun-color-primary-alpha-20, #3d6fff33);
   }
 
-  #logo-link {
+  #start ::slotted(a) {
     display: inline-flex;
     align-items: center;
     outline-offset: 2px;
     outline: 2px solid transparent;
-    transition: outline 0.2s ease-out;
+    transition: outline var(--eun-duration-m, 200ms)
+      var(--eun-easing-out, ease-out);
     border-radius: var(--eun-border-radius-s);
   }
-  #logo-link:focus-visible {
+  #start ::slotted(a:focus-visible) {
     outline-color: var(--eun-color-primary-500);
   }
-  #logo-image {
-    display: block;
-    height: min(var(--_logoHeight), var(--_currentHeight));
-    width: auto;
-  }
 
   #burger {
     flex-shrink: 0;
@@ -217,8 +239,8 @@ const base = css `
     transform: translateY(-100%);
     opacity: 0;
     transition:
-      transform var(--_transitionDuration) ease,
-      opacity var(--_transitionDuration) ease;
+      transform var(--_transitionDuration) var(--eun-easing-default, ease),
+      opacity var(--_transitionDuration) var(--eun-easing-default, ease);
   }
   #skip-links:focus-within {
     transform: translateY(0);
@@ -241,7 +263,7 @@ const base = css `
     --link-color-hover: var(--_skipLinksColor);
     --link-color-focus: var(--_skipLinksColor);
     --link-padding: var(--eun-space-xs, 4px);
-    --link-background-focus: var(--eun-color-secondary-transparent, #edbd6f33);
+    --link-background-focus: var(--eun-color-secondary-alpha-20, #edbd6f33);
     --link-border-radius: var(--eun-border-radius-l, 999px);
   }
 
@@ -252,8 +274,8 @@ const base = css `
     outline-offset: 2px;
     border-radius: var(--eun-border-radius-l, 999px);
     transition:
-      outline 0.2s ease-out,
-      background 0.2s ease-out;
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      background var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
 
   #skip-links ::slotted(a:not(:first-child)),
@@ -278,7 +300,7 @@ const base = css `
   #skip-links ::slotted(a:focus-visible),
   .skip-link:focus-visible {
     outline-color: var(--_skipLinksColor);
-    background: var(--eun-color-secondary-transparent, #edbd6f33);
+    background: var(--eun-color-secondary-alpha-20, #edbd6f33);
   }
 
   #panel {
@@ -329,7 +351,8 @@ const base = css `
     height: calc(var(--_currentHeight) - var(--eun-border-width-s, 1px));
     padding: var(--_burgerPadding);
     pointer-events: auto;
-    transition: height var(--_transitionDuration) ease;
+    transition: height var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
 
   #panel-body {
@@ -337,7 +360,7 @@ const base = css `
     inset: 0;
     display: flex;
     flex-direction: column;
-    padding: var(--_panelPadding);
+    padding: var(--_panelPaddingBlock) var(--_panelPaddingInline);
     background: var(--_panelBackground);
     backdrop-filter: blur(var(--_panelBackdropBlur));
     -webkit-backdrop-filter: blur(var(--_panelBackdropBlur));
@@ -346,8 +369,8 @@ const base = css `
     opacity: 0;
     pointer-events: none;
     transition:
-      opacity var(--_transitionDuration) ease,
-      transform var(--_transitionDuration) ease;
+      opacity var(--_transitionDuration) var(--eun-easing-default, ease),
+      transform var(--_transitionDuration) var(--eun-easing-default, ease);
   }
   #panel[data-direction="top"] #panel-body {
     transform: translateY(-100%);

package/dist/events/table-row-click.event.d.ts

@@ -1,8 +1,9 @@
 /**
- * Dispatched by `eun-table-item` on a row click outside its checkbox/action
- * cell and outside selection mode (while any row is selected, a click
- * toggles that row's own selection instead — see `eun-table`'s own class
- * doc).
+ * Dispatched by `eun-table` on a body row click outside its checkbox, its
+ * action cell, and any interactive content, and outside selection mode
+ * (while any row is selected, a click toggles that row's own selection
+ * instead). Cancelable: `preventDefault()` keeps the table from
+ * following the row's `data-table-row-link` link.
  */
 export declare class TableRowClickEvent extends Event {
     /**

package/dist/events/table-row-click.event.js

@@ -1,12 +1,17 @@
 /**
- * Dispatched by `eun-table-item` on a row click outside its checkbox/action
- * cell and outside selection mode (while any row is selected, a click
- * toggles that row's own selection instead — see `eun-table`'s own class
- * doc).
+ * Dispatched by `eun-table` on a body row click outside its checkbox, its
+ * action cell, and any interactive content, and outside selection mode
+ * (while any row is selected, a click toggles that row's own selection
+ * instead). Cancelable: `preventDefault()` keeps the table from
+ * following the row's `data-table-row-link` link.
  */
 export class TableRowClickEvent extends Event {
     constructor(rowKey) {
-        super(TableRowClickEvent.eventName, { bubbles: true, composed: false });
+        super(TableRowClickEvent.eventName, {
+            bubbles: true,
+            cancelable: true,
+            composed: false,
+        });
         this.rowKey = rowKey;
     }
 }

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
@@ -488,9 +488,9 @@ export declare class EunomiaCalendar extends LitElement {
      * but the user's intent there was "move it," not "open it."
      * @private
      */
-    private handleEventClick;
+    private readonly handleEventClick;
     /** @private */
-    private handleSlotClick;
+    private readonly handleSlotClick;
     /**
      * Starts tracking a potential event drag — see the class doc's own
      * paragraph on this feature. Mouse/pen only (touch is left to scroll/
@@ -570,17 +570,17 @@ export declare class EunomiaCalendar extends LitElement {
      * click, year's day click.
      * @private
      */
-    private goToDayView;
+    private readonly goToDayView;
     /**
      * Starts tracking a potential swipe gesture — finger-only, same as
      * `eun-date-picker`.
      * @private
      */
-    private handleSwipeStart;
+    private readonly handleSwipeStart;
     /** @private */
-    private handleSwipeEnd;
+    private readonly handleSwipeEnd;
     /** @private */
-    private handleSwipeCancel;
+    private readonly handleSwipeCancel;
     /**
      * Replays the CSS slide-in animation after a touch swipe steps the
      * period — removing the state before re-adding it (past a forced reflow)

package/dist/features/scheduler/calendar/calendar.js

@@ -22,6 +22,7 @@ import { EventClickEvent } from "../../../events/event-click.event.js";
 import { SlotClickEvent } from "../../../events/slot-click.event.js";
 import { PeriodChangeEvent } from "../../../events/period-change.event.js";
 import { EventUpdateEvent } from "../../../events/event-update.event.js";
+import { mediaBelow } from "../../../breakpoints.js";
 /**
  * Tag name of the calendar component.
  */
@@ -39,7 +40,7 @@ const SWIPE_THRESHOLD = 40;
  * `eun-scheduler` uses for its own desktop/mobile split.
  * @internal
  */
-const MOBILE_BREAKPOINT = "(max-width: 767px)";
+const MOBILE_BREAKPOINT = mediaBelow("tablet");
 /**
  * How far, in pixels, a pointer must travel before a press on an event chip
  * counts as a drag-to-move rather than a click, the same idea as
@@ -101,8 +102,8 @@ const HOUR_GRID_SLOT_HEIGHT = 24;
  * @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
@@ -164,13 +165,13 @@ let EunomiaCalendar = class EunomiaCalendar extends LitElement {
         /** @default +{count} more */
         this.moreEventsLabel = "+{count} more";
         /**
-         * 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
          */
-        this.eventVariant = "default";
+        this.eventAppearance = "default";
         /**
          * The calendar cell currently in the roving-tabindex focus position, in
          * month/year view — kept in sync with {@link displayedDate} (see
@@ -609,7 +610,7 @@ let EunomiaCalendar = class EunomiaCalendar extends LitElement {
     moveMonthFocus(delta) {
         this.focusedDate = addDays(this.focusedDate, delta);
         this.syncDisplayedMonth();
-        this.updateComplete.then(() => this.focusMonthCell());
+        void this.updateComplete.then(() => this.focusMonthCell());
     }
     /**
      * Jumps {@link focusedDate} directly to `date` (`Home`/`End`/`PageUp`/
@@ -623,7 +624,7 @@ let EunomiaCalendar = class EunomiaCalendar extends LitElement {
     jumpMonthFocus(date) {
         this.focusedDate = date;
         this.syncDisplayedMonth();
-        this.updateComplete.then(() => this.focusMonthCell());
+        void this.updateComplete.then(() => this.focusMonthCell());
     }
     /**
      * Re-dispatches `eunperiodchange` whenever the visible period changes.
@@ -856,7 +857,7 @@ let EunomiaCalendar = class EunomiaCalendar extends LitElement {
         const ghost = document.createElement(EunomiaSchedulerEventCardTagName);
         ghost.label = event.title;
         ghost.color = event.color;
-        ghost.variant = this.eventVariant;
+        ghost.appearance = this.eventAppearance;
         ghost.locale = this.locale;
         ghost.start = event.start;
         ghost.end = event.end;
@@ -957,9 +958,9 @@ let EunomiaCalendar = class EunomiaCalendar extends LitElement {
      */
     playSwipeAnimation(direction) {
         this.swipeDirection = null;
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             const view = this.shadowRoot?.querySelector("#view");
-            void view?.offsetWidth;
+            view?.getBoundingClientRect();
             this.swipeDirection = direction;
         });
     }
@@ -989,7 +990,7 @@ let EunomiaCalendar = class EunomiaCalendar extends LitElement {
             slotDuration: this.slotDuration,
             locale: this.locale,
             slotHeight: HOUR_GRID_SLOT_HEIGHT,
-            eventVariant: this.eventVariant,
+            eventAppearance: this.eventAppearance,
             onSlotClick: this.handleSlotClick,
             onEventClick: this.handleEventClick,
             draggingEventId: this.draggingEventId,
@@ -1132,8 +1133,8 @@ __decorate([
     property({ attribute: "more-events-label" })
 ], EunomiaCalendar.prototype, "moreEventsLabel", void 0);
 __decorate([
-    property({ attribute: "event-variant" })
-], EunomiaCalendar.prototype, "eventVariant", void 0);
+    property({ attribute: "event-appearance" })
+], EunomiaCalendar.prototype, "eventAppearance", void 0);
 __decorate([
     state()
 ], EunomiaCalendar.prototype, "focusedDate", void 0);