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

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

@@ -26,7 +26,7 @@ const base = css `
     --_trackHeight: var(--slider-track-height, 6px);
     --_trackColor: var(
       --slider-track-background,
-      var(--eun-color-grey-200, #ecedf0)
+      var(--eun-surface-sunken-strong, #ecedf0)
     );
     --_fillColor: var(
       --slider-track-fill-background,
@@ -34,7 +34,7 @@ const base = css `
     );
     --_trackRadius: var(
       --slider-track-border-radius,
-      var(--eun-borderRadius-xl, 999px)
+      var(--eun-border-radius-xl, 999px)
     );
     --_thumbSize: var(--slider-thumb-size, 18px);
     --_thumbBackground: var(--slider-thumb-background, #fff);
@@ -62,7 +62,7 @@ const base = css `
       var(--eun-color-primary-500, #3d6fff)
     );
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     display: block;
     width: 100%;
     outline: none;
@@ -113,12 +113,12 @@ const base = css `
     transform: translateX(-50%);
     background: var(--_tooltipBackground);
     color: var(--_tooltipColor);
-    font-size: var(--eun-fontSize-xs, 12px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-xs, 12px);
+    font-weight: var(--eun-font-weight-l, 700);
     line-height: 1;
     white-space: nowrap;
     padding: var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
-    border-radius: var(--eun-borderRadius-s, 4px);
+    border-radius: var(--eun-border-radius-s, 4px);
     pointer-events: none;
     font-variant-numeric: tabular-nums;
   }

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

@@ -13,7 +13,7 @@ export declare const EunomiaSwitchTagName = "eun-switch";
  * Type of the switch base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaSwitchBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<string> & CheckMixinInterface;
