@eunomia/elements 1.0.0-beta.9 → 1.0.0

package/dist/mixins/anchor-position.mixin.js

@@ -57,6 +57,12 @@ export const AnchorPositionMixin = (superClass) => {
              * @private
              */
             this.anchorPositionAxis = "vertical";
+            /**
+             * Side applied by the current fallback positioning,
+             * carried the same way as {@link anchorPositionGap}.
+             * @private
+             */
+            this.anchorPositionSide = "bottom";
             /**
              * Every shadow root between the tracked anchor and the document, also
              * listened to for `scroll` by the fallback path : a scroll event isn't
@@ -73,7 +79,7 @@ export const AnchorPositionMixin = (superClass) => {
              */
             this.handleAnchorReposition = () => {
                 if (this.anchoredElement && this.anchoredFloatingElement) {
-                    this.applyFallbackPosition(this.anchoredElement, this.anchoredFloatingElement, this.anchorPositionGap, this.anchorPositionAxis);
+                    this.applyFallbackPosition(this.anchoredElement, this.anchoredFloatingElement, this.anchorPositionGap, this.anchorPositionAxis, this.anchorPositionSide, this.anchorPositionAlign);
                 }
             };
         }
@@ -124,11 +130,14 @@ export const AnchorPositionMixin = (superClass) => {
                 this.applyNativePlacementAttribute(anchor, floating);
                 return;
             }
+            const side = options.side ?? "bottom";
             this.anchorPositionGap = gap;
             this.anchorPositionAxis = axis;
+            this.anchorPositionSide = side;
+            this.anchorPositionAlign = options.align;
             this.anchoredElement = anchor;
             this.anchoredFloatingElement = floating;
-            this.applyFallbackPosition(anchor, floating, gap, axis);
+            this.applyFallbackPosition(anchor, floating, gap, axis, side, options.align);
             window.addEventListener("resize", this.handleAnchorReposition);
             window.addEventListener("scroll", this.handleAnchorReposition, true);
             this.removeAnchorScrollRootListeners();
