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

package/dist/components/navigation/toolbar/toolbar.js

@@ -4,7 +4,7 @@ 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 { customElement, property, query } from "lit/decorators.js";
+import { customElement, property, query, queryAssignedElements, } from "lit/decorators.js";
 import { html, LitElement, nothing } from "lit";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { handleLinkNavigation } from "../../../utils/navigation.utils.js";
@@ -53,6 +53,8 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * everything behind it, including the logo and any other bar content;
  * the burger is the only thing that stays visible in front of it.
  *
+ * @slot [menu-icon] - Replaces the burger's default open icon (an `eun-icon name="menu"`) with any content, shown while the panel is closed. Useful wherever `eun-icon`'s own dynamic SVG resolution doesn't fit, e.g. some bundler setups
+ * @slot [close-icon] - Replaces the burger's default close icon (an `eun-icon name="close"`) with any content, shown while the panel is open. See `menu-icon` above
  * @slot start - Left-side content, rendered after a logo image linking to logoHref whenever logoSrc is set
  * @slot center - Center content, truly centered independently of the start and end widths
  * @slot end - Right-side content
@@ -134,6 +136,7 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @cssprop [--toolbar-skip-links-background] - Sets the background of the skip-links bar, defaulting to a darker mix of the bar's own background
  * @cssprop [--toolbar-skip-links-color] - Sets the text color of the skip-links bar
  * @cssprop [--toolbar-skip-links-separator-color] - Sets the color of the divider drawn between skip links
