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

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

@@ -101,8 +101,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 +164,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
@@ -856,7 +856,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;
@@ -867,7 +867,7 @@ let EunomiaCalendar = class EunomiaCalendar extends LitElement {
             pointerEvents: "none",
             zIndex: "1000",
             boxShadow: "0 8px 20px rgba(0, 0, 0, 0.2)",
-            borderRadius: "var(--eun-borderRadius-s, 5px)",
+            borderRadius: "var(--eun-border-radius-s, 5px)",
         });
         this.dragGhostLayerEl?.appendChild(ghost);
         this.dragGhostEl = ghost;
@@ -989,7 +989,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 +1132,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);

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

@@ -86,7 +86,7 @@ const base = css `
     gap: 2px;
     min-width: 36px;
     padding: var(--eun-space-xs, 4px) 2px;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     cursor: pointer;
     text-align: center;
   }
@@ -109,13 +109,13 @@ const base = css `
 
   .week-day-strip-day.today .week-day-strip-daynum {
     color: var(--eun-color-info-100, #097faf);
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
   }
 
   .week-day-strip-day.selected .week-day-strip-daynum {
     background: var(--eun-color-info-100, #097faf);
     color: #fff;
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
   }
 
   .week-day-strip-day:focus-visible {

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

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

@@ -73,8 +73,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 +174,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
@@ -792,7 +792,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 +824,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 +834,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>
@@ -862,16 +862,16 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         <div slot="footer">
           ${this.editingEvent
             ? html `<eun-button
-                variant="critical"
+                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 +999,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

@@ -15,7 +15,7 @@ const base = css `
     box-sizing: border-box;
     border: 1px solid
       var(--scheduler-border-color, var(--eun-border-color, #dee0e7));
-    border-radius: var(--eun-borderRadius-m, 10px);
+    border-radius: var(--eun-border-radius-m, 10px);
     background: var(--scheduler-background, var(--eun-surface-color, #ffffff));
     overflow: hidden;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
@@ -83,7 +83,7 @@ const base = css `
   #period-label {
     margin: 0 var(--eun-space-xs, 4px);
     font-size: 15px;
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
     color: var(--eun-text-color, #071621);
   }
 

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,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-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-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 +95,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,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-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-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 +75,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 +184,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,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-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-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
  */
@@ -57,7 +57,7 @@ const base = css `
     padding: var(--scheduler-event-padding, var(--eun-space-xs, 4px));
     border-radius: var(
       --scheduler-event-radius,
-      var(--eun-borderRadius-s, 5px)
+      var(--eun-border-radius-s, 5px)
     );
     outline: 2px solid transparent;
     cursor: pointer;
@@ -74,7 +74,7 @@ const base = css `
       outline 0.2s 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 +82,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%),
@@ -143,7 +143,7 @@ const base = css `
     white-space: nowrap;
     color: var(--scheduler-event-title-color, var(--eun-text-color, #071621));
     font-size: 12px;
-    font-weight: var(--eun-fontWeight-m, 600);
+    font-weight: var(--eun-font-weight-m, 600);
     line-height: 1.3;
   }
 

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/scheduler-event-editor/scheduler-event-editor.styles.js

@@ -31,8 +31,8 @@ const base = css `
     display: block;
     margin-bottom: var(--eun-space-xs, 4px);
     color: var(--eun-text-color, #071621);
-    font-size: var(--eun-fontSize-s, 14px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-s, 14px);
+    font-weight: var(--eun-font-weight-l, 700);
   }
 
   .guest-input-row {

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-event-popover.styles.js

@@ -16,7 +16,7 @@ const base = css `
     margin: 0;
     padding: 0;
     border: 1px solid var(--eun-border-color, #dee0e7);
-    border-radius: var(--eun-borderRadius-m, 10px);
+    border-radius: var(--eun-border-radius-m, 10px);
     background: var(--eun-surface-color, #ffffff);
     box-shadow: var(--eun-shadow-m, 0 8px 24px rgba(7, 22, 33, 0.16));
     font-family: var(--eun-font-family, "Mulish", sans-serif);
@@ -52,8 +52,8 @@ const base = css `
 
   .event-popover-bar {
     height: 4px;
-    border-radius: var(--eun-borderRadius-m, 10px)
-      var(--eun-borderRadius-m, 10px) 0 0;
+    border-radius: var(--eun-border-radius-m, 10px)
+      var(--eun-border-radius-m, 10px) 0 0;
     background: var(--_accent, var(--eun-color-blue-600, #0aa5a8));
   }
 
@@ -75,7 +75,7 @@ const base = css `
     margin: 0;
     padding-right: 28px;
     font-size: 16px;
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
   }
 
   .event-popover-row {

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

@@ -72,7 +72,7 @@ const base = css `
 
   .hour-grid-day-header.today {
     color: var(--eun-color-info-100, #097faf);
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
   }
 
   .hour-grid-allday-row {

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

@@ -76,7 +76,7 @@ const base = css `
   .month-cell-day.today {
     background: var(--eun-color-info-100, #097faf);
     color: #fff;
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
   }
 
   .month-cell-day:focus-visible {

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

@@ -52,7 +52,7 @@ const base = css `
     background: var(--eun-surface-color, #ffffff);
     cursor: pointer;
     font-size: 15px;
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
     color: var(--eun-text-color, #071621);
   }