@eunomia/elements 1.0.0-beta.5 → 1.0.0-beta.6

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

@@ -4,32 +4,44 @@ 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 } from "lit/decorators.js";
-import { html, LitElement, nothing } from "lit";
-import { classMap } from "lit/directives/class-map.js";
+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);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _EunomiaBreadcrumb_instances, _EunomiaBreadcrumb_autoCurrent, _EunomiaBreadcrumb_childObserver, _EunomiaBreadcrumb_syncSteps, _EunomiaBreadcrumb_markCurrent, _EunomiaBreadcrumb_setCurrent;
+import { customElement, queryAll, state } from "lit/decorators.js";
+import { html, LitElement } from "lit";
 import { breadcrumbStyles } from "./breadcrumb.styles.js";
-import { handleLinkNavigation } from "../../../utils/navigation.utils.js";
 /**
  * Tag name of the breadcrumb component.
  */
 export const EunomiaBreadcrumbTagName = "eun-breadcrumb";
 /**
  * A trail of links showing the current page's position within a site's
- * hierarchy. The last item always renders as the current, unlinked page
- * regardless of whether it has an href. Intermediate items without an
- * href render as plain, unlinked text, such as a category that groups
- * pages but isn't itself a page.
+ * hierarchy. Each direct child is one step, in order, from the root to the
+ * current page: a native anchor, or any other element, such as a span,
+ * for a step that isn't itself a page. The links stay in the light
+ * DOM, so a framework's own link component, such as Next's Link, keeps its
+ * client-side navigation and prefetching.
  *
- * There are two ways to declare items, usable together: the data-driven
- * items array for the common case, including an optional leading icon per
- * step, or slotted breadcrumb item elements when a step needs more than
- * plain text and an icon, such as rich content.
+ * The breadcrumb wraps each step in its own list item with a separator.
+ * The last step is the current page : unless a step already sets
+ * aria-current, the breadcrumb marks the last one itself.
  *
- * @slot [default] - Breadcrumb item elements, used instead of or alongside items
- * @prop {Array<EunomiaBreadcrumbItemData>} [items=[]] - The trail's steps, in order, from the root to the current page. Each entry may set a label, an href, and an optional leading icon
+ * @slot [default] - The steps, one per direct child : an anchor, or a plain element for an unlinked step
  * @attr {string} [aria-label='Breadcrumb'] - The accessible label for the navigation landmark
+ * @cssprop [--breadcrumb-font-size] - Sets the font size of the whole trail, 14px by default
  * @cssprop [--breadcrumb-link-color] - Sets the color of linked steps
  * @cssprop [--breadcrumb-link-color-hover] - Sets the color of linked steps on hover or focus
+ * @cssprop [--breadcrumb-link-text-decoration] - Sets the text decoration of linked steps, underline by default, such as none
+ * @cssprop [--breadcrumb-link-text-decoration-hover] - Sets the text decoration of linked steps on hover or focus, underline by default
  * @cssprop [--breadcrumb-current-color] - Sets the color of the current page and unlinked steps
  * @cssprop [--breadcrumb-focus-outline-color] - Sets the color of a linked step's focus outline
  * @cssprop [--breadcrumb-separator] - Sets the separator between steps, as a quoted CSS string, such as '>'
@@ -38,87 +50,95 @@ 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 {
     constructor() {
         super(...arguments);
+        _EunomiaBreadcrumb_instances.add(this);
         /**
-         * The trail's steps, in order, from the root to the current page. Also
-         * reflected as a JSON-serialized `items` attribute (Lit's default
-         * `Array` converter), matching `eun-toggle-group`/`eun-segmented-filter`
-         * — needed for the API tab's playground, which round-trips components
-         * through an HTML string and would otherwise drop a JS-only property.
-         * @default []
+         * The steps, the host's element children in order.
+         * @internal
          */
