@eunomia/elements 1.0.0-beta.9 → 1.0.0

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

@@ -22,14 +22,17 @@ export type EunomiaAnimateAnimation = "none" | "fade" | "scroll-right" | "scroll
  * @prop {EunomiaAnimateAnimation} [animation='fade'] - Which transition to apply. None renders the content immediately, with no transition
  * @prop {number} [duration=1000] - The transition duration, in milliseconds. Left unset, it follows --animate-duration
  * @prop {number} [delay=0] - The transition delay, in milliseconds
- * @prop {number} [tabletDelay] - Overrides `delay` below the tablet breakpoint (width < 768px)
- * @attr {number} [tablet-delay] - Overrides `delay` below the tablet breakpoint (width < 768px)
+ * @prop {number} [laptopDelay] - Overrides `delay` below the laptop breakpoint (width < 1024px)
+ * @attr {number} [laptop-delay] - Overrides `delay` below the laptop breakpoint (width < 1024px)
+ * @prop {number} [tabletDelay] - Overrides `delay` (and `laptopDelay`, if also set) below the tablet breakpoint (width < 768px)
+ * @attr {number} [tablet-delay] - Overrides `delay` (and `laptopDelay`, if also set) below the tablet breakpoint (width < 768px)
  * @prop {number} [mobileDelay] - Overrides `delay` (and `tabletDelay`, if also set) below the mobile breakpoint (width < 600px)
  * @attr {number} [mobile-delay] - Overrides `delay` (and `tabletDelay`, if also set) below the mobile breakpoint (width < 600px)
- * @prop {boolean} [once=true] - Whether the animation plays only the first time it enters the viewport, or replays every time it re-enters
+ * @prop {boolean} [once=false] - 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` below the tablet breakpoint (width < 768px). Left unset, the viewport keeps using `animation`
+ * @prop {EunomiaAnimateAnimation} [laptopAnimation] - Overrides `animation` below the laptop breakpoint (width < 1024px). Left unset, the viewport keeps using `animation`
+ * @prop {EunomiaAnimateAnimation} [tabletAnimation] - Overrides `animation` (and `laptopAnimation`, if also set) below the tablet breakpoint (width < 768px)
  * @prop {EunomiaAnimateAnimation} [mobileAnimation] - Overrides `animation` (and `tabletAnimation`, if also set) below the mobile breakpoint (width < 600px)
  * @cssprop [--animate-distance] - Sets the travel distance for the scroll and faded-scroll animations
  * @cssprop [--animate-duration=1000ms] - Sets the transition duration of every animate that has no duration of its own, for example once for the whole site
@@ -63,9 +66,16 @@ export declare class EunomiaAnimate extends LitElement {
      */
     delay: number;
     /**
-     * Overrides `delay` at tablet-width viewports and narrower, with the same
-     * `@media` switch as {@link tabletAnimation}. A stagger between cards in
-     * a desktop grid, for example, makes no sense once they're stacked.
+     * Overrides `delay` at laptop-width viewports and narrower, with the same
+     * `@media` switch as {@link laptopAnimation}.
+     * @default undefined
+     */
+    laptopDelay?: number;
+    /**
+     * Overrides `delay` (and `laptopDelay`, if also set) at tablet-width
+     * viewports and narrower, with the same `@media` switch as
+     * {@link tabletAnimation}. A stagger between cards in a desktop grid, for
+     * example, makes no sense once they're stacked.
      * @default undefined
      */
     tabletDelay?: number;
@@ -79,7 +89,7 @@ export declare class EunomiaAnimate extends LitElement {
     /**
      * Whether the animation plays only the first time it enters the
      * viewport (unobserved right after), or replays every time it re-enters.
-     * @default true
+     * @default false
      */
     once: boolean;
     /**
@@ -95,8 +105,8 @@ export declare class EunomiaAnimate extends LitElement {
      */
     rootMargin: string;
     /**
-     * Overrides `animation` below the tablet breakpoint
-     * (`mediaBelow("tablet")`, `width < 768px`). Purely a
+     * Overrides `animation` below the laptop breakpoint
+     * (`mediaBelow("laptop")`, `width < 1024px`). 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
@@ -105,12 +115,20 @@ export declare class EunomiaAnimate extends LitElement {
      * keeps using `animation`.
      * @default undefined
      */
+    laptopAnimation?: EunomiaAnimateAnimation;
+    /**
+     * Overrides `animation` (and `laptopAnimation`, if also set)
+     * below the tablet breakpoint (`mediaBelow("tablet")`,
+     * `width < 768px`). Same pure-CSS mechanism as
+     * {@link laptopAnimation}.
+     * @default undefined
+     */
     tabletAnimation?: EunomiaAnimateAnimation;
     /**
      * Overrides `animation` (and `tabletAnimation`, if also set)
      * below the mobile breakpoint (`mediaBelow("mobile")`,
      * `width < 600px`). Same pure-CSS mechanism as
-     * {@link tabletAnimation}.
+     * {@link laptopAnimation}.
      * @default undefined
      */
     mobileAnimation?: EunomiaAnimateAnimation;
@@ -122,13 +140,13 @@ export declare class EunomiaAnimate extends LitElement {
      */
     private observer?;
     /**
-     * Whether at least one of `animation`, `tabletAnimation`, or
-     * `mobileAnimation` is set to something other than `"none"` — i.e.
+     * Whether at least one of `animation`, `laptopAnimation`,
+     * `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
+     * ignores the current viewport width itself: which of the four ends up
      * active is a CSS `@media` decision, not something this component reads