+ * @cssprop [--toolbar-skip-links-gap] - Sets the gap between skip links, with the divider centered in it
  * @element eun-toolbar
  */
 let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement) {
@@ -256,6 +259,14 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
          * @internal
          */
         this.mobile = false;
+        /**
+         * Re-renders once a `menu-icon`/`close-icon` slot's content changes, so
+         * the default `eun-icon` fallback correctly appears/disappears.
+         * @private
+         */
+        this.handleIconSlotChange = () => {
+            this.requestUpdate();
+        };
         /**
          * The element (or `window`) {@link handleScroll} is currently listening
          * on, resolved from `scrollTarget`.
@@ -834,6 +845,11 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
      * @private
      */
     renderBurger() {
+        const slotName = this.open ? "close-icon" : "menu-icon";
+        const iconName = this.open ? "close" : "menu";
+        const hasSlotted = this.open
+            ? this.closeIconSlotEls.length
+            : this.menuIconSlotEls.length;
         return html `
       <eun-button
         id="burger"
@@ -846,7 +862,11 @@ let EunomiaToolbar = class EunomiaToolbar extends DialogSurfaceMixin(LitElement)
             : this.ariaLabelMenuOpen}
         @click=${() => this.toggle()}
       >
-        <eun-icon name=${this.open ? "close" : "menu"} size="20"></eun-icon>
+        <slot name=${slotName} @slotchange=${this.handleIconSlotChange}>
+          ${hasSlotted
+            ? nothing
+            : html `<eun-icon name=${iconName} size="20"></eun-icon>`}
+        </slot>
       </eun-button>
     `;
     }
@@ -996,6 +1016,12 @@ __decorate([
 __decorate([
     query("#burger")
 ], EunomiaToolbar.prototype, "burgerEl", void 0);
+__decorate([
+    queryAssignedElements({ slot: "menu-icon" })
+], EunomiaToolbar.prototype, "menuIconSlotEls", void 0);
+__decorate([
+    queryAssignedElements({ slot: "close-icon" })
+], EunomiaToolbar.prototype, "closeIconSlotEls", void 0);
 EunomiaToolbar = __decorate([
     customElement(EunomiaToolbarTagName)
 ], EunomiaToolbar);

package/dist/components/navigation/toolbar/toolbar.styles.js

@@ -32,6 +32,7 @@ import { css } from "lit";
  * [--toolbar-skip-links-background] - Set a custom background for the skip-links bar, default a darker mix of the bar's own background
  * [--toolbar-skip-links-color] - Set a custom text color for the skip-links bar
  * [--toolbar-skip-links-separator-color] - Set a custom color for the divider drawn between skip links
+ * [--toolbar-skip-links-gap] - Set a custom gap between skip links, with the divider centered in it
  */
 const base = css `
   :host {
@@ -79,6 +80,7 @@ const base = css `
       color-mix(in srgb, var(--_skipLinksBase) 82%, black 18%)
     );
     --_skipLinksColor: var(--toolbar-skip-links-color, #fff);
+    --_skipLinksGap: var(--toolbar-skip-links-gap, var(--eun-space-m, 16px));
     --_skipLinksSeparatorColor: var(
       --toolbar-skip-links-separator-color,
       color-mix(in srgb, var(--_skipLinksColor) 50%, transparent)
@@ -201,7 +203,7 @@ const base = css `
     z-index: calc(var(--_zIndex) + 2);
     display: flex;
     align-items: center;
-    gap: var(--eun-space-m);
+    gap: var(--_skipLinksGap);
     overflow: hidden;
     height: var(--_skipLinksHeight);
     padding-inline: var(--eun-space-m);
@@ -253,13 +255,12 @@ const base = css `
   #skip-links ::slotted(a:not(:first-child)),
   #skip-links ::slotted(eun-link:not(:first-child)) {
     position: relative;
-    padding-inline-start: var(--eun-space-s);
   }
   #skip-links ::slotted(a:not(:first-child))::before,
   #skip-links ::slotted(eun-link:not(:first-child))::before {
     content: "";
     position: absolute;
-    inset-inline-start: 0;
+    inset-inline-start: calc(var(--_skipLinksGap) / -2);
     inset-block: 0;
     width: 1px;
     background: var(--_skipLinksSeparatorColor);

package/dist/events/change.event.d.ts

@@ -11,7 +11,19 @@ export declare class ChangeEvent<T = unknown> extends Event {
      * Declaration of the element that dispatches the event.
      */
     target: LitElement & FormMixinInterface<T>;
-    constructor();
+    /**
+     * The new value (or `checked` state, for a checkable field) at the
+     * moment this event was dispatched — the same one already readable from
+     * `event.target.value`/`.checked`, exposed directly on the event too so
+     * a listener attached higher up the tree (delegation on a `<form>`, for
+     * instance) can read it as `event.value` without narrowing
+     * `event.target`'s type itself. `undefined` for a dispatcher with no
+     * single value of its own (toolbar, sidebar, collapse still only ever
+     * construct this with no argument, reporting their own state through
+     * `event.target` instead, same as before).
+     */
+    readonly value: T;
+    constructor(value?: T);
 }
 declare global {
     interface GlobalEventHandlersEventMap {

package/dist/events/change.event.js

@@ -1,6 +1,7 @@
 export class ChangeEvent extends Event {
-    constructor() {
+    constructor(value) {
         super(ChangeEvent.eventName, { bubbles: true, composed: false });
+        this.value = value;
     }
 }
 /**

package/dist/index.d.ts

@@ -15,7 +15,7 @@ export { EunomiaToggleItem, EunomiaToggleItemTagName, } from "./components/actio
 export { EunomiaToggleGroup, EunomiaToggleGroupTagName, } from "./components/action/toggle/toggle-group.js";
 export type { EunomiaToggleGroupOption, EunomiaToggleGroupAppearance, } from "./components/action/toggle/toggle-group.js";
 export { EunomiaLink, EunomiaLinkTagName, } from "./components/action/link/link.js";
-export { EunomiaIcon, EunomiaIconTagName, } from "./components/content/icon/icon.js";
+export { EunomiaIcon, EunomiaIconTagName, setIconBaseUrl, } from "./components/content/icon/icon.js";
 export type { EunomiaIconName, EunomiaIconType, } from "./components/content/icon/icon.type.js";
 export { EunomiaTag, EunomiaTagTagName } from "./components/content/tag/tag.js";
 export { EunomiaChip, EunomiaChipTagName, } from "./components/content/chip/chip.js";

package/dist/index.js

@@ -39,7 +39,7 @@ export { EunomiaToggle, EunomiaToggleTagName, } from "./components/action/toggle
 export { EunomiaToggleItem, EunomiaToggleItemTagName, } from "./components/action/toggle/toggle-item.js";
 export { EunomiaToggleGroup, EunomiaToggleGroupTagName, } from "./components/action/toggle/toggle-group.js";
 export { EunomiaLink, EunomiaLinkTagName, } from "./components/action/link/link.js";
-export { EunomiaIcon, EunomiaIconTagName, } from "./components/content/icon/icon.js";
+export { EunomiaIcon, EunomiaIconTagName, setIconBaseUrl, } from "./components/content/icon/icon.js";
 export { EunomiaTag, EunomiaTagTagName } from "./components/content/tag/tag.js";
 export { EunomiaChip, EunomiaChipTagName, } from "./components/content/chip/chip.js";
 export { EunomiaBadge, EunomiaBadgeTagName, } from "./components/content/badge/badge.js";

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/form.mixin.d.ts

@@ -17,6 +17,10 @@ export declare class FormMixinInterface<T> {
     valueState?: T;
     hideError?: boolean;
     form: HTMLFormElement | null;
+    dirty: boolean;
+    touched: boolean;
+    get pristine(): boolean;
+    get untouched(): boolean;
     get value(): T;
     set value(value: T);
     get defaultValue(): T | undefined;

package/dist/mixins/form.mixin.js

@@ -4,9 +4,15 @@ 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";
+import { ChangeEvent } from "../events/change.event.js";
 /**
  * Mixin that adds form-related behavior and value management.
  *
@@ -15,6 +21,7 @@ import { when } from "lit/directives/when.js";
  * @returns A class extending the provided base with form capabilities.
  */
 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 +43,60 @@ 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;
+            /**
+             * 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 +184,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.
@@ -196,6 +263,8 @@ export const FormMixin = (superClass) => {
             else {
                 this.value = this.defaultValue;
             }
+            this.dirty = false;
+            this.touched = false;
         }
         /**
          * Renders the description or error messages.
@@ -237,6 +306,7 @@ export const FormMixin = (superClass) => {
       `;
         }
     }
+    _FormMixinClass_markDirty = new WeakMap(), _FormMixinClass_markTouched = new WeakMap();
     FormMixinClass.formAssociated = true;
     __decorate([
         property({ reflect: true })
@@ -250,6 +320,12 @@ 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({
             attribute: "default-value",

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/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;
+}