-        this.items = [];
+        this.steps = [];
         /**
-         * Re-renders when the slotted `eun-breadcrumb-item`s change, since that
-         * affects both whether the data-driven trail's own last item still
-         * counts as the overall trail's last (current) step, and whether the
-         * items-slot wrapper should stay hidden.
-         * @private
+         * The step this breadcrumb marked as the current page itself, so the
+         * mark can be removed once it stops being the last step.
+         * @internal
          */
-        this.handleItemsSlotChange = () => {
-            this.requestUpdate();
-        };
+        _EunomiaBreadcrumb_autoCurrent.set(this, void 0);
+        /**
+         * Keeps {@link steps} in sync with the host's children. Created on
+         * connection rather than as a field, so the class stays constructible
+         * where `MutationObserver` doesn't exist, such as during SSR.
+         * @internal
+         */
+        _EunomiaBreadcrumb_childObserver.set(this, void 0);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        __classPrivateFieldGet(this, _EunomiaBreadcrumb_instances, "m", _EunomiaBreadcrumb_syncSteps).call(this);
+        __classPrivateFieldSet(this, _EunomiaBreadcrumb_childObserver, __classPrivateFieldGet(this, _EunomiaBreadcrumb_childObserver, "f") ?? new MutationObserver(() => __classPrivateFieldGet(this, _EunomiaBreadcrumb_instances, "m", _EunomiaBreadcrumb_syncSteps).call(this)), "f");
+        __classPrivateFieldGet(this, _EunomiaBreadcrumb_childObserver, "f").observe(this, { childList: true });
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _EunomiaBreadcrumb_childObserver, "f")?.disconnect();
+        super.disconnectedCallback();
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.stepSlots.forEach((slot, index) => {
+            const step = this.steps[index];
+            if (step && slot.assignedElements()[0] !== step) {
+                slot.assign(step);
+            }
+        });
+        __classPrivateFieldGet(this, _EunomiaBreadcrumb_instances, "m", _EunomiaBreadcrumb_markCurrent).call(this);
     }
     render() {
-        // Whichever step ends up last overall — a slotted `eun-breadcrumb-item`
-        // if there's one, otherwise the last data-driven item — is the trail's
-        // real current step. `this.children` (not a queried `<slot>`) is what
-        // makes this available synchronously on the very first render.
-        const hasSlottedItems = this.children.length > 0;
-        const lastIndex = this.items.length - 1;
-        // `role="list"` below is deliberate, not redundant : Safari drops the
-        // implicit "list" role once `list-style: none` is applied (see #list
-        // in the stylesheet), silently skipping this list for VoiceOver users
-        // unless it's restored explicitly.
+        const lastIndex = this.steps.length - 1;
         /* eslint-disable lit-a11y/no-redundant-role */
         return html `
       <nav aria-label=${this.ariaLabel ?? "Breadcrumb"}>
         <ol id="list" role="list">
-          ${this.items.map((item, index) => this.renderItem(item, !hasSlottedItems && index === lastIndex))}
-          <li id="items-slot" class=${classMap({ hidden: !hasSlottedItems })}>
-            <slot @slotchange=${this.handleItemsSlotChange}></slot>
-          </li>
+          ${this.steps.map((_, index) => html `<li>
+                <slot></slot>${index < lastIndex
+            ? html `<span class="separator" aria-hidden="true"></span>`
+            : ""}
+              </li>`)}
         </ol>
       </nav>
     `;
         /* eslint-enable lit-a11y/no-redundant-role */
     }
