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

package/dist/mixins/button.mixin.js

@@ -26,6 +26,13 @@ export const ButtonMixin = (superClass) => {
              * @default "button"
              */
             this.type = "button";
+            /**
+             * Keeps a `light` or `dark` button white or black in every theme.
+             * Without it, they follow the grey scale, which flips with the active
+             * theme. Has no effect on the other variants.
+             * @default false
+             */
+            this.fixedColor = false;
             /**
              * The button size.
              * @default "m"
@@ -152,6 +159,9 @@ export const ButtonMixin = (superClass) => {
     __decorate([
         property({ reflect: true })
     ], ButtonMixinClass.prototype, "variant", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true, attribute: "fixed-color" })
+    ], ButtonMixinClass.prototype, "fixedColor", void 0);
     __decorate([
         property({ reflect: true })
     ], ButtonMixinClass.prototype, "size", void 0);

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

@@ -21,4 +21,4 @@ export declare class CheckMixinInterface {
  * @template T A LitElement class extended with other mixins (Disabled, Readonly, Validators, Form).
  * @returns A class extending the provided superclass with checkable behavior.
  */
-export declare const CheckMixin: <T extends Constructor<LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<string>>>(superClass: T) => Constructor<CheckMixinInterface> & T;
+export declare const CheckMixin: <T extends Constructor<LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<unknown> & FormMixinInterface<string>>>(superClass: T) => Constructor<CheckMixinInterface> & T;

package/dist/mixins/check.mixin.js

@@ -73,10 +73,14 @@ export const CheckMixin = (superClass) => {
          * Resets `checked` to `defaultChecked` (or `false`, if never set) on a
          * native form `reset()` — overrides `FormMixin`'s own
          * `formResetCallback`, which unconditionally forces checkable fields
-         * to `false` with no notion of a default checked state.
+         * 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.
          */
         formResetCallback() {
             this.checked = this.defaultChecked ?? false;
+            this.dirty = false;
+            this.touched = false;
         }
         /**
          * Lifecycle: Called when the component is disconnected from the DOM.
@@ -140,7 +144,7 @@ export const CheckMixin = (superClass) => {
             else {
                 this.removeAttribute("aria-description");
             }
-            this.dispatchEvent(new ChangeEvent());
+            this.dispatchEvent(new ChangeEvent(this.checked));
         }
         /**
          * Handles keydown interactions.

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

@@ -29,4 +29,4 @@ export declare class EditableMixinInterface {
  * shape (e.g. `string` for a single-value field, `string[]` for a multi-value one).
  * @returns A class extending the provided superclass with editable behavior.
  */
-export declare const EditableMixin: <U, T extends Constructor<LitElement & DisabledMixinInterface & ValidatorsMixinInterface & FormMixinInterface<U>>>(superClass: T) => Constructor<EditableMixinInterface> & T;
+export declare const EditableMixin: <U, T extends Constructor<LitElement & DisabledMixinInterface & ValidatorsMixinInterface<unknown> & FormMixinInterface<U>>>(superClass: T) => Constructor<EditableMixinInterface> & T;

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

@@ -13,10 +13,16 @@ export declare class FormMixinInterface<T> {
     setFormValue(value?: T): void;
     renderDescription(): typeof nothing | TemplateResult;
     name?: string;
+    hint?: string;
     description?: string | string[] | undefined;
     valueState?: T;
     hideError?: boolean;
     form: HTMLFormElement | null;
+    dirty: boolean;
+    touched: boolean;
+    controlled: boolean;
+    get pristine(): boolean;
+    get untouched(): boolean;
     get value(): T;
     set value(value: T);
     get defaultValue(): T | undefined;
@@ -28,4 +34,6 @@ export declare class FormMixinInterface<T> {
  * @param superClass - Base class to extend.
  * @returns A class extending the provided base with form capabilities.
  */
-export declare const FormMixin: <T extends Constructor<LitElement & ValidatorsMixinInterface & DisabledMixinInterface>, U>(superClass: T) => Constructor<FormMixinInterface<U>> & T;
+type ValidatorsMixinShape = Omit<ValidatorsMixinInterface, "validators">;
+export declare const FormMixin: <T extends Constructor<LitElement & ValidatorsMixinShape & DisabledMixinInterface>, U>(superClass: T) => Constructor<FormMixinInterface<U>> & T;
+export {};

package/dist/mixins/form.mixin.js

@@ -4,17 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, nothing, } from "lit";
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+import { html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
-/**
- * Mixin that adds form-related behavior and value management.
- *
- * @template U - Type of the form field value.
- * @param superClass - Base class to extend.
- * @returns A class extending the provided base with form capabilities.
- */
+import { ChangeEvent } from "../events/change.event.js";
 export const FormMixin = (superClass) => {
+    var _FormMixinClass_markDirty, _FormMixinClass_markTouched;
     class FormMixinClass extends superClass {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         constructor(...args) {
@@ -36,11 +36,77 @@ export const FormMixin = (superClass) => {
              * @private
              */
             this.checked = false;
-            // Attach internals if not already done by ValidatorsMixin
+            /**
+             * Whether the value has changed since the field connected (or since the
+             * last reset). Derived from `eunchange`, the event every field's own
+             * user-interaction handler already dispatches (and only that: setting
+             * `.value`/`.defaultValue` from outside, as a controlled React field
+             * does on every render, never dispatches it), so a controlled field
+             * stays pristine across ordinary re-renders and only turns dirty from
+             * genuine user input.
+             * @default false
+             */
+            this.dirty = false;
+            /**
+             * Whether the field has lost focus at least once since it connected (or
+             * since the last reset).
+             * @default false
+             */
+            this.touched = false;
+            /**
+             * Opts this field out of the native reset algorithm's value wipe: when
+             * `true`, `formResetCallback` leaves `value`/`checked` untouched.
+             *
+             * Exists for consumers who drive `value` as a controlled React prop
+             * (or equivalent in another framework): a browser-native `form.reset()`
+             * cannot be observed by React's reconciler unless a prop actually
+             * changes, so a native input only "survives" a stray reset (e.g. the
+             * unconditional one `useActionState` triggers via `requestFormReset` on
+             * every `<form action={fn}>` submission, success or not) because
+             * react-dom force-resyncs its `.value` on every commit — a defense
+             * custom elements don't get. Setting `controlled` makes the field's own
+             * app state the sole source of truth for `value`: the app decides when
+             * to clear it, the same way it already decides what to display it as.
+             * @default false
+             */
+            this.controlled = false;
+            /**
+             * Marks the field dirty on its own `eunchange` — dispatched only from a
+             * genuine user-interaction handler, never from the `value`/`checked`
+             * setters themselves — so a re-render setting the same property from
+             * outside never flips this.
+             */
+            _FormMixinClass_markDirty.set(this, () => {
+                if (!this.dirty) {
+                    this.dirty = true;
+                }
+            });
+            /**
+             * Marks the field touched the first time focus leaves it.
+             */
+            _FormMixinClass_markTouched.set(this, () => {
+                if (!this.touched) {
+                    this.touched = true;
+                }
+            });
             if (!this.internals) {
                 this.internals = this.attachInternals();
             }
         }
+        /**
+         * Whether the value hasn't changed since the field connected (or since
+         * the last reset). The inverse of {@link dirty}.
+         */
+        get pristine() {
+            return !this.dirty;
+        }
+        /**
+         * Whether the field hasn't lost focus yet since it connected (or since
+         * the last reset). The inverse of {@link touched}.
+         */
+        get untouched() {
+            return !this.touched;
+        }
         /**
          * Gets the default value of the field.
          *
@@ -128,6 +194,17 @@ export const FormMixin = (superClass) => {
                 this.value = this.defaultValue;
             }
             this.checkValidity(this.value);
+            this.addEventListener(ChangeEvent.eventName, __classPrivateFieldGet(this, _FormMixinClass_markDirty, "f"));
+            this.addEventListener("focusout", __classPrivateFieldGet(this, _FormMixinClass_markTouched, "f"));
+        }
+        /**
+         * Lifecycle callback called when element is disconnected from the DOM.
+         * Removes the listeners driving {@link dirty} and {@link touched}.
+         */
+        disconnectedCallback() {
+            this.removeEventListener(ChangeEvent.eventName, __classPrivateFieldGet(this, _FormMixinClass_markDirty, "f"));
+            this.removeEventListener("focusout", __classPrivateFieldGet(this, _FormMixinClass_markTouched, "f"));
+            super.disconnectedCallback?.();
         }
         /**
          * LitElement lifecycle method called before update.
@@ -188,14 +265,23 @@ export const FormMixin = (superClass) => {
          * `value` attribute. Skipping the assignment there (as an earlier
          * version of this method did) left a typed-in value stuck after
          * `form.reset()`.
+         *
+         * Skips that assignment entirely when {@link controlled} is set: the
+         * consuming app owns `value` in that mode, so this callback only clears
+         * {@link dirty}/{@link touched}, leaving the value itself for the app
+         * to update (or not) on its own terms.
          */
         formResetCallback() {
-            if (this.checkable) {
-                this.checked = false;
-            }
-            else {
-                this.value = this.defaultValue;
+            if (!this.controlled) {
+                if (this.checkable) {
+                    this.checked = false;
+                }
+                else {
+                    this.value = this.defaultValue;
+                }
             }
+            this.dirty = false;
+            this.touched = false;
         }
         /**
          * Renders the description or error messages.
@@ -237,6 +323,7 @@ export const FormMixin = (superClass) => {
       `;
         }
     }
+    _FormMixinClass_markDirty = new WeakMap(), _FormMixinClass_markTouched = new WeakMap();
     FormMixinClass.formAssociated = true;
     __decorate([
         property({ reflect: true })
@@ -250,6 +337,15 @@ export const FormMixin = (superClass) => {
     __decorate([
         state()
     ], FormMixinClass.prototype, "valueState", void 0);
+    __decorate([
+        state()
+    ], FormMixinClass.prototype, "dirty", void 0);
+    __decorate([
+        state()
+    ], FormMixinClass.prototype, "touched", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], FormMixinClass.prototype, "controlled", void 0);
     __decorate([
         property({
             attribute: "default-value",

package/dist/mixins/overflow-navigation.mixin.js

@@ -77,9 +77,10 @@ export const NavigationOverflowMixin = (superClass) => {
         }
         /**
          * Determines if the scrollable element is currently overflowing.
+         * Overridable, for content that isn't all in the `navigation` slot.
          *
          * @returns true if on overflow, false otherwise.
-         * @private
+         * @protected
          */
         isOnOverflow() {
             const slot = this.shadowRoot?.querySelector('slot[name="navigation"]');

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

@@ -28,4 +28,4 @@ export declare class RadioMixinInterface {
  * @template T A LitElement class extended with other mixins (Disabled, Readonly, Validators, Form).
  * @returns A class extending the provided superclass with radio behavior.
  */
-export declare const RadioMixin: <T extends Constructor<LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<string>>>(superClass: T) => Constructor<RadioMixinInterface> & T;
+export declare const RadioMixin: <T extends Constructor<LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<unknown> & FormMixinInterface<string>>>(superClass: T) => Constructor<RadioMixinInterface> & T;

package/dist/mixins/radio.mixin.js

@@ -80,10 +80,14 @@ export const RadioMixin = (superClass) => {
          * Resets `checked` to `defaultChecked` (or `false`, if never set) on a
          * native form `reset()` — overrides `FormMixin`'s own
          * `formResetCallback`, which unconditionally forces checkable fields
-         * to `false` with no notion of a default checked state.
+         * 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.
          */
         formResetCallback() {
             this.checked = this.defaultChecked ?? false;
+            this.dirty = false;
+            this.touched = false;
         }
         /**
          * Lifecycle: Called when the component is disconnected from the DOM.
@@ -147,7 +151,7 @@ export const RadioMixin = (superClass) => {
             else {
                 this.removeAttribute("aria-description");
             }
-            this.dispatchEvent(new ChangeEvent());
+            this.dispatchEvent(new ChangeEvent(this.checked));
         }
         /**
          * Handles keydown interactions.

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

@@ -1,5 +1,5 @@
 import { LitElement } from "lit";
-import { Mutable } from "../types/form-validators.type.js";
+import { Mutable, Validators } from "../types/form-validators.type.js";
 import { Constructor } from "../utils/constructor.type.js";
 /**
  * Defines a Validity object.
@@ -11,8 +11,13 @@ export interface Validity {
 /**
  * Interface defining the contract for components using `ValidatorsMixin`.
  * Provides integration with the native form lifecycle,
+ *
+ * @template U Type of value being validated — same as the type parameter
+ * passed to `ValidatorsMixin` itself, kept in sync by hand at each call
+ * site since it can't be inferred from `ValidatorsMixin(superClass)`'s own
+ * single argument.
  */
-export declare class ValidatorsMixinInterface {
+export declare class ValidatorsMixinInterface<U = unknown> {
     checkLocalValidators: () => Validity;
     buildCommonValidators: () => Validity;
     checkValidity: (dataToCheck: any) => boolean;
@@ -21,6 +26,7 @@ export declare class ValidatorsMixinInterface {
     required: boolean;
     errorMessages: string[];
     validationMessage: string | string[];
+    validators?: Validators<U>[];
 }
 /**
  * Mixin that adds validation capabilities to a LitElement.
@@ -28,4 +34,4 @@ export declare class ValidatorsMixinInterface {
  * @template U Type of value being validated.
  * @param superClass Base class to extend.
  */
-export declare const ValidatorsMixin: <T extends Constructor<LitElement>, U>(superClass: T) => Constructor<ValidatorsMixinInterface> & T;
+export declare const ValidatorsMixin: <T extends Constructor<LitElement>, U>(superClass: T) => Constructor<ValidatorsMixinInterface<U>> & T;

package/dist/ssr/animate-ssr.css

@@ -0,0 +1,149 @@
+/**
+ * Optional light-DOM stylesheet for `<eun-animate>` in server-rendered
+ * pages (Next.js, or any framework/setup without Declarative Shadow DOM
+ * for Lit components). It closes the SSR flash described in the eun-animate
+ * documentation's Accessibility/SSR notes : server HTML has no Shadow DOM
+ * yet, so `<eun-animate>`'s own `:host([animation="fade"]) { opacity: 0 }`
+ * (and the other animation variants) can't apply until the element is
+ * upgraded client-side, meaning content renders visible first, then snaps
+ * hidden the instant the custom element registers, then fades back in.
+ *
+ * This stylesheet lives in the host document instead, applying the exact
+ * same starting state through `:not(:defined)`, which is true from first
+ * paint and stops matching permanently the moment the browser upgrades the
+ * element — handing off to the component's own Shadow DOM styles at
+ * exactly the point they take over, with no gap and no double transition.
+ *
+ * Usage — link it in the page `<head>`, alongside (not instead of)
+ * importing "@eunomia/elements/animate.js" :
+ *
+ *   <link
+ *     rel="stylesheet"
+ *     href="node_modules/@eunomia/elements/dist/ssr/animate-ssr.css"
+ *   />
+ *
+ * Requires every server-rendered `<eun-animate>` to write its `animation`
+ * attribute explicitly (even when it's the "fade" default), since that
+ * default only ever becomes an attribute once Lit initializes the
+ * property client-side — invisible to this stylesheet, or any plain CSS,
+ * before then :
+ *
+ *   <eun-animate animation="fade">...</eun-animate>
+ */
+
+eun-animate:not(:defined) {
+  --_distance: var(--animate-distance, 80px);
+}
+
+eun-animate[animation="fade"]:not(:defined),
+eun-animate[animation="faded-scroll-right"]:not(:defined),
+eun-animate[animation="faded-scroll-left"]:not(:defined),
+eun-animate[animation="faded-scroll-top"]:not(:defined),
+eun-animate[animation="faded-scroll-bottom"]:not(:defined) {
+  opacity: 0;
+}
+
+eun-animate[animation="scroll-right"]:not(:defined),
+eun-animate[animation="faded-scroll-right"]:not(:defined) {
+  transform: translateX(calc(-1 * var(--_distance)));
+}
+
+eun-animate[animation="scroll-left"]:not(:defined),
+eun-animate[animation="faded-scroll-left"]:not(:defined) {
+  transform: translateX(var(--_distance));
+}
+
+eun-animate[animation="scroll-top"]:not(:defined),
+eun-animate[animation="faded-scroll-top"]:not(:defined) {
+  transform: translateY(var(--_distance));
+}
+
+eun-animate[animation="scroll-bottom"]:not(:defined),
+eun-animate[animation="faded-scroll-bottom"]:not(:defined) {
+  transform: translateY(calc(-1 * var(--_distance)));
+}
+
+/**
+ * `tablet-animation`/`mobile-animation` overrides, mirroring the rules
+ * above and the same-named `@media` blocks in the component's own
+ * `animate.styles.ts` — kept in sync by hand, since this file has to
+ * duplicate the shadow DOM's styles for the light-DOM pre-hydration
+ * window regardless. Placed after the unscoped rules above so an
+ * equal-specificity tie (e.g. both `animation="fade"` and
+ * `tablet-animation="none"` set at once) resolves in the narrower
+ * breakpoint's favor, once its `@media` condition is true — same
+ * source-order reasoning as `animate.styles.ts`.
+ *
+ * `max-width` values match `EUNOMIA_BREAKPOINTS.tablet`/`.mobile`
+ * (`breakpoints.ts`) — hardcoded here since plain CSS can't read a JS
+ * constant.
+ */
+@media (max-width: 768px) {
+  eun-animate[tablet-animation="none"]:not(:defined) {
+    opacity: 1;
+    transform: none;
+  }
+
+  eun-animate[tablet-animation="fade"]:not(:defined),
+  eun-animate[tablet-animation="faded-scroll-right"]:not(:defined),
+  eun-animate[tablet-animation="faded-scroll-left"]:not(:defined),
+  eun-animate[tablet-animation="faded-scroll-top"]:not(:defined),
+  eun-animate[tablet-animation="faded-scroll-bottom"]:not(:defined) {
+    opacity: 0;
+  }
+
+  eun-animate[tablet-animation="scroll-right"]:not(:defined),
+  eun-animate[tablet-animation="faded-scroll-right"]:not(:defined) {
+    transform: translateX(calc(-1 * var(--_distance)));
+  }
+
+  eun-animate[tablet-animation="scroll-left"]:not(:defined),
+  eun-animate[tablet-animation="faded-scroll-left"]:not(:defined) {
+    transform: translateX(var(--_distance));
+  }
+
+  eun-animate[tablet-animation="scroll-top"]:not(:defined),
+  eun-animate[tablet-animation="faded-scroll-top"]:not(:defined) {
+    transform: translateY(var(--_distance));
+  }
+
+  eun-animate[tablet-animation="scroll-bottom"]:not(:defined),
+  eun-animate[tablet-animation="faded-scroll-bottom"]:not(:defined) {
+    transform: translateY(calc(-1 * var(--_distance)));
+  }
+}
+
+@media (max-width: 600px) {
+  eun-animate[mobile-animation="none"]:not(:defined) {
+    opacity: 1;
+    transform: none;
+  }
+
+  eun-animate[mobile-animation="fade"]:not(:defined),
+  eun-animate[mobile-animation="faded-scroll-right"]:not(:defined),
+  eun-animate[mobile-animation="faded-scroll-left"]:not(:defined),
+  eun-animate[mobile-animation="faded-scroll-top"]:not(:defined),
+  eun-animate[mobile-animation="faded-scroll-bottom"]:not(:defined) {
+    opacity: 0;
+  }
+
+  eun-animate[mobile-animation="scroll-right"]:not(:defined),
+  eun-animate[mobile-animation="faded-scroll-right"]:not(:defined) {
+    transform: translateX(calc(-1 * var(--_distance)));
+  }
+
+  eun-animate[mobile-animation="scroll-left"]:not(:defined),
+  eun-animate[mobile-animation="faded-scroll-left"]:not(:defined) {
+    transform: translateX(var(--_distance));
+  }
+
+  eun-animate[mobile-animation="scroll-top"]:not(:defined),
+  eun-animate[mobile-animation="faded-scroll-top"]:not(:defined) {
+    transform: translateY(var(--_distance));
+  }
+
+  eun-animate[mobile-animation="scroll-bottom"]:not(:defined),
+  eun-animate[mobile-animation="faded-scroll-bottom"]:not(:defined) {
+    transform: translateY(calc(-1 * var(--_distance)));
+  }
+}

package/dist/ssr/overlay-ssr.css

@@ -0,0 +1,57 @@
+/**
+ * Optional light-DOM stylesheet for server-rendered pages (Next.js, or
+ * any framework/setup without Declarative Shadow DOM for Lit
+ * components), covering every closed-by-default overlay/disclosure
+ * component in one file : `eun-collapse`, `eun-drawer`, `eun-modal`,
+ * `eun-dropdown-button`, and `eun-tooltip`. Each hides its own slotted
+ * content only through its own Shadow DOM (a `grid-template-rows: 0fr`
+ * panel for collapse, a `popover="manual"`/`popover="auto"` surface for
+ * the rest), which doesn't exist yet in server-rendered HTML. That
+ * content renders as plain, unstyled light-DOM children instead, on top
+ * of everything else on the page, until the element upgrades — the same
+ * SSR flash `animate-ssr.css`/`toolbar-ssr.css`/`sidebar-ssr.css`
+ * document for their own components, just for content that's meant to
+ * stay hidden until something opens it, rather than a starting animation
+ * state or a persistent, always-visible layout piece.
+ *
+ * This stylesheet lives in the host document instead, hiding that exact
+ * content through `:not(:defined)`, which is true from first paint and
+ * stops matching permanently the moment the browser upgrades the
+ * element — handing off to each component's own Shadow DOM at exactly
+ * the point it takes over, with no gap.
+ *
+ * Usage — link it in the page `<head>`, alongside (not instead of)
+ * importing whichever of these components the page actually uses :
+ *
+ *   <link
+ *     rel="stylesheet"
+ *     href="node_modules/@eunomia/elements/dist/ssr/overlay-ssr.css"
+ *   />
+ *
+ * `eun-drawer`/`eun-modal` are skipped whenever `open` is written
+ * explicitly in the server-rendered markup, so a dialog meant to be
+ * visible on first paint (a startup announcement, for instance) still
+ * renders — see the `open` attribute on the component's own doc page for
+ * the same requirement `animate-ssr.css` documents for `animation`, and
+ * `eun-collapse`'s own `open` attribute for the same reasoning there.
+ * `eun-dropdown-button`'s own trigger label (its default slot) and
+ * `eun-tooltip`'s own trigger (`slot="anchor"`) are never hidden, only
+ * their menu/panel content is.
+ */
+
+eun-collapse:not(:defined):not([open]) > :not([slot]) {
+  display: none;
+}
+
+eun-drawer:not(:defined):not([open]) > *,
+eun-modal:not(:defined):not([open]) > * {
+  display: none;
+}
+
+eun-dropdown-button:not(:defined) > [slot="items"] {
+  display: none;
+}
+
+eun-tooltip:not(:defined) > :not([slot="anchor"]) {
+  display: none;
+}

package/dist/ssr/sidebar-ssr.css

@@ -0,0 +1,57 @@
+/**
+ * Optional light-DOM stylesheet for `<eun-sidebar>` in server-rendered
+ * pages (Next.js, or any framework/setup without Declarative Shadow DOM
+ * for Lit components). Closes the same SSR flash described in
+ * eun-toolbar's own SSR notes (see `toolbar-ssr.css`), but here it hits
+ * every instance, not just a mobile-only panel : `display: flex` and the
+ * sidebar's own width live in eun-sidebar's Shadow DOM, which doesn't
+ * exist yet in server-rendered HTML. An unregistered custom element
+ * defaults to `display: inline` with no layout of its own, so a
+ * server-rendered sidebar renders as a plain run of unstyled inline
+ * content (header, body, footer flowing one after another) first, then
+ * snaps into a proper flex column the instant the element upgrades. A
+ * sidebar meant to start `collapsed` (mini or fully hidden) makes this
+ * worse : that state lives in the same Shadow DOM too, so it renders at
+ * full width first, then shrinks down on upgrade instead of the other
+ * way around.
+ *
+ * This stylesheet lives in the host document instead, mirroring
+ * eun-sidebar's own resting layout through `:not(:defined)`, which is
+ * true from first paint and stops matching permanently the moment the
+ * browser upgrades the element — handing off to eun-sidebar's own Shadow
+ * DOM styles at exactly the point they take over, with no gap.
+ *
+ * Usage — link it in the page `<head>`, alongside (not instead of)
+ * importing "@eunomia/elements/sidebar.js" :
+ *
+ *   <link
+ *     rel="stylesheet"
+ *     href="node_modules/@eunomia/elements/dist/ssr/sidebar-ssr.css"
+ *   />
+ *
+ * `collapsed`/`collapse-mode`/`dragged-hidden` only take effect here when
+ * written explicitly in the server-rendered markup, same requirement
+ * `animate-ssr.css` documents for `animation` :
+ *
+ *   <eun-sidebar collapsed collapse-mode="mini">...</eun-sidebar>
+ */
+
+eun-sidebar:not(:defined) {
+  display: flex;
+  position: sticky;
+  top: 0;
+  flex-shrink: 0;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  width: var(--sidebar-width, 280px);
+}
+
+eun-sidebar[collapsed][collapse-mode="mini"]:not(:defined) {
+  width: var(--sidebar-mini-width, 64px);
+}
+
+eun-sidebar[collapsed][collapse-mode="hidden"]:not(:defined),
+eun-sidebar[dragged-hidden]:not(:defined) {
+  width: 0px;
+}

package/dist/ssr/toolbar-ssr.css

@@ -0,0 +1,41 @@
+/**
+ * Optional light-DOM stylesheet for `<eun-toolbar>` in server-rendered
+ * pages (Next.js, or any framework/setup without Declarative Shadow DOM
+ * for Lit components). It closes the SSR flash described in the
+ * eun-toolbar documentation's Server-side rendering notes : the default
+ * slot (the mobile panel's own content, everything slotted in without a
+ * `slot` attribute) is only ever hidden by eun-toolbar's own Shadow DOM,
+ * either tucked inside a closed native popover once the element is
+ * upgraded and `mobile` is true, or simply never projected anywhere once
+ * upgraded and it's false. Server-rendered HTML has no Shadow DOM yet,
+ * so that content renders as plain, unstyled light-DOM children instead —
+ * visible, unpositioned, and often full-width/height, on top of
+ * everything else on the page, until the element upgrades.
+ *
+ * This stylesheet lives in the host document instead, hiding that exact
+ * content through `:not(:defined)`, which is true from first paint and
+ * stops matching permanently the moment the browser upgrades the
+ * element — handing off to eun-toolbar's own Shadow DOM at exactly the
+ * point it takes over, with no gap. Safe regardless of viewport : the
+ * content stays exactly as hidden post-upgrade whether `mobile` ends up
+ * true (closed popover) or false (never rendered at all), so this never
+ * has to guess at the breakpoint.
+ *
+ * Usage — link it in the page `<head>`, alongside (not instead of)
+ * importing "@eunomia/elements/toolbar.js" :
+ *
+ *   <link
+ *     rel="stylesheet"
+ *     href="node_modules/@eunomia/elements/dist/ssr/toolbar-ssr.css"
+ *   />
+ *
+ * The `start`/`center`/`end` slots aren't covered here : that content is
+ * meant to stay visible (and stay part of LCP) before upgrade too, same
+ * as after, so hiding it isn't this stylesheet's job. Style its own
+ * pre-upgrade layout, if needed, directly with `eun-toolbar:not(:defined)`
+ * in the host page's own CSS.
+ */
+
+eun-toolbar:not(:defined) > :not([slot]) {
+  display: none;
+}