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

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

@@ -1,12 +1,19 @@
 import { css } from "lit";
+import { toneSurfaceStyles } from "../shared-styles/tone-surface.styles.js";
 /**
  * Base style for tag.
  *
+ * The palette and appearance resolution is shared with `eun-chip` (see
+ * {@link toneSurfaceStyles}) ; this sheet only reads its `--_bg`, `--_fg` and
+ * `--_bd` behind the `--tag-*` custom properties, applied last on the tag
+ * itself, so they win over any palette/appearance combination.
+ *
  * Custom css variables:
- * [--tag-background-color] - Set a custom color to the tag background
- * [--tag-border-color] - Set a custom color to the tag borders in case of the outline appearance
- * [--tag-color] - Set a custom color to the tag textual content
- * [--tag-border-radius] - Set a custom border radius to the tag
+ * [--tag-background-color] - Set a custom background color, for every appearance
+ * [--tag-color] - Set a custom color to the tag textual content and its icon
+ * [--tag-border-color] - Set a custom border color, for every appearance
+ * [--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
  */
 const base = css `
@@ -15,104 +22,6 @@ const base = css `
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     user-select: none;
   }
-  :host(:not([severity]):not([color])) {
-    --_background: var(--tag-background-color);
-    --_backgroundFilled: var(--_background);
-    --_color: var(--tag-color);
-    --_border-color: var(--tag-border-color);
-  }
-  :host([color="primary"]:not([severity])) {
-    --_background: var(--eun-color-primary-transparent, #3d6fff33);
-    --_backgroundFilled: var(--eun-color-primary-500, #3d6fff);
-    --_border-color: var(--eun-color-primary-500, #3d6fff);
-    --_color: var(--eun-color-primary-500, #3d6fff);
-  }
-  :host([color="secondary"]:not([severity])) {
-    --_background: var(--eun-color-secondary-transparent, #e5a03033);
-    --_backgroundFilled: var(--eun-color-secondary-500, #e5a030);
-    --_border-color: var(--eun-color-secondary-500, #e5a030);
-    --_color: var(--eun-color-secondary-500, #e5a030);
-  }
-  :host([color="light"]:not([severity])) {
-    --_background: var(--eun-color-grey-0, #ffffff);
-    --_backgroundFilled: var(--eun-color-grey-0, #ffffff);
-    --_border-color: var(--eun-color-grey-0, #ffffff);
-    --_color: var(--eun-color-grey-600, #666e8a);
-  }
-  :host([color="light"][appearance="outline"]:not([severity])) {
-    --_color: var(--eun-color-grey-600, #666e8a);
-  }
-  :host([color="medium"]:not([severity])) {
-    --_background: color-mix(
-      in srgb,
-      var(--eun-color-grey-700, #484e61) 20%,
-      transparent
-    );
-    --_backgroundFilled: var(--_background);
-    --_border-color: var(--eun-color-grey-700, #484e61);
-    --_color: var(--eun-color-grey-900, #000000);
-  }
-  :host([color="dark"]:not([severity])) {
-    --_background: var(--eun-color-grey-800, #071621);
-    --_backgroundFilled: var(--eun-color-grey-800, #071621);
-    --_border-color: var(--eun-color-grey-800, #071621);
-    --_color: var(--eun-color-grey-0, #ffffff);
-  }
-  :host([color="dark"][appearance="outline"]:not([severity])) {
-    --_color: var(--eun-color-grey-800, #071621);
-  }
-
-  :host([severity="info"]) {
-    --_background: var(--eun-color-info-30, #f0f7fa);
-    --_backgroundFilled: var(--eun-color-info-100, #097faf);
-    --_border-color: var(--eun-color-info-100, #097faf);
-    --_color: var(--eun-color-info-100, #097faf);
-  }
-  :host([severity="success"]) {
-    --_background: var(--eun-color-success-30, #f1f9f4);
-    --_backgroundFilled: var(--eun-color-success-100, #1a9948);
-    --_border-color: var(--eun-color-success-100, #1a9948);
-    --_color: var(--eun-color-success-100, #1a9948);
-  }
-  :host([severity="warning"]) {
-    --_background: var(--eun-color-warning-30, #fcf5f0);
-    --_backgroundFilled: var(--eun-color-warning-100, #c85207);
-    --_border-color: var(--eun-color-warning-100, #c85207);
-    --_color: var(--eun-color-warning-100, #c85207);
-  }
-  :host([severity="critical"]) {
-    --_background: var(--eun-color-critical-30, #faf0f1);
-    --_backgroundFilled: var(--eun-color-critical-100, #aa0014);
-    --_border-color: var(--eun-color-critical-100, #aa0014);
-    --_color: var(--eun-color-critical-100, #aa0014);
-  }
-  :host([severity="neutral"]) {
-    --_background: var(--eun-color-grey-200, #ecedf0);
-    --_backgroundFilled: var(--eun-color-grey-700, #484e61);
-    --_border-color: var(--eun-color-grey-700, #484e61);
-    --_color: var(--eun-color-grey-700, #484e61);
-  }
-  :host([appearance="default"]) #tag {
-    background: var(--_background);
-  }
-
-  :host([appearance="fill"]) #tag {
-    --_color: #fff;
-    background: var(--_backgroundFilled);
-    color: var(--_color);
-  }
-
-  :host([appearance="outline"]) #tag {
-    --_border-size: 1px;
-    background: transparent;
-    border: var(--eun-borderWidth-s, 1px) solid var(--_border-color);
-  }
-
-  :host([appearance="flat"]) #tag {
-    --_color: var(--eun-text-secondary, #484e61);
-    background: var(--eun-content-hover, #edeff0);
-    color: var(--_color);
-  }
 
   :host([uppercase]) #tag {
     letter-spacing: 0.15em;
@@ -120,37 +29,40 @@ const base = css `
   }
 
   :host([size="s"]) #tag {
-    --_padding: var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
-    --_fontSize: var(--eun-fontSize-xs, 12px);
+    --_padV: var(--eun-space-xs, 4px);
+    --_padH: var(--eun-space-s, 8px);
+    --_fontSize: var(--eun-font-size-xs, 12px);
     --_gap: var(--eun-space-xs, 4px);
   }
   :host([size="m"]) #tag,
   :host(:not([size])) #tag {
-    --_padding: var(--eun-space-s, 8px) calc(var(--eun-space-m, 16px) / 2);
-    --_fontSize: var(--eun-fontSize-s, 14px);
+    --_padV: var(--eun-space-s, 8px);
+    --_padH: calc(var(--eun-space-m, 16px) / 2);
+    --_fontSize: var(--eun-font-size-s, 14px);
     --_gap: var(--eun-space-xs, 4px);
   }
   :host([size="l"]) #tag {
-    --_padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
-    --_fontSize: var(--eun-fontSize-m, 16px);
+    --_padV: var(--eun-space-s, 8px);
+    --_padH: var(--eun-space-m, 16px);
+    --_fontSize: var(--eun-font-size-m, 16px);
     --_gap: var(--eun-space-s, 8px);
   }
 
   :host([icon-only][size="s"]) #tag {
-    --_padding: var(--eun-space-xs, 4px);
+    --_padV: var(--eun-space-xs, 4px);
+    --_padH: var(--eun-space-xs, 4px);
   }
   :host([icon-only][size="m"]) #tag,
-  :host([icon-only]:not([size])) #tag {
-    --_padding: var(--eun-space-s, 8px);
-  }
+  :host([icon-only]:not([size])) #tag,
   :host([icon-only][size="l"]) #tag {
-    --_padding: var(--eun-space-s, 8px);
+    --_padV: var(--eun-space-s, 8px);
+    --_padH: var(--eun-space-s, 8px);
   }
   :host([icon-only]) #tag {
     position: relative;
     justify-content: center;
   }
-  :host([icon-only]) slot {
+  :host([icon-only]) slot:not([name]) {
     display: inline-block;
     position: absolute;
     width: 1px;
@@ -163,24 +75,27 @@ const base = css `
     border: 0;
   }
 
-  :host([rounded]) {
-    --_borderRadius: var(--eun-borderRadius-xl, 999px);
+  :host {
+    --_radius: var(--eun-border-radius-m, 5px);
   }
-
-  :host(:not([rounded])) {
-    --_borderRadius: var(--tag-border-radius, var(--eun-borderRadius-m, 5px));
+  :host([rounded]) {
+    --_radius: var(--eun-border-radius-xl, 999px);
   }
 
   #tag {
+    --_borderWidth: var(--tag-border-width, var(--eun-border-width-s, 1px));
     display: flex;
     align-items: center;
-    border-radius: var(--_borderRadius);
-    padding: var(--_padding);
+    background: var(--tag-background-color, var(--_bg));
+    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);
     gap: var(--tag-gap, var(--_gap));
-    color: var(--_color);
-    font-weight: var(--eun-fontWeight-m, 500);
-    --icon-color: var(--_color);
+    font-weight: var(--eun-font-weight-m, 500);
+    --icon-color: var(--tag-color, var(--_fg));
   }
 
   ::slotted(*) {
@@ -191,4 +106,4 @@ const base = css `
     display: none;
   }
 `;
-export const tagStyles = base;
+export const tagStyles = [toneSurfaceStyles, base];

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

@@ -66,7 +66,9 @@ declare const EunomiaTooltipMixinBase: Constructor<EunomiaTooltipBase>;
  * @slot [description] - Extra detail below the heading, combining with richText if both are set
  * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the tooltip. Drives the heading accent color, taking priority over color when both are set
  * @prop {'primary' | 'secondary' | 'light' | 'medium' | 'dark'} [color='primary'] - A plain brand or neutral color, used only while severity is unset
- * @prop {'default' | 'flat' | 'fill' | 'outline'} [appearance='default'] - The visual style of the panel's surface, using the same names as the alert component, though always fully opaque rather than a translucent wash. Default is a pale, opaque tint of color or severity with accent colored text and no border. Setting color to dark renders it as a solid near-black surface with light text instead of a pale one
+ * @prop {'default' | 'flat' | 'fill' | 'outline'} [appearance='default'] - The visual style of the panel's surface, using the same names as the alert component, though always fully opaque rather than a translucent wash. Default is a pale, opaque tint of color or severity with accent colored text and no border. The light and dark colors have no pale tint, so default is as solid as fill for them, and outline is the color as border and text over a surface of the opposite tone
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark tooltip white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors or on severity
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark tooltip white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors or on severity
  * @prop {'top' | 'right' | 'bottom' | 'left'} [placement='top'] - The preferred side to open on, flipping to the opposite side automatically when there isn't room
  * @prop {string} heading - The tooltip's heading, as a property. When unset, the default slot's content is used instead
  * @prop {string} [richText] - Lightweight formatted content rendered above the description slot, combining with it. Supports simple lists, links, bold, and italic text
@@ -83,9 +85,11 @@ declare const EunomiaTooltipMixinBase: Constructor<EunomiaTooltipBase>;
  * @cssprop [--tooltip-viewport-gap] - Sets the minimum distance kept from the viewport edge, so the panel never runs off-screen
  * @cssprop [--tooltip-min-width] - Sets the minimum width of the panel
  * @cssprop [--tooltip-max-width] - Sets the maximum width of the panel
- * @cssprop [--tooltip-background-color] - Sets the background color when severity is unset
- * @cssprop [--tooltip-color] - Sets the heading color when severity is unset
- * @cssprop [--tooltip-content-color] - Sets the color of the description content
+ * @cssprop [--tooltip-background-color] - Sets the background color, for every appearance, color and severity
+ * @cssprop [--tooltip-color] - Sets the heading and link color, for every appearance, color and severity
+ * @cssprop [--tooltip-content-color] - Sets the color of the description content, for every appearance, color and severity
+ * @cssprop [--tooltip-border-color] - Sets the border color, for every appearance, color and severity
+ * @cssprop [--tooltip-border-width] - Sets the border width, for every appearance. The border takes room out of the padding, so the panel keeps its size
  * @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
@@ -120,6 +124,13 @@ export declare class EunomiaTooltip extends EunomiaTooltipMixinBase {
      * @default default
      */
     appearance: EunomiaTooltipAppearance;
+    /**
+     * Keeps a `light` or `dark` tooltip white or black in every theme.
+     * Without it, they follow the grey scale, which flips with the active
+     * theme. Has no effect on the other colors or on `severity`.
+     * @default false
+     */
+    fixedColor: boolean;
     /**
      * The preferred side to open on, flipping to the opposite side
      * automatically when there isn't room.

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

@@ -53,6 +53,8 @@ const FORWARDED_CSS_VARS = [
     "--tooltip-background-color",
     "--tooltip-color",
     "--tooltip-content-color",
+    "--tooltip-border-color",
+    "--tooltip-border-width",
     "--tooltip-font-weight",
     "--tooltip-border-radius",
     "--tooltip-padding",
@@ -92,7 +94,9 @@ const EunomiaTooltipMixinBase = AnchorPositionMixin(LitElement);
  * @slot [description] - Extra detail below the heading, combining with richText if both are set
  * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the tooltip. Drives the heading accent color, taking priority over color when both are set
  * @prop {'primary' | 'secondary' | 'light' | 'medium' | 'dark'} [color='primary'] - A plain brand or neutral color, used only while severity is unset
- * @prop {'default' | 'flat' | 'fill' | 'outline'} [appearance='default'] - The visual style of the panel's surface, using the same names as the alert component, though always fully opaque rather than a translucent wash. Default is a pale, opaque tint of color or severity with accent colored text and no border. Setting color to dark renders it as a solid near-black surface with light text instead of a pale one
+ * @prop {'default' | 'flat' | 'fill' | 'outline'} [appearance='default'] - The visual style of the panel's surface, using the same names as the alert component, though always fully opaque rather than a translucent wash. Default is a pale, opaque tint of color or severity with accent colored text and no border. The light and dark colors have no pale tint, so default is as solid as fill for them, and outline is the color as border and text over a surface of the opposite tone
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark tooltip white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors or on severity
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark tooltip white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors or on severity
  * @prop {'top' | 'right' | 'bottom' | 'left'} [placement='top'] - The preferred side to open on, flipping to the opposite side automatically when there isn't room
  * @prop {string} heading - The tooltip's heading, as a property. When unset, the default slot's content is used instead
  * @prop {string} [richText] - Lightweight formatted content rendered above the description slot, combining with it. Supports simple lists, links, bold, and italic text
@@ -109,9 +113,11 @@ const EunomiaTooltipMixinBase = AnchorPositionMixin(LitElement);
  * @cssprop [--tooltip-viewport-gap] - Sets the minimum distance kept from the viewport edge, so the panel never runs off-screen
  * @cssprop [--tooltip-min-width] - Sets the minimum width of the panel
  * @cssprop [--tooltip-max-width] - Sets the maximum width of the panel
- * @cssprop [--tooltip-background-color] - Sets the background color when severity is unset
- * @cssprop [--tooltip-color] - Sets the heading color when severity is unset
- * @cssprop [--tooltip-content-color] - Sets the color of the description content
+ * @cssprop [--tooltip-background-color] - Sets the background color, for every appearance, color and severity
+ * @cssprop [--tooltip-color] - Sets the heading and link color, for every appearance, color and severity
+ * @cssprop [--tooltip-content-color] - Sets the color of the description content, for every appearance, color and severity
+ * @cssprop [--tooltip-border-color] - Sets the border color, for every appearance, color and severity
+ * @cssprop [--tooltip-border-width] - Sets the border width, for every appearance. The border takes room out of the padding, so the panel keeps its size
  * @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
@@ -134,6 +140,13 @@ let EunomiaTooltip = EunomiaTooltip_1 = class EunomiaTooltip extends EunomiaTool
          * @default default
          */
         this.appearance = "default";
+        /**
+         * Keeps a `light` or `dark` tooltip white or black in every theme.
+         * Without it, they follow the grey scale, which flips with the active
+         * theme. Has no effect on the other colors or on `severity`.
+         * @default false
+         */
+        this.fixedColor = false;
         /**
          * The preferred side to open on, flipping to the opposite side
          * automatically when there isn't room.
@@ -1070,6 +1083,7 @@ let EunomiaTooltip = EunomiaTooltip_1 = class EunomiaTooltip extends EunomiaTool
         data-severity=${ifDefined(this.severity)}
         data-color=${this.color}
         data-appearance=${this.appearance}
+        data-fixed-color=${ifDefined(this.fixedColor ? "" : undefined)}
         data-placement=${this.placement}
         @pointerenter=${this.handlePanelPointerEnter}
         @pointerleave=${this.handlePanelPointerLeave}
@@ -1165,6 +1179,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], EunomiaTooltip.prototype, "appearance", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "fixed-color" })
+], EunomiaTooltip.prototype, "fixedColor", void 0);
 __decorate([
     property({ reflect: true })
 ], EunomiaTooltip.prototype, "placement", void 0);

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

@@ -17,9 +17,11 @@ export const tooltipHostStyles = css `
  * [--tooltip-viewport-gap] - Set a custom minimum distance kept from the viewport edge, so the panel never runs off-screen
  * [--tooltip-min-width] - Set a custom minimum width
  * [--tooltip-max-width] - Set a custom maximum width
- * [--tooltip-background-color] - Set a custom background color when `severity` is unset
- * [--tooltip-color] - Set a custom heading color when `severity` is unset
- * [--tooltip-content-color] - Set a custom color for the description content
+ * [--tooltip-background-color] - Set a custom background color, for every appearance, color and severity
+ * [--tooltip-color] - Set a custom heading (and link) color, for every appearance, color and severity
+ * [--tooltip-content-color] - Set a custom color for the description content, for every appearance, color and severity
+ * [--tooltip-border-color] - Set a custom border color, for every appearance, color and severity
+ * [--tooltip-border-width] - Set a custom border width, for every appearance. Defaults to 1px, only drawn (in a color) by outline, or when --tooltip-border-color is set
  * [--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
@@ -28,62 +30,124 @@ export const tooltipHostStyles = css `
  * [--tooltip-transition-duration] - Set a custom duration for the open/close transition
  */
 const panel = css `
-  .eun-tooltip-panel:not([data-severity]) {
-    --_accent: var(--tooltip-color, var(--eun-text-color, #071621));
-    --_borderColor: var(--eun-color-grey-300, #dee0e7);
-    --_backgroundFilled: var(--eun-color-grey-700, #484e61);
+  /*
+   * Step 1 : the palette (severity, else color) fills --_solid (strong
+   * color), --_onSolid (text on it) and --_accent (text on a pale or neutral
+   * surface). Step 2 : the appearance reads them into --_bg, --_head (the
+   * heading and links), --_body (the description) and --_bd (the border).
+   * The --tooltip-* custom properties are applied last, on the panel, so they
+   * win over every combination.
+   */
+  .eun-tooltip-panel {
+    --_solid: var(--eun-color-primary-500, #3d6fff);
+    --_onSolid: var(--eun-color-on-primary-500, #ffffff);
+    --_accent: var(--eun-color-primary-500, #3d6fff);
   }
   .eun-tooltip-panel[data-severity="info"] {
+    --_solid: var(--eun-color-info-100, #097faf);
     --_accent: var(--eun-color-info-100, #097faf);
-    --_borderColor: var(--eun-color-info-100, #097faf);
-    --_backgroundFilled: var(--eun-color-info-100, #097faf);
   }
   .eun-tooltip-panel[data-severity="success"] {
+    --_solid: var(--eun-color-success-100, #1a9948);
     --_accent: var(--eun-color-success-100, #1a9948);
-    --_borderColor: var(--eun-color-success-100, #1a9948);
-    --_backgroundFilled: var(--eun-color-success-100, #1a9948);
   }
   .eun-tooltip-panel[data-severity="warning"] {
+    --_solid: var(--eun-color-warning-100, #c85207);
     --_accent: var(--eun-color-warning-100, #c85207);
-    --_borderColor: var(--eun-color-warning-100, #c85207);
-    --_backgroundFilled: var(--eun-color-warning-100, #c85207);
   }
   .eun-tooltip-panel[data-severity="critical"] {
+    --_solid: var(--eun-color-critical-100, #aa0014);
     --_accent: var(--eun-color-critical-100, #aa0014);
-    --_borderColor: var(--eun-color-critical-100, #aa0014);
-    --_backgroundFilled: var(--eun-color-critical-100, #aa0014);
   }
   .eun-tooltip-panel[data-severity="neutral"] {
+    --_onSolid: var(--eun-color-grey-0, #ffffff);
+    --_solid: var(--eun-color-grey-700, #484e61);
     --_accent: var(--eun-color-grey-700, #484e61);
-    --_borderColor: var(--eun-color-grey-700, #484e61);
-    --_backgroundFilled: var(--eun-color-grey-700, #484e61);
-  }
-  .eun-tooltip-panel:not([data-severity])[data-color="primary"] {
-    --_accent: var(--eun-color-primary-500, #3d6fff);
-    --_borderColor: var(--eun-color-primary-500, #3d6fff);
-    --_backgroundFilled: var(--eun-color-primary-500, #3d6fff);
   }
   .eun-tooltip-panel:not([data-severity])[data-color="secondary"] {
+    --_onSolid: var(--eun-color-on-secondary-500, #000000de);
+    --_solid: var(--eun-color-secondary-500, #e5a030);
     --_accent: var(--eun-color-secondary-500, #e5a030);
-    --_borderColor: var(--eun-color-secondary-500, #e5a030);
-    --_backgroundFilled: var(--eun-color-secondary-500, #e5a030);
-  }
-  .eun-tooltip-panel:not([data-severity])[data-color="light"] {
-    --_accent: var(--eun-color-grey-600, #666e8a);
-    --_borderColor: var(--eun-color-grey-300, #dee0e7);
-    --_backgroundFilled: var(--eun-color-grey-0, #ffffff);
   }
   .eun-tooltip-panel:not([data-severity])[data-color="medium"] {
+    --_onSolid: var(--eun-color-grey-0, #ffffff);
+    --_solid: var(--eun-color-grey-700, #484e61);
     --_accent: var(--eun-color-grey-900, #000000);
-    --_borderColor: var(--eun-color-grey-300, #dee0e7);
-    --_backgroundFilled: var(--eun-color-grey-700, #484e61);
   }
+
+  /*
+   * light and dark are absolute colors : white and black whatever the
+   * appearance. The panel is always opaque, so there's no pale wash and no
+   * transparent outline : default is as solid as fill, and outline is the
+   * color as border and text over a surface of the opposite tone. flat is
+   * the same neutral surface as every other palette. By default they follow
+   * the grey scale, which flips with the active theme ; fixed-color pins
+   * them to the light theme's white and black.
+   */
+  .eun-tooltip-panel:not([data-severity])[data-color="light"] {
+    --_solid: var(--eun-color-grey-0, #ffffff);
+    --_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] {
+    --_solid: #ffffff;
+    --_onSolid: #000000;
+    --_opposite: #071621;
+  }
+  .eun-tooltip-panel:not([data-severity])[data-color="dark"] {
+    --_solid: var(--eun-color-grey-800, #071621);
+    --_onSolid: var(--eun-color-grey-0, #ffffff);
+    --_opposite: var(--eun-color-grey-0, #ffffff);
+  }
+  .eun-tooltip-panel:not([data-severity])[data-color="dark"][data-fixed-color] {
+    --_solid: #071621;
+    --_onSolid: #ffffff;
+    --_opposite: #ffffff;
+  }
+  .eun-tooltip-panel:not([data-severity])[data-color="light"],
   .eun-tooltip-panel:not([data-severity])[data-color="dark"] {
-    --_accent: var(--eun-color-grey-800, #071621);
-    --_borderColor: var(--eun-color-grey-800, #071621);
-    --_backgroundFilled: var(--eun-color-grey-800, #071621);
-    --_defaultBackground: var(--_accent);
-    --_defaultText: var(--eun-color-grey-0, #ffffff);
+    --_accent: var(--eun-text-color, #071621);
+  }
+
+  .eun-tooltip-panel[data-appearance="default"] {
+    --_bg: color-mix(
+      in srgb,
+      var(--_accent) 12%,
+      var(--eun-surface-color, #ffffff)
+    );
+    --_head: var(--_accent);
+    --_body: var(--_accent);
+    --_bd: transparent;
+  }
+  .eun-tooltip-panel[data-appearance="flat"] {
+    --_bg: var(--eun-color-grey-100, #f7f8fa);
+    --_head: var(--_accent);
+    --_body: var(--eun-text-color, #071621);
+    --_bd: transparent;
+  }
+  .eun-tooltip-panel[data-appearance="outline"] {
+    --_bg: var(--eun-color-grey-100, #f7f8fa);
+    --_head: var(--_accent);
+    --_body: var(--eun-text-color, #071621);
+    --_bd: var(--_solid);
+  }
+  .eun-tooltip-panel[data-appearance="fill"] {
+    --_bg: var(--_solid);
+    --_head: var(--_onSolid);
+    --_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"] {
+    --_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"] {
+    --_bg: var(--_opposite);
+    --_head: var(--_solid);
+    --_body: var(--_solid);
   }
 
   .eun-tooltip-panel {
@@ -100,13 +164,20 @@ const panel = css `
     max-width: var(--tooltip-max-width, 280px);
     padding: var(
       --tooltip-padding,
-      var(--eun-space-s, 8px) var(--eun-space-m, 16px)
+      max(0px, calc(var(--eun-space-s, 8px) - var(--_bw)))
+        max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
     );
     border-radius: var(
       --tooltip-border-radius,
-      var(--eun-borderRadius-m, 10px)
+      var(--eun-border-radius-m, 10px)
     );
-    color: var(--tooltip-content-color, var(--eun-text-color, #071621));
+    --_bw: var(--tooltip-border-width, var(--eun-border-width-s, 1px));
+    background: var(--tooltip-background-color, var(--_bg));
+    color: var(--tooltip-content-color, var(--_body));
+    /* Every appearance carries the same border box (transparent unless
+       drawn), taken out of the padding, so switching appearance or adding a
+       --tooltip-border-* never changes the panel's size. */
+    border: var(--_bw) solid var(--tooltip-border-color, var(--_bd));
     box-shadow: var(
       --tooltip-shadow,
       var(
@@ -116,15 +187,9 @@ const panel = css `
       )
     );
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     opacity: 0;
     scale: 0.96;
-    --_defaultBackground: color-mix(
-      in srgb,
-      var(--_accent) 12%,
-      var(--eun-surface-color, #ffffff)
-    );
-    --_defaultText: var(--_accent);
   }
   .eun-tooltip-panel.no-heading {
     row-gap: 0;
@@ -137,35 +202,9 @@ const panel = css `
     scale: 1;
   }
 
-  .eun-tooltip-panel[data-appearance="default"] {
-    background: var(--tooltip-background-color, var(--_defaultBackground));
-    color: var(--tooltip-content-color, var(--_defaultText));
-  }
-  .eun-tooltip-panel[data-appearance="flat"] {
-    background: var(
-      --tooltip-background-color,
-      var(--eun-color-grey-100, #f7f8fa)
-    );
-  }
-  .eun-tooltip-panel[data-appearance="outline"] {
-    background: var(
-      --tooltip-background-color,
-      var(--eun-color-grey-100, #f7f8fa)
-    );
-    border: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
-  }
-  .eun-tooltip-panel[data-appearance="fill"] {
-    background: var(--tooltip-background-color, var(--_backgroundFilled));
-    --_accent: var(--tooltip-color, #fff);
-    color: var(--tooltip-content-color, #fff);
-  }
-
   .eun-tooltip-heading {
-    color: var(--_accent);
-    font-weight: var(--eun-fontWeight-l, 700);
-  }
-  .eun-tooltip-panel[data-appearance="default"] .eun-tooltip-heading {
-    color: var(--tooltip-color, var(--_defaultText));
+    color: var(--tooltip-color, var(--_head));
+    font-weight: var(--eun-font-weight-l, 700);
   }
   .eun-tooltip-heading-mirror,
   .eun-tooltip-description-mirror {
@@ -176,7 +215,7 @@ const panel = css `
   }
   .eun-tooltip-description {
     color: var(--tooltip-content-color, inherit);
-    font-weight: var(--tooltip-font-weight, var(--eun-fontWeight-s, 300));
+    font-weight: var(--tooltip-font-weight, var(--eun-font-weight-s, 300));
   }
   .eun-tooltip-description.hidden {
     display: none;
@@ -191,10 +230,7 @@ const panel = css `
     margin-block-end: 0;
   }
   .eun-tooltip-rich-text a {
-    color: var(--_accent);
-  }
-  .eun-tooltip-panel[data-appearance="default"] .eun-tooltip-rich-text a {
-    color: var(--tooltip-color, var(--_defaultText));
+    color: var(--tooltip-color, var(--_head));
   }
   .eun-tooltip-description ::slotted(*) {
     margin: 0;

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

@@ -50,7 +50,7 @@ const base = css `
     --_padding: var(--check-card-padding, var(--eun-space-m, 16px));
     --_borderRadius: var(
       --check-card-border-radius,
-      var(--eun-borderRadius-m, 10px)
+      var(--eun-border-radius-m, 10px)
     );
     --_indicatorBackground: transparent;
     --_indicatorBorder: var(--_borderColor);
@@ -134,7 +134,7 @@ const base = css `
     align-items: center;
     justify-content: center;
     border: 1px solid var(--_indicatorBorder);
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     background: var(--_indicatorBackground);
     color: var(--_indicatorIcon);
     transition: all 0.15s ease;

package/dist/components/form/checkbox/checkbox-list.d.ts

@@ -4,7 +4,7 @@ import type { EunomiaCheckbox } from "./checkbox.js";
  * Tag name of the checkbox list component.
  */
 export declare const EunomiaCheckboxListTagName = "eun-checkbox-list";
-declare const EunomiaCheckboxList_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/form-label.mixin.js").FormLabelMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/readonly.mixin.js").ReadonlyMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/form.mixin.js").FormMixinInterface<string[]>> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/disabled.mixin.js").DisabledMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/validators.mixin.js").ValidatorsMixinInterface> & typeof LitElement;
+declare const EunomiaCheckboxList_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/form-label.mixin.js").FormLabelMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/readonly.mixin.js").ReadonlyMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/form.mixin.js").FormMixinInterface<string[]>> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/disabled.mixin.js").DisabledMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/validators.mixin.js").ValidatorsMixinInterface<string[]>> & typeof LitElement;
 /**
  * Groups checkbox children into a select some of many list, wrapped so
  * the group has a single accessible name and reads as one unit to

package/dist/components/form/checkbox/checkbox.d.ts

@@ -13,7 +13,7 @@ export declare const EunomiaCheckboxTagName = "eun-checkbox";
  * Type of the checkbox base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaCheckboxBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<string> & CheckMixinInterface;
+type EunomiaCheckboxBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<boolean> & FormMixinInterface<string> & CheckMixinInterface;
 /**
  * Base class with composed mixins used to handle component extends elements type
  * @internal