-    /**
-     * Renders a single data-driven step, including its trailing separator —
-     * skipped only when this is genuinely the trail's last visible step, so
-     * it doesn't dangle after a step that's actually followed by slotted
-     * items (see {@link render}).
-     *
-     * @param item the step to render.
-     * @param isLastVisible whether this is the trail's actual last step.
-     * @returns the rendered template.
-     * @private
-     */
-    renderItem(item, isLastVisible) {
-        const icon = item.icon
-            ? html `<eun-icon name=${item.icon} size="14"></eun-icon>`
-            : nothing;
-        if (isLastVisible) {
-            return html `<li>
-        <span aria-current="page">${icon}${item.label}</span>
-      </li>`;
-        }
-        const separator = html `<span class="separator" aria-hidden="true"></span>`;
-        if (item.href) {
-            return html `<li>
-        <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>`;
+};
+_EunomiaBreadcrumb_autoCurrent = new WeakMap();
+_EunomiaBreadcrumb_childObserver = new WeakMap();
+_EunomiaBreadcrumb_instances = new WeakSet();
+_EunomiaBreadcrumb_syncSteps = function _EunomiaBreadcrumb_syncSteps() {
+    this.steps = Array.from(this.children);
+};
+_EunomiaBreadcrumb_markCurrent = function _EunomiaBreadcrumb_markCurrent() {
+    const last = this.steps[this.steps.length - 1];
+    if (__classPrivateFieldGet(this, _EunomiaBreadcrumb_autoCurrent, "f") && __classPrivateFieldGet(this, _EunomiaBreadcrumb_autoCurrent, "f") !== last) {
+        __classPrivateFieldGet(this, _EunomiaBreadcrumb_instances, "m", _EunomiaBreadcrumb_setCurrent).call(this, __classPrivateFieldGet(this, _EunomiaBreadcrumb_autoCurrent, "f"), false);
+        __classPrivateFieldSet(this, _EunomiaBreadcrumb_autoCurrent, undefined, "f");
+    }
+    if (!last || last === __classPrivateFieldGet(this, _EunomiaBreadcrumb_autoCurrent, "f")) {
+        return;
+    }
+    const hasCurrent = this.steps.some((step) => step.getAttribute("aria-current") === "page");
+    if (!hasCurrent) {
+        __classPrivateFieldGet(this, _EunomiaBreadcrumb_instances, "m", _EunomiaBreadcrumb_setCurrent).call(this, last, true);
+        __classPrivateFieldSet(this, _EunomiaBreadcrumb_autoCurrent, last, "f");
+    }
+};
+_EunomiaBreadcrumb_setCurrent = function _EunomiaBreadcrumb_setCurrent(step, current) {
+    if (current) {
+        step.setAttribute("aria-current", "page");
+    }
+    else {
+        step.removeAttribute("aria-current");
     }
 };
 /**
@@ -129,9 +149,23 @@ let EunomiaBreadcrumb = class EunomiaBreadcrumb extends LitElement {
  * @readonly
  */
 EunomiaBreadcrumb.styles = [breadcrumbStyles];
+/**
+ * Manual slot assignment : each step is assigned to the slot of its own
+ * list item without the breadcrumb writing a `slot` attribute on the
+ * consumer's elements, which a framework would then reset or report as
+ * a hydration mismatch.
+ * @internal
+ */
+EunomiaBreadcrumb.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    slotAssignment: "manual",
+};
+__decorate([
+    state()
+], EunomiaBreadcrumb.prototype, "steps", void 0);
 __decorate([
-    property({ type: Array, reflect: true })
-], EunomiaBreadcrumb.prototype, "items", void 0);
+    queryAll("#list slot")
+], EunomiaBreadcrumb.prototype, "stepSlots", void 0);
 EunomiaBreadcrumb = __decorate([
     customElement(EunomiaBreadcrumbTagName)
 ], EunomiaBreadcrumb);

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

@@ -2,8 +2,11 @@
  * Base style for the breadcrumb component.
  *
  * Custom css variables:
+ * [--breadcrumb-font-size] - Set a custom font size for the whole trail
  * [--breadcrumb-link-color] - Set a custom color for linked steps
  * [--breadcrumb-link-color-hover] - Set a custom color for linked steps on hover/focus
