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

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.js

@@ -218,8 +218,15 @@ let EunomiaStepper = class EunomiaStepper extends LitElement {
     syncSlottedSteps() {
         this.slottedSteps.forEach((step, index) => {
             step.index = index;
-            step.orientation = this.orientation;
-            step.status = this.statusOf(index, this.activeStep, step.state);
+            // Only assigned when they differ: assigning a step's default again
+            // would reflect it.
+            if (step.orientation !== this.orientation) {
+                step.orientation = this.orientation;
+            }
+            const status = this.statusOf(index, this.activeStep, step.state);
+            if (step.status !== status) {
+                step.status = status;
+            }
             const isCurrent = index === this.activeStep;
             step.reachable =
                 !isCurrent &&
@@ -508,7 +515,7 @@ let EunomiaStepper = class EunomiaStepper extends LitElement {
  */
 EunomiaStepper.styles = [stepperStyles];
 __decorate([
-    property({ type: Array, reflect: true })
+    property({ type: Array, reflect: true, useDefault: true })
 ], EunomiaStepper.prototype, "steps", void 0);
 __decorate([
     property({ type: Number, attribute: "active-step" })
@@ -517,10 +524,10 @@ __decorate([
     property({ type: Number, attribute: "active-substep" })
 ], EunomiaStepper.prototype, "activeSubstep", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaStepper.prototype, "orientation", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaStepper.prototype, "variant", void 0);
 __decorate([
     property({ reflect: true, converter: linearConverter })

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);
         });
     }
     /**
@@ -711,13 +710,13 @@ EunomiaTabGroup.styles = tabGroupStyle;
  */
 EunomiaTabGroup.EDGE_RESISTANCE = 0.3;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTabGroup.prototype, "align", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaTabGroup.prototype, "full", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTabGroup.prototype, "animation", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

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

@@ -18,7 +18,10 @@ import { css } from "lit";
  */
 const base = css `
   :host {
-    --_swipe-duration: var(--tab-panel-swipe-duration, 200ms);
+    --_swipe-duration: var(
+      --tab-panel-swipe-duration,
+      var(--eun-duration-m, 200ms)
+    );
     --_indicator-height: var(--tab-indicator-height, 2px);
     --_indicator-color: var(
       --tab-indicator-color,
@@ -26,7 +29,7 @@ const base = css `
     );
     --_hover-indicator-color: var(
       --tab-hover-indicator-color,
-      var(--eun-color-primary-transparent, #3d6fff33)
+      var(--eun-color-primary-alpha-20, #3d6fff33)
     );
     --_divider-gap: var(--tab-divider-gap, 0px);
     --_divider-color: var(
@@ -79,8 +82,9 @@ const base = css `
     opacity: 0;
     z-index: 1;
     transition:
-      opacity 0.2s ease-out,
-      background-color 0.2s ease-out;
+      opacity var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out);
   }
 
   ::slotted(eun-tab:not([disabled]):hover)::after {
@@ -91,10 +95,10 @@ const base = css `
     height: var(--_indicator-height);
     background: var(--_indicator-color);
     position: absolute;
-    bottom: 0;
+    bottom: var(--_outline-padding);
     transition:
-      width 0.1s linear,
-      transform 0.15s ease;
+      width var(--eun-duration-xs, 100ms) linear,
+      transform var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
     will-change: width, transform;
     z-index: 1;
   }
@@ -107,10 +111,10 @@ const base = css `
   [role="tablist"] {
     display: flex;
     gap: var(--_tabs-gap);
-    padding-bottom: var(--_divider-gap);
+    padding-bottom: calc(var(--_divider-gap) + var(--_outline-padding));
     padding-top: var(--_outline-padding);
     padding-inline: var(--_outline-padding);
-    margin-bottom: var(--_panel-gap);
+    margin-bottom: calc(var(--_panel-gap) - var(--_outline-padding));
     scrollbar-width: none;
     position: relative;
   }
@@ -136,7 +140,8 @@ const base = css `
     opacity: 0;
     min-width: 30px;
     pointer-events: none;
-    transition: opacity 0.2s ease;
+    transition: opacity var(--eun-duration-m, 200ms)
+      var(--eun-easing-default, ease);
     display: flex;
     align-items: center;
   }
@@ -170,7 +175,7 @@ const base = css `
     border-top: var(--_divider-size) solid var(--_divider-color);
     margin: 0;
     position: absolute;
-    bottom: 0;
+    bottom: var(--_outline-padding);
     left: 0;
     right: 0;
     width: 100%;
@@ -197,20 +202,20 @@ const base = css `
 
   :host([animation="fade"]) slot:not([name])::slotted(eun-tab-panel),
   :host(:not([animation])) slot:not([name])::slotted(eun-tab-panel) {
-    --_animationTime: var(--tab-panel-animation, 150ms);
+    --_animationTime: var(--tab-panel-animation, var(--eun-duration-s, 150ms));
     animation: var(--_animationTime) ease-in fade-in;
   }
 
-  :host([animation="slide"])
+  :host(:is([animation="slide"], :not([animation])))
     slot:not([name])::slotted(eun-tab-panel.slide-left) {
     --_animationTime: var(--tab-panel-animation, 500ms);
-    animation: var(--_animationTime) ease-out slide-left;
+    animation: var(--_animationTime) var(--eun-easing-out, ease-out) slide-left;
   }
 
-  :host([animation="slide"])
+  :host(:is([animation="slide"], :not([animation])))
     slot:not([name])::slotted(eun-tab-panel.slide-right) {
     --_animationTime: var(--tab-panel-animation, 500ms);
-    animation: var(--_animationTime) ease-out slide-right;
+    animation: var(--_animationTime) var(--eun-easing-out, ease-out) slide-right;
   }
 
   @keyframes fade-in {

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

@@ -8,6 +8,10 @@ export declare const EunomiaTabPanelTagName = "eun-tab-panel";
  * Note that it must be used inside a `eun-tab-group` component.
  *
  * @slot [default] - The panel content
+ * @cssprop [--tab-panel-font-size] - Set a custom font size to the panel content
+ * @cssprop [--tab-panel-focus-outline] - Set a custom color to the focus outline, shown when the panel itself takes focus
+ * @cssprop [--tab-panel-focus-outline-width] - Set a custom width to the focus outline
+ * @cssprop [--tab-panel-focus-outline-offset] - Set a custom offset to the focus outline
  */
 export declare class EunomiaTabPanel extends LitElement {
     /**

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

@@ -17,6 +17,10 @@ export const EunomiaTabPanelTagName = "eun-tab-panel";
  * Note that it must be used inside a `eun-tab-group` component.
  *
  * @slot [default] - The panel content
+ * @cssprop [--tab-panel-font-size] - Set a custom font size to the panel content
+ * @cssprop [--tab-panel-focus-outline] - Set a custom color to the focus outline, shown when the panel itself takes focus
+ * @cssprop [--tab-panel-focus-outline-width] - Set a custom width to the focus outline
+ * @cssprop [--tab-panel-focus-outline-offset] - Set a custom offset to the focus outline
  */
 let EunomiaTabPanel = class EunomiaTabPanel extends LitElement {
     constructor() {

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

@@ -1,9 +1,26 @@
 import { css } from "lit";
+/**
+ * Base style for the tab panel.
+ *
+ * Custom css variables:
+ * [--tab-panel-font-size] - Set a custom font size to the panel content
+ * [--tab-panel-focus-outline] - Set a custom color to the focus outline, shown when the panel itself takes focus
+ * [--tab-panel-focus-outline-width] - Set a custom width to the focus outline
+ * [--tab-panel-focus-outline-offset] - Set a custom offset to the focus outline
+ */
 const base = css `
   :host {
     display: block;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-font-size-s, 14px);
+    font-size: var(--tab-panel-font-size, var(--eun-font-size-s, 14px));
+    outline: var(--tab-panel-focus-outline-width, 2px) solid transparent;
+    outline-offset: var(--tab-panel-focus-outline-offset, 2px);
+  }
+  :host(:focus-visible) {
+    outline-color: var(
+      --tab-panel-focus-outline,
+      var(--eun-color-primary-500, #3d6fff)
+    );
   }
   :host([is-hidden]) {
     display: none;