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

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())}

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

@@ -9,11 +9,16 @@ import { css } from "lit";
  * [--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-track-padding-top] - Set a custom top padding on the track, falling back to --carousel-track-padding
+ * [--carousel-track-padding-bottom] - Set a custom bottom padding on the track, falling back to --carousel-track-padding
+ * [--carousel-track-padding-inline] - Let the track bleed out of the carousel on both sides by this length, while slides stay aligned on the carousel's edges. Shows the next slide and the edge slides' shadows past the container
+ * [--carousel-slide-width] - Set a fixed width for every slide, overriding `visibleSlides`, `fullSlides` and --carousel-min-slide-width
  * [--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
  * [--carousel-peek-size] - Set how much of the next slide peeks at the edge, when `fullSlides` is off
  * [--carousel-fade-width] - Set a custom width for the edge fades
  * [--carousel-fade-color] - Set a custom color for the edge fades (fades to transparent)
  * [--carousel-active-scale] - Set a custom scale applied to the active slide
+ * [--carousel-header-margin] - Set a custom space between the header and the track
  * [--carousel-header-gap] - Set a custom gap between the title slot and the header nav buttons
  * [--carousel-header-align] - Set a custom cross-axis alignment (`align-items`) between the title slot and the header nav buttons ; defaults to `baseline`, which keeps the nav buttons close to the track below regardless of how tall a multi-line title ends up
  * [--carousel-nav-display] - Set to `none` to hide the prev/next buttons via pure CSS (e.g. in a media query), regardless of `showArrows`
@@ -22,6 +27,10 @@ import { css } from "lit";
  * [--carousel-nav-color] - Set a custom icon color for the prev/next buttons
  * [--carousel-nav-background] - Set a custom background color for the prev/next buttons
  * [--carousel-nav-border-color] - Set a custom border color for the prev/next buttons
+ * [--carousel-nav-border-width] - Set a custom border width for the prev/next buttons
+ * [--carousel-nav-hover-background] - Set a custom background color for the prev/next buttons on hover
+ * [--carousel-nav-hover-color] - Set a custom icon color for the prev/next buttons on hover
+ * [--carousel-nav-hover-border-color] - Set a custom border color for the prev/next buttons on hover
  * [--carousel-nav-shadow] - Set a custom shadow for the `inline`-layout prev/next buttons, when enabled ; unset for `header`'s, and always unset while `disabled`
  * [--carousel-nav-disabled-background] - Set a custom background/border color for a disabled prev/next button
  * [--carousel-nav-disabled-color] - Set a custom icon color for a disabled prev/next button
@@ -42,6 +51,7 @@ const base = css `
       var(--_visibleCount)
     );
     --_snapAlign: start;
+    --_trackInline: var(--carousel-track-padding-inline, 0px);
   }
 
   .sr-only {
@@ -61,7 +71,7 @@ const base = css `
     align-items: var(--carousel-header-align, flex-end);
     justify-content: space-between;
     gap: var(--carousel-header-gap, var(--eun-space-m, 16px));
-    margin-bottom: var(--eun-space-m, 16px);
+    margin-bottom: var(--carousel-header-margin, var(--eun-space-m, 16px));
   }
   #carousel-header[hidden] {
     display: none;
@@ -99,10 +109,11 @@ const base = css `
     width: var(--carousel-fade-width, 60px);
     z-index: 2;
     pointer-events: none;
-    transition: opacity 0.3s ease;
+    transition: opacity var(--eun-duration-xl, 300ms)
+      var(--eun-easing-default, ease);
   }
   #viewport::before {
-    left: 0;
+    left: calc(-1 * var(--_trackInline));
     opacity: var(--_showLeftFade, 0);
     background: linear-gradient(
       to right,
@@ -111,7 +122,7 @@ const base = css `
     );
   }
   #viewport::after {
-    right: 0;
+    right: calc(-1 * var(--_trackInline));
     opacity: var(--_showRightFade, 0);
     background: linear-gradient(
       to left,
@@ -127,7 +138,17 @@ const base = css `
   #track {
     display: flex;
     gap: var(--carousel-gap, 16px);
-    padding-block: var(--carousel-track-padding, 0);
+    padding-block: var(
+        --carousel-track-padding-top,
+        var(--carousel-track-padding, var(--eun-space-l))
+      )
+      var(
+        --carousel-track-padding-bottom,
+        var(--carousel-track-padding, var(--eun-space-l))
+      );
+    padding-inline: var(--_trackInline);
+    margin-inline: calc(-1 * var(--_trackInline));
+    scroll-padding-inline: var(--_trackInline);
     overflow-x: auto;
     overflow-y: hidden;
     scroll-snap-type: x mandatory;
@@ -135,7 +156,8 @@ const base = css `
     outline: 2px solid transparent;
     outline-offset: 8px;
     border-radius: var(--eun-border-radius-m);
-    transition: outline 0.2s ease-out;
+    transition: outline var(--eun-duration-m, 200ms)
+      var(--eun-easing-out, ease-out);
   }
   #track::-webkit-scrollbar {
     display: none;
