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

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

@@ -100,4 +100,194 @@ const base = css `
     }
   }
 `;
-export const animateStyles = base;
+/**
+ * \`tablet-animation\`/\`mobile-animation\` overrides — pure CSS \`@media\`
+ * switches, mirroring \`base\` above per animation value, so no JS ever
+ * needs to read the actual viewport width (see \`animate.ts\`'s own
+ * \`tabletAnimation\`/\`mobileAnimation\` doc comments). Placed after \`base\`
+ * so equal-specificity ties (e.g. both \`animation="fade"\` and
+ * \`tablet-animation="none"\` present at once) resolve in the narrower
+ * breakpoint's favor by source order, once its \`@media\` condition is true.
+ *
+ * \`max-width\` values match \`EUNOMIA_BREAKPOINTS.tablet\`/\`.mobile\`
+ * (\`breakpoints.ts\`) — hardcoded here since a plain CSS \`@media\` query
+ * can't read a JS constant.
+ */
+const breakpoints = css `
+  @media (max-width: 768px) {
+    :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 (max-width: 600px) {
+    :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];

package/dist/components/loader/loader/loader.styles.js

@@ -100,11 +100,11 @@ const bar = css `
     overflow: hidden;
     border-radius: var(
       --loader-bar-border-radius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     background: var(
       --loader-bar-track-color,
-      var(--eun-color-grey-200, #ecedf0)
+      var(--eun-surface-sunken-strong, #ecedf0)
     );
   }
 

package/dist/components/loader/skeleton/skeleton.styles.js

@@ -9,10 +9,13 @@ import { css } from "lit";
  */
 export const skeletonStyles = css `
   :host {
-    --_color: var(--skeleton-color, var(--eun-color-grey-200, #ecedf0));
+    --_color: var(
+      --skeleton-color,
+      var(--eun-surface-sunken-strong, #ecedf0)
+    );
     --_highlight: var(
       --skeleton-highlight-color,
-      var(--eun-color-grey-100, #f7f8fa)
+      var(--eun-surface-sunken, #f7f8fa)
     );
     display: block;
     width: 100%;
@@ -31,16 +34,16 @@ export const skeletonStyles = css `
     animation: eun-skeleton-shimmer 1.6s ease-in-out infinite;
     border-radius: var(
       --skeleton-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
   }
   :host([variant="circle"]) span {
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
   }
   :host([variant="text"]) span {
     border-radius: var(
       --skeleton-border-radius,
-      var(--eun-borderRadius-s, 5px)
+      var(--eun-border-radius-s, 5px)
     );
   }
   @keyframes eun-skeleton-shimmer {

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

@@ -17,6 +17,7 @@ export declare const EunomiaBreadcrumbItemTagName = "eun-breadcrumb-item";
  * @prop {string} [href] - The URL this step links to. Renders as plain, unlinked text when unset, such as a category that groups pages but isn't itself a page
  * @prop {boolean} [current=false] - Marks this as the trail's current, unlinked page, regardless of href
  * @prop {EunomiaIconName} [icon] - An optional leading icon shown before the slotted label. Purely decorative, so it never substitutes for the label's own visible text
+ * @fires {NavigationEvent} eunnavigate - Fired before following the step's link, so a client-side router can intercept the navigation. Cancelable
  * @element eun-breadcrumb-item
  */
 export declare class EunomiaBreadcrumbItem extends LitElement {
@@ -60,6 +61,12 @@ export declare class EunomiaBreadcrumbItem extends LitElement {
      * @private
      */
     private handleIconSlotChange;
+    /**
+     * Dispatches `eunnavigate` before the browser follows the link, so an
+     * SPA router can take over the navigation.
+     * @private
+     */
+    private handleClick;
     connectedCallback(): void;
     render(): TemplateResult;
 }

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

@@ -9,6 +9,7 @@ import { html, LitElement, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { breadcrumbItemStyles } from "./breadcrumb-item.styles.js";
+import { handleLinkNavigation } from "../../../utils/navigation.utils.js";
 /**
  * Tag name of the breadcrumb item component.
  */
@@ -26,6 +27,7 @@ export const EunomiaBreadcrumbItemTagName = "eun-breadcrumb-item";
  * @prop {string} [href] - The URL this step links to. Renders as plain, unlinked text when unset, such as a category that groups pages but isn't itself a page
  * @prop {boolean} [current=false] - Marks this as the trail's current, unlinked page, regardless of href
  * @prop {EunomiaIconName} [icon] - An optional leading icon shown before the slotted label. Purely decorative, so it never substitutes for the label's own visible text
+ * @fires {NavigationEvent} eunnavigate - Fired before following the step's link, so a client-side router can intercept the navigation. Cancelable
  * @element eun-breadcrumb-item
  */
 let EunomiaBreadcrumbItem = class EunomiaBreadcrumbItem extends LitElement {
@@ -47,6 +49,14 @@ let EunomiaBreadcrumbItem = class EunomiaBreadcrumbItem extends LitElement {
             this.requestUpdate();
         };
     }
+    /**
+     * Dispatches `eunnavigate` before the browser follows the link, so an
+     * SPA router can take over the navigation.
+     * @private
+     */
+    handleClick(event) {
+        handleLinkNavigation(this, event, this.href);
+    }
     connectedCallback() {
         super.connectedCallback?.();
         if (!this.hasAttribute("role")) {
@@ -75,7 +85,11 @@ let EunomiaBreadcrumbItem = class EunomiaBreadcrumbItem extends LitElement {
       ></span>`;
         }
         else if (this.href) {
-            label = html `<a id="label" href=${this.href} aria-label=${ariaLabel}
+            label = html `<a
+        id="label"
+        href=${this.href}
+        aria-label=${ariaLabel}
+        @click=${this.handleClick}
         >${icon}<slot></slot
       ></a>`;
         }

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);