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

package/dist/components/content/password-strength/password-strength.d.ts

@@ -4,6 +4,7 @@ import { PasswordStrengthLevel, PasswordStrengthRule } from "./password-strength
  * Tag name of the password strength component.
  */
 export declare const EunomiaPasswordStrengthTagName = "eun-password-strength";
+declare const EunomiaPasswordStrength_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A visual and assistive technology indicator of how well a password
  * satisfies a set of configurable requirements, graded into levels,
@@ -21,9 +22,10 @@ export declare const EunomiaPasswordStrengthTagName = "eun-password-strength";
  * escape hatch for a level that needs a specific pattern instead.
  *
  * @prop {string} [value=''] - The password to grade
- * @prop {string} [label='Password strength'] - A static caption shown next to the current level's name, and used to prefix the message announced to screen readers on every level change
+ * @prop {string} [label] - A static caption shown next to the current level's name, and used to prefix the message announced to screen readers on every level change. Defaults to the localized string for the current locale (English: "Password strength")
  * @prop {Array<import('./password-strength.type.js').PasswordStrengthRule>} [rules] - The shared pool of requirements levels are scored against by default. Four by default: eight or more characters, upper and lower case, one number, and one special character
- * @prop {Array<import('./password-strength.type.js').PasswordStrengthLevel>} [levels] - The levels to render, ordered from weakest to strongest. Four by default: Weak, Fair, Good, and Strong
+ * @prop {Array<import('./password-strength.type.js').PasswordStrengthLevel>} [levels] - The levels to render, ordered from weakest to strongest. Four by default: Weak, Fair, Good, and Strong, named in the current locale
+ * @prop {string} [locale] - The locale used to resolve the default caption and level names. Defaults to the shared default locale
  * @prop {boolean} [hideLabel=false] - Hides the always-visible caption and level name. The level name is still announced to screen readers on every change either way
  * @attr {boolean} [hide-label=false] - Hides the always-visible caption and level name
  * @cssprop [--password-strength-gap] - Sets the gap between the segment row and the label
@@ -42,7 +44,7 @@ export declare const EunomiaPasswordStrengthTagName = "eun-password-strength";
  * @cssprop [--password-strength-level-font-weight] - Sets the font weight of the level name
  * @element eun-password-strength
  */
