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

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

@@ -9,7 +9,7 @@ export const breadcrumbItemStyles = css `
     display: inline-flex;
     align-items: center;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
   }
   #label {
     max-width: var(--breadcrumb-item-max-width, 240px);
@@ -35,7 +35,7 @@ export const breadcrumbItemStyles = css `
   a#label {
     color: var(--breadcrumb-link-color, var(--eun-color-primary-500, #3d6fff));
     text-decoration: none;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     outline: 2px solid transparent;
     transition:
       color var(--breadcrumb-transition-duration, 0.2s) ease-out,
@@ -59,7 +59,7 @@ export const breadcrumbItemStyles = css `
   }
   span#label {
     color: var(--breadcrumb-current-color, var(--eun-text-secondary, #484e61));
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
   }
   #separator {
     margin-inline: var(--breadcrumb-separator-gap, var(--eun-space-s, 8px));

package/dist/components/navigation/breadcrumb/breadcrumb.d.ts

@@ -37,6 +37,7 @@ export type EunomiaBreadcrumbItemData = {
  * @cssprop [--breadcrumb-item-max-width] - Sets the maximum width of each step, beyond which its label truncates with an ellipsis
  * @cssprop [--breadcrumb-gap] - Sets the row gap, used when the trail wraps onto multiple lines
  * @cssprop [--breadcrumb-transition-duration] - Sets the duration of the link hover color transition
+ * @fires {NavigationEvent} eunnavigate - Fired before following a step's link, so a client-side router can intercept the navigation. Cancelable
  * @element eun-breadcrumb
  */
 export declare class EunomiaBreadcrumb extends LitElement {

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

@@ -8,6 +8,7 @@ import { customElement, property } from "lit/decorators.js";
 import { html, LitElement, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { breadcrumbStyles } from "./breadcrumb.styles.js";
+import { handleLinkNavigation } from "../../../utils/navigation.utils.js";
 /**
  * Tag name of the breadcrumb component.
  */
@@ -37,6 +38,7 @@ export const EunomiaBreadcrumbTagName = "eun-breadcrumb";
  * @cssprop [--breadcrumb-item-max-width] - Sets the maximum width of each step, beyond which its label truncates with an ellipsis
  * @cssprop [--breadcrumb-gap] - Sets the row gap, used when the trail wraps onto multiple lines
  * @cssprop [--breadcrumb-transition-duration] - Sets the duration of the link hover color transition
+ * @fires {NavigationEvent} eunnavigate - Fired before following a step's link, so a client-side router can intercept the navigation. Cancelable
  * @element eun-breadcrumb
  */
 let EunomiaBreadcrumb = class EunomiaBreadcrumb extends LitElement {
@@ -109,7 +111,11 @@ let EunomiaBreadcrumb = class EunomiaBreadcrumb extends LitElement {
         const separator = html `<span class="separator" aria-hidden="true"></span>`;
         if (item.href) {
             return html `<li>
-        <a href=${item.href}>${icon}${item.label}</a>${separator}
+        <a
+          href=${item.href}
+          @click=${(event) => handleLinkNavigation(this, event, item.href)}
+          >${icon}${item.label}</a
+        >${separator}
       </li>`;
         }
         return html `<li><span>${icon}${item.label}</span>${separator}</li>`;

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

@@ -18,7 +18,7 @@ export const breadcrumbStyles = css `
   :host {
     display: block;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
   }
   #list {
     display: flex;
@@ -55,7 +55,7 @@ export const breadcrumbStyles = css `
   #list li > a {
     color: var(--breadcrumb-link-color, var(--eun-color-primary-500, #3d6fff));
     text-decoration: none;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     outline: 2px solid transparent;
     transition:
       color var(--breadcrumb-transition-duration, 0.2s) ease-out,
@@ -79,7 +79,7 @@ export const breadcrumbStyles = css `
   }
   #list li > span {
     color: var(--breadcrumb-current-color, var(--eun-text-secondary, #484e61));
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
   }
   #list li > .separator {
     margin-inline: var(--breadcrumb-separator-gap, var(--eun-space-s, 8px));

package/dist/components/navigation/carousel/carousel.d.ts

@@ -69,10 +69,14 @@ declare const EunomiaCarousel_base: import("../../../utils/constructor.type.js")
  * @prop {string} [ariaLabelNext='Next slide'] - The accessible label of the next control
  * @attr {string} [aria-label-next='Next slide'] - The accessible label of the next control
  * @fires {SlideChangeEvent} eunslidechange - Fired once the active slide settles on a new index
+ * @cssprop [--carousel-visible-slides] - Sets how many slides are shown at once, overriding visibleSlides. Meant to be changed from your own media or container queries, so the slide count follows the available space without any script
+ * @cssprop [--carousel-scroll-step] - Sets how many slides a previous, next, or dot click advances by, overriding scrollStep. Read again whenever the carousel resizes
+ * @cssprop [--carousel-responsive-breakpoint] - Sets the width, in pixels, below which an inline layout moves its buttons into the header row, overriding responsiveBreakpoint. Zero disables the automatic switch. Read again whenever the carousel resizes
  * @cssprop [--carousel-gap] - Sets the gap between slides
  * @cssprop [--carousel-track-padding] - Sets the vertical padding on the track, giving slides' own effects that bleed outside their box, such as a hover shadow, room to render before it gets clipped
  * @cssprop [--carousel-min-slide-width] - Sets the minimum slide width. On a narrow viewport, this wins over visibleSlides so slides never get uncomfortably small
  * @cssprop [--carousel-peek-size] - Sets how much of the next slide peeks at the edge, when fullSlides is off
+ * @cssprop [--carousel-fade-display] - Set to none to hide the edge fades through pure CSS, regardless of edgeFade, for instance on a narrow screen where a single slide fills the whole width
  * @cssprop [--carousel-fade-width] - Sets the width of the edge fades
  * @cssprop [--carousel-fade-color] - Sets the color of the edge fades, which fade to transparent
  * @cssprop [--carousel-active-scale] - Sets the scale applied to the active slide
@@ -240,6 +244,21 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
      * @internal
      */
     private narrow;
+    /**
+     * The slide count actually in effect : `--carousel-visible-slides` when
+     * set on the host (or inherited from an ancestor, e.g. from a consumer's
+     * own container query), `visibleSlides` otherwise. Only the live-region
+     * announcement needs it on the JS side, since slide sizing reads the
+     * custom property directly in CSS. Refreshed by {@link syncCssOverrides}.
+     * @internal
+     */
+    private effectiveVisibleSlides;
+    /**
+     * The scroll step actually in effect : `--carousel-scroll-step` when set,
+     * `scrollStep` otherwise. Refreshed by {@link syncCssOverrides}.
+     * @internal
+     */
+    private effectiveScrollStep;
     /**
      * The scrollable track.
      * @internal
@@ -320,9 +339,10 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
      */
     goTo(index: number): void;
     /**
-     * Reads a length custom property (e.g. `--carousel-nav-icon-size`) off
-     * the host as a plain number of pixels, falling back when unset or
-     * invalid.
+     * Reads a numeric custom property (a length such as
+     * `--carousel-nav-icon-size`, or a plain count such as
+     * `--carousel-visible-slides`) off the host as a plain number, pixels
+     * for a length, falling back when unset or invalid.
      *
      * @param name the custom property's name.
      * @param fallback the value to use when unset or invalid.
@@ -351,6 +371,17 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
      * @private
      */
     private get pageCount();
+    /**
+     * Re-reads the custom properties that override a numeric prop
+     * (`--carousel-visible-slides`, `--carousel-scroll-step`), so a
+     * consumer's own media or container query can change them without any
+     * script. Runs on first render, whenever the matching prop changes, and
+     * on every resize : a query flipping these values almost always goes
+     * together with the carousel itself changing size, which is what the
+     * {@link resizeObserver} already watches.
+     * @private
+     */
+    private syncCssOverrides;
     /**
      * Measures, from actual rendered geometry, which slide index the track
      * will end up settling on once scrolled all the way to its true
@@ -400,8 +431,9 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
      */
     private updateCenterPadding;
     /**
-     * Re-measures the host's own width against {@link responsiveBreakpoint},
-     * driving {@link narrow}. A `responsiveBreakpoint` of `0` (or less)
+     * Re-measures the host's own width against the breakpoint in effect
+     * (`--carousel-responsive-breakpoint` when set, {@link responsiveBreakpoint}
+     * otherwise), driving {@link narrow}. A breakpoint of `0` (or less)
      * disables the auto-switch outright, leaving `narrow` permanently
      * `false`.
      * @private
@@ -449,7 +481,9 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
      */
     private goToIndex;
     /**
-     * Advances (or retreats) by `scrollStep` slides from the current index.
+     * Advances (or retreats) by the scroll step in effect (see
+     * {@link effectiveScrollStep}), re-read first so a custom property that
+     * changed without a resize is still honored.
      *
      * @param direction `1` for next, `-1` for previous.
      * @private

package/dist/components/navigation/carousel/carousel.js

@@ -59,10 +59,14 @@ const ACTIVE_SLIDE_CLASS = "eun-carousel-active-slide";
  * @prop {string} [ariaLabelNext='Next slide'] - The accessible label of the next control
  * @attr {string} [aria-label-next='Next slide'] - The accessible label of the next control
  * @fires {SlideChangeEvent} eunslidechange - Fired once the active slide settles on a new index
+ * @cssprop [--carousel-visible-slides] - Sets how many slides are shown at once, overriding visibleSlides. Meant to be changed from your own media or container queries, so the slide count follows the available space without any script
+ * @cssprop [--carousel-scroll-step] - Sets how many slides a previous, next, or dot click advances by, overriding scrollStep. Read again whenever the carousel resizes
+ * @cssprop [--carousel-responsive-breakpoint] - Sets the width, in pixels, below which an inline layout moves its buttons into the header row, overriding responsiveBreakpoint. Zero disables the automatic switch. Read again whenever the carousel resizes
  * @cssprop [--carousel-gap] - Sets the gap between slides
  * @cssprop [--carousel-track-padding] - Sets the vertical padding on the track, giving slides' own effects that bleed outside their box, such as a hover shadow, room to render before it gets clipped
  * @cssprop [--carousel-min-slide-width] - Sets the minimum slide width. On a narrow viewport, this wins over visibleSlides so slides never get uncomfortably small
  * @cssprop [--carousel-peek-size] - Sets how much of the next slide peeks at the edge, when fullSlides is off
+ * @cssprop [--carousel-fade-display] - Set to none to hide the edge fades through pure CSS, regardless of edgeFade, for instance on a narrow screen where a single slide fills the whole width
  * @cssprop [--carousel-fade-width] - Sets the width of the edge fades
  * @cssprop [--carousel-fade-color] - Sets the color of the edge fades, which fade to transparent
  * @cssprop [--carousel-active-scale] - Sets the scale applied to the active slide
@@ -224,6 +228,21 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
          * @internal
          */
         this.narrow = false;
+        /**
+         * The slide count actually in effect : `--carousel-visible-slides` when
+         * set on the host (or inherited from an ancestor, e.g. from a consumer's
+         * own container query), `visibleSlides` otherwise. Only the live-region
+         * announcement needs it on the JS side, since slide sizing reads the
+         * custom property directly in CSS. Refreshed by {@link syncCssOverrides}.
+         * @internal
+         */
+        this.effectiveVisibleSlides = 1;
+        /**
+         * The scroll step actually in effect : `--carousel-scroll-step` when set,
+         * `scrollStep` otherwise. Refreshed by {@link syncCssOverrides}.
+         * @internal
+         */
+        this.effectiveScrollStep = 1;
         /**
          * Observes the host's own size, so the active slide / edge fades stay
          * correct after a layout change that isn't a scroll (an orientation
@@ -242,6 +261,7 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
             }
             this.resizeRaf = requestAnimationFrame(() => {
                 this.resizeRaf = undefined;
+                this.syncCssOverrides();
                 this.updateFromScrollPosition();
                 this.updateCenterPadding();
                 this.updateNarrow();
@@ -330,6 +350,7 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
+        this.syncCssOverrides();
         this.resizeObserver.observe(this);
     }
     updated(changed) {
@@ -337,6 +358,9 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         if (changed.has("visibleSlides")) {
             this.style.setProperty("--_visibleCount", String(Math.max(1, this.visibleSlides)));
         }
+        if (changed.has("visibleSlides") || changed.has("scrollStep")) {
+            this.syncCssOverrides();
+        }
         if (changed.has("centerSnap")) {
             this.style.setProperty("--_snapAlign", this.centerSnap ? "center" : "start");
             this.updateCenterPadding();
@@ -378,9 +402,10 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         this.goToIndex(index);
     }
     /**
-     * Reads a length custom property (e.g. `--carousel-nav-icon-size`) off
-     * the host as a plain number of pixels, falling back when unset or
-     * invalid.
+     * Reads a numeric custom property (a length such as
+     * `--carousel-nav-icon-size`, or a plain count such as
+     * `--carousel-visible-slides`) off the host as a plain number, pixels
+     * for a length, falling back when unset or invalid.
      *
      * @param name the custom property's name.
      * @param fallback the value to use when unset or invalid.
@@ -398,7 +423,21 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
      * @private
      */
     get pageCount() {
-        return Math.ceil(this.maxIndex / Math.max(1, this.scrollStep)) + 1;
+        return Math.ceil(this.maxIndex / this.effectiveScrollStep) + 1;
+    }
+    /**
+     * Re-reads the custom properties that override a numeric prop
+     * (`--carousel-visible-slides`, `--carousel-scroll-step`), so a
+     * consumer's own media or container query can change them without any
+     * script. Runs on first render, whenever the matching prop changes, and
+     * on every resize : a query flipping these values almost always goes
+     * together with the carousel itself changing size, which is what the
+     * {@link resizeObserver} already watches.
+     * @private
+     */
+    syncCssOverrides() {
+        this.effectiveVisibleSlides = Math.max(1, Math.round(this.getCssPixelValue("--carousel-visible-slides", this.visibleSlides)));
+        this.effectiveScrollStep = Math.max(1, Math.round(this.getCssPixelValue("--carousel-scroll-step", this.scrollStep)));
     }
     /**
      * Measures, from actual rendered geometry, which slide index the track
@@ -479,16 +518,17 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         this.style.setProperty("--_centerPadding", `${padding}px`);
     }
     /**
-     * Re-measures the host's own width against {@link responsiveBreakpoint},
-     * driving {@link narrow}. A `responsiveBreakpoint` of `0` (or less)
+     * Re-measures the host's own width against the breakpoint in effect
+     * (`--carousel-responsive-breakpoint` when set, {@link responsiveBreakpoint}
+     * otherwise), driving {@link narrow}. A breakpoint of `0` (or less)
      * disables the auto-switch outright, leaving `narrow` permanently
      * `false`.
      * @private
      */
     updateNarrow() {
+        const breakpoint = this.getCssPixelValue("--carousel-responsive-breakpoint", this.responsiveBreakpoint);
         this.narrow =
-            this.responsiveBreakpoint > 0 &&
-                this.getBoundingClientRect().width < this.responsiveBreakpoint;
+            breakpoint > 0 && this.getBoundingClientRect().width < breakpoint;
     }
     /**
      * Re-scans the default slot for its current slides, and (re)applies the
@@ -573,13 +613,16 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         });
     }
     /**
-     * Advances (or retreats) by `scrollStep` slides from the current index.
+     * Advances (or retreats) by the scroll step in effect (see
+     * {@link effectiveScrollStep}), re-read first so a custom property that
+     * changed without a resize is still honored.
      *
      * @param direction `1` for next, `-1` for previous.
      * @private
      */
     step(direction) {
-        this.goToIndex(this.currentIndex + direction * Math.max(1, this.scrollStep));
+        this.syncCssOverrides();
+        this.goToIndex(this.currentIndex + direction * this.effectiveScrollStep);
     }
     /**
      * Starts the autoplay timer, if not already running, autoplay is on,
@@ -632,7 +675,7 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
             return "";
         }
         const start = this.currentIndex + 1;
-        const visible = Math.max(1, Math.min(this.visibleSlides, this.slideCount - this.currentIndex));
+        const visible = Math.max(1, Math.min(this.effectiveVisibleSlides, this.slideCount - this.currentIndex));
         const end = Math.min(start + visible - 1, this.slideCount);
         return end > start
             ? `Showing slides ${start} to ${end} of ${this.slideCount}`
@@ -721,7 +764,7 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         if (!this.showDots || this.pageCount <= 1) {
             return nothing;
         }
-        const step = Math.max(1, this.scrollStep);
+        const step = this.effectiveScrollStep;
         const currentPage = Math.round(this.currentIndex / step);
         return html `
       <div
@@ -892,6 +935,12 @@ __decorate([
 __decorate([
     state()
 ], EunomiaCarousel.prototype, "narrow", void 0);
+__decorate([
+    state()
+], EunomiaCarousel.prototype, "effectiveVisibleSlides", void 0);
+__decorate([
+    state()
+], EunomiaCarousel.prototype, "effectiveScrollStep", void 0);
 __decorate([
     query("#track")
 ], EunomiaCarousel.prototype, "trackEl", void 0);

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

@@ -3,6 +3,10 @@ import { css } from "lit";
  * Base style for the carousel component.
  *
  * Custom css variables:
+ * [--carousel-visible-slides] - Set how many slides are shown at once, overriding `visibleSlides` ; meant for the consumer's own media/container queries
+ * [--carousel-scroll-step] - Set how many slides a prev/next/dot click advances by, overriding `scrollStep`
+ * [--carousel-responsive-breakpoint] - Set the width (px) below which an `inline` layout moves its buttons into the header row, overriding `responsiveBreakpoint`
+ * [--carousel-fade-display] - Set to `none` to hide the edge fades via pure CSS (e.g. in a container query), regardless of `edgeFade`
  * [--carousel-gap] - Set a custom gap between slides
  * [--carousel-track-padding] - Set a custom vertical padding on the track, giving slides' own effects that bleed outside their box (a hover shadow, `eun-sliding-card`'s bottom fade, ...) room to render before `overflow-y: hidden` clips them
  * [--carousel-min-slide-width] - Set a custom minimum slide width ; on a narrow viewport, this wins over `visibleSlides` so slides never get uncomfortably small — fewer of them just become scrollable off-screen instead
@@ -33,6 +37,10 @@ const base = css `
   :host {
     display: block;
     --_visibleCount: 1;
+    --_effectiveVisibleCount: var(
+      --carousel-visible-slides,
+      var(--_visibleCount)
+    );
     --_snapAlign: start;
   }
 
@@ -84,6 +92,7 @@ const base = css `
   #viewport::before,
   #viewport::after {
     content: "";
+    display: var(--carousel-fade-display, block);
     position: absolute;
     top: 0;
     bottom: 0;
@@ -125,7 +134,7 @@ const base = css `
     scrollbar-width: none;
     outline: 2px solid transparent;
     outline-offset: 8px;
-    border-radius: var(--eun-borderRadius-m);
+    border-radius: var(--eun-border-radius-m);
     transition: outline 0.2s ease-out;
   }
   #track::-webkit-scrollbar {
@@ -156,8 +165,11 @@ const base = css `
     flex-basis: max(
       var(--carousel-min-slide-width, 220px),
       calc(
-        (100% - (var(--_visibleCount) - 1) * var(--carousel-gap, 16px)) /
-          var(--_visibleCount)
+        (
+            100% - (var(--_effectiveVisibleCount) - 1) *
+              var(--carousel-gap, 16px)
+          ) /
+          var(--_effectiveVisibleCount)
       )
     );
   }
@@ -167,9 +179,9 @@ const base = css `
       calc(
         (
             100% - var(--carousel-peek-size, 32px) -
-              (var(--_visibleCount) - 1) * var(--carousel-gap, 16px)
+              (var(--_effectiveVisibleCount) - 1) * var(--carousel-gap, 16px)
           ) /
-          var(--_visibleCount)
+          var(--_effectiveVisibleCount)
       )
     );
   }
@@ -190,7 +202,7 @@ const base = css `
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--carousel-nav-border-color, var(--eun-border-color, #dee0e7));
     background: var(
       --carousel-nav-background,
@@ -274,7 +286,7 @@ const base = css `
     width: calc(var(--carousel-dot-size, 6px) * 3.5);
     border-radius: var(
       --carousel-dot-border-radius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     background: var(
       --carousel-dot-active-color,

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

@@ -55,8 +55,8 @@ export const paginationStyles = css `
     height: var(--pagination-item-size, 32px);
     padding-inline: var(--eun-space-xs, 4px);
     font-family: inherit;
-    font-size: var(--pagination-font-size, var(--eun-fontSize-s, 14px));
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-size: var(--pagination-font-size, var(--eun-font-size-s, 14px));
+    font-weight: var(--eun-font-weight-m, 500);
     line-height: 1;
   }
   :host([show-labels]) button.control {
@@ -71,7 +71,7 @@ export const paginationStyles = css `
     border: none;
     border-radius: var(
       --pagination-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
     background: transparent;
     color: var(--pagination-item-color, var(--eun-text-secondary, #484e61));

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

@@ -34,14 +34,14 @@ const base = css `
     box-sizing: border-box;
     width: var(--_width);
     transition: width var(--_transitionDuration) ease;
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    border-inline-end: var(--eun-border-width-s, 1px) solid var(--_borderColor);
   }
   :host([dragging]) {
     transition: none;
   }
   :host([position="end"]) {
     border-inline-end: none;
-    border-inline-start: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    border-inline-start: var(--eun-border-width-s, 1px) solid var(--_borderColor);
   }
   :host([collapsed][collapse-mode="mini"]) {
     --_width: var(--_miniWidth);
@@ -80,8 +80,8 @@ const base = css `
   }
   #heading {
     margin: 0;
-    font-size: var(--eun-fontSize-l, 18px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-l, 18px);
+    font-weight: var(--eun-font-weight-l, 700);
     color: inherit;
   }
   #body {
@@ -89,7 +89,7 @@ const base = css `
     min-height: 0;
     overflow-y: auto;
     padding: var(--_gap) var(--_padding);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
   }
   #footer {
     flex: none;
@@ -139,8 +139,8 @@ const base = css `
     height: 28px;
     padding: 0;
     background: var(--_background);
-    border: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border: var(--eun-border-width-s, 1px) solid var(--_borderColor);
+    border-radius: var(--eun-border-radius-xl, 999px);
     color: var(--eun-text-secondary, #484e61);
     cursor: pointer;
     transition: background-color 0.15s ease;
@@ -161,12 +161,12 @@ const base = css `
     width: 100%;
     padding: var(--eun-space-s, 8px) var(--_padding);
     border: none;
-    border-top: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    border-top: var(--eun-border-width-s, 1px) solid var(--_borderColor);
     border-radius: 0;
     background: transparent;
     color: var(--eun-text-secondary, #484e61);
     font: inherit;
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     text-align: start;
     cursor: pointer;
     transition: background-color 0.15s ease;

package/dist/components/navigation/stepper/step.styles.js

@@ -61,7 +61,7 @@ export const stepStyles = css `
     text-align: left;
     outline: 2px solid transparent;
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-m, 8px);
+    border-radius: var(--eun-border-radius-m, 8px);
     flex: 0 1 auto;
     min-width: 0;
   }
@@ -100,17 +100,17 @@ export const stepStyles = css `
     height: var(--_indicatorSize);
     border-radius: var(
       --stepper-indicator-border-radius,
-      var(--eun-borderRadius-xl, 999px)
+      var(--eun-border-radius-xl, 999px)
     );
     background: var(
       --stepper-indicator-background,
       var(--eun-content-hover, #edeff0)
     );
     color: var(--stepper-indicator-color, var(--eun-text-secondary, #484e61));
-    font-size: var(--stepper-indicator-font-size, var(--eun-fontSize-xs, 12px));
+    font-size: var(--stepper-indicator-font-size, var(--eun-font-size-xs, 12px));
     font-weight: var(
       --stepper-indicator-font-weight,
-      var(--eun-fontWeight-m, 500)
+      var(--eun-font-weight-m, 500)
     );
     transition:
       background var(--stepper-transition-duration, 0.2s) ease-out,
@@ -163,18 +163,18 @@ export const stepStyles = css `
     min-width: 0;
   }
   .label {
-    font-size: var(--stepper-label-font-size, var(--eun-fontSize-s, 14px));
-    font-weight: var(--stepper-label-font-weight, var(--eun-fontWeight-m, 500));
+    font-size: var(--stepper-label-font-size, var(--eun-font-size-s, 14px));
+    font-weight: var(--stepper-label-font-weight, var(--eun-font-weight-m, 500));
     color: var(--stepper-label-color, var(--eun-text-color, #071621));
   }
   :host([status="current"]) .label {
     color: var(--stepper-label-color-current, var(--eun-text-color, #071621));
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
   }
   .description {
     font-size: var(
       --stepper-description-font-size,
-      var(--eun-fontSize-xs, 12px)
+      var(--eun-font-size-xs, 12px)
     );
     color: var(--stepper-description-color, var(--eun-text-secondary, #484e61));
   }

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

@@ -161,7 +161,7 @@ export const stepperStyles = css `
     text-align: left;
     outline: 2px solid transparent;
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-m, 8px);
+    border-radius: var(--eun-border-radius-m, 8px);
   }
 
   .step-control.has-description {
@@ -199,17 +199,17 @@ export const stepperStyles = css `
     height: var(--_indicatorSize);
     border-radius: var(
       --stepper-indicator-border-radius,
-      var(--eun-borderRadius-xl, 999px)
+      var(--eun-border-radius-xl, 999px)
     );
     background: var(
       --stepper-indicator-background,
       var(--eun-content-hover, #edeff0)
     );
     color: var(--stepper-indicator-color, var(--eun-text-secondary, #484e61));
-    font-size: var(--stepper-indicator-font-size, var(--eun-fontSize-xs, 12px));
+    font-size: var(--stepper-indicator-font-size, var(--eun-font-size-xs, 12px));
     font-weight: var(
       --stepper-indicator-font-weight,
-      var(--eun-fontWeight-m, 500)
+      var(--eun-font-weight-m, 500)
     );
     transition:
       background var(--stepper-transition-duration, 0.2s) ease-out,
@@ -304,18 +304,18 @@ export const stepperStyles = css `
     min-width: 0;
   }
   .label {
-    font-size: var(--stepper-label-font-size, var(--eun-fontSize-s, 14px));
-    font-weight: var(--stepper-label-font-weight, var(--eun-fontWeight-m, 500));
+    font-size: var(--stepper-label-font-size, var(--eun-font-size-s, 14px));
+    font-weight: var(--stepper-label-font-weight, var(--eun-font-weight-m, 500));
     color: var(--stepper-label-color, var(--eun-text-color, #071621));
   }
   li.step[data-status="current"] .label {
     color: var(--stepper-label-color-current, var(--eun-text-color, #071621));
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
   }
   .description {
     font-size: var(
       --stepper-description-font-size,
-      var(--eun-fontSize-xs, 12px)
+      var(--eun-font-size-xs, 12px)
     );
     color: var(--stepper-description-color, var(--eun-text-secondary, #484e61));
   }

package/dist/components/navigation/tabs/tab/tab.styles.js

@@ -38,8 +38,8 @@ const base = css `
     --_border: var(--tab-border);
     --_border-radius: var(--tab-border-radius, 8px);
     --_pointerEvents: all;
-    font-size: var(--eun-fontSize-s, 14px);
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-size: var(--eun-font-size-s, 14px);
+    font-weight: var(--eun-font-weight-m, 500);
     outline: none;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     z-index: 1;
@@ -110,7 +110,7 @@ const base = css `
   :host([icon]) div slot[name="icon"],
   div[has-icon] slot[name="icon"] {
     grid-area: icon;
-    font-size: var(--eun-fontSize-m, 16px);
+    font-size: var(--eun-font-size-m, 16px);
     line-height: 1;
     display: block;
   }
@@ -137,7 +137,7 @@ const base = css `
       --tab-notification-color,
       var(--eun-color-critical-100, #aa0014)
     );
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
     transition: scale 0.2s cubic-bezier(0.35, 0.92, 0.65, 1.28);
     scale: 1;
     place-self: var(--_badge-place, start);
@@ -165,7 +165,7 @@ const base = css `
 
   @media (min-width: ${EUNOMIA_BREAKPOINTS.tablet}px) {
     :host {
-      font-size: var(--eun-fontSize-s, 14px);
+      font-size: var(--eun-font-size-s, 14px);
     }
     :host([badge]) div::after {
       --_y-correction: none;