@@ -159,10 +181,11 @@ const base = css `
     flex-shrink: 0;
     scroll-snap-align: var(--_snapAlign, start);
     scroll-snap-stop: always;
-    transition: transform 0.2s ease;
+    transition: transform var(--eun-duration-m, 200ms)
+      var(--eun-easing-default, ease);
   }
   :host([full-slides]) ::slotted(:not([slot])) {
-    flex-basis: max(
+    --_slideBasis: max(
       var(--carousel-min-slide-width, 220px),
       calc(
         (
@@ -174,7 +197,7 @@ const base = css `
     );
   }
   :host(:not([full-slides])) ::slotted(:not([slot])) {
-    flex-basis: max(
+    --_slideBasis: max(
       var(--carousel-min-slide-width, 220px),
       calc(
         (
@@ -185,6 +208,9 @@ const base = css `
       )
     );
   }
+  :host ::slotted(:not([slot])) {
+    flex-basis: var(--carousel-slide-width, var(--_slideBasis));
+  }
   ::slotted(.eun-carousel-active-slide) {
     transform: scale(var(--carousel-active-scale, 1));
   }
@@ -202,8 +228,8 @@ const base = css `
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    border: var(--eun-border-width-s, 1px) solid
-      var(--carousel-nav-border-color, var(--eun-border-color, #dee0e7));
+    border: var(--carousel-nav-border-width, var(--eun-border-width-s, 1px))
+      solid var(--carousel-nav-border-color, var(--eun-border-color, #dee0e7));
     background: var(
       --carousel-nav-background,
       var(--eun-surface-color, #ffffff)
@@ -211,14 +237,27 @@ const base = css `
     color: var(--carousel-nav-color, var(--eun-text-color, #071621));
     cursor: pointer;
     outline: 2px solid transparent;
-    transition: outline 0.2s ease-out;
     transition:
-      outline 0.2s ease-out,
-      opacity 0.2s ease,
-      background-color 0.2s ease;
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      opacity var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-default, ease),
+      color var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      border-color var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
   .nav:hover:not(:disabled) {
-    background: var(--eun-content-hover, #edeff0);
+    background: var(
+      --carousel-nav-hover-background,
+      var(--eun-content-hover, #edeff0)
+    );
+    color: var(
+      --carousel-nav-hover-color,
+      var(--carousel-nav-color, var(--eun-text-color, #071621))
+    );
+    border-color: var(
+      --carousel-nav-hover-border-color,
+      var(--carousel-nav-border-color, var(--eun-border-color, #dee0e7))
+    );
   }
   .nav:focus-visible {
     outline-color: var(--eun-color-primary-500, #3d6fff);
@@ -273,10 +312,11 @@ const base = css `
     cursor: pointer;
     outline: 2px solid transparent;
     transition:
-      width 0.2s ease,
-      outline 0.2s ease-out,
-      border-radius 0.2s ease,
-      background-color 0.2s ease;
+      width var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border-radius var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-default, ease);
   }
   .dot:focus-visible {
     outline-color: var(--eun-color-primary-500, #3d6fff);

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

@@ -79,9 +79,14 @@ export const paginationStyles = css `
     outline-offset: 2px;
     user-select: none;
     transition:
-      background var(--pagination-transition-duration, 0.2s) ease-out,
-      outline var(--pagination-transition-duration, 0.2s) ease-out,
-      color var(--pagination-transition-duration, 0.2s) ease-out;
+      background
+        var(--pagination-transition-duration, var(--eun-duration-m, 200ms))
+        var(--eun-easing-out, ease-out),
+      outline
+        var(--pagination-transition-duration, var(--eun-duration-m, 200ms))
+        var(--eun-easing-out, ease-out),
+      color var(--pagination-transition-duration, var(--eun-duration-m, 200ms))
+        var(--eun-easing-out, ease-out);
   }
   button.control {
     cursor: pointer;

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

@@ -64,6 +64,8 @@ export type EunomiaSidebarTogglePlacement = "edge" | "inline";
  * @cssprop [--sidebar-color] - Sets the text color of the sidebar
  * @cssprop [--sidebar-border-color] - Sets the color of the sidebar's side border
  * @cssprop [--sidebar-padding] - Sets the padding of the header, body, and footer
+ * @cssprop [--sidebar-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --sidebar-padding is set
+ * @cssprop [--sidebar-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --sidebar-padding is set
  * @cssprop [--sidebar-gap] - Sets the gap inside the header and footer rows
  * @cssprop [--sidebar-transition-duration] - Sets the duration of the collapse and resize transition
  * @element eun-sidebar

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

@@ -61,6 +61,8 @@ export const EunomiaSidebarTagName = "eun-sidebar";
  * @cssprop [--sidebar-color] - Sets the text color of the sidebar
  * @cssprop [--sidebar-border-color] - Sets the color of the sidebar's side border
  * @cssprop [--sidebar-padding] - Sets the padding of the header, body, and footer
+ * @cssprop [--sidebar-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --sidebar-padding is set
+ * @cssprop [--sidebar-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --sidebar-padding is set
  * @cssprop [--sidebar-gap] - Sets the gap inside the header and footer rows
  * @cssprop [--sidebar-transition-duration] - Sets the duration of the collapse and resize transition
  * @element eun-sidebar

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

@@ -10,6 +10,8 @@ import { css } from "lit";
  * [--sidebar-color] - Set a custom text color to the sidebar (pair with --sidebar-background for contrast)
  * [--sidebar-border-color] - Set a custom color to the sidebar's side border
  * [--sidebar-padding] - Set a custom padding to the header/body/footer
+ * [--sidebar-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --sidebar-padding is set
+ * [--sidebar-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --sidebar-padding is set
  * [--sidebar-gap] - Set a custom gap inside the header/footer rows
  * [--sidebar-transition-duration] - Set a custom duration for the collapse/resize transition
  */
@@ -23,9 +25,19 @@ const base = css `
       --sidebar-border-color,
       var(--eun-border-color, #dee0e7)
     );
-    --_padding: var(--sidebar-padding, var(--eun-space-m, 16px));
+    --_paddingBlock: var(
+      --sidebar-padding,
+      var(--sidebar-padding-block, var(--eun-space-m, 16px))
+    );
+    --_paddingInline: var(
+      --sidebar-padding,
+      var(--sidebar-padding-inline, var(--eun-space-m, 16px))
+    );
     --_gap: var(--sidebar-gap, var(--eun-space-m, 16px));
-    --_transitionDuration: var(--sidebar-transition-duration, 0.25s);
+    --_transitionDuration: var(
+      --sidebar-transition-duration,
+      var(--eun-duration-l, 250ms)
+    );
     display: flex;
     position: sticky;
     top: 0;
@@ -33,7 +45,7 @@ const base = css `
     height: 100%;
     box-sizing: border-box;
     width: var(--_width);
-    transition: width var(--_transitionDuration) ease;
+    transition: width var(--_transitionDuration) var(--eun-easing-default, ease);
     border-inline-end: var(--eun-border-width-s, 1px) solid var(--_borderColor);
   }
   :host([dragging]) {
@@ -41,7 +53,8 @@ const base = css `
   }
   :host([position="end"]) {
     border-inline-end: none;
-    border-inline-start: var(--eun-border-width-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);
@@ -76,7 +89,7 @@ const base = css `
     align-items: flex-start;
     justify-content: space-between;
     gap: var(--_gap);
-    padding: var(--_padding) var(--_padding) 0;
+    padding: var(--_paddingBlock) var(--_paddingInline) 0;
   }
   #heading {
     margin: 0;
@@ -88,7 +101,7 @@ const base = css `
     flex: 1;
     min-height: 0;
     overflow-y: auto;
-    padding: var(--_gap) var(--_padding);
+    padding: var(--_gap) var(--_paddingInline);
     font-size: var(--eun-font-size-s, 14px);
   }
   #footer {
@@ -96,7 +109,7 @@ const base = css `
     display: flex;
     justify-content: flex-end;
     gap: var(--eun-space-s, 8px);
-    padding: var(--_padding);
+    padding: var(--_paddingBlock) var(--_paddingInline);
   }
 
   #resize-handle {
@@ -108,7 +121,8 @@ const base = css `
     cursor: ew-resize;
     touch-action: none;
     background: transparent;
-    transition: background-color 0.15s ease;
+    transition: background-color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   :host([position="end"]) #resize-handle {
     inset-inline-end: auto;
@@ -143,7 +157,8 @@ const base = css `
     border-radius: var(--eun-border-radius-xl, 999px);
     color: var(--eun-text-secondary, #484e61);
     cursor: pointer;
-    transition: background-color 0.15s ease;
+    transition: background-color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   :host([position="end"]) #collapse-toggle:not(.inline) {
     inset-inline-end: auto;
@@ -159,7 +174,7 @@ const base = css `
     align-items: center;
     gap: var(--eun-space-s, 8px);
     width: 100%;
-    padding: var(--eun-space-s, 8px) var(--_padding);
+    padding: var(--eun-space-s, 8px) var(--_paddingInline);
     border: none;
     border-top: var(--eun-border-width-s, 1px) solid var(--_borderColor);
     border-radius: 0;
@@ -169,7 +184,8 @@ const base = css `
     font-size: var(--eun-font-size-s, 14px);
     text-align: start;
     cursor: pointer;
-    transition: background-color 0.15s ease;
+    transition: background-color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   #collapse-toggle.inline:hover {
     background: var(--eun-content-hover, #edeff0);

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

@@ -107,14 +107,20 @@ export const stepStyles = css `
       var(--eun-content-hover, #edeff0)
     );
     color: var(--stepper-indicator-color, var(--eun-text-secondary, #484e61));
-    font-size: var(--stepper-indicator-font-size, var(--eun-font-size-xs, 12px));
+    font-size: var(
+      --stepper-indicator-font-size,
+      var(--eun-font-size-xs, 12px)
+    );
     font-weight: var(
       --stepper-indicator-font-weight,
       var(--eun-font-weight-m, 500)
     );
     transition:
-      background var(--stepper-transition-duration, 0.2s) ease-out,
-      color var(--stepper-transition-duration, 0.2s) ease-out;
+      background
+        var(--stepper-transition-duration, var(--eun-duration-m, 200ms))
+        var(--eun-easing-out, ease-out),
+      color var(--stepper-transition-duration, var(--eun-duration-m, 200ms))
+        var(--eun-easing-out, ease-out);
   }
   .indicator eun-icon {
     pointer-events: none;
@@ -164,7 +170,10 @@ export const stepStyles = css `
   }
   .label {
     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));
+    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 {
@@ -204,7 +213,9 @@ export const stepStyles = css `
       --stepper-connector-color-active,
       var(--eun-color-primary-200, #6f94ff)
     );
-    transition: transform var(--stepper-transition-duration, 0.2s) ease-out;
+    transition: transform
+      var(--stepper-transition-duration, var(--eun-duration-m, 200ms))
+      var(--eun-easing-out, ease-out);
   }
   :host(:not([orientation="vertical"])) .connector::after {
     transform: scaleX(0);

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

@@ -137,7 +137,9 @@ export const stepperStyles = css `
       --stepper-connector-color-active,
       var(--eun-color-primary-200, #6f94ff)
     );
-    transition: transform var(--stepper-transition-duration, 0.2s) ease-out;
+    transition: transform
+      var(--stepper-transition-duration, var(--eun-duration-m, 200ms))
+      var(--eun-easing-out, ease-out);
   }
   li.connector::after {
     transform: scaleX(0);
@@ -206,14 +208,20 @@ export const stepperStyles = css `
       var(--eun-content-hover, #edeff0)
     );
     color: var(--stepper-indicator-color, var(--eun-text-secondary, #484e61));
-    font-size: var(--stepper-indicator-font-size, var(--eun-font-size-xs, 12px));
+    font-size: var(
+      --stepper-indicator-font-size,
+      var(--eun-font-size-xs, 12px)
+    );
     font-weight: var(
       --stepper-indicator-font-weight,
       var(--eun-font-weight-m, 500)
     );
     transition:
-      background var(--stepper-transition-duration, 0.2s) ease-out,
-      color var(--stepper-transition-duration, 0.2s) ease-out;
+      background
+        var(--stepper-transition-duration, var(--eun-duration-m, 200ms))
+        var(--eun-easing-out, ease-out),
+      color var(--stepper-transition-duration, var(--eun-duration-m, 200ms))
+        var(--eun-easing-out, ease-out);
   }
   .indicator eun-icon {
     pointer-events: none;
@@ -305,7 +313,10 @@ export const stepperStyles = css `
   }
   .label {
     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));
+    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 {

package/dist/components/navigation/tabs/tab/tab.d.ts

@@ -9,6 +9,10 @@ declare const EunomiaTab_base: import("../../../../utils/constructor.type.js").C
  * Allows to control a tab panel by allowing to display it or not.
  * Note that the component must be used into a tab-group component.
  *
+ * The host itself takes focus, but draws its focus ring on its inner
+ * label box and forces its own `outline` to `none`, so a global
+ * `*:focus-visible` rule from the page never adds a second ring.
+ *
  * @slot [default] - The label of the tab
  * @slot [icon] - Used to set a custom icon different from Eunomia one
  * @slot [badge] - Positions slotted content (typically a `eun-badge`) into the same spot the boolean `badge` dot indicator occupies
@@ -16,14 +20,21 @@ declare const EunomiaTab_base: import("../../../../utils/constructor.type.js").C
  * @cssprop [--tab-background-color] - Set a custom background color for the tab
  * @cssprop [--tab-hover-background-color] - Set a custom background color for the tab in case of hover state
  * @cssprop [--tab-active-background-color] - Set a custom background color for the tab in case of active state
+ * @cssprop [--tab-focus-background-color] - Set a custom background color for the tab in case of keyboard focus
  * @cssprop [--tab-text-color] - Set a custom color for the tab label
  * @cssprop [--tab-hover-text-color] - Set a custom color to the tab label in case of hover state
  * @cssprop [--tab-active-text-color] - Srt a custom color to the tab label in case of active state
  * @cssprop [--tab-padding] - Set a custom padding into the tab.
+ * @cssprop [--tab-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --tab-padding is set
+ * @cssprop [--tab-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --tab-padding is set
  * @cssprop [--tab-border] - Set a custom border to the tab.
  * @cssprop [--tab-border-active] - Set a custom border to the tab on active state.
  * @cssprop [--tab-border-radius] - Set a custom border radius to the tab.
  * @cssprop [--tab-focus-outline] - Set a custom color to the focus outline
+ * @cssprop [--tab-focus-outline-width] - Set a custom width to the focus outline
+ * @cssprop [--tab-focus-outline-offset] - Set a custom offset to the focus outline
+ * @cssprop [--tab-font-size] - Set a custom font size to the tab label
+ * @cssprop [--tab-font-weight] - Set a custom font weight to the tab label
  * @cssprop [--tab-notification-color] - Set a custom color to the notification badge
  * @cssprop [--tab-disabled-display] - Set a custom `display` for a disabled tab, e.g. `none` to hide it entirely instead of showing it dimmed
  */

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

@@ -16,6 +16,10 @@ export const EunomiaTabTagName = "eun-tab";
  * Allows to control a tab panel by allowing to display it or not.
  * Note that the component must be used into a tab-group component.
  *
+ * The host itself takes focus, but draws its focus ring on its inner
+ * label box and forces its own `outline` to `none`, so a global
+ * `*:focus-visible` rule from the page never adds a second ring.
+ *
  * @slot [default] - The label of the tab
  * @slot [icon] - Used to set a custom icon different from Eunomia one
  * @slot [badge] - Positions slotted content (typically a `eun-badge`) into the same spot the boolean `badge` dot indicator occupies
@@ -23,14 +27,21 @@ export const EunomiaTabTagName = "eun-tab";
  * @cssprop [--tab-background-color] - Set a custom background color for the tab
  * @cssprop [--tab-hover-background-color] - Set a custom background color for the tab in case of hover state
  * @cssprop [--tab-active-background-color] - Set a custom background color for the tab in case of active state
+ * @cssprop [--tab-focus-background-color] - Set a custom background color for the tab in case of keyboard focus
  * @cssprop [--tab-text-color] - Set a custom color for the tab label
  * @cssprop [--tab-hover-text-color] - Set a custom color to the tab label in case of hover state
  * @cssprop [--tab-active-text-color] - Srt a custom color to the tab label in case of active state
  * @cssprop [--tab-padding] - Set a custom padding into the tab.
+ * @cssprop [--tab-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --tab-padding is set
+ * @cssprop [--tab-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --tab-padding is set
  * @cssprop [--tab-border] - Set a custom border to the tab.
  * @cssprop [--tab-border-active] - Set a custom border to the tab on active state.
  * @cssprop [--tab-border-radius] - Set a custom border radius to the tab.
  * @cssprop [--tab-focus-outline] - Set a custom color to the focus outline
+ * @cssprop [--tab-focus-outline-width] - Set a custom width to the focus outline
+ * @cssprop [--tab-focus-outline-offset] - Set a custom offset to the focus outline
+ * @cssprop [--tab-font-size] - Set a custom font size to the tab label
+ * @cssprop [--tab-font-weight] - Set a custom font weight to the tab label
  * @cssprop [--tab-notification-color] - Set a custom color to the notification badge
  * @cssprop [--tab-disabled-display] - Set a custom `display` for a disabled tab, e.g. `none` to hide it entirely instead of showing it dimmed
  */