@@ -206,9 +215,11 @@ export const AnchorPositionMixin = (superClass) => {
          * @param floating the element being positioned.
          * @param gap the gap, in pixels, kept between them.
          * @param axis which pair of sides to flip between ; see {@link AnchorPositionOptions.axis}.
+         * @param side the preferred side on the vertical axis ; see {@link AnchorPositionOptions.side}.
+         * @param align the alignment on the vertical axis ; see {@link AnchorPositionOptions.align}.
          * @private
          */
-        applyFallbackPosition(anchor, floating, gap, axis = "vertical") {
+        applyFallbackPosition(anchor, floating, gap, axis = "vertical", side = "bottom", align) {
             const anchorRect = anchor.getBoundingClientRect();
             const insetTop = this.readViewportInset(floating, "--eun-viewport-inset-top");
             const insetBottom = this.readViewportInset(floating, "--eun-viewport-inset-bottom");
@@ -251,17 +262,44 @@ export const AnchorPositionMixin = (superClass) => {
             }
             const spaceBelow = window.innerHeight - insetBottom - anchorRect.bottom;
             const spaceAbove = anchorRect.top - insetTop;
-            const floatingHeight = floating.getBoundingClientRect().height;
-            const opensUpward = spaceBelow < floatingHeight + gap && spaceAbove > spaceBelow;
+            const floatingRect = floating.getBoundingClientRect();
+            const floatingHeight = floatingRect.height;
+            const opensUpward = side === "top"
+                ? spaceAbove >= floatingHeight + gap || spaceAbove >= spaceBelow
+                : spaceBelow < floatingHeight + gap && spaceAbove > spaceBelow;
             floating.dataset.placement = opensUpward ? "top" : "bottom";
-            floating.classList.toggle("flipped", opensUpward);
+            floating.classList.toggle("flipped", opensUpward !== (side === "top"));
             const top = opensUpward
                 ? Math.max(anchorRect.top - floatingHeight - gap, insetTop)
                 : Math.max(anchorRect.bottom + gap, insetTop);
             floating.style.setProperty("--_anchorTop", `${top}px`);
-            floating.style.setProperty("--_anchorLeft", `${anchorRect.left}px`);
+            floating.style.setProperty("--_anchorLeft", `${this.alignedLeft(anchorRect, floatingRect.width, align)}px`);
             floating.style.setProperty("--_anchorWidth", `${anchorRect.width}px`);
         }
+        /**
+         * The fallback path's `left` on the vertical axis for `align` : the
+         * anchor's own left edge when `align` is unset, as before that option
+         * existed, otherwise the requested edge clamped to the viewport.
+         *
+         * @param anchorRect the anchor's bounding rect.
+         * @param width the floating element's width.
+         * @param align see {@link AnchorPositionOptions.align}.
+         * @private
+         */
+        alignedLeft(anchorRect, width, align) {
+            if (!align) {
+                return anchorRect.left;
+            }
+            let left = anchorRect.left;
+            if (align === "center") {
+                left = anchorRect.left + anchorRect.width / 2 - width / 2;
+            }
+            else if (align === "end") {
+                left = anchorRect.right - width;
+            }
+            const max = Math.max(document.documentElement.clientWidth - width, 0);
+            return Math.min(Math.max(left, 0), max);
+        }
         /**
          * Native-path counterpart to {@link applyFallbackPosition}'s
          * `data-placement`/`flipped` bookkeeping. The native path never chooses

package/dist/mixins/button.mixin.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property } from "lit/decorators.js";
+import { reportingValidity } from "../utils/form-validation.utils.js";
 /**
  * ButtonMixin adds button behavior, including:
  * - keyboard accessibility
@@ -154,7 +155,7 @@ export const ButtonMixin = (superClass) => {
                 form.reset();
             }
             if (this.type === "submit") {
-                form.requestSubmit();
+                reportingValidity(form, () => form.requestSubmit());
             }
             return true;
         }

package/dist/mixins/check.mixin.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { property } from "lit/decorators.js";
 import { hasErrorDisplayChange } from "./form.mixin.js";
 import { ChangeEvent } from "../events/change.event.js";
+import { isFromInteractiveContent } from "../utils/interactive-content.utils.js";
 /**
  * Mixin adding "checkable" behavior to a component.
  * It allows to maintains the checked state, handle the interactions, send events and manage accessibility properly
@@ -86,13 +87,17 @@ export const CheckMixin = (superClass) => {
          * native form `reset()` — overrides `FormMixin`'s own
          * `formResetCallback`, which unconditionally forces checkable fields
          * to `false` with no notion of a default checked state. Also resets
-         * `dirty`/`touched` itself, since it doesn't call `super` to reach
-         * `FormMixin`'s own reset of those two.
+         * `dirty`/`touched`/`validationRequested` itself, since it doesn't
+         * call `super` to reach `FormMixin`'s own reset of those. Leaves
+         * `checked` untouched when `controlled` is set, as `FormMixin` does.
          */
         formResetCallback() {
-            this.checked = this.defaultChecked ?? false;
+            if (!this.controlled) {
+                this.checked = this.defaultChecked ?? false;
+            }
             this.dirty = false;
             this.touched = false;
+            this.validationRequested = false;
         }
         /**
          * Lifecycle: Called when the component is disconnected from the DOM.
@@ -119,11 +124,15 @@ export const CheckMixin = (superClass) => {
         }
         /**
          * Handles click interactions.
-         * Delegates the logic to `handleChange`.
+         * Delegates the logic to `handleChange`, unless the click comes from
+         * interactive content of the label, such as a link, left to act alone.
          *
          * @param event Mouse click event
          */
         handleClick(event) {
+            if (isFromInteractiveContent(event, this)) {
+                return;
+            }
             this.handleChange(event);
         }
         /**
@@ -153,7 +162,7 @@ export const CheckMixin = (superClass) => {
          * @private
          */
         handleKeydown(event) {
-            if (event.key === " ") {
+            if (event.key === " " && !isFromInteractiveContent(event, this)) {
                 event.preventDefault();
                 this.handleChange(event);
             }

package/dist/mixins/dialog-surface.mixin.d.ts

@@ -14,7 +14,7 @@ export declare class DialogSurfaceMixinInterface {
     protected beginSurfaceClosing(surface: HTMLElement | undefined): void;
     protected openDialogSurface(entry: DialogStackEntry): void;
     protected closeDialogSurface(fallbackFocusEl?: HTMLElement): void;
-    protected teardownDialogSurface(open: boolean): void;
+    protected teardownDialogSurface(): void;
 }
 /**
  * Where focus lands when a dialog surface opens. `auto` keeps each

package/dist/mixins/dialog-surface.mixin.js

@@ -128,18 +128,18 @@ export const DialogSurfaceMixin = (superClass) => {
          * Releases the scroll lock, pending close timer, and dialog stack entry
          * left behind if the surface was still open when disconnected — meant to
          * be called from each consumer's own `disconnectedCallback`, alongside
-         * whatever else it tears down.
+         * whatever else it tears down. The lock is tied to the dialog stack
+         * entry rather than to `open`, which already reads `false` while the
+         * exit transition plays, before the surface has actually closed.
          * @internal
          */
-        teardownDialogSurface(open) {
-            if (open) {
-                unlockScroll();
-            }
+        teardownDialogSurface() {
             if (this.closeTimer !== undefined) {
                 window.clearTimeout(this.closeTimer);
                 this.closeTimer = undefined;
             }
             if (this.dialogStackEntry) {
+                unlockScroll();
                 popDialog(this.dialogStackEntry);
                 this.dialogStackEntry = undefined;
             }

package/dist/mixins/form.mixin.js

@@ -19,6 +19,7 @@ import { html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { ChangeEvent } from "../events/change.event.js";
+import { focusFirstInvalid, isReportingValidity, watchSubmissions, } from "../utils/form-validation.utils.js";
 /**
  * Every property {@link FormMixinInterface.showError} depends on, for
  * components mirroring it outside their template (e.g. onto the host's
@@ -44,7 +45,7 @@ export const ERROR_DISPLAY_PROPERTIES = [
  */
 export const hasErrorDisplayChange = (changed) => ERROR_DISPLAY_PROPERTIES.some((name) => changed.has(name));
 export const FormMixin = (superClass) => {
-    var _FormMixinClass_instances, _FormMixinClass_fieldsetObserver, _FormMixinClass_markDirty, _FormMixinClass_markTouched, _FormMixinClass_markValidationRequested, _FormMixinClass_syncFieldsetHideError, _FormMixinClass_observeFieldsets;
+    var _FormMixinClass_instances, _FormMixinClass_fieldsetObserver, _FormMixinClass_markDirty, _FormMixinClass_markTouched, _FormMixinClass_handleInvalid, _FormMixinClass_syncFieldsetHideError, _FormMixinClass_observeFieldsets;
     class FormMixinClass extends superClass {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         constructor(...args) {
@@ -167,10 +168,30 @@ export const FormMixin = (superClass) => {
             });
             /**
              * Marks validation as requested when the form checks this field, which
-             * fires `invalid` on it.
+             * fires `invalid` on it. On a submit attempt or a `reportValidity()`
+             * call, also cancels the browser's own bubble when the error is already
+             * shown under the field, and moves focus to the first invalid field
+             * (this one, for its own `reportValidity()`), since the browser no
+             * longer does it once the event is canceled.
+             *
+             * @param event - The `invalid` event.
              */
-            _FormMixinClass_markValidationRequested.set(this, () => {
+            _FormMixinClass_handleInvalid.set(this, (event) => {
                 this.validationRequested = true;
+                const { form } = this;
+                const submitting = !!form && isReportingValidity(form);
+                if (!submitting && !isReportingValidity(this)) {
+                    return;
+                }
+                if (!this.errorsHidden) {
+                    event.preventDefault();
+                }
+                if (submitting) {
+                    focusFirstInvalid(form);
+                }
+                else {
+                    this.focus();
+                }
             });
             /**
              * Syncs {@link fieldsetHideError} with the ancestor fieldsets.
@@ -326,7 +347,8 @@ export const FormMixin = (superClass) => {
             this.checkValidity(this.value);
             this.addEventListener(ChangeEvent.eventName, __classPrivateFieldGet(this, _FormMixinClass_markDirty, "f"));
             this.addEventListener("focusout", __classPrivateFieldGet(this, _FormMixinClass_markTouched, "f"));
-            this.addEventListener("invalid", __classPrivateFieldGet(this, _FormMixinClass_markValidationRequested, "f"));
+            this.addEventListener("invalid", __classPrivateFieldGet(this, _FormMixinClass_handleInvalid, "f"));
+            watchSubmissions();
             __classPrivateFieldGet(this, _FormMixinClass_instances, "m", _FormMixinClass_observeFieldsets).call(this);
         }
         /**
@@ -337,7 +359,7 @@ export const FormMixin = (superClass) => {
         disconnectedCallback() {
             this.removeEventListener(ChangeEvent.eventName, __classPrivateFieldGet(this, _FormMixinClass_markDirty, "f"));
             this.removeEventListener("focusout", __classPrivateFieldGet(this, _FormMixinClass_markTouched, "f"));
-            this.removeEventListener("invalid", __classPrivateFieldGet(this, _FormMixinClass_markValidationRequested, "f"));
+            this.removeEventListener("invalid", __classPrivateFieldGet(this, _FormMixinClass_handleInvalid, "f"));
             __classPrivateFieldGet(this, _FormMixinClass_fieldsetObserver, "f")?.disconnect();
             __classPrivateFieldSet(this, _FormMixinClass_fieldsetObserver, undefined, "f");
             super.disconnectedCallback?.();
@@ -399,16 +421,14 @@ export const FormMixin = (superClass) => {
                 this.internals.setFormValue(formData);
                 return;
             }
-            if (Array.isArray(value)) {
+            if (this.checkable) {
+                formData.append(fieldName, value ? String(value) : "on");
+            }
+            else if (Array.isArray(value)) {
                 value.forEach((v) => formData.append(fieldName, v instanceof File ? v : String(v)));
             }
             else if (value !== null && value !== undefined) {
-                if (value instanceof File) {
-                    formData.append(fieldName, value);
-                }
-                else {
-                    formData.append(fieldName, this.checkable && !this.value ? "on" : String(value));
-                }
+                formData.append(fieldName, value instanceof File ? value : String(value));
             }
             this.internals.setFormValue(formData);
         }
@@ -483,7 +503,7 @@ export const FormMixin = (superClass) => {
       `;
         }
     }
-    _FormMixinClass_fieldsetObserver = new WeakMap(), _FormMixinClass_markDirty = new WeakMap(), _FormMixinClass_markTouched = new WeakMap(), _FormMixinClass_markValidationRequested = new WeakMap(), _FormMixinClass_syncFieldsetHideError = new WeakMap(), _FormMixinClass_instances = new WeakSet(), _FormMixinClass_observeFieldsets = function _FormMixinClass_observeFieldsets() {
+    _FormMixinClass_fieldsetObserver = new WeakMap(), _FormMixinClass_markDirty = new WeakMap(), _FormMixinClass_markTouched = new WeakMap(), _FormMixinClass_handleInvalid = new WeakMap(), _FormMixinClass_syncFieldsetHideError = new WeakMap(), _FormMixinClass_instances = new WeakSet(), _FormMixinClass_observeFieldsets = function _FormMixinClass_observeFieldsets() {
         __classPrivateFieldGet(this, _FormMixinClass_syncFieldsetHideError, "f").call(this);
         let fieldset = this.closest("fieldset");
         if (!fieldset || typeof MutationObserver === "undefined") {

package/dist/mixins/localizable.mixin.d.ts

@@ -6,6 +6,7 @@ import { Dictionary } from "../i18n/index.js";
  */
 export declare class LocalizableMixinInterface {
     locale?: string;
+    get resolvedLocale(): string;
     get dictionary(): Dictionary;
 }
 /**

package/dist/mixins/localizable.mixin.js

@@ -32,13 +32,20 @@ import { dictionaries, getDefaultLocale } from "../i18n/index.js";
  */
 export const LocalizableMixin = (superClass) => {
     class LocalizableMixinClass extends superClass {
+        /**
+         * This instance's own `locale` when set, the shared default locale
+         * otherwise. Used for `Intl` formatting, so dates and numbers follow
+         * the same locale as {@link dictionary}.
+         */
+        get resolvedLocale() {
+            return this.locale ?? getDefaultLocale();
+        }
         /**
          * This instance's locale-resolved string dictionary — see the class
          * doc for the resolution order.
          */
         get dictionary() {
-            const resolved = this.locale ?? getDefaultLocale();
-            return dictionaries[resolved] ?? dictionaries.en;
+            return dictionaries[this.resolvedLocale] ?? dictionaries.en;
         }
     }
     __decorate([

package/dist/mixins/radio.mixin.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { property } from "lit/decorators.js";
 import { hasErrorDisplayChange } from "./form.mixin.js";
 import { ChangeEvent } from "../events/change.event.js";
+import { isFromInteractiveContent } from "../utils/interactive-content.utils.js";
 /**
  * Mixin adding "radio selectable" behavior to a component.
  * It allows to maintain the checked state, handle the interactions, send
@@ -93,13 +94,17 @@ export const RadioMixin = (superClass) => {
          * native form `reset()` — overrides `FormMixin`'s own
          * `formResetCallback`, which unconditionally forces checkable fields
          * to `false` with no notion of a default checked state. Also resets
-         * `dirty`/`touched` itself, since it doesn't call `super` to reach
-         * `FormMixin`'s own reset of those two.
+         * `dirty`/`touched`/`validationRequested` itself, since it doesn't
+         * call `super` to reach `FormMixin`'s own reset of those. Leaves
+         * `checked` untouched when `controlled` is set, as `FormMixin` does.
          */
         formResetCallback() {
-            this.checked = this.defaultChecked ?? false;
+            if (!this.controlled) {
+                this.checked = this.defaultChecked ?? false;
+            }
             this.dirty = false;
             this.touched = false;
+            this.validationRequested = false;
         }
         /**
          * Lifecycle: Called when the component is disconnected from the DOM.
@@ -123,11 +128,15 @@ export const RadioMixin = (superClass) => {
         }
         /**
          * Handles click interactions.
-         * Delegates the logic to `handleChange`.
+         * Delegates the logic to `handleChange`, unless the click comes from
+         * interactive content of the label, such as a link, left to act alone.
          *
          * @param event Mouse click event
          */
         handleClick(event) {
+            if (isFromInteractiveContent(event, this)) {
+                return;
+            }
             this.handleChange(event);
         }
         /**
@@ -160,7 +169,7 @@ export const RadioMixin = (superClass) => {
          * @private
          */
         handleKeydown(event) {
-            if (event.key === " ") {
+            if (event.key === " " && !isFromInteractiveContent(event, this)) {
                 event.preventDefault();
                 this.handleChange(event);
             }

package/dist/mixins/validators.mixin.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { property, state } from "lit/decorators.js";
 import { dictionaries, getDefaultLocale } from "../i18n/index.js";
+import { reportingValidity } from "../utils/form-validation.utils.js";
 /**
  * Mixin that adds validation capabilities to a LitElement.
  *
@@ -116,12 +117,12 @@ export const ValidatorsMixin = (superClass) => {
                 message = errorMessages.join(" ; ");
             }
             this.valid = !Object.values(combinedValidity).some(Boolean);
-            const anchor = this.getFocusAnchor?.();
+            const anchor = this.getFocusAnchor?.() ?? undefined;
             if (this.valid || anchor || !this.getFocusAnchor) {
                 this.setValidity(combinedValidity, message, anchor);
             }
             else {
-                void this.updateComplete.then(() => this.setValidity(combinedValidity, message, anchor));
+                void this.updateComplete.then(() => this.setValidity(combinedValidity, message, this.getFocusAnchor?.() ?? undefined));
             }
             return this.valid;
         }
@@ -134,7 +135,7 @@ export const ValidatorsMixin = (superClass) => {
         reportValidity(valToCheck = this.getValueToValidate()) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.checkValidity(valToCheck);
-            return this.internals.reportValidity();
+            return reportingValidity(this, () => this.internals.reportValidity());
         }
         /**
          * Helper to collect error messages from a validator.

package/dist/react.d.ts

@@ -0,0 +1,59 @@
+/// <reference path="index.d.ts" />
+/**
+ * Sets an element's properties and event listeners from a React ref, the
+ * one place React 19 reliably reaches a server-rendered custom element:
+ * on hydration, React applies none of the props it gives a custom element
+ * (neither `events={...}` nor an `oneunchange={...}` listener), and only
+ * sets them on a later render whose value changed. A ref callback runs
+ * once the element is attached, hydrated or not, so
+ * `<eun-calendar ref={eunProps({ events, oneunperiodchange })}>` works the
+ * same in a server-rendered page and in a client-only one.
+ *
+ * Doesn't import React at runtime: a ref callback is a plain function,
+ * and `react`'s types only describe its shape here, as in jsx.ts. The
+ * triple-slash reference pulls in, as there, every component's types and
+ * the event map below, never their `customElements.define(...)`.
+ */
+import type { RefCallback } from "react";
+/**
+ * The event names the library dispatches, each one mapped to its event
+ * class by its own module's `GlobalEventHandlersEventMap` entry.
+ */
+type EunomiaEventName = Extract<keyof GlobalEventHandlersEventMap, `eun${string}` | "tabchange">;
+type EunomiaEventProps = {
+    [E in EunomiaEventName as `on${E}`]?: (event: GlobalEventHandlersEventMap[E]) => void;
+};
+type IfEquals<X, Y, A, B> = (<V>() => V extends X ? 1 : 2) extends <V>() => V extends Y ? 1 : 2 ? A : B;
+/**
+ * The element's own properties a script can assign: a getter-only one
+ * such as `visibleRange` would throw.
+ */
+type WritableOwnKeys<T> = {
+    [K in Exclude<keyof T, keyof HTMLElement>]-?: IfEquals<{
+        [P in K]: T[K];
+    }, {
+        -readonly [P in K]: T[K];
+    }, K, never>;
+}[Exclude<keyof T, keyof HTMLElement>];
+/**
+ * What {@link eunProps} accepts for an element: its writable properties,
+ * by their property name (`displayedDate`, not `displayed-date`), and a
+ * listener for any library event, as `on` followed by the event name.
+ */
+export type EunomiaRefProps<T extends HTMLElement> = {
+    [K in WritableOwnKeys<T>]?: T[K];
+} & EunomiaEventProps;
+/**
+ * Returns a ref callback assigning `props` to the element once React
+ * attaches it. A function under a key made of `on` and a lowercase event
+ * name (`oneunchange`) is added as a listener for that event, and removed
+ * when React detaches the element or renders a new callback, while every
+ * other key, `onClose` included, is assigned as a property. Before the
+ * element is defined, the assigned properties wait on the element and are
+ * applied when it upgrades.
+ *
+ * @param props the properties and listeners to set.
+ * @returns the ref callback to pass as the element's `ref`.
+ */
+export declare function eunProps<T extends HTMLElement>(props: EunomiaRefProps<T>): RefCallback<T>;
+export {};

package/dist/react.js

@@ -0,0 +1,42 @@
+/**
+ * Returns a ref callback assigning `props` to the element once React
+ * attaches it. A function under a key made of `on` and a lowercase event
+ * name (`oneunchange`) is added as a listener for that event, and removed
+ * when React detaches the element or renders a new callback, while every
+ * other key, `onClose` included, is assigned as a property. Before the
+ * element is defined, the assigned properties wait on the element and are
+ * applied when it upgrades.
+ *
+ * @param props the properties and listeners to set.
+ * @returns the ref callback to pass as the element's `ref`.
+ */
+export function eunProps(props) {
+    let removeListeners;
+    return (element) => {
+        // React 18 calls the callback with null instead of its cleanup
+        removeListeners?.();
+        removeListeners = undefined;
+        if (!element) {
+            return undefined;
+        }
+        const listeners = [];
+        for (const [key, value] of Object.entries(props)) {
+            const eventName = key.slice(2);
+            if (key.startsWith("on") &&
+                typeof value === "function" &&
+                eventName === eventName.toLowerCase()) {
+                element.addEventListener(eventName, value);
+                listeners.push([eventName, value]);
+            }
+            else {
+                element[key] = value;
+            }
+        }
+        removeListeners = () => {
+            for (const [eventName, listener] of listeners) {
+                element.removeEventListener(eventName, listener);
+            }
+        };
+        return removeListeners;
+    };
+}

package/dist/ssr/animate-ssr.css

@@ -33,6 +33,41 @@ eun-animate:not(:defined) {
   }
 }
 
+@media (scripting: enabled) and (width < 1024px) {
+  eun-animate[laptop-animation="none"]:not(:defined) {
+    opacity: 1;
+    transform: none;
+  }
+
+  eun-animate[laptop-animation="fade"]:not(:defined),
+  eun-animate[laptop-animation="faded-scroll-right"]:not(:defined),
+  eun-animate[laptop-animation="faded-scroll-left"]:not(:defined),
+  eun-animate[laptop-animation="faded-scroll-top"]:not(:defined),
+  eun-animate[laptop-animation="faded-scroll-bottom"]:not(:defined) {
+    opacity: 0;
+  }
+
+  eun-animate[laptop-animation="scroll-right"]:not(:defined),
+  eun-animate[laptop-animation="faded-scroll-right"]:not(:defined) {
+    transform: translateX(calc(-1 * var(--_distance)));
+  }
+
+  eun-animate[laptop-animation="scroll-left"]:not(:defined),
+  eun-animate[laptop-animation="faded-scroll-left"]:not(:defined) {
+    transform: translateX(var(--_distance));
+  }
+
+  eun-animate[laptop-animation="scroll-top"]:not(:defined),
+  eun-animate[laptop-animation="faded-scroll-top"]:not(:defined) {
+    transform: translateY(var(--_distance));
+  }
+
+  eun-animate[laptop-animation="scroll-bottom"]:not(:defined),
+  eun-animate[laptop-animation="faded-scroll-bottom"]:not(:defined) {
+    transform: translateY(calc(-1 * var(--_distance)));
+  }
+}
+
 @media (scripting: enabled) and (width < 768px) {
   eun-animate[tablet-animation="none"]:not(:defined) {
     opacity: 1;

package/dist/ssr/breadcrumb-ssr.css

@@ -14,7 +14,7 @@ eun-breadcrumb:not(:defined) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--breadcrumb-current-color, var(--eun-text-secondary, #484e61));
+  color: var(--breadcrumb-current-color, var(--eun-text-secondary, #666e8a));
   font-weight: var(--eun-font-weight-m, 500);
 }
 
@@ -28,7 +28,7 @@ eun-breadcrumb:not(:defined) {
   eun-breadcrumb:not(:defined) > a[aria-current="page"],
   eun-breadcrumb:not(:defined):not(:has(> [aria-current="page"])) > a:last-child
 ) {
-  color: var(--breadcrumb-current-color, var(--eun-text-secondary, #484e61));
+  color: var(--breadcrumb-current-color, var(--eun-text-secondary, #666e8a));
   font-weight: var(--eun-font-weight-m, 500);
   text-decoration: none;
 }
@@ -37,7 +37,7 @@ eun-breadcrumb:not(:defined) > :not(:last-child)::after {
   content: var(--breadcrumb-separator, "/");
   display: inline-block;
   margin-inline: var(--breadcrumb-separator-gap, var(--eun-space-s, 8px));
-  color: var(--breadcrumb-separator-color, var(--eun-text-secondary, #484e61));
+  color: var(--breadcrumb-separator-color, var(--eun-text-secondary, #666e8a));
   font-weight: var(--eun-font-weight-m, 500);
   text-decoration: none;
 }

package/dist/ssr/button-ssr.css

@@ -5,7 +5,7 @@
   --_tint: var(--eun-color-primary-alpha-20, #3d6fff33);
   --_fgTint: var(--_accent);
   --_flat: var(--eun-surface-sunken, #f7f8fa);
-  --_flatFg: var(--eun-text-secondary, #484e61);
+  --_flatFg: var(--eun-text-secondary, #666e8a);
 }
 :is(eun-button, eun-dropdown-button, eun-fab)[color="secondary"]:not(:defined) {
   --_solid: var(--eun-color-secondary-500, #e5a030);
@@ -170,7 +170,7 @@
 :is(eun-button, eun-dropdown-button)[appearance="ghost"]:not([color]):not(
     :defined
   ) {
-  --_accent: var(--eun-text-secondary, #484e61);
+  --_accent: var(--eun-text-secondary, #666e8a);
 }
 :is(eun-button, eun-dropdown-button)[appearance="raised"]:not(:defined) {
   --_bg: transparent;
@@ -281,6 +281,12 @@ eun-fab[disabled]:not(:defined) {
   box-shadow: none;
   cursor: not-allowed;
 }
+eun-fab[icon]:not(:has(> [slot="icon"])):not(:defined)::before {
+  content: "";
+  flex-shrink: 0;
+  width: var(--icon-size);
+  height: var(--icon-size);
+}
 :where(eun-fab:not(:defined) > [slot="icon"]) {
   display: inline-flex;
   align-items: center;

package/dist/ssr/card-ssr.css

@@ -145,7 +145,7 @@ eun-image-card:not(:defined) > :not([slot]) {
   font-size: var(--image-card-description-size, var(--eun-font-size-s, 14px));
   color: var(
     --image-card-description-color,
-    var(--eun-text-secondary, #484e61)
+    var(--eun-text-secondary, #666e8a)
   );
 }