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

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
  */

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

@@ -1,5 +1,5 @@
 import { css } from "lit";
-import { EUNOMIA_BREAKPOINTS } from "../../../../breakpoints.js";
+import { cssFrom } from "../../../../utils/media.styles.js";
 /**
  * Base style for the tab.
  *
@@ -7,15 +7,21 @@ import { EUNOMIA_BREAKPOINTS } from "../../../../breakpoints.js";
  * [--tab-background-color] - Set a custom background color for the tab
  * [--tab-hover-background-color] - Set a custom background color for the tab in case of hover state
  * [--tab-active-background-color] - Set a custom background color for the tab in case of active state
+ * [--tab-focus-background-color] - Set a custom background color for the tab in case of keyboard focus
  * [--tab-text-color] - Set a custom color for the tab label
  * [--tab-hover-text-color] - Set a custom color to the tab label in case of hover state
  * [--tab-active-text-color] - Set a custom color to the tab label in case of active state
  * [--tab-padding] - Set a custom padding into the tab
+ * [--tab-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --tab-padding is set
+ * [--tab-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --tab-padding is set
  * [--tab-border] - Set a custom border to the tab
  * [--tab-border-active] - Set a custom border to the tab on active state
  * [--tab-border-radius] - Set a custom border radius to the tab
  * [--tab-focus-outline] - Set a custom color to the focus outline
+ * [--tab-focus-outline-width] - Set a custom width to the focus outline
  * [--tab-focus-outline-offset] - Set a custom offset to the focus outline
+ * [--tab-font-size] - Set a custom font size to the tab label
+ * [--tab-font-weight] - Set a custom font weight to the tab label
  * [--tab-notification-color] - Set a custom color to the notification badge
  * [--tab-disabled-display] - Set a custom `display` for a disabled tab, e.g. `none` to hide it entirely instead of showing it dimmed
  */
@@ -33,14 +39,15 @@ const base = css `
     --_background: var(--tab-background-color, transparent);
     --_padding: var(
       --tab-padding,
-      var(--eun-space-s, 8px) var(--eun-space-m, 16px)
+      var(--tab-padding-block, var(--eun-space-s, 8px))
+        var(--tab-padding-inline, var(--eun-space-m, 16px))
     );
     --_border: var(--tab-border);
     --_border-radius: var(--tab-border-radius, 8px);
     --_pointerEvents: all;
-    font-size: var(--eun-font-size-s, 14px);
-    font-weight: var(--eun-font-weight-m, 500);
-    outline: none;
+    font-size: var(--tab-font-size, var(--eun-font-size-s, 14px));
+    font-weight: var(--tab-font-weight, var(--eun-font-weight-m, 500));
+    outline: none !important;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     z-index: 1;
   }
@@ -80,16 +87,19 @@ const base = css `
     border: var(--_border);
     border-radius: var(--_border-radius);
     background: var(--_background);
-    outline: 2px solid transparent;
-    outline-offset: -8px;
+    outline: var(--tab-focus-outline-width, 2px) solid transparent;
+    outline-offset: var(--tab-focus-outline-offset, -2px);
     user-select: none;
-    transition: all 0.2s ease-out;
+    transition: all var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
     color: var(--_textColor);
     fill: var(--_textColor);
   }
   :host(:focus-visible) div {
-    outline-offset: var(--tab-focus-outline-offset, -6px);
     outline-color: var(--_focusIndicator);
+    background: var(
+      --tab-focus-background-color,
+      var(--eun-color-primary-alpha-10, #3d6fff1a)
+    );
   }
   :host([badge]) div,
   div[has-badge] {
@@ -138,13 +148,12 @@ const base = css `
       var(--eun-color-critical-100, #aa0014)
     );
     border-radius: var(--eun-border-radius-xl, 999px);
-    transition: scale 0.2s cubic-bezier(0.35, 0.92, 0.65, 1.28);
+    transition: scale var(--eun-duration-m, 200ms)
+      cubic-bezier(0.35, 0.92, 0.65, 1.28);
     scale: 1;
     place-self: var(--_badge-place, start);
     translate: var(--_y-correction, 0 -2px);
   }
-  /* A real slotted badge (slot="badge") takes priority over the plain
-     dot indicator when both are present, rather than rendering both. */
   :host([badge]) div[has-badge]::after {
     display: none;
   }
@@ -163,10 +172,7 @@ const base = css `
     }
   }
 
-  @media (min-width: ${EUNOMIA_BREAKPOINTS.tablet}px) {
-    :host {
-      font-size: var(--eun-font-size-s, 14px);
-    }
+  @media ${cssFrom("tablet")} {
     :host([badge]) div::after {
       --_y-correction: none;
     }

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

@@ -15,6 +15,7 @@ import { createSwipeGesture, } from "../../../../utils/swipe-gesture.utils.js";
 import { TabChangeEvent } from "../../../../events/tabchange.event.js";
 import { EunomiaTab } from "../tab/tab.js";
 import { tabGroupStyle } from "./tab-group.styles.js";
+import { cssTimeToMs } from "../../../../utils/motion.utils.js";
 /**
  * Tag name of the tab group component.
  */
@@ -355,7 +356,7 @@ let EunomiaTabGroup = EunomiaTabGroup_1 = class EunomiaTabGroup extends Navigati
         if (previousPanel) {
             this.dispatchEvent(new TabChangeEvent({ active: newTab.panel }));
         }
-        this.updateComplete.then(this.debounceAnimation);
+        void this.updateComplete.then(this.debounceAnimation);
     }
     /**
      * Initialize the slide animation if initialized.
@@ -505,15 +506,15 @@ let EunomiaTabGroup = EunomiaTabGroup_1 = class EunomiaTabGroup extends Navigati
         const edgeSign = this.dragDirection === DirectionFocus.NEXT ? 1 : -1;
         const activeFinal = commit ? `${-edgeSign * 100}%` : "0px";
         const targetFinal = commit ? "0px" : `${edgeSign * 100}%`;
-        const duration = getComputedStyle(this).getPropertyValue("--_swipe-duration");
-        const instant = Number.parseFloat(duration) <= 0;
+        const duration = cssTimeToMs(getComputedStyle(this).getPropertyValue("--_swipe-duration")) ?? 0;
+        const instant = duration <= 0;
         [activePanel, targetPanel].forEach((panel) => {
             if (!panel) {
                 return;
             }
             panel.style.transition = instant
                 ? "none"
-                : "transform var(--_swipe-duration) ease-out";
+                : "transform var(--_swipe-duration) var(--eun-easing-out, ease-out)";
         });
         activePanel?.style.setProperty("transform", `translateX(${activeFinal})`);
         targetPanel?.style.setProperty("transform", `translateX(${targetFinal})`);
@@ -530,10 +531,8 @@ let EunomiaTabGroup = EunomiaTabGroup_1 = class EunomiaTabGroup extends Navigati
             this.finalizeDrag(commit);
         };
         activePanel?.addEventListener("transitionend", onSettled, { once: true });
-        // Belt-and-braces : a panel with e.g. `display:none` sneaking in
-        // through external code mid-drag would never fire `transitionend`.
-        this.updateComplete.then(() => {
-            window.setTimeout(onSettled, Number.parseFloat(duration) || 0);
+        void this.updateComplete.then(() => {
+            window.setTimeout(onSettled, duration);
         });
     }
     /**