+ * [--breadcrumb-link-text-decoration] - Set a custom text decoration for linked steps, underline by default
+ * [--breadcrumb-link-text-decoration-hover] - Set a custom text decoration for linked steps on hover/focus, underline by default
  * [--breadcrumb-current-color] - Set a custom color for the current page and unlinked steps
  * [--breadcrumb-focus-outline-color] - Set a custom color for a linked step's focus outline
  * [--breadcrumb-separator] - Set a custom separator between steps ; a quoted CSS string, e.g. '>'

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

@@ -3,8 +3,11 @@ import { css } from "lit";
  * Base style for the breadcrumb component.
  *
  * Custom css variables:
+ * [--breadcrumb-font-size] - Set a custom font size for the whole trail
  * [--breadcrumb-link-color] - Set a custom color for linked steps
  * [--breadcrumb-link-color-hover] - Set a custom color for linked steps on hover/focus
+ * [--breadcrumb-link-text-decoration] - Set a custom text decoration for linked steps, underline by default
+ * [--breadcrumb-link-text-decoration-hover] - Set a custom text decoration for linked steps on hover/focus, underline by default
  * [--breadcrumb-current-color] - Set a custom color for the current page and unlinked steps
  * [--breadcrumb-focus-outline-color] - Set a custom color for a linked step's focus outline
  * [--breadcrumb-separator] - Set a custom separator between steps ; a quoted CSS string, e.g. '>'
@@ -18,7 +21,7 @@ export const breadcrumbStyles = css `
   :host {
     display: block;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-font-size-s, 14px);
+    font-size: var(--breadcrumb-font-size, var(--eun-font-size-s, 14px));
   }
   #list {
     display: flex;
@@ -32,54 +35,47 @@ export const breadcrumbStyles = css `
   #list li {
     display: inline-flex;
     align-items: center;
-    max-width: var(--breadcrumb-item-max-width, 240px);
-  }
-  #items-slot {
-    display: contents;
-  }
-  #items-slot.hidden {
-    display: none;
+    min-width: 0;
   }