-export declare class EunomiaPasswordStrength extends LitElement {
+export declare class EunomiaPasswordStrength extends EunomiaPasswordStrength_base {
     /**
      * Styles to import to the component.
      *
@@ -59,10 +61,10 @@ export declare class EunomiaPasswordStrength extends LitElement {
     /**
      * Static caption shown next to the current level's name, and used to
      * prefix the message announced to screen readers on every level change
-     * (e.g. "Password strength: Fair").
-     * @default Password strength
+     * (e.g. "Password strength: Fair"). Falls back to the localized string
+     * for the current locale when unset.
      */
-    label: string;
+    label?: string;
     /**
      * The shared pool of regex-based requirements levels are scored against
      * by default (see {@link PasswordStrengthLevel.minScore}). A JS-only
@@ -107,6 +109,18 @@ export declare class EunomiaPasswordStrength extends LitElement {
      * @internal
      */
     private get currentLevelIndex();
+    /**
+     * {@link levels}, with the default levels named in the current locale.
+     * Custom levels are returned as is.
+     * @internal
+     */
+    private get resolvedLevels();
+    /**
+     * {@link label} or its localized fallback, punctuated for the current
+     * locale (e.g. "Password strength:").
+     * @internal
+     */
+    private get caption();
     /**
      * Lifecycle hook called whenever reactive properties change. Speaks the
      * newly-reached level through {@link announcerEl} whenever it actually
@@ -122,3 +136,4 @@ declare global {
         [EunomiaPasswordStrengthTagName]: EunomiaPasswordStrength;
     }
 }
+export {};

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

@@ -10,6 +10,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { passwordStrengthStyles } from "./password-strength.styles.js";
 import { DEFAULT_PASSWORD_STRENGTH_LEVELS, DEFAULT_PASSWORD_STRENGTH_RULES, getPasswordStrengthLevelIndex, } from "./password-strength.type.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the password strength component.
  */
@@ -31,9 +32,10 @@ export const EunomiaPasswordStrengthTagName = "eun-password-strength";
  * escape hatch for a level that needs a specific pattern instead.
  *
  * @prop {string} [value=''] - The password to grade
- * @prop {string} [label='Password strength'] - A static caption shown next to the current level's name, and used to prefix the message announced to screen readers on every level change
+ * @prop {string} [label] - A static caption shown next to the current level's name, and used to prefix the message announced to screen readers on every level change. Defaults to the localized string for the current locale (English: "Password strength")
  * @prop {Array<import('./password-strength.type.js').PasswordStrengthRule>} [rules] - The shared pool of requirements levels are scored against by default. Four by default: eight or more characters, upper and lower case, one number, and one special character
- * @prop {Array<import('./password-strength.type.js').PasswordStrengthLevel>} [levels] - The levels to render, ordered from weakest to strongest. Four by default: Weak, Fair, Good, and Strong
+ * @prop {Array<import('./password-strength.type.js').PasswordStrengthLevel>} [levels] - The levels to render, ordered from weakest to strongest. Four by default: Weak, Fair, Good, and Strong, named in the current locale
+ * @prop {string} [locale] - The locale used to resolve the default caption and level names. Defaults to the shared default locale
  * @prop {boolean} [hideLabel=false] - Hides the always-visible caption and level name. The level name is still announced to screen readers on every change either way
  * @attr {boolean} [hide-label=false] - Hides the always-visible caption and level name
  * @cssprop [--password-strength-gap] - Sets the gap between the segment row and the label
@@ -52,7 +54,7 @@ export const EunomiaPasswordStrengthTagName = "eun-password-strength";
  * @cssprop [--password-strength-level-font-weight] - Sets the font weight of the level name
  * @element eun-password-strength
  */
-let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LitElement {
+let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LocalizableMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -60,13 +62,6 @@ let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LitElement {
          * @default ''
          */
         this.value = "";
-        /**
-         * Static caption shown next to the current level's name, and used to
-         * prefix the message announced to screen readers on every level change
-         * (e.g. "Password strength: Fair").
-         * @default Password strength
-         */
-        this.label = "Password strength";
         /**
          * The shared pool of regex-based requirements levels are scored against
          * by default (see {@link PasswordStrengthLevel.minScore}). A JS-only
@@ -106,6 +101,30 @@ let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LitElement {
     get currentLevelIndex() {
         return getPasswordStrengthLevelIndex(this.value, this.rules, this.levels);
     }
+    /**
+     * {@link levels}, with the default levels named in the current locale.
+     * Custom levels are returned as is.
+     * @internal
+     */
+    get resolvedLevels() {
+        if (this.levels !== DEFAULT_PASSWORD_STRENGTH_LEVELS) {
+            return this.levels;
+        }
+        const names = this.dictionary.passwordStrength.levels;
+        return this.levels.map((level, index) => ({
+            ...level,
+            label: names[index] ?? level.label,
+        }));
+    }
+    /**
+     * {@link label} or its localized fallback, punctuated for the current
+     * locale (e.g. "Password strength:").
+     * @internal
+     */
+    get caption() {
+        const { passwordStrength } = this.dictionary;
+        return passwordStrength.caption(this.label ?? passwordStrength.label);
+    }
     /**
      * Lifecycle hook called whenever reactive properties change. Speaks the
      * newly-reached level through {@link announcerEl} whenever it actually
@@ -127,12 +146,14 @@ let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LitElement {
         this.previousLevelIndex = index;
         if (this.announcerEl) {
             this.announcerEl.textContent =
-                index === -1 ? "" : `${this.label}: ${this.levels[index].label}`;
+                index === -1
+                    ? ""
+                    : `${this.caption} ${this.resolvedLevels[index].label}`;
         }
     }
     render() {
         const index = this.currentLevelIndex;
-        const level = index === -1 ? undefined : this.levels[index];
+        const level = index === -1 ? undefined : this.resolvedLevels[index];
         return html `
       <div id="wrapper" data-severity=${ifDefined(level?.severity)}>
         <div id="segments" role="presentation" aria-hidden="true">
@@ -145,12 +166,12 @@ let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LitElement {
               ></span>
             `)}
         </div>
-        ${this.hideLabel || !level
+        ${this.hideLabel
             ? nothing
             : html `
-              <span id="label">
-                <span id="caption">${this.label}:</span>
-                <span id="level-name">${level.label}</span>
+              <span id="label" class=${classMap({ empty: !level })}>
+                <span id="caption">${this.caption}</span>
+                <span id="level-name">${level?.label ?? "\u00A0"}</span>
               </span>
             `}
       </div>

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 {
@@ -103,6 +107,10 @@ const base = css `
     );
   }
 
+  #label.empty {
+    visibility: hidden;
+  }
+
   #caption {
     color: var(
       --password-strength-caption-color,

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 {
@@ -163,13 +167,13 @@ let EunomiaTag = class EunomiaTag extends LitElement {
  */
 EunomiaTag.styles = tagStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTag.prototype, "color", void 0);
 __decorate([
     property({ reflect: true })
 ], EunomiaTag.prototype, "severity", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTag.prototype, "appearance", void 0);
 __decorate([
     property()

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(() => {
@@ -1174,16 +1167,16 @@ __decorate([
     property({ reflect: true })
 ], EunomiaTooltip.prototype, "severity", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTooltip.prototype, "color", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTooltip.prototype, "appearance", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: "fixed-color" })
 ], EunomiaTooltip.prototype, "fixedColor", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTooltip.prototype, "placement", void 0);
 __decorate([
     property()

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,9 @@ 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 {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
+ * @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 +48,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,9 @@ 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 {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
+ * @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 +59,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