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

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

@@ -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 scheduler component.
  */
@@ -51,8 +51,8 @@ declare const EunomiaScheduler_base: import("../../../utils/constructor.type.js"
  * @prop {string} [viewMonthLabel='Month'] - The label of the month view switcher option
  * @prop {string} [viewYearLabel='Year'] - The label of the year view switcher option
  * @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 {EventCreateEvent} euneventcreate - Fired when a new event is saved
  * @fires {EventUpdateEvent} euneventupdate - Fired when an existing event is saved, or a day, week, or work week chip is dragged to a new time or day
  * @fires {EventDeleteEvent} euneventdelete - Fired when an event is deleted
@@ -158,12 +158,12 @@ export declare class EunomiaScheduler extends EunomiaScheduler_base {
     /** @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).
      * @default default
      */
-    eventVariant: EunomiaSchedulerEventCardVariant;
+    eventAppearance: EunomiaSchedulerEventAppearance;
     /**
      * Whether the desktop editing drawer is open.
      * @internal
@@ -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.
  */
@@ -73,8 +75,8 @@ const VIEWS = [
  * @prop {string} [viewMonthLabel='Month'] - The label of the month view switcher option
  * @prop {string} [viewYearLabel='Year'] - The label of the year view switcher option
  * @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 {EventCreateEvent} euneventcreate - Fired when a new event is saved
  * @fires {EventUpdateEvent} euneventupdate - Fired when an existing event is saved, or a day, week, or work week chip is dragged to a new time or day
  * @fires {EventDeleteEvent} euneventdelete - Fired when an event is deleted
@@ -174,12 +176,12 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         /** @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).
          * @default default
          */
-        this.eventVariant = "default";
+        this.eventAppearance = "default";
         /**
          * Whether the desktop editing drawer is open.
          * @internal
@@ -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(() => {
@@ -792,7 +780,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         ?readonly=${this.readonly}
         ?no-animation=${this.noAnimation}
         more-events-label=${this.moreEventsLabel}
-        event-variant=${this.eventVariant}
+        event-appearance=${this.eventAppearance}
         @eunperiodchange=${this.handleCalendarPeriodChange}
         @euneventclick=${this.handleCalendarEventClick}
         @eunslotclick=${this.handleCalendarSlotClick}
@@ -824,7 +812,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         <div slot="footer" style="display: contents">
           ${this.editingEvent
             ? html `<eun-button
-                variant="critical"
+                color="critical"
                 appearance="outline"
                 @click=${this.handleDrawerDelete}
                 >${this.deleteLabel}</eun-button
@@ -834,7 +822,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
           <eun-button appearance="ghost" @click=${this.handleDrawerCancel}
             >${this.cancelLabel}</eun-button
           >
-          <eun-button variant="primary" @click=${this.handleDrawerSave}
+          <eun-button color="primary" @click=${this.handleDrawerSave}
             >${this.applyLabel}</eun-button
           >
         </div>
@@ -861,17 +849,15 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         ></eun-scheduler-event-editor>
         <div slot="footer">
           ${this.editingEvent
-            ? html `<eun-button
-                variant="critical"
-                @click=${this.handleModalDelete}
+            ? html `<eun-button color="critical" @click=${this.handleModalDelete}
                 >${this.deleteLabel}</eun-button
               >`
             : nothing}
           <span style="flex: 1 1 auto;"></span>
-          <eun-button variant="secondary" @click=${this.handleModalCancel}
+          <eun-button color="secondary" @click=${this.handleModalCancel}
             >${this.cancelLabel}</eun-button
           >
-          <eun-button variant="primary" @click=${this.handleModalSave}
+          <eun-button color="primary" @click=${this.handleModalSave}
             >${this.applyLabel}</eun-button
           >
         </div>
@@ -999,8 +985,8 @@ __decorate([
     property({ attribute: "more-events-label" })
 ], EunomiaScheduler.prototype, "moreEventsLabel", void 0);
 __decorate([
-    property({ attribute: "event-variant" })
-], EunomiaScheduler.prototype, "eventVariant", void 0);
+    property({ attribute: "event-appearance" })
+], EunomiaScheduler.prototype, "eventAppearance", void 0);
 __decorate([
     state()
 ], EunomiaScheduler.prototype, "isDrawerOpen", void 0);

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

@@ -1,3 +1,4 @@
+import { EunomiaAppearance } from "../../../types/variant.type.js";
 import { LitElement, PropertyValues, TemplateResult } from "lit";
 import { EunomiaSchedulerEventColor } from "../shared/scheduler.types.js";
 /**
@@ -5,9 +6,10 @@ import { EunomiaSchedulerEventColor } from "../shared/scheduler.types.js";
  */
 export declare const EunomiaSchedulerEventCardTagName = "eun-scheduler-event";
 /**
- * All available scheduler event chip variants.
+ * All available scheduler event chip appearances : the shared `default`
+ * and `ghost` meanings, plus the chip's own `transparent`.
  */
-export type EunomiaSchedulerEventCardVariant = "default" | "transparent" | "ghost";
+export type EunomiaSchedulerEventAppearance = Extract<EunomiaAppearance, "default" | "transparent" | "ghost">;
 /**
  * All available scheduler event chip layout directions.
  */
@@ -26,7 +28,7 @@ export type EunomiaSchedulerEventCardDirection = "row" | "column";
  * The accessible name still includes the time either way, only the
  * visual line disappears.
  *
- * There are two visual variants. Default renders an opaque tint, with
+ * There are three appearances. Default renders an opaque tint, with
  * color mixed toward the current theme's own surface color, automatically
  * light in light mode and dark in dark mode with no extra work needed.
  * Transparent mixes the same accent toward transparent instead, for a
@@ -40,7 +42,7 @@ export type EunomiaSchedulerEventCardDirection = "row" | "column";
  * @prop {Date} start - The event's start time, shown as the chip's compact time label
  * @prop {Date} [end] - The event's end time. Used only to build a fuller accessible name, such as "Team sync, 9:00 AM to 10:00 AM", never shown visually on the chip
  * @prop {string} [color='blue'] - The event's accent color : one of the six preset names (red/purple/yellow/blue/green/pink), each with its own tuned two-tone CSS, or a `#rrggbb` hex string for a fully custom color
- * @prop {'default' | 'transparent' | 'ghost'} [variant='default'] - The visual style to apply
+ * @prop {'default' | 'transparent' | 'ghost'} [appearance='default'] - How the chip's surface is drawn
  * @prop {'row' | 'column'} [direction='column'] - Column stacks the title above the time as two lines. Row lays them out side by side on one line instead, the title truncating with an ellipsis while the time never does, for the month view's single-day chips on desktop, where a cell is wide but not tall
  * @attr {'row' | 'column'} [direction='column'] - Column stacks the title above the time as two lines. Row lays them out side by side on one line instead
  * @prop {string} [locale] - The locale used to format the time label. Defaults to the runtime's own
@@ -51,8 +53,10 @@ 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-opaque-tint] - Sets the mix percentage for the default variant's background
- * @cssprop [--scheduler-event-transparent-tint] - Sets the mix percentage for the transparent variant's background
+ * @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
  * @cssprop [--scheduler-event-time-color] - Sets the time text color
  * @element eun-scheduler-event
@@ -93,10 +97,10 @@ export declare class EunomiaSchedulerEventCard extends LitElement {
      */
     private static readonly PRESET_COLORS;
     /**
-     * The visual style to apply.
+     * How the chip's surface is drawn.
      * @default default
      */
-    variant: EunomiaSchedulerEventCardVariant;
+    appearance: EunomiaSchedulerEventAppearance;
     /**
      * `column` stacks the title above the time (two lines) ; `row` lays them
      * out side by side on one line instead, the title truncating with an

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

@@ -27,7 +27,7 @@ export const EunomiaSchedulerEventCardTagName = "eun-scheduler-event";
  * The accessible name still includes the time either way, only the
  * visual line disappears.
  *
- * There are two visual variants. Default renders an opaque tint, with
+ * There are three appearances. Default renders an opaque tint, with
  * color mixed toward the current theme's own surface color, automatically
  * light in light mode and dark in dark mode with no extra work needed.
  * Transparent mixes the same accent toward transparent instead, for a
@@ -41,7 +41,7 @@ export const EunomiaSchedulerEventCardTagName = "eun-scheduler-event";
  * @prop {Date} start - The event's start time, shown as the chip's compact time label
  * @prop {Date} [end] - The event's end time. Used only to build a fuller accessible name, such as "Team sync, 9:00 AM to 10:00 AM", never shown visually on the chip
  * @prop {string} [color='blue'] - The event's accent color : one of the six preset names (red/purple/yellow/blue/green/pink), each with its own tuned two-tone CSS, or a `#rrggbb` hex string for a fully custom color
- * @prop {'default' | 'transparent' | 'ghost'} [variant='default'] - The visual style to apply
+ * @prop {'default' | 'transparent' | 'ghost'} [appearance='default'] - How the chip's surface is drawn
  * @prop {'row' | 'column'} [direction='column'] - Column stacks the title above the time as two lines. Row lays them out side by side on one line instead, the title truncating with an ellipsis while the time never does, for the month view's single-day chips on desktop, where a cell is wide but not tall
  * @attr {'row' | 'column'} [direction='column'] - Column stacks the title above the time as two lines. Row lays them out side by side on one line instead
  * @prop {string} [locale] - The locale used to format the time label. Defaults to the runtime's own
@@ -52,8 +52,10 @@ 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-opaque-tint] - Sets the mix percentage for the default variant's background
- * @cssprop [--scheduler-event-transparent-tint] - Sets the mix percentage for the transparent variant's background
+ * @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
  * @cssprop [--scheduler-event-time-color] - Sets the time text color
  * @element eun-scheduler-event
@@ -75,10 +77,10 @@ let EunomiaSchedulerEventCard = EunomiaSchedulerEventCard_1 = class EunomiaSched
          */
         this.color = "blue";
         /**
-         * The visual style to apply.
+         * How the chip's surface is drawn.
          * @default default
          */
-        this.variant = "default";
+        this.appearance = "default";
         /**
          * `column` stacks the title above the time (two lines) ; `row` lays them
          * out side by side on one line instead, the title truncating with an
@@ -184,7 +186,7 @@ __decorate([
 ], EunomiaSchedulerEventCard.prototype, "color", void 0);
 __decorate([
     property({ reflect: true })
-], EunomiaSchedulerEventCard.prototype, "variant", void 0);
+], EunomiaSchedulerEventCard.prototype, "appearance", void 0);
 __decorate([
     property({ reflect: true })
 ], EunomiaSchedulerEventCard.prototype, "direction", void 0);

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

@@ -7,8 +7,10 @@ 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-opaque-tint] - Set a custom mix percentage for the `default` variant'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` variant's background (mixed against `transparent`)
+ * [--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
  * [--scheduler-event-time-color] - Set a custom time 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,12 +75,12 @@ 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([variant="transparent"]) #chip {
+  :host([appearance="transparent"]) #chip {
     background: color-mix(
       in srgb,
       var(--_tintBase) var(--scheduler-event-transparent-tint, 22%),
@@ -82,12 +88,12 @@ const base = css `
     );
   }
 
-  :host([variant="ghost"]) #chip {
+  :host([appearance="ghost"]) #chip {
     background: transparent;
   }
 
-  :host([variant="ghost"]) #chip:hover,
-  :host([variant="ghost"]) #chip:hover {
+  :host([appearance="ghost"]) #chip:hover,
+  :host([appearance="ghost"]) #chip:hover {
     background: color-mix(
       in srgb,
       var(--_tintBase) var(--scheduler-event-transparent-tint, 22%),

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

@@ -39,7 +39,7 @@ const PRIORITIES = [
     "high",
     "critical",
 ];
-const PRIORITY_VARIANT = {
+const PRIORITY_COLOR = {
     low: "success",
     high: "warning",
     critical: "critical",
@@ -651,7 +651,7 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends LitE
             <eun-button
               appearance="default"
               id="guest-add-button"
-              variant="secondary"
+              color="secondary"
               aria-label=${this.addGuestLabel}
               @click=${this.handleAddGuestClick}
             >
@@ -710,7 +710,7 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends LitE
             ${PRIORITIES.map((priority) => html `
                 <eun-toggle-item
                   value=${priority}
-                  variant=${ifDefined(PRIORITY_VARIANT[priority])}
+                  color=${ifDefined(PRIORITY_COLOR[priority])}
                 >
                   ${priorityLabel(priority)}
                 </eun-toggle-item>
@@ -741,7 +741,7 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends LitE
             <div id="actions">
               ${this.event
                 ? html `
-                    <eun-button variant="critical" @click=${this.requestDelete}>
+                    <eun-button color="critical" @click=${this.requestDelete}>
                       ${this.deleteLabel}
                     </eun-button>
                   `
@@ -750,7 +750,7 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends LitE
               <eun-button appearance="ghost" @click=${this.handleCancelClick}>
                 ${this.cancelLabel}
               </eun-button>
-              <eun-button variant="primary" @click=${this.handleSaveClick}>
+              <eun-button color="primary" @click=${this.handleSaveClick}>
                 ${this.saveLabel}
               </eun-button>
             </div>

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

@@ -104,14 +104,14 @@ export function renderEventPopover(props) {
         : html `
           <div class="event-popover-actions">
             <eun-button
-              variant="critical"
+              color="critical"
               size="s"
               appearance="outline"
               rounded
               @click=${onDelete}
               >${deleteLabel}</eun-button
             >
-            <eun-button variant="primary" size="s" rounded @click=${onEdit}
+            <eun-button color="primary" size="s" rounded @click=${onEdit}
               >${editLabel}</eun-button
             >
           </div>

package/dist/features/scheduler/shared/scheduler-hour-grid.d.ts

@@ -1,6 +1,6 @@
 import { TemplateResult } from "lit";
 import { EunomiaSchedulerEvent } from "./scheduler.types.js";
-import type { EunomiaSchedulerEventCardVariant } from "../scheduler-event/scheduler-event.js";
+import type { EunomiaSchedulerEventAppearance } from "../scheduler-event/scheduler-event.js";
 /**
  * Props for {@link renderHourGrid}.
  */
@@ -12,7 +12,7 @@ export interface HourGridProps {
     slotDuration: number;
     locale?: string;
     slotHeight: number;
-    eventVariant: EunomiaSchedulerEventCardVariant;
+    eventAppearance: EunomiaSchedulerEventAppearance;
     onSlotClick: (start: Date) => void;
     onEventClick: (event: EunomiaSchedulerEvent, domEvent: MouseEvent) => void;
     draggingEventId?: string | null;

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

@@ -102,7 +102,7 @@ export function renderHourGrid(props) {
                         .start=${slot.event.start}
                         .end=${slot.event.end}
                         color=${slot.event.color}
-                        variant=${props.eventVariant}
+                        appearance=${props.eventAppearance}
                         hide-time
                         @click=${(domEvent) => props.onEventClick(slot.event, domEvent)}
                       ></eun-scheduler-event>
@@ -139,7 +139,7 @@ export function renderHourGrid(props) {
  */
 /* eslint-disable lit-a11y/click-events-have-key-events */
 function renderDayColumn(day, props, now, hourCount) {
-    const { events, dayStartHour, dayEndHour, slotDuration, slotHeight, eventVariant, onSlotClick, onEventClick, draggingEventId, onEventDragStart, } = props;
+    const { events, dayStartHour, dayEndHour, slotDuration, slotHeight, eventAppearance, onSlotClick, onEventClick, draggingEventId, onEventDragStart, } = props;
     const gridStartMinutes = dayStartHour * 60;
     const gridEndMinutes = dayEndHour * 60;
     const dayEvents = timedEventsForDay(events, day);
@@ -210,7 +210,7 @@ function renderDayColumn(day, props, now, hourCount) {
               .start=${slot.event.start}
               .end=${slot.event.end}
               color=${slot.event.color}
-              variant=${eventVariant}
+              appearance=${eventAppearance}
               ?hide-time=${height < CONDENSED_HEIGHT_THRESHOLD}
               @click=${(domEvent) => onEventClick(slot.event, domEvent)}
             ></eun-scheduler-event>

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.d.ts

@@ -13,10 +13,10 @@ import { EunomiaSchedulerEvent } from "./scheduler.types.js";
 export declare const MONTH_EVENT_ROW_HEIGHT = 22;
 /**
  * Props for {@link renderSchedulerMonthView}. Deliberately has no
- * `eventVariant` field, unlike `HourGridProps` : month view always picks
- * its own bar variant itself (`ghost` unless the event spans multiple
+ * `eventAppearance` field, unlike `HourGridProps` : month view always picks
+ * its own bar appearance itself (`ghost` unless the event spans multiple
  * days — see {@link renderMonthWeek}), regardless of `eun-calendar`'s own
- * `eventVariant` prop, which only reaches day/week/work-week's chips.
+ * `eventAppearance` prop, which only reaches day/week/work-week's chips.
  */
 export interface MonthViewProps {
     displayedMonth: Date;

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

@@ -74,7 +74,7 @@ function slotsTouchingDay(slots, dayIndex) {
  * about and never needs to visually split a bar around a day that ran out
  * of room.
  *
- * Each bar's own variant is `ghost` (no fill, just the accent bar and
+ * Each bar's own appearance is `ghost` (no fill, just the accent bar and
  * text — the density this view actually needs, a whole week's worth of
  * single-day bars packed into a few rows) unless {@link isMultiDay}, which
  * keeps `default`'s opaque tint instead : a bar spanning several day
@@ -120,7 +120,7 @@ function renderMonthWeek(week, props) {
             .start=${slot.event.start}
             .end=${slot.event.end}
             color=${slot.event.color}
-            variant=${isMultiDay(slot.event) ? "default" : "ghost"}
+            appearance=${isMultiDay(slot.event) ? "default" : "ghost"}
             direction=${desktop ? "row" : "column"}
             ?hide-time=${!desktop || !!slot.event.allDay}
             @click=${(domEvent) => onEventClick(slot.event, domEvent)}

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%;