+type EunomiaSwitchBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<boolean> & FormMixinInterface<string> & CheckMixinInterface;
 /**
  * Base class with composed mixins used to handle component extends elements type.
  * Reuses the exact same behavior stack as `eun-checkbox` (form participation,

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

@@ -23,7 +23,7 @@ const base = css `
     --_trackBorder: var(--eun-border-color, #dee0e7);
     --_trackBackground: var(
       --switch-track-background,
-      var(--eun-color-grey-200, #ecedf0)
+      var(--eun-surface-sunken, #ecedf0)
     );
     --_thumbSize: var(--switch-thumb-size, calc(var(--_trackHeight) - 6px));
     --_thumbBackground: var(--switch-thumb-background, #fff);
@@ -37,9 +37,9 @@ const base = css `
       --switch-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
     );
-    --_trackBorderWidth: var(--eun-borderWidth-s, 1px);
+    --_trackBorderWidth: var(--eun-border-width-s, 1px);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     display: flex;
     width: 100%;
     outline: none;
@@ -70,7 +70,7 @@ const base = css `
     #track {
     --_trackBackground: var(
       --switch-track-background-hover,
-      var(--eun-content-hover, #edeff0)
+      var(--eun-surface-sunken-hover, #edeff0)
     );
   }
 
@@ -82,7 +82,7 @@ const base = css `
     #track {
     --_trackBackground: var(
       --switch-track-background-pressed,
-      var(--eun-content-pressed, #e4e6e8)
+      var(--eun-surface-sunken-pressed, #e4e6e8)
     );
   }
 
@@ -147,7 +147,7 @@ const base = css `
   }
 
   #label-text {
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
     line-height: 1.2;
   }
 
@@ -161,7 +161,7 @@ const base = css `
     height: var(--_trackHeight);
     background: var(--_trackBackground);
     border: var(--_trackBorderWidth) solid var(--_trackBorder);
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
     flex-shrink: 0;
     box-sizing: border-box;
     outline: 2px solid transparent;
@@ -178,7 +178,7 @@ const base = css `
     width: var(--_thumbSize);
     height: var(--_thumbSize);
     background: var(--_thumbBackground);
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
     box-shadow: var(--eun-shadow-xs, 0 1px 3px rgba(0, 0, 0, 0.18));
     display: flex;
     align-items: center;

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

@@ -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 & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface;
+type EunomiaTextareaBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface;
 declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
 /**
  * A multi-line text field, sharing its label, hint, and error chrome and

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

@@ -733,7 +733,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
             this.lastSyncedValue = newValue;
             this.value = newValue;
             this.resizeEditableField();
-            this.dispatchEvent(new ChangeEvent());
+            this.dispatchEvent(new ChangeEvent(this.value));
             this.syncToolbarToSelection();
         };
         /**
@@ -1076,7 +1076,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
     handleInput(event) {
         this.value = event.target.value;
         this.resizeToContent();
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
     }
     /**
      * @see handleSelectionChange
@@ -1539,7 +1539,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         ?required=${this.required}
         minlength=${ifDefined(this.minlength)}
         maxlength=${ifDefined(this.maxlength)}
-        aria-invalid=${this.valid ? "false" : "true"}
+        aria-invalid=${!this.hideError && !this.disabled && !this.valid}
         aria-label=${ifDefined(this.label)}
         aria-describedby=${describedBy || nothing}
         @input=${this.handleInput}
@@ -1570,7 +1570,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         role="textbox"
         aria-multiline="true"
         aria-required=${this.required ? "true" : nothing}
-        aria-invalid=${this.valid ? "false" : "true"}
+        aria-invalid=${!this.hideError && !this.disabled && !this.valid}
         aria-label=${ifDefined(this.label)}
         aria-describedby=${describedBy || nothing}
         @beforeinput=${this.handleEditableBeforeInput}

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

@@ -72,12 +72,12 @@ const textarea = css `
     width: 2rem;
     height: 2rem;
     padding: 0;
-    border: var(--eun-borderWidth-m, 1.5px) solid
+    border: var(--eun-border-width-m, 1.5px) solid
       var(
         --_border-indicator-color,
         var(--field-border-color, var(--eun-border-color, #dee0e7))
       );
-    border-radius: var(--eun-borderRadius-m, 8px);
+    border-radius: var(--eun-border-radius-m, 8px);
     background: none;
     color: var(--_iconColor, var(--eun-text-secondary, #484e61));
     cursor: pointer;
@@ -104,9 +104,9 @@ const textarea = css `
     left: 0;
     margin: 0;
     padding: var(--eun-space-xs, 4px);
-    border: var(--eun-borderWidth-m, 1.5px) solid
+    border: var(--eun-border-width-m, 1.5px) solid
       var(--eun-border-color, #dee0e7);
-    border-radius: var(--eun-borderRadius-m, 8px);
+    border-radius: var(--eun-border-radius-m, 8px);
     background: var(--eun-surface-color, #ffffff);
     box-shadow: var(--eun-shadow-m, 0 4px 16px rgba(0, 0, 0, 0.12));
     display: grid;
@@ -120,7 +120,7 @@ const textarea = css `
     width: 1.75rem;
     height: 1.75rem;
     padding: 0;
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
     border: 2px solid transparent;
     background-color: var(--_swatch-bg);
     cursor: pointer;
@@ -149,7 +149,7 @@ const textarea = css `
     flex: 0 0 auto;
     margin-inline-start: auto;
     white-space: nowrap;
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(--_hintColor, var(--eun-text-secondary, #484e61));
   }
   #char-count[data-exceeded] {

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

@@ -31,7 +31,7 @@ const timePickerColumns = css `
     align-items: center;
     justify-content: center;
     border: none;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     background: none;
     padding: var(--eun-space-xxs, 1.6px);
     color: var(--_iconColor, var(--eun-text-secondary, #484e61));
@@ -54,14 +54,14 @@ const timePickerColumns = css `
     align-items: center;
     justify-content: center;
     min-width: 48px;
-    font-size: var(--eun-fontSize-l, 24px);
-    font-weight: var(--eun-fontWeight-m, 600);
+    font-size: var(--eun-font-size-l, 24px);
+    font-weight: var(--eun-font-weight-m, 600);
     color: var(--_textColor, var(--eun-text-color, #071621));
     font-variant-numeric: tabular-nums;
   }
   .tp-value {
     padding: var(--eun-space-xs, 4px);
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     outline: 2px solid transparent;
     outline-offset: 2px;
     cursor: default;
@@ -81,7 +81,7 @@ const timePickerColumns = css `
     scrollbar-width: none;
     outline: 2px solid transparent;
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
   }
   .tp-wheel::-webkit-scrollbar {
     display: none;
@@ -113,7 +113,7 @@ const timePickerColumns = css `
   }
   .tp-wheel-item.selected {
     color: var(--_textColor, var(--eun-text-color, #071621));
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
   }
   @media (prefers-reduced-motion: reduce) {
     .tp-wheel {

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

@@ -19,7 +19,7 @@ const timePickerList = css `
     display: flex;
     align-items: center;
     border: none;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     background: none;
     padding: var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
     color: var(--_textColor, var(--eun-text-color, #071621));
@@ -49,7 +49,7 @@ const timePickerList = css `
       --time-picker-selected-color,
       var(--eun-color-primary-700, #3662e0)
     );
-    font-weight: var(--eun-fontWeight-m, 600);
+    font-weight: var(--eun-font-weight-m, 600);
   }
   .tp-list-item:disabled {
     cursor: not-allowed;

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

@@ -19,7 +19,7 @@ export declare const EunomiaTimePickerTagName = "eun-time-picker";
  * interface element.
  * @internal
  */
