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

package/dist/components/content/image-carousel/image-carousel.styles.js

@@ -1,5 +1,5 @@
 import { css } from "lit";
-import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
+import { cssBelow } from "../../../utils/media.styles.js";
 /**
  * Base style for the image carousel component.
  *
@@ -8,8 +8,12 @@ import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
  * [--image-carousel-object-fit] - Set a custom `object-fit` for the main image
  * [--image-carousel-border-radius] - Set a custom border radius for the main stage
  * [--image-carousel-background] - Set a custom background color behind the main stage, visible with `object-fit: contain`
+ * [--image-carousel-border-width] - Set a custom border width for the main stage, once a border color is set
+ * [--image-carousel-border-color] - Set a custom border color for the main stage (no border by default)
  * [--image-carousel-thumbnail-size] - Set a custom size for each thumbnail
  * [--image-carousel-thumbnail-gap] - Set a custom gap between thumbnails, and between the strip and the main stage
+ * [--image-carousel-thumbnail-border-color] - Set a custom border color for the thumbnails and the lightbox's grid items at rest (transparent by default)
+ * [--image-carousel-thumbnail-active-border-color] - Set a custom border color for the active thumbnail and the lightbox's active grid item
  * [--image-carousel-nav-color] - Set a custom icon color for the main stage's prev/next controls
  * [--image-carousel-transition-duration] - Set a custom duration for the `transition` animation between images
  * [--image-carousel-swipe-duration] - Set a custom duration for the main stage's touch swipe settling into place on release (committing, or springing back)
@@ -19,6 +23,7 @@ import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
  * [--image-carousel-lightbox-image-radius] - Set a custom border radius for the lightbox's own image
  * [--image-carousel-grid-width] - Set a custom width for the lightbox's grid column
  * [--image-carousel-grid-columns] - Set a custom column count for the lightbox's grid
+ * [--image-carousel-divider-color] - Set a custom color for the line between the lightbox's main image and its grid
  * [--image-carousel-dot-size] - Set a custom size for the pagination dots
  * [--image-carousel-dot-gap] - Set a custom gap between pagination dots
  * [--image-carousel-dot-color] - Set a custom color for the pagination dots
@@ -29,7 +34,10 @@ const base = css `
     display: block;
     --_magnifierZoom: 2.5;
     --_transitionDuration: var(--image-carousel-transition-duration, 380ms);
-    --_swipe-duration: var(--image-carousel-swipe-duration, 200ms);
+    --_swipe-duration: var(
+      --image-carousel-swipe-duration,
+      var(--eun-duration-m, 200ms)
+    );
   }
 
   :host([transition="none"]) {
@@ -62,7 +70,18 @@ const base = css `
       var(--eun-surface-sunken, #f7f8fa)
     );
     outline: 3px solid transparent;
-    transition: outline-color 0.2s ease-out;
+    transition: outline-color var(--eun-duration-m, 200ms)
+      var(--eun-easing-out, ease-out);
+  }
+  #stage::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 4;
+    border: var(--image-carousel-border-width, var(--eun-border-width-s, 1px))
+      solid var(--image-carousel-border-color, transparent);
+    border-radius: inherit;
+    pointer-events: none;
   }
 
   #stage:has(#expand-trigger:focus-visible) {
@@ -100,7 +119,8 @@ const base = css `
   }
 
   #main-image {
-    transition: transform 0.15s ease;
+    transition: transform var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   #main-image.zoomed {
     transform: scale(var(--_magnifierZoom));
@@ -158,22 +178,28 @@ const base = css `
     }
   }
   .transition-slide.entering.dir-next {
-    animation: ic-slide-in-next var(--_transitionDuration) ease;
+    animation: ic-slide-in-next var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
   .transition-slide.entering.dir-prev {
-    animation: ic-slide-in-prev var(--_transitionDuration) ease;
+    animation: ic-slide-in-prev var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
   .transition-slide.leaving.dir-next {
-    animation: ic-slide-out-next var(--_transitionDuration) ease;
+    animation: ic-slide-out-next var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
   .transition-slide.leaving.dir-prev {
-    animation: ic-slide-out-prev var(--_transitionDuration) ease;
+    animation: ic-slide-out-prev var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
   .transition-fade.entering {
-    animation: ic-fade-in var(--_transitionDuration) ease;
+    animation: ic-fade-in var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
   .transition-fade.leaving {
-    animation: ic-fade-out var(--_transitionDuration) ease;
+    animation: ic-fade-out var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
 
   #expand-icon {
@@ -190,7 +216,8 @@ const base = css `
     background: rgba(7, 22, 33, 0.55);
     color: #fff;
     opacity: 0.85;
-    transition: opacity 0.2s ease;
+    transition: opacity var(--eun-duration-m, 200ms)
+      var(--eun-easing-default, ease);
     cursor: pointer;
   }
 
@@ -213,9 +240,10 @@ const base = css `
     box-shadow: none;
     outline: 2px solid transparent;
     transition:
-      outline 0.2s ease-out,
-      background-color 0.2s ease,
-      box-shadow 0.2s ease;
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-default, ease),
+      box-shadow var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
   #prev {
     left: var(--eun-space-s, 8px);
@@ -268,16 +296,17 @@ const base = css `
     width: var(--image-carousel-thumbnail-size, 64px);
     height: var(--image-carousel-thumbnail-size, 64px);
     overflow: hidden;
-    border: var(--eun-border-width-m, 1.5px) solid transparent;
+    border: var(--eun-border-width-m, 1.5px) solid
+      var(--image-carousel-thumbnail-border-color, transparent);
     border-radius: var(--eun-border-radius-s, 6px);
     cursor: pointer;
     opacity: 0.6;
     outline: 2px solid transparent;
     outline-offset: -2px;
     transition:
-      opacity 0.2s ease,
-      outline 0.2s ease-out,
-      border-color 0.2s ease;
+      opacity var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border-color var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
   .thumbnail img {
     display: block;
@@ -290,7 +319,10 @@ const base = css `
   }
   .thumbnail[aria-current="true"] {
     opacity: 1;
-    border-color: var(--eun-color-primary-500, #3d6fff);
+    border-color: var(
+      --image-carousel-thumbnail-active-border-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
   }
   .thumbnail:focus-visible {
     outline-color: var(--eun-color-primary-500, #3d6fff);
@@ -317,9 +349,10 @@ const base = css `
     outline: 2px solid transparent;
     outline-offset: 2px;
     transition:
-      width 0.2s ease,
-      border-radius 0.2s ease,
-      background-color 0.2s ease;
+      width var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      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);
@@ -334,6 +367,7 @@ const base = css `
   }
 
   #modal {
+    --modal-padding: 0;
     --modal-width: var(--image-carousel-lightbox-width, min(1200px, 94vw));
     --modal-max-height: var(
       --image-carousel-lightbox-max-height,
@@ -384,7 +418,8 @@ const base = css `
     cursor: pointer;
     outline: 2px solid transparent;
     outline-offset: 2px;
-    transition: background-color 0.2s ease;
+    transition: background-color var(--eun-duration-m, 200ms)
+      var(--eun-easing-default, ease);
   }
   #lightbox-prev {
     left: var(--eun-space-m, 16px);
@@ -426,20 +461,21 @@ const base = css `
     overflow-y: auto;
     background: var(--eun-surface-color, #ffffff);
     border-left: var(--eun-border-width-s, 1px) solid
-      var(--eun-border-color, #dee0e7);
+      var(--image-carousel-divider-color, var(--eun-border-color, #dee0e7));
   }
   .grid-item {
     all: unset;
     box-sizing: border-box;
     aspect-ratio: 1;
     overflow: hidden;
-    border: var(--eun-border-width-m, 1.5px) solid transparent;
+    border: var(--eun-border-width-m, 1.5px) solid
+      var(--image-carousel-thumbnail-border-color, transparent);
     border-radius: var(--eun-border-radius-s, 6px);
     cursor: pointer;
     opacity: 0.7;
     transition:
-      opacity 0.2s ease,
-      border-color 0.2s ease;
+      opacity var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      border-color var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
   .grid-item img {
     display: block;
@@ -452,14 +488,17 @@ const base = css `
   }
   .grid-item[aria-current="true"] {
     opacity: 1;
-    border-color: var(--eun-color-primary-500, #3d6fff);
+    border-color: var(
+      --image-carousel-thumbnail-active-border-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
   }
   .grid-item:focus-visible {
     outline: 2px solid var(--eun-color-primary-500, #3d6fff);
     outline-offset: 2px;
   }
 
-  @media (max-width: ${EUNOMIA_BREAKPOINTS.mobile}px) {
+  @media ${cssBelow("mobile")} {
     #lightbox {
       flex-direction: column;
     }
@@ -472,7 +511,7 @@ const base = css `
       overflow-x: auto;
       overflow-y: hidden;
       border-top: var(--eun-border-width-s, 1px) solid
-        var(--eun-border-color, #dee0e7);
+        var(--image-carousel-divider-color, var(--eun-border-color, #dee0e7));
       border-left: none;
     }
   }

package/dist/components/content/password-strength/password-strength.styles.js

@@ -83,7 +83,11 @@ const base = css `
       var(--eun-surface-sunken-strong, #ecedf0)
     );
     transition: background-color
-      var(--password-strength-transition-duration, 0.3s) ease;
+      var(
+        --password-strength-transition-duration,
+        var(--eun-duration-xl, 300ms)
+      )
+      var(--eun-easing-default, ease);
   }
 
   .segment.filled {

package/dist/components/content/progress-bar/progress-bar.styles.js

@@ -155,7 +155,9 @@ const base = css `
       --progress-bar-border-radius,
       var(--eun-border-radius-full, 999px)
     );
-    transition: width var(--progress-bar-transition-duration, 0.3s) ease;
+    transition: width
+      var(--progress-bar-transition-duration, var(--eun-duration-xl, 300ms))
+      var(--eun-easing-default, ease);
   }
 
   #field::-webkit-meter-suboptimum-value {
@@ -164,7 +166,9 @@ const base = css `
       --progress-bar-border-radius,
       var(--eun-border-radius-full, 999px)
     );
-    transition: width var(--progress-bar-transition-duration, 0.3s) ease;
+    transition: width
+      var(--progress-bar-transition-duration, var(--eun-duration-xl, 300ms))
+      var(--eun-easing-default, ease);
   }
 
   #field::-webkit-meter-even-less-good-value {
@@ -173,7 +177,9 @@ const base = css `
       --progress-bar-border-radius,
       var(--eun-border-radius-full, 999px)
     );
-    transition: width var(--progress-bar-transition-duration, 0.3s) ease;
+    transition: width
+      var(--progress-bar-transition-duration, var(--eun-duration-xl, 300ms))
+      var(--eun-easing-default, ease);
   }
 
   #field::-moz-meter-bar {
@@ -183,7 +189,9 @@ const base = css `
       var(--eun-border-radius-full, 999px)
     );
     background: var(--_optimumColor);
-    transition: width var(--progress-bar-transition-duration, 0.3s) ease;
+    transition: width
+      var(--progress-bar-transition-duration, var(--eun-duration-xl, 300ms))
+      var(--eun-easing-default, ease);
   }
 
   #field:-moz-meter-sub-optimum::-moz-meter-bar {

package/dist/components/content/shared-styles/card-link.styles.js

@@ -5,9 +5,10 @@ import { css } from "lit";
  * once `href` is set, and the absolutely-positioned external-link badge
  * shown when `target="_blank"` (see `CardLinkMixin`).
  *
- * Every consumer's own `:host` styles must set `position: relative` for
- * the badge to anchor against the card's own box rather than some further
- * ancestor.
+ * The element holding the badge (`#card`, or `#back` for the sliding
+ * card) must be positioned. Positioning only `:host` isn't enough : the
+ * hover `transform` makes that element the containing block, and the
+ * badge would jump by the border width on hover.
  */
 const base = css `
   :host([href]) {

package/dist/components/content/shared-styles/tone-surface.styles.d.ts

@@ -25,6 +25,11 @@
  * flips with the active theme ; the `fixed-color` attribute pins them to the
  * light theme's white and black instead.
  *
+ * Severities read their `--eun-color-<state>-text` token for the solid and
+ * the accent rather than the raw `-100` state color, so both the colored
+ * text on the pale wash and the white text on the `fill` surface reach a
+ * 4.5:1 contrast ratio.
+ *
  * A component can override a slot on its own host to adapt it, for example
  * `--_bg-outline` when its outline surface isn't transparent.
  */

package/dist/components/content/shared-styles/tone-surface.styles.js

@@ -26,6 +26,11 @@ import { css } from "lit";
  * flips with the active theme ; the `fixed-color` attribute pins them to the
  * light theme's white and black instead.
  *
+ * Severities read their `--eun-color-<state>-text` token for the solid and
+ * the accent rather than the raw `-100` state color, so both the colored
+ * text on the pale wash and the white text on the `fill` surface reach a
+ * 4.5:1 contrast ratio.
+ *
  * A component can override a slot on its own host to adapt it, for example
  * `--_bg-outline` when its outline surface isn't transparent.
  */
@@ -58,13 +63,13 @@ export const toneSurfaceStyles = css `
   :host([color="primary"]:not([severity])) {
     --_solid: var(--eun-color-primary-500, #3d6fff);
     --_onSolid: var(--eun-color-on-primary-500, #ffffff);
-    --_tint: var(--eun-color-primary-transparent, #3d6fff33);
+    --_tint: var(--eun-color-primary-alpha-20, #3d6fff33);
     --_accent: var(--eun-color-primary-500, #3d6fff);
   }
   :host([color="secondary"]:not([severity])) {
     --_solid: var(--eun-color-secondary-500, #e5a030);
     --_onSolid: var(--eun-color-on-secondary-500, #000000de);
-    --_tint: var(--eun-color-secondary-transparent, #e5a03033);
+    --_tint: var(--eun-color-secondary-alpha-20, #edbd6f33);
     --_accent: var(--eun-color-secondary-500, #e5a030);
   }
 
@@ -95,28 +100,28 @@ export const toneSurfaceStyles = css `
   }
 
   :host([severity="info"]) {
-    --_solid: var(--eun-color-info-100, #097faf);
+    --_solid: var(--eun-color-info-text, #097aa8);
     --_onSolid: #fff;
-    --_tint: var(--eun-color-info-30, #f0f7fa);
-    --_accent: var(--eun-color-info-100, #097faf);
+    --_tint: var(--eun-color-info-alpha-5, #097faf0d);
+    --_accent: var(--eun-color-info-text, #097aa8);
   }
   :host([severity="success"]) {
-    --_solid: var(--eun-color-success-100, #1a9948);
+    --_solid: var(--eun-color-success-text, #167f3c);
     --_onSolid: #fff;
-    --_tint: var(--eun-color-success-30, #f1f9f4);
-    --_accent: var(--eun-color-success-100, #1a9948);
+    --_tint: var(--eun-color-success-alpha-5, #1a99480d);
+    --_accent: var(--eun-color-success-text, #167f3c);
   }
   :host([severity="warning"]) {
-    --_solid: var(--eun-color-warning-100, #c85207);
+    --_solid: var(--eun-color-warning-text, #b94c06);
     --_onSolid: #fff;
-    --_tint: var(--eun-color-warning-30, #fcf5f0);
-    --_accent: var(--eun-color-warning-100, #c85207);
+    --_tint: var(--eun-color-warning-alpha-5, #c852070d);
+    --_accent: var(--eun-color-warning-text, #b94c06);
   }
   :host([severity="critical"]) {
-    --_solid: var(--eun-color-critical-100, #aa0014);
+    --_solid: var(--eun-color-critical-text, #aa0014);
     --_onSolid: #fff;
-    --_tint: var(--eun-color-critical-30, #faf0f1);
-    --_accent: var(--eun-color-critical-100, #aa0014);
+    --_tint: var(--eun-color-critical-alpha-5, #aa00140d);
+    --_accent: var(--eun-color-critical-text, #aa0014);
   }
   :host([severity="neutral"]) {
     --_solid: var(--eun-color-grey-700, #484e61);

package/dist/components/content/tag/tag.d.ts

@@ -50,6 +50,10 @@ type TagSize = EunomiaCompactSize;
  * @cssprop [--tag-color] - Sets the text and icon color of the tag, for every appearance, color and severity
  * @cssprop [--tag-border-radius] - Sets the corner radius of the tag, also over rounded
  * @cssprop [--tag-gap] - Sets the gap between the tag icon and the label
+ * @cssprop [--tag-padding-block] - Sets the vertical padding of the tag, for every size. The border is taken out of it, so the tag keeps the same size with or without one
+ * @cssprop [--tag-padding-inline] - Sets the horizontal padding of the tag, for every size. The border is taken out of it, so the tag keeps the same size with or without one
+ * @cssprop [--tag-font-size] - Sets the font size of the tag, for every size
+ * @cssprop [--tag-font-weight] - Sets the font weight of the tag
  * @element eun-tag
  */
 export declare class EunomiaTag extends LitElement {

package/dist/components/content/tag/tag.js

@@ -43,6 +43,10 @@ export const EunomiaTagTagName = "eun-tag";
  * @cssprop [--tag-color] - Sets the text and icon color of the tag, for every appearance, color and severity
  * @cssprop [--tag-border-radius] - Sets the corner radius of the tag, also over rounded
  * @cssprop [--tag-gap] - Sets the gap between the tag icon and the label
+ * @cssprop [--tag-padding-block] - Sets the vertical padding of the tag, for every size. The border is taken out of it, so the tag keeps the same size with or without one
+ * @cssprop [--tag-padding-inline] - Sets the horizontal padding of the tag, for every size. The border is taken out of it, so the tag keeps the same size with or without one
+ * @cssprop [--tag-font-size] - Sets the font size of the tag, for every size
+ * @cssprop [--tag-font-weight] - Sets the font weight of the tag
  * @element eun-tag
  */
 let EunomiaTag = class EunomiaTag extends LitElement {

package/dist/components/content/tag/tag.styles.js

@@ -15,6 +15,10 @@ import { toneSurfaceStyles } from "../shared-styles/tone-surface.styles.js";
  * [--tag-border-width] - Set a custom border width, for every appearance. Defaults to 1px, only drawn (in a color) by outline, or when --tag-border-color is set
  * [--tag-border-radius] - Set a custom border radius to the tag, also over rounded
  * [--tag-gap] - Set a custom gap between the tag icon and the label
+ * [--tag-padding-block] - Set a custom vertical padding, for every size. The border is taken out of it
+ * [--tag-padding-inline] - Set a custom horizontal padding, for every size. The border is taken out of it
+ * [--tag-font-size] - Set a custom font size, for every size
+ * [--tag-font-weight] - Set a custom font weight
  */
 const base = css `
   :host {
@@ -90,11 +94,17 @@ const base = css `
     color: var(--tag-color, var(--_fg));
     border: var(--_borderWidth) solid var(--tag-border-color, var(--_bd));
     border-radius: var(--tag-border-radius, var(--_radius));
-    padding: max(0px, calc(var(--_padV) - var(--_borderWidth)))
-      max(0px, calc(var(--_padH) - var(--_borderWidth)));
-    font-size: var(--_fontSize);
+    padding: max(
+        0px,
+        calc(var(--tag-padding-block, var(--_padV)) - var(--_borderWidth))
+      )
+      max(
+        0px,
+        calc(var(--tag-padding-inline, var(--_padH)) - var(--_borderWidth))
+      );
+    font-size: var(--tag-font-size, var(--_fontSize));
     gap: var(--tag-gap, var(--_gap));
-    font-weight: var(--eun-font-weight-m, 500);
+    font-weight: var(--tag-font-weight, var(--eun-font-weight-m, 500));
     --icon-color: var(--tag-color, var(--_fg));
   }
 

package/dist/components/content/tooltip/tooltip.d.ts

@@ -93,6 +93,8 @@ declare const EunomiaTooltipMixinBase: Constructor<EunomiaTooltipBase>;
  * @cssprop [--tooltip-font-weight] - Sets the font weight of the description content, not the heading, and not richText, which stays at its own normal weight
  * @cssprop [--tooltip-border-radius] - Sets the corner radius of the panel
  * @cssprop [--tooltip-padding] - Sets the padding of the panel
+ * @cssprop [--tooltip-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --tooltip-padding is set
+ * @cssprop [--tooltip-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --tooltip-padding is set
  * @cssprop [--tooltip-shadow] - Sets the shadow of the panel
  * @cssprop [--tooltip-transition-duration] - Sets the duration of the open and close transition
  * @element eun-tooltip
@@ -467,8 +469,7 @@ export declare class EunomiaTooltip extends EunomiaTooltipMixinBase {
      * The enter/exit animation's duration, in ms : `0` under
      * `prefers-reduced-motion: reduce`, otherwise `--tooltip-transition-
      * duration` (forwarded onto the panel by {@link forwardCssVariables}) if
-     * set, falling back to the same `150ms` default the old CSS transition
-     * used.
+     * set, falling back to `--eun-duration-s`.
      *
      * @param panel the panel to read `--tooltip-transition-duration` off.
      * @private

package/dist/components/content/tooltip/tooltip.js

@@ -14,6 +14,7 @@ import { clampToViewport } from "../../../utils/dropdown-menu.utils.js";
 import { isWebKit } from "../../../utils/browser.utils.js";
 import { formatRichText } from "../../../utils/rich-text.utils.js";
 import { tooltipHostStyles, tooltipPanelStyles, tooltipAnchorPositioningStyles, } from "./tooltip.styles.js";
+import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
 /**
  * Tag name of the tooltip component.
  */
@@ -58,6 +59,8 @@ const FORWARDED_CSS_VARS = [
     "--tooltip-font-weight",
     "--tooltip-border-radius",
     "--tooltip-padding",
+    "--tooltip-padding-block",
+    "--tooltip-padding-inline",
     "--tooltip-row-gap",
     "--tooltip-shadow",
     "--tooltip-transition-duration",
@@ -121,6 +124,8 @@ const EunomiaTooltipMixinBase = AnchorPositionMixin(LitElement);
  * @cssprop [--tooltip-font-weight] - Sets the font weight of the description content, not the heading, and not richText, which stays at its own normal weight
  * @cssprop [--tooltip-border-radius] - Sets the corner radius of the panel
  * @cssprop [--tooltip-padding] - Sets the padding of the panel
+ * @cssprop [--tooltip-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --tooltip-padding is set
+ * @cssprop [--tooltip-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --tooltip-padding is set
  * @cssprop [--tooltip-shadow] - Sets the shadow of the panel
  * @cssprop [--tooltip-transition-duration] - Sets the duration of the open and close transition
  * @element eun-tooltip
@@ -608,8 +613,7 @@ let EunomiaTooltip = EunomiaTooltip_1 = class EunomiaTooltip extends EunomiaTool
      * The enter/exit animation's duration, in ms : `0` under
      * `prefers-reduced-motion: reduce`, otherwise `--tooltip-transition-
      * duration` (forwarded onto the panel by {@link forwardCssVariables}) if
-     * set, falling back to the same `150ms` default the old CSS transition
-     * used.
+     * set, falling back to `--eun-duration-s`.
      *
      * @param panel the panel to read `--tooltip-transition-duration` off.
      * @private
@@ -618,18 +622,7 @@ let EunomiaTooltip = EunomiaTooltip_1 = class EunomiaTooltip extends EunomiaTool
         if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
             return 0;
         }
-        const raw = getComputedStyle(panel)
-            .getPropertyValue("--tooltip-transition-duration")
-            .trim();
-        if (raw) {
-            const parsed = raw.endsWith("ms")
-                ? Number.parseFloat(raw)
-                : Number.parseFloat(raw) * 1000;
-            if (Number.isFinite(parsed) && parsed >= 0) {
-                return parsed;
-            }
-        }
-        return 150;
+        return resolveDurationMs(panel, "--tooltip-transition-duration", "s", 150);
     }
     /**
      * Plays the fade/scale-in, replacing any {@link panelAnimation} already
@@ -669,7 +662,7 @@ let EunomiaTooltip = EunomiaTooltip_1 = class EunomiaTooltip extends EunomiaTool
             { opacity: 1, scale: 1 },
         ], {
             duration,
-            easing: "ease",
+            easing: resolveEasing(panel),
             fill: "forwards",
         });
     }
@@ -693,7 +686,7 @@ let EunomiaTooltip = EunomiaTooltip_1 = class EunomiaTooltip extends EunomiaTool
         const animation = panel.animate([
             { opacity: 1, scale: 1 },
             { opacity: 0, scale: 0.96 },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(panel), fill: "forwards" });
         this.panelAnimation = animation;
         animation.finished
             .then(() => {

package/dist/components/content/tooltip/tooltip.styles.js

@@ -25,6 +25,8 @@ export const tooltipHostStyles = css `
  * [--tooltip-font-weight] - Set a custom font weight for the description content (not the heading, and not richText, which stays at its own normal weight)
  * [--tooltip-border-radius] - Set a custom border radius
  * [--tooltip-padding] - Set a custom padding
+ * [--tooltip-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --tooltip-padding is set
+ * [--tooltip-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --tooltip-padding is set
  * [--tooltip-row-gap] - Set a custom gap between the heading and description rows
  * [--tooltip-shadow] - Set a custom shadow
  * [--tooltip-transition-duration] - Set a custom duration for the open/close transition
@@ -89,7 +91,9 @@ const panel = css `
     --_onSolid: var(--eun-color-grey-900, #000000);
     --_opposite: var(--eun-color-grey-800, #071621);
   }
-  .eun-tooltip-panel:not([data-severity])[data-color="light"][data-fixed-color] {
+  .eun-tooltip-panel:not(
+      [data-severity]
+    )[data-color="light"][data-fixed-color] {
     --_solid: #ffffff;
     --_onSolid: #000000;
     --_opposite: #071621;
@@ -137,14 +141,22 @@ const panel = css `
     --_body: var(--_onSolid);
     --_bd: transparent;
   }
-  .eun-tooltip-panel:not([data-severity])[data-color="light"][data-appearance="default"],
-  .eun-tooltip-panel:not([data-severity])[data-color="dark"][data-appearance="default"] {
+  .eun-tooltip-panel:not(
+      [data-severity]
+    )[data-color="light"][data-appearance="default"],
+  .eun-tooltip-panel:not(
+      [data-severity]
+    )[data-color="dark"][data-appearance="default"] {
     --_bg: var(--_solid);
     --_head: var(--_onSolid);
     --_body: var(--_onSolid);
   }
-  .eun-tooltip-panel:not([data-severity])[data-color="light"][data-appearance="outline"],
-  .eun-tooltip-panel:not([data-severity])[data-color="dark"][data-appearance="outline"] {
+  .eun-tooltip-panel:not(
+      [data-severity]
+    )[data-color="light"][data-appearance="outline"],
+  .eun-tooltip-panel:not(
+      [data-severity]
+    )[data-color="dark"][data-appearance="outline"] {
     --_bg: var(--_opposite);
     --_head: var(--_solid);
     --_body: var(--_solid);
@@ -164,8 +176,14 @@ const panel = css `
     max-width: var(--tooltip-max-width, 280px);
     padding: var(
       --tooltip-padding,
-      max(0px, calc(var(--eun-space-s, 8px) - var(--_bw)))
-        max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+      var(
+          --tooltip-padding-block,
+          max(0px, calc(var(--eun-space-s, 8px) - var(--_bw)))
+        )
+        var(
+          --tooltip-padding-inline,
+          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+        )
     );
     border-radius: var(
       --tooltip-border-radius,

package/dist/components/form/checkbox/check-card.d.ts

@@ -24,7 +24,8 @@ export declare const EunomiaCheckCardTagName = "eun-check-card";
  * @prop {boolean} [disabled=false] - Whether the card is disabled
  * @prop {boolean} [readonly=false] - Whether the card is read only
  * @prop {boolean} [indeterminate=false] - Whether the card value is indeterminate
- * @prop {boolean} [hideError=false] - Whether the error message is hidden
+ * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @attr {boolean} [hide-error=false] - Whether the error message is hidden
  * @prop {boolean} [required=false] - Whether a selection is required
  * @prop {string} name - The name of the field
@@ -46,6 +47,8 @@ export declare const EunomiaCheckCardTagName = "eun-check-card";
  * @cssprop [--check-card-border-width] - Sets the width of the border
  * @cssprop [--check-card-border-radius] - Sets the corner radius of the card
  * @cssprop [--check-card-padding] - Sets the padding inside the card
+ * @cssprop [--check-card-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --check-card-padding is set
+ * @cssprop [--check-card-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --check-card-padding is set
  * @cssprop [--check-card-min-width] - Sets the minimum width of the card
  * @cssprop [--check-card-icon-color] - Sets the color of the leading icon while not checked
  * @cssprop [--check-card-icon-color-checked] - Sets the color of the leading icon while checked

package/dist/components/form/checkbox/check-card.js

@@ -35,7 +35,8 @@ export const EunomiaCheckCardTagName = "eun-check-card";
  * @prop {boolean} [disabled=false] - Whether the card is disabled
  * @prop {boolean} [readonly=false] - Whether the card is read only
  * @prop {boolean} [indeterminate=false] - Whether the card value is indeterminate
- * @prop {boolean} [hideError=false] - Whether the error message is hidden
+ * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @attr {boolean} [hide-error=false] - Whether the error message is hidden
  * @prop {boolean} [required=false] - Whether a selection is required
  * @prop {string} name - The name of the field
@@ -57,6 +58,8 @@ export const EunomiaCheckCardTagName = "eun-check-card";
  * @cssprop [--check-card-border-width] - Sets the width of the border
  * @cssprop [--check-card-border-radius] - Sets the corner radius of the card
  * @cssprop [--check-card-padding] - Sets the padding inside the card
+ * @cssprop [--check-card-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --check-card-padding is set
+ * @cssprop [--check-card-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --check-card-padding is set
  * @cssprop [--check-card-min-width] - Sets the minimum width of the card
  * @cssprop [--check-card-icon-color] - Sets the color of the leading icon while not checked
  * @cssprop [--check-card-icon-color-checked] - Sets the color of the leading icon while checked