-     * from JS (see {@link tabletAnimation}).
+     * from JS (see {@link laptopAnimation}).
      * @private
      */
     private get hasAnyAnimation();
@@ -154,8 +172,8 @@ export declare class EunomiaAnimate extends LitElement {
      * host's transition through a shadow-internal `<style>`, only when they
      * differ from the stylesheet's own defaults : an inline style on the host
      * would be a hydration mismatch for an SSR framework, since the server
-     * never renders it. The breakpoints match {@link tabletAnimation} and
-     * {@link mobileAnimation}.
+     * never renders it. The breakpoints match {@link laptopAnimation},
+     * {@link tabletAnimation} and {@link mobileAnimation}.
      * @private
      */
     private renderTiming;

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

@@ -8,7 +8,6 @@ import { customElement, property } from "lit/decorators.js";
 import { html, LitElement, nothing } from "lit";
 import { animateStyles } from "./animate.styles.js";
 import { mediaBelow } from "../../../breakpoints.js";
-import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the animate component.
  */
@@ -35,14 +34,17 @@ const IN_VIEW_ATTR = "in-view";
  * @prop {EunomiaAnimateAnimation} [animation='fade'] - Which transition to apply. None renders the content immediately, with no transition
  * @prop {number} [duration=1000] - The transition duration, in milliseconds. Left unset, it follows --animate-duration
  * @prop {number} [delay=0] - The transition delay, in milliseconds
- * @prop {number} [tabletDelay] - Overrides `delay` below the tablet breakpoint (width < 768px)
- * @attr {number} [tablet-delay] - Overrides `delay` below the tablet breakpoint (width < 768px)
+ * @prop {number} [laptopDelay] - Overrides `delay` below the laptop breakpoint (width < 1024px)
+ * @attr {number} [laptop-delay] - Overrides `delay` below the laptop breakpoint (width < 1024px)
+ * @prop {number} [tabletDelay] - Overrides `delay` (and `laptopDelay`, if also set) below the tablet breakpoint (width < 768px)
+ * @attr {number} [tablet-delay] - Overrides `delay` (and `laptopDelay`, if also set) below the tablet breakpoint (width < 768px)
  * @prop {number} [mobileDelay] - Overrides `delay` (and `tabletDelay`, if also set) below the mobile breakpoint (width < 600px)
  * @attr {number} [mobile-delay] - Overrides `delay` (and `tabletDelay`, if also set) below the mobile breakpoint (width < 600px)
- * @prop {boolean} [once=true] - Whether the animation plays only the first time it enters the viewport, or replays every time it re-enters
+ * @prop {boolean} [once=false] - 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` below the tablet breakpoint (width < 768px). Left unset, the viewport keeps using `animation`
+ * @prop {EunomiaAnimateAnimation} [laptopAnimation] - Overrides `animation` below the laptop breakpoint (width < 1024px). Left unset, the viewport keeps using `animation`
+ * @prop {EunomiaAnimateAnimation} [tabletAnimation] - Overrides `animation` (and `laptopAnimation`, if also set) below the tablet breakpoint (width < 768px)
  * @prop {EunomiaAnimateAnimation} [mobileAnimation] - Overrides `animation` (and `tabletAnimation`, if also set) below the mobile breakpoint (width < 600px)
  * @cssprop [--animate-distance] - Sets the travel distance for the scroll and faded-scroll animations
  * @cssprop [--animate-duration=1000ms] - Sets the transition duration of every animate that has no duration of its own, for example once for the whole site
@@ -66,9 +68,9 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
         /**
          * Whether the animation plays only the first time it enters the
          * viewport (unobserved right after), or replays every time it re-enters.
-         * @default true
+         * @default false
          */
-        this.once = true;
+        this.once = false;
         /**
          * Ratio (0-1) of the element that must be visible before the animation
          * triggers.
@@ -83,17 +85,18 @@ 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 at least one of `animation`, `laptopAnimation`,
+     * `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
+     * ignores the current viewport width itself: which of the four ends up
      * active is a CSS `@media` decision, not something this component reads
-     * from JS (see {@link tabletAnimation}).
+     * from JS (see {@link laptopAnimation}).
      * @private
      */
     get hasAnyAnimation() {
         return (this.animation !== "none" ||
+            (this.laptopAnimation !== undefined && this.laptopAnimation !== "none") ||
             (this.tabletAnimation !== undefined && this.tabletAnimation !== "none") ||
             (this.mobileAnimation !== undefined && this.mobileAnimation !== "none"));
     }
@@ -109,6 +112,7 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
         super.updated(changed);
         if (this.isConnected &&
             (changed.has("animation") ||
+                changed.has("laptopAnimation") ||
                 changed.has("tabletAnimation") ||
                 changed.has("mobileAnimation") ||
                 changed.has("threshold") ||
@@ -156,8 +160,8 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
      * host's transition through a shadow-internal `<style>`, only when they
      * differ from the stylesheet's own defaults : an inline style on the host
      * would be a hydration mismatch for an SSR framework, since the server
-     * never renders it. The breakpoints match {@link tabletAnimation} and
-     * {@link mobileAnimation}.
+     * never renders it. The breakpoints match {@link laptopAnimation},
+     * {@link tabletAnimation} and {@link mobileAnimation}.
      * @private
      */
     renderTiming() {
@@ -169,6 +173,9 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
         ].join("");
         const rules = [
             host ? `:host { ${host} }` : "",
+            this.laptopDelay !== undefined
+                ? `@media ${mediaBelow("laptop")} { :host { --_delay: ${Number(this.laptopDelay)}ms; } }`
+                : "",
             this.tabletDelay !== undefined
                 ? `@media ${mediaBelow("tablet")} { :host { --_delay: ${Number(this.tabletDelay)}ms; } }`
                 : "",
@@ -203,6 +210,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], EunomiaAnimate.prototype, "delay", void 0);
+__decorate([
+    property({ type: Number, attribute: "laptop-delay" })
+], EunomiaAnimate.prototype, "laptopDelay", void 0);
 __decorate([
     property({ type: Number, attribute: "tablet-delay" })
 ], EunomiaAnimate.prototype, "tabletDelay", void 0);
@@ -210,7 +220,7 @@ __decorate([
     property({ type: Number, attribute: "mobile-delay" })
 ], EunomiaAnimate.prototype, "mobileDelay", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter })
+    property({ type: Boolean })
 ], EunomiaAnimate.prototype, "once", void 0);
 __decorate([
     property({ type: Number })
@@ -218,6 +228,9 @@ __decorate([
 __decorate([
     property({ attribute: "root-margin" })
 ], EunomiaAnimate.prototype, "rootMargin", void 0);
+__decorate([
+    property({ attribute: "laptop-animation", reflect: true })
+], EunomiaAnimate.prototype, "laptopAnimation", void 0);
 __decorate([
     property({ attribute: "tablet-animation", reflect: true })
 ], EunomiaAnimate.prototype, "tabletAnimation", void 0);

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

@@ -1 +1,2 @@
-export declare const animateStyles: import("lit").CSSResult[];
+import { CSSResult } from "lit";
+export declare const animateStyles: CSSResult[];

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

@@ -1,4 +1,4 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
 import { cssBelow } from "../../../utils/media.styles.js";
 /**
  * Base style for the animate component.
@@ -106,181 +106,109 @@ const base = css `
     }
   }
 `;
-const breakpoints = css `
-  @media ${cssBelow("tablet")} {
-    :host([tablet-animation="none"]) {
-      opacity: 1;
-      transform: none;
-      transition-property: none;
-    }
-
-    :host([tablet-animation="fade"]) {
-      opacity: 0;
-      transition-property: opacity;
-    }
-    :host([tablet-animation="fade"][in-view]) {
-      opacity: 1;
-    }
-
-    :host([tablet-animation="scroll-right"]) {
-      transform: translateX(calc(-1 * var(--_distance)));
-      transition-property: transform;
-    }
-    :host([tablet-animation="scroll-right"][in-view]) {
-      transform: translateX(0);
-    }
-
-    :host([tablet-animation="scroll-left"]) {
-      transform: translateX(var(--_distance));
-      transition-property: transform;
-    }
-    :host([tablet-animation="scroll-left"][in-view]) {
-      transform: translateX(0);
-    }
-
-    :host([tablet-animation="scroll-top"]) {
-      transform: translateY(var(--_distance));
-      transition-property: transform;
-    }
-    :host([tablet-animation="scroll-top"][in-view]) {
-      transform: translateY(0);
-    }
-
-    :host([tablet-animation="scroll-bottom"]) {
-      transform: translateY(calc(-1 * var(--_distance)));
-      transition-property: transform;
-    }
-    :host([tablet-animation="scroll-bottom"][in-view]) {
-      transform: translateY(0);
-    }
-
-    :host([tablet-animation="faded-scroll-right"]) {
-      opacity: 0;
-      transform: translateX(calc(-1 * var(--_distance)));
-      transition-property: opacity, transform;
-    }
-    :host([tablet-animation="faded-scroll-right"][in-view]) {
-      opacity: 1;
-      transform: translateX(0);
-    }
-
-    :host([tablet-animation="faded-scroll-left"]) {
-      opacity: 0;
-      transform: translateX(var(--_distance));
-      transition-property: opacity, transform;
-    }
-    :host([tablet-animation="faded-scroll-left"][in-view]) {
-      opacity: 1;
-      transform: translateX(0);
-    }
-
-    :host([tablet-animation="faded-scroll-top"]) {
-      opacity: 0;
-      transform: translateY(var(--_distance));
-      transition-property: opacity, transform;
-    }
-    :host([tablet-animation="faded-scroll-top"][in-view]) {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    :host([tablet-animation="faded-scroll-bottom"]) {
-      opacity: 0;
-      transform: translateY(calc(-1 * var(--_distance)));
-      transition-property: opacity, transform;
-    }
-    :host([tablet-animation="faded-scroll-bottom"][in-view]) {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @media ${cssBelow("mobile")} {
-    :host([mobile-animation="none"]) {
-      opacity: 1;
-      transform: none;
-      transition-property: none;
-    }
-
-    :host([mobile-animation="fade"]) {
-      opacity: 0;
-      transition-property: opacity;
-    }
-    :host([mobile-animation="fade"][in-view]) {
-      opacity: 1;
-    }
-
-    :host([mobile-animation="scroll-right"]) {
-      transform: translateX(calc(-1 * var(--_distance)));
-      transition-property: transform;
-    }
-    :host([mobile-animation="scroll-right"][in-view]) {
-      transform: translateX(0);
-    }
-
-    :host([mobile-animation="scroll-left"]) {
-      transform: translateX(var(--_distance));
-      transition-property: transform;
-    }
-    :host([mobile-animation="scroll-left"][in-view]) {
-      transform: translateX(0);
-    }
-
-    :host([mobile-animation="scroll-top"]) {
-      transform: translateY(var(--_distance));
-      transition-property: transform;
-    }
-    :host([mobile-animation="scroll-top"][in-view]) {
-      transform: translateY(0);
-    }
-
-    :host([mobile-animation="scroll-bottom"]) {
-      transform: translateY(calc(-1 * var(--_distance)));
-      transition-property: transform;
-    }
-    :host([mobile-animation="scroll-bottom"][in-view]) {
-      transform: translateY(0);
-    }
-
-    :host([mobile-animation="faded-scroll-right"]) {
-      opacity: 0;
-      transform: translateX(calc(-1 * var(--_distance)));
-      transition-property: opacity, transform;
-    }
-    :host([mobile-animation="faded-scroll-right"][in-view]) {
-      opacity: 1;
-      transform: translateX(0);
-    }
-
-    :host([mobile-animation="faded-scroll-left"]) {
-      opacity: 0;
-      transform: translateX(var(--_distance));
-      transition-property: opacity, transform;
-    }
-    :host([mobile-animation="faded-scroll-left"][in-view]) {
-      opacity: 1;
-      transform: translateX(0);
-    }
-
-    :host([mobile-animation="faded-scroll-top"]) {
-      opacity: 0;
-      transform: translateY(var(--_distance));
-      transition-property: opacity, transform;
-    }
-    :host([mobile-animation="faded-scroll-top"][in-view]) {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    :host([mobile-animation="faded-scroll-bottom"]) {
-      opacity: 0;
-      transform: translateY(calc(-1 * var(--_distance)));
-      transition-property: opacity, transform;
-    }
-    :host([mobile-animation="faded-scroll-bottom"][in-view]) {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-`;
-export const animateStyles = [base, breakpoints];
+/**
+ * The rules switching to `<breakpoint>-animation` below that breakpoint,
+ * the same for every breakpoint the component exposes.
+ *
+ * @param breakpoint the breakpoint the override applies under.
+ * @returns the breakpoint's `@media` block.
+ */
+function breakpointOverride(breakpoint) {
+    const attribute = unsafeCSS(`${breakpoint}-animation`);
+    return css `
+    @media ${cssBelow(breakpoint)} {
+      :host([${attribute}="none"]) {
+        opacity: 1;
+        transform: none;
+        transition-property: none;
+      }
+
+      :host([${attribute}="fade"]) {
+        opacity: 0;
+        transition-property: opacity;
+      }
+      :host([${attribute}="fade"][in-view]) {
+        opacity: 1;
+      }
+
+      :host([${attribute}="scroll-right"]) {
+        transform: translateX(calc(-1 * var(--_distance)));
+        transition-property: transform;
+      }
+      :host([${attribute}="scroll-right"][in-view]) {
+        transform: translateX(0);
+      }
+
+      :host([${attribute}="scroll-left"]) {
+        transform: translateX(var(--_distance));
+        transition-property: transform;
+      }
+      :host([${attribute}="scroll-left"][in-view]) {
+        transform: translateX(0);
+      }
+
+      :host([${attribute}="scroll-top"]) {
+        transform: translateY(var(--_distance));
+        transition-property: transform;
+      }
+      :host([${attribute}="scroll-top"][in-view]) {
+        transform: translateY(0);
+      }
+
+      :host([${attribute}="scroll-bottom"]) {
+        transform: translateY(calc(-1 * var(--_distance)));
+        transition-property: transform;
+      }
+      :host([${attribute}="scroll-bottom"][in-view]) {
+        transform: translateY(0);
+      }
+
+      :host([${attribute}="faded-scroll-right"]) {
+        opacity: 0;
+        transform: translateX(calc(-1 * var(--_distance)));
+        transition-property: opacity, transform;
+      }
+      :host([${attribute}="faded-scroll-right"][in-view]) {
+        opacity: 1;
+        transform: translateX(0);
+      }
+
+      :host([${attribute}="faded-scroll-left"]) {
+        opacity: 0;
+        transform: translateX(var(--_distance));
+        transition-property: opacity, transform;
+      }
+      :host([${attribute}="faded-scroll-left"][in-view]) {
+        opacity: 1;
+        transform: translateX(0);
+      }
+
+      :host([${attribute}="faded-scroll-top"]) {
+        opacity: 0;
+        transform: translateY(var(--_distance));
+        transition-property: opacity, transform;
+      }
+      :host([${attribute}="faded-scroll-top"][in-view]) {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      :host([${attribute}="faded-scroll-bottom"]) {
+        opacity: 0;
+        transform: translateY(calc(-1 * var(--_distance)));
+        transition-property: opacity, transform;
+      }
+      :host([${attribute}="faded-scroll-bottom"][in-view]) {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  `;
+}
+// Widest first, so a narrower breakpoint's override wins once both match.
+const breakpoints = [
+    breakpointOverride("laptop"),
+    breakpointOverride("tablet"),
+    breakpointOverride("mobile"),
+];
+export const animateStyles = [base, ...breakpoints];

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

@@ -21,6 +21,7 @@ export type EunomiaDividerOrientation = "horizontal" | "vertical";
  * @prop {EunomiaDividerOrientation} [orientation='horizontal'] - The direction the line runs along
  * @cssprop [--divider-color] - Sets the color of the line, defaulting to the shared border color token
  * @cssprop [--divider-spacing] - Sets the margin on either side of the line, along its perpendicular axis
+ * @csspart line - The line itself, carrying its color and spacing
  * @element eun-divider
  */
 export declare class EunomiaDivider extends LitElement {

package/dist/components/layout/divider/divider.js

@@ -25,6 +25,7 @@ export const EunomiaDividerTagName = "eun-divider";
  * @prop {EunomiaDividerOrientation} [orientation='horizontal'] - The direction the line runs along
  * @cssprop [--divider-color] - Sets the color of the line, defaulting to the shared border color token
  * @cssprop [--divider-spacing] - Sets the margin on either side of the line, along its perpendicular axis
+ * @csspart line - The line itself, carrying its color and spacing
  * @element eun-divider
  */
 let EunomiaDivider = class EunomiaDivider extends LitElement {
@@ -52,7 +53,7 @@ let EunomiaDivider = class EunomiaDivider extends LitElement {
         }
     }
     render() {
-        return html ``;
+        return html `<div id="line" part="line"></div>`;
     }
 };
 /**

package/dist/components/layout/divider/divider.styles.js

@@ -13,18 +13,19 @@ const base = css `
     display: block;
   }
 
-  :host(:is([orientation="horizontal"], :not([orientation]))) {
-    width: 100%;
+  :host([orientation="vertical"]) {
+    display: inline-flex;
+    align-self: stretch;
+  }
+
+  :host(:is([orientation="horizontal"], :not([orientation]))) #line {
     height: 0;
     margin-block: var(--_spacing);
     border-block-start: 1px solid var(--_color);
   }
 
-  :host([orientation="vertical"]) {
-    display: inline-block;
-    align-self: stretch;
+  :host([orientation="vertical"]) #line {
     width: 0;
-    height: auto;
     margin-inline: var(--_spacing);
     border-inline-start: 1px solid var(--_color);
   }

package/dist/components/layout/infinite-list/infinite-list.styles.js

@@ -60,7 +60,7 @@ export const infiniteListStyles = css `
   #empty {
     padding: var(--eun-space-m, 16px) 0;
     text-align: center;
-    color: var(--infinite-list-end-color, var(--eun-text-secondary, #484e61));
+    color: var(--infinite-list-end-color, var(--eun-text-secondary, #666e8a));
   }
   .visually-hidden {
     position: absolute;

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

@@ -42,7 +42,7 @@ export const breadcrumbStyles = css `
     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);
   }
   ::slotted(a[href]) {
@@ -73,7 +73,7 @@ export const breadcrumbStyles = css `
   }
   ::slotted(a[aria-current="page"]),
   ::slotted(a[aria-current="page"]:hover) {
-    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;
   }
@@ -81,7 +81,7 @@ export const breadcrumbStyles = css `
     margin-inline: var(--breadcrumb-separator-gap, var(--eun-space-s, 8px));
     color: var(
       --breadcrumb-separator-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
     user-select: none;
   }