-type EunomiaTimePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
+type EunomiaTimePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
 /**
  * A time field entered across segmented numeric hour and minute inputs,

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

@@ -535,7 +535,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
      */
     commitStaged() {
         this.value = this.stagingValue;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
     }
     /**
      * Applies a new hour/minute to {@link displaySource}'s calendar day (via
@@ -557,7 +557,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
             return;
         }
         this.value = next;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
     }
     /**
      * Commits a directly-typed, complete hour/minute (bypassing staging
@@ -572,7 +572,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
      */
     commitTypedTime(hour24, minute) {
         this.value = setZonedTime(this.value ?? new Date(), this.timezone, hour24, minute);
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
         if (this.isOpen || this.isModalOpen) {
             this.resetStaging();
         }

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

@@ -21,7 +21,7 @@ const timePicker = css `
     width: 100%;
     color: var(--_textColor);
     background-color: var(--_background);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
     padding: var(--eun-space-xs, 4px) var(--eun-space-xs, 4px)
       var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
@@ -62,12 +62,12 @@ const timePicker = css `
     border-color: transparent;
   }
   :host([variant="fill"][aria-invalid="true"]) #field-wrapper {
-    box-shadow: inset 0 0 0 var(--eun-borderWidth-m, 1.5px) var(--_errorColor);
+    box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px) var(--_errorColor);
   }
   :host([variant="underline"]) #field-wrapper {
     border: none;
     outline: none;
-    border-bottom: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0;
   }
   :host([variant="underline"]) #field-wrapper:focus-within {
