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

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

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

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

@@ -1,5 +1,5 @@
 import { css } from "lit";
-import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
+import { cssBelow } from "../../../utils/media.styles.js";
 /**
  * Base style for `eun-calendar`'s own shell : the swipe container and its
  * slide-in replay animation, plus the mobile week/work-week day-selector
@@ -27,13 +27,15 @@ const base = css `
   }
 
   #view.swiping-next #view-content {
-    animation: scheduler-slide-from-right var(--scheduler-swipe-duration, 200ms)
-      ease-out;
+    animation: scheduler-slide-from-right
+      var(--scheduler-swipe-duration, var(--eun-duration-m, 200ms))
+      var(--eun-easing-out, ease-out);
   }
 
   #view.swiping-previous #view-content {
-    animation: scheduler-slide-from-left var(--scheduler-swipe-duration, 200ms)
-      ease-out;
+    animation: scheduler-slide-from-left
+      var(--scheduler-swipe-duration, var(--eun-duration-m, 200ms))
+      var(--eun-easing-out, ease-out);
   }
 
   @keyframes scheduler-slide-from-right {
@@ -123,7 +125,7 @@ const base = css `
     outline-offset: 1px;
   }
 
-  @media (max-width: ${EUNOMIA_BREAKPOINTS.tablet}px) {
+  @media ${cssBelow("tablet")} {
     :host {
       display: flex;
       flex-direction: column;

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

@@ -365,7 +365,7 @@ export declare class EunomiaScheduler extends EunomiaScheduler_base {
      * The event popover's open/close animation duration, in ms : `0` if
      * `noAnimation` is set or the browser reports `prefers-reduced-motion:
      * reduce`, otherwise `--scheduler-popover-transition-duration` (default
-     * `160ms`).
+     * `--eun-duration-s`).
      *
      * @param el the popover to read `--scheduler-popover-transition-duration` off.
      * @private

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

@@ -18,6 +18,8 @@ import { EventCreateEvent } from "../../../events/event-create.event.js";
 import { EventUpdateEvent } from "../../../events/event-update.event.js";
 import { EventDeleteEvent } from "../../../events/event-delete.event.js";
 import { PeriodChangeEvent } from "../../../events/period-change.event.js";
+import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
+import { mediaBelow } from "../../../breakpoints.js";
 /**
  * Tag name of the scheduler component.
  */
@@ -482,7 +484,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
      */
     updateMobileMediaQuery() {
         this.mobileMediaQuery?.removeEventListener("change", this.handleMobileMediaChange);
-        this.mobileMediaQuery = window.matchMedia("(max-width: 767px)");
+        this.mobileMediaQuery = window.matchMedia(mediaBelow("tablet"));
         this.mobileMediaQuery.addEventListener("change", this.handleMobileMediaChange);
         this.isMobile = this.mobileMediaQuery.matches;
     }
@@ -539,14 +541,11 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
     openEventPopover(event, anchor) {
         this.selectedEvent = event;
         this.popoverTriggerEl = anchor;
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             const popover = this.eventPopoverEl;
             if (!popover) {
                 return;
             }
-            // Also true when reopened mid-close — see playEventPopoverCloseAnimation's
-            // own doc for why that needs to force a fresh open animation even
-            // though the popover never actually left :popover-open.
             const hadRunningAnimation = this.eventPopoverAnimation !== undefined;
             this.eventPopoverAnimation?.cancel();
             this.eventPopoverAnimation = undefined;
@@ -563,7 +562,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
      * The event popover's open/close animation duration, in ms : `0` if
      * `noAnimation` is set or the browser reports `prefers-reduced-motion:
      * reduce`, otherwise `--scheduler-popover-transition-duration` (default
-     * `160ms`).
+     * `--eun-duration-s`).
      *
      * @param el the popover to read `--scheduler-popover-transition-duration` off.
      * @private
@@ -573,18 +572,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
             window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
             return 0;
         }