-  #list li > a,
-  #list li > span {
+  ::slotted(*) {
+    max-width: var(--breadcrumb-item-max-width, 240px);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    color: var(--breadcrumb-current-color, var(--eun-text-secondary, #484e61));
+    font-weight: var(--eun-font-weight-m, 500);
   }
-  #list li eun-icon {
-    display: inline-flex;
-    vertical-align: middle;
-    margin-inline-end: var(--eun-space-xxs, 1.6px);
-    margin-block-end: 3px;
-  }
-  #list li > a {
+  ::slotted(a[href]) {
     color: var(--breadcrumb-link-color, var(--eun-color-primary-500, #3d6fff));
-    text-decoration: none;
+    font-weight: inherit;
+    text-decoration: var(--breadcrumb-link-text-decoration, underline);
     border-radius: var(--eun-border-radius-s, 5px);
     outline: 2px solid transparent;
     transition:
-      color var(--breadcrumb-transition-duration, 0.2s) ease-out,
-      outline 0.2s ease-out;
+      color var(--breadcrumb-transition-duration, var(--eun-duration-m, 200ms))
+        var(--eun-easing-out, ease-out),
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
-  #list li > a:hover,
-  #list li > a:focus-visible {
+  ::slotted(a[href]:hover),
+  ::slotted(a[href]:focus-visible) {
     color: var(
       --breadcrumb-link-color-hover,
       var(--eun-color-primary-700, #3662e0)
     );
-    text-decoration: underline;
+    text-decoration: var(--breadcrumb-link-text-decoration-hover, underline);
   }
-  #list li > a:focus-visible {
-    text-decoration: none;
+  ::slotted(a[href]:focus-visible) {
     outline-color: var(
       --breadcrumb-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
     );
     outline-offset: 2px;
   }
-  #list li > span {
+  ::slotted(a[aria-current="page"]),
+  ::slotted(a[aria-current="page"]:hover) {
     color: var(--breadcrumb-current-color, var(--eun-text-secondary, #484e61));
     font-weight: var(--eun-font-weight-m, 500);
+    text-decoration: none;
   }
   #list li > .separator {
     margin-inline: var(--breadcrumb-separator-gap, var(--eun-space-s, 8px));

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

@@ -64,22 +64,27 @@ declare const EunomiaCarousel_base: import("../../../utils/constructor.type.js")
  * @prop {boolean} [showArrows=true] - Shows the previous and next buttons
  * @prop {boolean} [showDots=true] - Shows the pagination dots
  * @attr {string} aria-label - The accessible name for the carousel region. Defaults to Carousel, and is recommended whenever a page has more than one carousel, or its purpose isn't already clear from a preceding heading
- * @prop {string} [ariaLabelPrevious='Previous slide'] - The accessible label of the previous control
- * @attr {string} [aria-label-previous='Previous slide'] - The accessible label of the previous control
- * @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
+ * @prop {string} [ariaLabelPrevious] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
+ * @attr {string} [aria-label-previous] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
+ * @prop {string} [ariaLabelNext] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next slide")
+ * @attr {string} [aria-label-next] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next slide")
  * @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-track-padding-top] - Sets the top padding on the track, falling back to --carousel-track-padding
+ * @cssprop [--carousel-track-padding-bottom] - Sets the bottom padding on the track, falling back to --carousel-track-padding
+ * @cssprop [--carousel-track-padding-inline] - Lets the track bleed past the carousel on both sides by this length, while slides stay aligned on its edges. The next slide and the hover shadows of the edge slides show past the container
+ * @cssprop [--carousel-slide-width] - Sets a fixed width for every slide, overriding visibleSlides, fullSlides and --carousel-min-slide-width
  * @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
+ * @cssprop [--carousel-header-margin] - Sets the space between the header row and the track
  * @cssprop [--carousel-header-gap] - Sets the gap between the title slot and the header navigation buttons
  * @cssprop [--carousel-header-align] - Sets the cross-axis alignment (align-items) between the title slot and the header navigation buttons. Defaults to baseline, which keeps the nav buttons close to the track below regardless of how tall a multi-line title ends up
  * @cssprop [--carousel-nav-display] - Set to none to hide the previous and next buttons through pure CSS, regardless of showArrows
@@ -88,6 +93,10 @@ declare const EunomiaCarousel_base: import("../../../utils/constructor.type.js")
  * @cssprop [--carousel-nav-color] - Sets the icon color of the previous and next buttons
  * @cssprop [--carousel-nav-background] - Sets the background color of the previous and next buttons
  * @cssprop [--carousel-nav-border-color] - Sets the border color of the previous and next buttons
+ * @cssprop [--carousel-nav-border-width] - Sets the border width of the previous and next buttons
+ * @cssprop [--carousel-nav-hover-background] - Sets the background color of the previous and next buttons on hover
+ * @cssprop [--carousel-nav-hover-color] - Sets the icon color of the previous and next buttons on hover
+ * @cssprop [--carousel-nav-hover-border-color] - Sets the border color of the previous and next buttons on hover
  * @cssprop [--carousel-nav-shadow] - Sets the shadow of the previous and next buttons in the inline layout, when enabled. Unset for the header layout, and always unset while a button is disabled
  * @cssprop [--carousel-nav-disabled-background] - Sets the background and border color of a disabled previous or next button
  * @cssprop [--carousel-nav-disabled-color] - Sets the icon color of a disabled previous or next button
@@ -197,15 +206,17 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
      */
     showDots: boolean;
     /**
-     * Accessible label of the Previous control.
-     * @default Previous slide
+     * Accessible label of the Previous control. Resolved from the locale
+     * dictionary when unset, so it follows `locale` automatically.
+     * @default {i18n:carousel.previous}
      */
-    ariaLabelPrevious: string;
+    ariaLabelPrevious?: string;
     /**
-     * Accessible label of the Next control.
-     * @default Next slide
+     * Accessible label of the Next control. Resolved from the locale
+     * dictionary when unset, so it follows `locale` automatically.
+     * @default {i18n:carousel.next}
      */
-    ariaLabelNext: string;
+    ariaLabelNext?: string;
     /**
      * Index of the currently active slide (see {@link ACTIVE_SLIDE_CLASS}).
      * @internal
@@ -349,6 +360,15 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
      * @private
      */
     private getCssPixelValue;
+    /**
+     * The track's inline padding in pixels, set by
+     * `--carousel-track-padding-inline` to let the track bleed past the
+     * host. Slides rest that far from the track's own edge, so scroll math
+     * measured from that edge has to offset by it.
+     * @returns the inline padding, `0` when unset.
+     * @private
+     */
+    private getTrackInset;
     /**
      * The highest valid slide index a page can start on, without leaving
      * empty space at the end of the track. Measured from the slides' actual

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

@@ -54,22 +54,27 @@ const ACTIVE_SLIDE_CLASS = "eun-carousel-active-slide";
  * @prop {boolean} [showArrows=true] - Shows the previous and next buttons
  * @prop {boolean} [showDots=true] - Shows the pagination dots
  * @attr {string} aria-label - The accessible name for the carousel region. Defaults to Carousel, and is recommended whenever a page has more than one carousel, or its purpose isn't already clear from a preceding heading
- * @prop {string} [ariaLabelPrevious='Previous slide'] - The accessible label of the previous control
- * @attr {string} [aria-label-previous='Previous slide'] - The accessible label of the previous control
- * @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
+ * @prop {string} [ariaLabelPrevious] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
+ * @attr {string} [aria-label-previous] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous slide")
+ * @prop {string} [ariaLabelNext] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next slide")
+ * @attr {string} [aria-label-next] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next slide")
  * @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-track-padding-top] - Sets the top padding on the track, falling back to --carousel-track-padding
+ * @cssprop [--carousel-track-padding-bottom] - Sets the bottom padding on the track, falling back to --carousel-track-padding
+ * @cssprop [--carousel-track-padding-inline] - Lets the track bleed past the carousel on both sides by this length, while slides stay aligned on its edges. The next slide and the hover shadows of the edge slides show past the container
+ * @cssprop [--carousel-slide-width] - Sets a fixed width for every slide, overriding visibleSlides, fullSlides and --carousel-min-slide-width
  * @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
+ * @cssprop [--carousel-header-margin] - Sets the space between the header row and the track
  * @cssprop [--carousel-header-gap] - Sets the gap between the title slot and the header navigation buttons
  * @cssprop [--carousel-header-align] - Sets the cross-axis alignment (align-items) between the title slot and the header navigation buttons. Defaults to baseline, which keeps the nav buttons close to the track below regardless of how tall a multi-line title ends up
  * @cssprop [--carousel-nav-display] - Set to none to hide the previous and next buttons through pure CSS, regardless of showArrows
@@ -78,6 +83,10 @@ const ACTIVE_SLIDE_CLASS = "eun-carousel-active-slide";
  * @cssprop [--carousel-nav-color] - Sets the icon color of the previous and next buttons
  * @cssprop [--carousel-nav-background] - Sets the background color of the previous and next buttons
  * @cssprop [--carousel-nav-border-color] - Sets the border color of the previous and next buttons
+ * @cssprop [--carousel-nav-border-width] - Sets the border width of the previous and next buttons
+ * @cssprop [--carousel-nav-hover-background] - Sets the background color of the previous and next buttons on hover
+ * @cssprop [--carousel-nav-hover-color] - Sets the icon color of the previous and next buttons on hover
+ * @cssprop [--carousel-nav-hover-border-color] - Sets the border color of the previous and next buttons on hover
  * @cssprop [--carousel-nav-shadow] - Sets the shadow of the previous and next buttons in the inline layout, when enabled. Unset for the header layout, and always unset while a button is disabled
  * @cssprop [--carousel-nav-disabled-background] - Sets the background and border color of a disabled previous or next button
  * @cssprop [--carousel-nav-disabled-color] - Sets the icon color of a disabled previous or next button
@@ -180,16 +189,6 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
          * @default true
          */
         this.showDots = true;
-        /**
-         * Accessible label of the Previous control.
-         * @default Previous slide
-         */
-        this.ariaLabelPrevious = "Previous slide";
-        /**
-         * Accessible label of the Next control.
-         * @default Next slide
-         */
-        this.ariaLabelNext = "Next slide";
         /**
          * Index of the currently active slide (see {@link ACTIVE_SLIDE_CLASS}).
          * @internal
@@ -415,6 +414,20 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         const parsed = Number.parseFloat(getComputedStyle(this).getPropertyValue(name));
         return Number.isNaN(parsed) ? fallback : parsed;
     }
+    /**
+     * The track's inline padding in pixels, set by
+     * `--carousel-track-padding-inline` to let the track bleed past the
+     * host. Slides rest that far from the track's own edge, so scroll math
+     * measured from that edge has to offset by it.
+     * @returns the inline padding, `0` when unset.
+     * @private
+     */
+    getTrackInset() {
+        if (!this.trackEl) {
+            return 0;
+        }
+        return Number.parseFloat(getComputedStyle(this.trackEl).paddingLeft) || 0;
+    }
     /**
      * Number of pagination dots, derived from how many `scrollStep`-sized
      * jumps it takes to cover every slide. Rounds up so a trailing partial
@@ -481,10 +494,14 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         const track = this.trackEl;
         const trackRect = track.getBoundingClientRect();
         const maxScrollLeft = Math.max(0, track.scrollWidth - track.clientWidth);
+        const inset = this.getTrackInset();
         let max = 0;
         let closestDistance = Infinity;
         this.slides.forEach((slide, index) => {
-            const slideStart = slide.getBoundingClientRect().left - trackRect.left + track.scrollLeft;
+            const slideStart = slide.getBoundingClientRect().left -
+                trackRect.left +
+                track.scrollLeft -
+                inset;
             const distance = Math.abs(slideStart - maxScrollLeft);
             if (distance < closestDistance) {
                 closestDistance = distance;
@@ -512,7 +529,7 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
             this.style.setProperty("--_centerPadding", "0px");
             return;
         }
-        const trackWidth = this.trackEl.clientWidth;
+        const trackWidth = this.trackEl.clientWidth - 2 * this.getTrackInset();
         const slideWidth = this.slides[0].getBoundingClientRect().width;
         const padding = Math.max(0, (trackWidth - slideWidth) / 2);
         this.style.setProperty("--_centerPadding", `${padding}px`);
@@ -696,7 +713,7 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         const trackRect = this.trackEl.getBoundingClientRect();
         const reference = this.centerSnap
             ? trackRect.left + trackRect.width / 2
-            : trackRect.left;
+            : trackRect.left + this.getTrackInset();
         let closestIndex = 0;
         let closestDistance = Infinity;
         this.slides.forEach((slide, index) => {
@@ -804,7 +821,9 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
         type="button"
         id=${direction}
         class="nav"
-        aria-label=${isPrev ? this.ariaLabelPrevious : this.ariaLabelNext}
+        aria-label=${isPrev
+            ? (this.ariaLabelPrevious ?? this.dictionary.carousel.previous)
+            : (this.ariaLabelNext ?? this.dictionary.carousel.next)}
         aria-controls="track"
         ?disabled=${disabled}
         @click=${() => (isPrev ? this.previous() : this.next())}