@@ -114,7 +114,7 @@ const timePicker = css `
     justify-content: center;
     margin-inline-start: auto;
     border: none;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     background: none;
     padding: var(--eun-space-xxs, 1.6px);
     color: var(--_iconColor);
@@ -144,14 +144,14 @@ const timePicker = css `
   #timezone-label {
     margin-block-start: var(--eun-space-xxs, 1.6px);
     color: var(--_hintColor);
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
   }
   #clock-popover {
     position: fixed;
     top: var(--_anchorTop, 0);
     left: var(--_anchorLeft, 0);
     margin: 0;
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--_borderColor, var(--eun-color-grey-300, #dee0e7));
     border-radius: var(--_borderRadius);
     background: var(
@@ -180,8 +180,8 @@ const timePicker = css `
   #modal-time-heading {
     padding: var(--eun-space-m, 16px) var(--eun-space-m, 16px) 0;
     color: var(--_textColor);
-    font-size: var(--eun-fontSize-l, 20px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-l, 20px);
+    font-weight: var(--eun-font-weight-l, 700);
   }
   #modal-time {
     --modal-padding: 0;

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

@@ -25,6 +25,8 @@ export type EunomiaAnimateAnimation = "none" | "fade" | "scroll-right" | "scroll
  * @prop {boolean} [once=true] - Whether the animation plays only the first time it enters the viewport, or replays every time it re-enters
  * @prop {number} [threshold=0.1] - The ratio of the element, from 0 to 1, that must be visible before the animation triggers
  * @prop {string} [rootMargin='0px'] - The margin applied around the viewport before threshold is evaluated, accepting CSS-like values such as -50px 0px
+ * @prop {EunomiaAnimateAnimation} [tabletAnimation] - Overrides `animation` at tablet-width viewports and narrower (max-width: 768px). Left unset, the viewport keeps using `animation`
+ * @prop {EunomiaAnimateAnimation} [mobileAnimation] - Overrides `animation` (and `tabletAnimation`, if also set) at mobile-width viewports and narrower (max-width: 600px)
  * @cssprop [--animate-distance] - Sets the travel distance for the scroll and faded-scroll animations
  * @element eun-animate
  */
@@ -36,7 +38,7 @@ export declare class EunomiaAnimate extends LitElement {
      * @internal
      * @readonly
      */
-    static readonly styles: import("lit").CSSResult;
+    static readonly styles: import("lit").CSSResult[];
     /**
      * Which transition to apply. `none` renders the content immediately, with
      * no transition, and skips setting up the `IntersectionObserver`
@@ -72,20 +74,53 @@ export declare class EunomiaAnimate extends LitElement {
      * @default 0px
      */
     rootMargin: string;
+    /**
+     * Overrides `animation` at tablet-width viewports and narrower
+     * (`max-width: 768px`, matching `EUNOMIA_BREAKPOINTS.tablet`). Purely a
+     * CSS `@media` switch (`animate.styles.ts`, mirrored in
+     * `animate-ssr.css` for the pre-hydration state) — never read from JS,
+     * so there's no `matchMedia` listener to keep in sync with the actual
+     * viewport, and no risk of the SSR/hydration mismatch that a JS-driven
+     * breakpoint switch would reintroduce. Left `undefined`, the viewport
+     * keeps using `animation`.
+     * @default undefined
+     */
+    tabletAnimation?: EunomiaAnimateAnimation;
+    /**
+     * Overrides `animation` (and `tabletAnimation`, if also set) at
+     * mobile-width viewports and narrower (`max-width: 600px`, matching
+     * `EUNOMIA_BREAKPOINTS.mobile`). Same pure-CSS mechanism as
+     * {@link tabletAnimation}.
+     * @default undefined
+     */
+    mobileAnimation?: EunomiaAnimateAnimation;
     /**
      * Observes the host's own viewport entry/exit. Left `undefined` while
-     * `animation` is `"none"` — see {@link setupObserver}.
+     * every breakpoint's effective animation is `"none"` — see
+     * {@link setupObserver} and {@link hasAnyAnimation}.
      * @internal
      */
     private observer?;
+    /**
+     * Whether at least one of `animation`, `tabletAnimation`, or
+     * `mobileAnimation` is set to something other than `"none"` — i.e.
+     * whether *some* viewport width could actually reveal an animation, and
+     * the observer is therefore worth setting up at all. Deliberately
+     * ignores the current viewport width itself: which of the three ends up
+     * active is a CSS `@media` decision, not something this component reads
+     * from JS (see {@link tabletAnimation}).
+     * @private
+     */
+    private get hasAnyAnimation();
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     /**
      * (Re)builds the `IntersectionObserver` for the current `threshold`/
-     * `rootMargin`, replacing any previous one — except while `animation` is
-     * `"none"`, where no observer is created at all : that variant renders
-     * unconditionally, so there'd be nothing for it to drive.
+     * `rootMargin`, replacing any previous one — except while
+     * {@link hasAnyAnimation} is `false`, where no observer is created at
+     * all : every viewport width renders unconditionally then, so there'd
+     * be nothing for it to drive.
      * @private
      */
     private setupObserver;

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

@@ -36,6 +36,8 @@ const IN_VIEW_ATTR = "in-view";
  * @prop {boolean} [once=true] - Whether the animation plays only the first time it enters the viewport, or replays every time it re-enters
  * @prop {number} [threshold=0.1] - The ratio of the element, from 0 to 1, that must be visible before the animation triggers
  * @prop {string} [rootMargin='0px'] - The margin applied around the viewport before threshold is evaluated, accepting CSS-like values such as -50px 0px
+ * @prop {EunomiaAnimateAnimation} [tabletAnimation] - Overrides `animation` at tablet-width viewports and narrower (max-width: 768px). Left unset, the viewport keeps using `animation`
+ * @prop {EunomiaAnimateAnimation} [mobileAnimation] - Overrides `animation` (and `tabletAnimation`, if also set) at mobile-width viewports and narrower (max-width: 600px)
  * @cssprop [--animate-distance] - Sets the travel distance for the scroll and faded-scroll animations
  * @element eun-animate
  */
@@ -78,6 +80,21 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
          */
         this.rootMargin = "0px";
     }
+    /**
+     * Whether at least one of `animation`, `tabletAnimation`, or
+     * `mobileAnimation` is set to something other than `"none"` — i.e.
+     * whether *some* viewport width could actually reveal an animation, and
+     * the observer is therefore worth setting up at all. Deliberately
+     * ignores the current viewport width itself: which of the three ends up
+     * active is a CSS `@media` decision, not something this component reads
+     * from JS (see {@link tabletAnimation}).
+     * @private
+     */
+    get hasAnyAnimation() {
+        return (this.animation !== "none" ||
+            (this.tabletAnimation !== undefined && this.tabletAnimation !== "none") ||
+            (this.mobileAnimation !== undefined && this.mobileAnimation !== "none"));
+    }
     connectedCallback() {
         super.connectedCallback?.();
         this.setupObserver();
@@ -94,15 +111,10 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
         if (changed.has("delay")) {
             this.style.setProperty("--_delay", `${this.delay}ms`);
         }
-        // Rebuilds the observer whenever anything its own setup depends on
-        // changes : `animation` (switching to/from "none" starts/stops
-        // observing entirely), `threshold`/`rootMargin` (the observer's own
-        // options, otherwise frozen at whatever they were on connect), and
-        // `once` (so flipping it back to `false` after the element already
-        // triggered once — and got unobserved — resumes watching for exit/
-        // re-entry, rather than staying silently stuck).
         if (this.isConnected &&
             (changed.has("animation") ||
+                changed.has("tabletAnimation") ||
+                changed.has("mobileAnimation") ||
                 changed.has("threshold") ||
                 changed.has("rootMargin") ||
                 changed.has("once"))) {
@@ -111,14 +123,15 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
     }
     /**
      * (Re)builds the `IntersectionObserver` for the current `threshold`/
-     * `rootMargin`, replacing any previous one — except while `animation` is
-     * `"none"`, where no observer is created at all : that variant renders
-     * unconditionally, so there'd be nothing for it to drive.
+     * `rootMargin`, replacing any previous one — except while
+     * {@link hasAnyAnimation} is `false`, where no observer is created at
+     * all : every viewport width renders unconditionally then, so there'd
+     * be nothing for it to drive.
      * @private
      */
     setupObserver() {
         this.teardownObserver();
-        if (this.animation === "none") {
+        if (!this.hasAnyAnimation) {
             return;
         }
         this.observer = new IntersectionObserver(([entry]) => {
@@ -172,6 +185,12 @@ __decorate([
 __decorate([
     property({ attribute: "root-margin" })
 ], EunomiaAnimate.prototype, "rootMargin", void 0);
+__decorate([
+    property({ attribute: "tablet-animation", reflect: true })
+], EunomiaAnimate.prototype, "tabletAnimation", void 0);
+__decorate([
+    property({ attribute: "mobile-animation", reflect: true })
+], EunomiaAnimate.prototype, "mobileAnimation", void 0);
 EunomiaAnimate = __decorate([
     customElement(EunomiaAnimateTagName)
 ], EunomiaAnimate);

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

@@ -1 +1 @@
-export declare const animateStyles: import("lit").CSSResult;
+export declare const animateStyles: import("lit").CSSResult[];