-        const raw = getComputedStyle(el)
-            .getPropertyValue("--scheduler-popover-transition-duration")
-            .trim();
-        if (raw) {
-            const parsed = raw.endsWith("ms")
-                ? Number.parseFloat(raw)
-                : Number.parseFloat(raw) * 1000;
-            if (Number.isFinite(parsed) && parsed >= 0) {
-                return parsed;
-            }
-        }
-        return 160;
+        return resolveDurationMs(el, "--scheduler-popover-transition-duration", "s", 160);
     }
     /**
      * Plays the fade/scale-in, replacing any {@link eventPopoverAnimation}
@@ -602,7 +590,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         this.eventPopoverAnimation = popover.animate([
             { opacity: 0, transform: "scale(0.98)" },
             { opacity: 1, transform: "scale(1)" },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(popover), fill: "forwards" });
     }
     /**
      * Closes the popover, if open — accepting an instant, unanimated close
@@ -645,7 +633,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         const animation = popover.animate([
             { opacity: 1, transform: "scale(1)" },
             { opacity: 0, transform: "scale(0.98)" },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(popover), fill: "forwards" });
         this.eventPopoverAnimation = animation;
         animation.finished
             .then(() => {
@@ -861,9 +849,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         ></eun-scheduler-event-editor>
         <div slot="footer">
           ${this.editingEvent
-            ? html `<eun-button
-                color="critical"
-                @click=${this.handleModalDelete}
+            ? html `<eun-button color="critical" @click=${this.handleModalDelete}
                 >${this.deleteLabel}</eun-button
               >`
             : nothing}

package/dist/features/scheduler/scheduler/scheduler.styles.js

@@ -93,13 +93,15 @@ const base = css `
   }
 
   #view.swiping-next #view-content {
-    animation: scheduler-slide-from-right var(--scheduler-swipe-duration, 200ms)
-      ease-out;
+    animation: scheduler-slide-from-right
+      var(--scheduler-swipe-duration, var(--eun-duration-m, 200ms))
+      var(--eun-easing-out, ease-out);
   }
 
   #view.swiping-previous #view-content {
-    animation: scheduler-slide-from-left var(--scheduler-swipe-duration, 200ms)
-      ease-out;
+    animation: scheduler-slide-from-left
+      var(--scheduler-swipe-duration, var(--eun-duration-m, 200ms))
+      var(--eun-easing-out, ease-out);
   }
 
   @keyframes scheduler-slide-from-right {

package/dist/features/scheduler/scheduler-event/scheduler-event.d.ts

@@ -53,6 +53,8 @@ export type EunomiaSchedulerEventCardDirection = "row" | "column";
  * @cssprop [--scheduler-event-bar-width] - Sets the width of the color bar
  * @cssprop [--scheduler-event-gap] - Sets the gap between the bar and the text
  * @cssprop [--scheduler-event-padding] - Sets the inner padding
+ * @cssprop [--scheduler-event-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --scheduler-event-padding is set
+ * @cssprop [--scheduler-event-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --scheduler-event-padding is set
  * @cssprop [--scheduler-event-opaque-tint] - Sets the mix percentage for the default appearance's background
  * @cssprop [--scheduler-event-transparent-tint] - Sets the mix percentage for the transparent appearance's background
  * @cssprop [--scheduler-event-title-color] - Sets the title text color

package/dist/features/scheduler/scheduler-event/scheduler-event.js

@@ -52,6 +52,8 @@ export const EunomiaSchedulerEventCardTagName = "eun-scheduler-event";
  * @cssprop [--scheduler-event-bar-width] - Sets the width of the color bar
  * @cssprop [--scheduler-event-gap] - Sets the gap between the bar and the text
  * @cssprop [--scheduler-event-padding] - Sets the inner padding
+ * @cssprop [--scheduler-event-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --scheduler-event-padding is set
+ * @cssprop [--scheduler-event-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --scheduler-event-padding is set
  * @cssprop [--scheduler-event-opaque-tint] - Sets the mix percentage for the default appearance's background
  * @cssprop [--scheduler-event-transparent-tint] - Sets the mix percentage for the transparent appearance's background
  * @cssprop [--scheduler-event-title-color] - Sets the title text color

package/dist/features/scheduler/scheduler-event/scheduler-event.styles.js

@@ -7,6 +7,8 @@ import { css } from "lit";
  * [--scheduler-event-bar-width] - Set a custom width for the color bar
  * [--scheduler-event-gap] - Set a custom gap between the bar and the text
  * [--scheduler-event-padding] - Set a custom inner padding
+ * [--scheduler-event-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --scheduler-event-padding is set
+ * [--scheduler-event-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --scheduler-event-padding is set
  * [--scheduler-event-opaque-tint] - Set a custom mix percentage for the `default` appearance's background (mixed against the current theme's own `--eun-surface-color`, so it's automatically a light tint in light mode and a dark tint in dark mode)
  * [--scheduler-event-transparent-tint] - Set a custom mix percentage for the `transparent` appearance's background (mixed against `transparent`)
  * [--scheduler-event-title-color] - Set a custom title text color
@@ -54,7 +56,11 @@ const base = css `
     width: 100%;
     height: 100%;
     min-height: 0;
-    padding: var(--scheduler-event-padding, var(--eun-space-xs, 4px));
+    padding: var(
+      --scheduler-event-padding,
+      var(--scheduler-event-padding-block, var(--eun-space-xs, 4px))
+        var(--scheduler-event-padding-inline, var(--eun-space-xs, 4px))
+    );
     border-radius: var(
       --scheduler-event-radius,
       var(--eun-border-radius-s, 5px)
@@ -69,9 +75,9 @@ const base = css `
       var(--eun-surface-color, #ffffff)
     );
     transition:
-      background 0.2s ease-out,
-      filter 0.2s ease-out,
-      outline 0.2s ease-out;
+      background var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      filter var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
 
   :host([appearance="transparent"]) #chip {

package/dist/features/scheduler/shared/scheduler-hour-grid.styles.js

@@ -1,5 +1,5 @@
 import { css } from "lit";
-import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
+import { cssBelow } from "../../../utils/media.styles.js";
 /**
  * Shared style for the day/week/work-week hour grid.
  *
@@ -172,13 +172,13 @@ const base = css `
     cursor: grabbing;
   }
 
-  @container (max-width: ${EUNOMIA_BREAKPOINTS.mobile}px) {
+  @container ${cssBelow("mobile")} {
     #hour-grid-scroll {
       --scheduler-mobile: true;
     }
   }
 
-  @container (max-width: ${EUNOMIA_BREAKPOINTS.tablet}px) {
+  @container ${cssBelow("tablet")} {
     #hour-grid-scroll {
       --scheduler-tablet: true;
       flex: 1 1 auto;

package/dist/features/scheduler/shared/scheduler-month-view.styles.js

@@ -1,12 +1,12 @@
 import { css } from "lit";
-import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
+import { cssBelow } from "../../../utils/media.styles.js";
 const base = css `
   .month-scroll {
     max-height: var(--scheduler-body-max-height, 640px);
     overflow-y: auto;
   }
 
-  @media (max-width: ${EUNOMIA_BREAKPOINTS.tablet}px) {
+  @media ${cssBelow("tablet")} {
     .month-scroll {
       flex: 1 1 auto;
       height: 100%;

package/dist/features/scheduler/shared/scheduler-year-view.styles.js

@@ -1,12 +1,12 @@
 import { css } from "lit";
-import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
+import { cssBelow } from "../../../utils/media.styles.js";
 const base = css `
   .year-scroll {
     max-height: var(--scheduler-body-max-height, 640px);
     overflow-y: auto;
   }
 
-  @media (max-width: ${EUNOMIA_BREAKPOINTS.tablet}px) {
+  @media ${cssBelow("tablet")} {
     .year-scroll {
       flex: 1 1 auto;
       height: 100%;

package/dist/features/table/table/table-native.styles.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Light DOM style of the native `<table>` slotted into `eun-table`. A
+ * shadow root can't reach a slotted table's rows and cells, so `eun-table`
+ * adopts this sheet into its own root node (the document, or the shadow
+ * root it lives in) instead. The exact same rules are also published as
+ * `table-ssr.css`, so a server-rendered table looks final before any
+ * script runs.
+ *
+ * Before `eun-table` is defined, the table itself carries the frame the
+ * component later draws around it, so a server-rendered page doesn't
+ * shift once it upgrades. Once defined, the `<caption>` is positioned
+ * above that frame, in the room the host reserves for it.
+ *
+ * Every rule is scoped to `eun-table > table`, so it never touches a table
+ * outside of `eun-table`, and stays at a low specificity a consumer class
+ * overrides easily.
+ *
+ * Every cell paints an opaque background, and the hover and selected tints
+ * are layered on top through an inset `box-shadow` rather than a
+ * background change. That keeps sticky cells opaque in every state while
+ * the tint still transitions smoothly.
+ *
+ * Generated cells carry a data attribute: `data-table-select` for the
+ * selection checkbox column, `data-table-skeleton` for the loading
+ * placeholder body. Consumers mark their row end action cells with
+ * `data-table-action`.
+ */
+export declare const tableNativeStyles: import("lit").CSSResult;