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

package/dist/components/form/search/search.styles.js

@@ -74,16 +74,16 @@ const search = css `
     background-color: var(--eun-disabled-color, #ecedf0);
     color: var(--eun-text-disabled-color, #8d93aa);
   }
-  :host([variant="fill"]) #search-trigger {
+  :host([appearance="flat"]) #search-trigger {
     border-color: transparent;
   }
-  :host([variant="underline"]) #search-trigger {
+  :host([appearance="underline"]) #search-trigger {
     border: none;
     outline: none;
     border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0;
   }
-  :host([variant="underline"]) #search-trigger:focus-visible {
+  :host([appearance="underline"]) #search-trigger:focus-visible {
     outline: none;
   }
   #trigger-icon {

package/dist/components/form/select/select.d.ts

@@ -5,7 +5,7 @@ import { ValidatorsMixinInterface } from "../../../mixins/validators.mixin.js";
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { EditableMixinInterface } from "../../../mixins/editable.mixin.js";
-import { FieldVariantMixinInterface } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
 import { AnchorPositionMixinInterface } from "../../../mixins/anchor-position.mixin.js";
 import { EunomiaIconName } from "../../content/icon/icon.type.js";
 import { Constructor } from "../../../utils/constructor.type.js";
@@ -22,7 +22,7 @@ type SelectValue = string | string[];
  * Type of the select base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaSelectBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<SelectValue> & FormMixinInterface<SelectValue> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface;
+type EunomiaSelectBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<SelectValue> & FormMixinInterface<SelectValue> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface;
 declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
 /**
  * A field that picks one or more values from a list of option and optgroup
@@ -49,7 +49,7 @@ declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
  * @prop {boolean} [searchable=false] - Whether the field filters its options as the user types. When false, the field is read only and driven by arrow keys, Enter, and type-ahead. Ignored while native is set
  * @prop {boolean} [native=false] - Renders the field as a real select, using the browser's own dropdown instead of the listbox panel. Takes priority over searchable and multiple, neither of which a native dropdown can support
  * @prop {boolean} [multiple=false] - Whether more than one option can be picked at once. Each option then renders a checkbox, and picking one toggles it without closing the dropdown, so value becomes an array of every picked option's value. Ignored while native is set
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} name - The field name

package/dist/components/form/select/select.js

@@ -15,7 +15,7 @@ import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
 import { FormMixin } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { EditableMixin, } from "../../../mixins/editable.mixin.js";
-import { FieldVariantMixin, } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
 import { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
@@ -31,7 +31,7 @@ export const EunomiaSelectTagName = "eun-select";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaSelectMixinBase = AnchorPositionMixin(FieldVariantMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
+const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
 /**
  * A field that picks one or more values from a list of option and optgroup
  * children. Set searchable to let the field also filter that list as the
@@ -57,7 +57,7 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldVariantMixin(FormLabelMi
  * @prop {boolean} [searchable=false] - Whether the field filters its options as the user types. When false, the field is read only and driven by arrow keys, Enter, and type-ahead. Ignored while native is set
  * @prop {boolean} [native=false] - Renders the field as a real select, using the browser's own dropdown instead of the listbox panel. Takes priority over searchable and multiple, neither of which a native dropdown can support
  * @prop {boolean} [multiple=false] - Whether more than one option can be picked at once. Each option then renders a checkbox, and picking one toggles it without closing the dropdown, so value becomes an array of every picked option's value. Ignored while native is set
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} name - The field name

package/dist/components/form/shared-styles/field.styles.js

@@ -117,22 +117,22 @@ const base = css `
   #field[aria-invalid="true"]:focus-visible {
     outline-color: var(--_errorColor);
   }
-  :host([variant="fill"]) {
+  :host([appearance="flat"]) {
     --_background: var(--field-background, var(--eun-content-hover, #edeff0));
   }
-  :host([variant="fill"]) #field:not(:hover) {
+  :host([appearance="flat"]) #field:not(:hover) {
     border-color: transparent;
   }
-  :host([variant="fill"]) #field[aria-invalid="true"] {
+  :host([appearance="flat"]) #field[aria-invalid="true"] {
     box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px) var(--_errorColor);
   }
-  :host([variant="underline"]) #field {
+  :host([appearance="underline"]) #field {
     border: none;
     outline: none;
     border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0;
   }
-  :host([variant="underline"]) #field:focus-visible {
+  :host([appearance="underline"]) #field:focus-visible {
     outline: none;
   }
   slot[name="icon"] {

package/dist/components/form/textarea/textarea.d.ts

@@ -5,7 +5,7 @@ import { ValidatorsMixinInterface, Validity } from "../../../mixins/validators.m
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { EditableMixinInterface } from "../../../mixins/editable.mixin.js";
-import { FieldVariantMixinInterface } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
 /**
  * Tag name of the textarea component.
@@ -15,7 +15,7 @@ export declare const EunomiaTextareaTagName = "eun-textarea";
  * Type of the textarea base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaTextareaBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface;
+type EunomiaTextareaBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface;
 declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
 /**
  * A multi-line text field, sharing its label, hint, and error chrome and
@@ -34,7 +34,7 @@ declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
  * typed by hand. See the Accessibility tab for the full keyboard and ARIA
  * details of the toolbar and both readonly behaviors.
  *
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} placeholder - The placeholder shown when the field is empty

package/dist/components/form/textarea/textarea.js

@@ -15,7 +15,7 @@ import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
 import { FormMixin } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { EditableMixin, } from "../../../mixins/editable.mixin.js";
-import { FieldVariantMixin, } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { findRichTextColor, formatRichText, getPlainTextLength, populateEditableRoot, RICH_TEXT_COLORS, serializeEditableRoot, splitAlign, } from "../../../utils/rich-text.utils.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
@@ -467,7 +467,7 @@ function getActiveColorName(root, kind) {
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaTextareaMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))));
+const EunomiaTextareaMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))));
 /**
  * A multi-line text field, sharing its label, hint, and error chrome and
  * theming with the input component. It grows and shrinks to fit its
@@ -485,7 +485,7 @@ const EunomiaTextareaMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(
  * typed by hand. See the Accessibility tab for the full keyboard and ARIA
  * details of the toolbar and both readonly behaviors.
  *
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} placeholder - The placeholder shown when the field is empty
@@ -1625,7 +1625,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
             <eun-button
               class="cancel"
               size="s"
-              variant="critical"
+              color="critical"
               appearance="flat"
               rounded
               type="button"

package/dist/components/form/time-picker/time-picker.d.ts

@@ -4,7 +4,7 @@ import { ReadonlyMixinInterface } from "../../../mixins/readonly.mixin.js";
 import { ValidatorsMixinInterface, Validity } from "../../../mixins/validators.mixin.js";
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
-import { FieldVariantMixinInterface } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
 import { AnchorPositionMixinInterface } from "../../../mixins/anchor-position.mixin.js";
 import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
@@ -19,7 +19,7 @@ export declare const EunomiaTimePickerTagName = "eun-time-picker";
  * interface element.
  * @internal
  */
-type EunomiaTimePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
+type EunomiaTimePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
 /**
  * A time field entered across segmented numeric hour and minute inputs,
@@ -39,7 +39,7 @@ declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
  * each hour, minute, and period column is its own spin button, grouped
  * under a labeled group.
  *
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
  * @prop {Date | null} value - The picked instant
  * @prop {Date | null} defaultValue - The default value applied when the field connects, and restored on form reset
  * @prop {string} [timezone] - The time zone the hour and minute are displayed and edited in. Defaults to the runtime's own

package/dist/components/form/time-picker/time-picker.js

@@ -11,7 +11,7 @@ import { ReadonlyMixin, } from "../../../mixins/readonly.mixin.js";
 import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
 import { FormMixin } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
-import { FieldVariantMixin, } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
 import { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
 import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
@@ -34,7 +34,7 @@ export const EunomiaTimePickerTagName = "eun-time-picker";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldVariantMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))));
+const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))));
 /**
  * A time field entered across segmented numeric hour and minute inputs,
  * plus an AM/PM toggle segment at a 12-hour format, with a trailing clock
@@ -53,7 +53,7 @@ const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldVar
  * each hour, minute, and period column is its own spin button, grouped
  * under a labeled group.
  *
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
  * @prop {Date | null} value - The picked instant
  * @prop {Date | null} defaultValue - The default value applied when the field connects, and restored on form reset
  * @prop {string} [timezone] - The time zone the hour and minute are displayed and edited in. Defaults to the runtime's own

package/dist/components/form/time-picker/time-picker.styles.js

@@ -55,22 +55,22 @@ const timePicker = css `
   :host([aria-invalid="true"]) #field-wrapper:focus-within {
     outline-color: var(--_errorColor);
   }
-  :host([variant="fill"]) {
+  :host([appearance="flat"]) {
     --_background: var(--field-background, var(--eun-content-hover, #edeff0));
   }
-  :host([variant="fill"]) #field-wrapper {
+  :host([appearance="flat"]) #field-wrapper {
     border-color: transparent;
   }
-  :host([variant="fill"][aria-invalid="true"]) #field-wrapper {
+  :host([appearance="flat"][aria-invalid="true"]) #field-wrapper {
     box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px) var(--_errorColor);
   }
-  :host([variant="underline"]) #field-wrapper {
+  :host([appearance="underline"]) #field-wrapper {
     border: none;
     outline: none;
     border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0;
   }
-  :host([variant="underline"]) #field-wrapper:focus-within {
+  :host([appearance="underline"]) #field-wrapper:focus-within {
     outline: none;
   }
   .segment-group {

package/dist/components/layout/animate/animate.d.ts

@@ -129,6 +129,14 @@ export declare class EunomiaAnimate extends LitElement {
      * @private
      */
     private teardownObserver;
+    /**
+     * Forwards `duration`/`delay` to the host's transition through a
+     * shadow-internal `<style>`, only when they differ from the stylesheet's
+     * own defaults : an inline style on the host would be a hydration
+     * mismatch for an SSR framework, since the server never renders it.
+     * @private
+     */
+    private renderTiming;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/layout/animate/animate.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, property } from "lit/decorators.js";
-import { html, LitElement } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { animateStyles } from "./animate.styles.js";
 /**
  * Tag name of the animate component.
@@ -105,12 +105,6 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has("duration")) {
-            this.style.setProperty("--_duration", `${this.duration}ms`);
-        }
-        if (changed.has("delay")) {
-            this.style.setProperty("--_delay", `${this.delay}ms`);
-        }
         if (this.isConnected &&
             (changed.has("animation") ||
                 changed.has("tabletAnimation") ||
@@ -155,8 +149,26 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
         this.observer?.disconnect();
         this.observer = undefined;
     }
+    /**
+     * Forwards `duration`/`delay` to the host's transition through a
+     * shadow-internal `<style>`, only when they differ from the stylesheet's
+     * own defaults : an inline style on the host would be a hydration
+     * mismatch for an SSR framework, since the server never renders it.
+     * @private
+     */
+    renderTiming() {
+        const rules = [
+            this.duration !== 600 ? `--_duration: ${Number(this.duration)}ms;` : "",
+            this.delay !== 0 ? `--_delay: ${Number(this.delay)}ms;` : "",
+        ].join("");
+        return rules
+            ? html `<style>
+          :host { ${rules} }
+        </style>`
+            : nothing;
+    }
     render() {
-        return html `<slot></slot>`;
+        return html `${this.renderTiming()}<slot></slot>`;
     }
 };
 /**

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

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

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