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

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

package/dist/components/form/checkbox/checkbox.styles.js

@@ -25,7 +25,7 @@ const base = css `
     );
     --_boxBackground: var(
       --checkbox-background,
-      var(--eun-color-grey-200, #ecedf0)
+      var(--eun-surface-sunken, #ecedf0)
     );
     --_errorColor: var(
       --checkbox-error-color,
@@ -42,7 +42,7 @@ const base = css `
     );
     --_icon: transparent;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     display: inline-flex;
     align-items: center;
     outline: none;
@@ -74,7 +74,7 @@ const base = css `
     );
     --_boxBackground: var(
       --checkbox-background-hover,
-      var(--eun-content-hover, #edeff0)
+      var(--eun-surface-sunken-hover, #edeff0)
     );
   }
   :host(
@@ -89,7 +89,7 @@ const base = css `
     );
     --_boxBackground: var(
       --checkbox-background-pressed,
-      var(--eun-content-pressed, #e4e6e8)
+      var(--eun-surface-sunken-pressed, #e4e6e8)
     );
   }
 
@@ -158,10 +158,10 @@ const base = css `
     height: var(--_boxSize);
     width: var(--_boxSize);
     background: var(--_boxBackground);
-    border: var(--eun-borderWidth-s, 1px) solid var(--_boxBorder);
+    border: var(--eun-border-width-s, 1px) solid var(--_boxBorder);
     border-radius: var(
       --checkbox-border-radius,
-      var(--eun-borderRadius-s, 5px)
+      var(--eun-border-radius-s, 5px)
     );
     display: inline-flex;
     align-items: center;

package/dist/components/form/color-picker/color-picker.d.ts

@@ -5,7 +5,7 @@ import { ValidatorsMixinInterface } from "../../../mixins/validators.mixin.js";
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { EditableMixinInterface } from "../../../mixins/editable.mixin.js";
-import { FieldVariantMixinInterface } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
 import { AnchorPositionMixinInterface } from "../../../mixins/anchor-position.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
 /**
@@ -17,7 +17,7 @@ export declare const EunomiaColorPickerTagName = "eun-color-picker";
  * interface elements.
  * @internal
  */
-type EunomiaColorPickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface;
+type EunomiaColorPickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface;
 declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
 /**
  * A field for picking a color, as a `#rrggbb` hex string. Declare preset
@@ -54,7 +54,7 @@ declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
  * @prop {string} value - The current color, as a `#rrggbb` hex string
  * @prop {string} defaultValue - The default value applied when the field connects, and restored on form reset
  * @attr {string} [default-value] - The default value
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} name - The field name

package/dist/components/form/color-picker/color-picker.js

@@ -15,7 +15,7 @@ import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
 import { FormMixin } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { EditableMixin, } from "../../../mixins/editable.mixin.js";
-import { FieldVariantMixin, } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
 import { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
@@ -32,7 +32,7 @@ export const EunomiaColorPickerTagName = "eun-color-picker";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldVariantMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
+const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
 /**
  * A field for picking a color, as a `#rrggbb` hex string. Declare preset
  * swatches as light DOM `option` children, exactly like `eun-select` does
@@ -68,7 +68,7 @@ const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldVariantMixin(FormLa
  * @prop {string} value - The current color, as a `#rrggbb` hex string
  * @prop {string} defaultValue - The default value applied when the field connects, and restored on form reset
  * @attr {string} [default-value] - The default value
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} name - The field name
@@ -649,7 +649,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
         <eun-button
           class="confirm"
           size="s"
-          variant="primary"
+          color="primary"
           appearance="default"
           rounded
           type="button"

package/dist/components/form/color-picker/color-picker.styles.js

@@ -44,7 +44,7 @@ const colorPicker = css `
   #field-arrow {
     flex: 0 0 auto;
     color: var(--_iconColor);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     transition: transform 0.15s ease;
   }
   #field-arrow.open {
@@ -55,8 +55,8 @@ const colorPicker = css `
     display: inline-block;
     width: var(--color-picker-swatch-size, 20px);
     height: var(--color-picker-swatch-size, 20px);
-    border-radius: var(--eun-borderRadius-xl, 999px);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border-radius: var(--eun-border-radius-xl, 999px);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     background-color: var(--_swatchColor, transparent);
     outline: 2px solid transparent;
     transition:
@@ -81,8 +81,8 @@ const colorPicker = css `
   #swatches-label,
   #custom-label {
     display: block;
-    font-size: var(--eun-fontSize-xs, 12px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-xs, 12px);
+    font-weight: var(--eun-font-weight-l, 700);
     color: var(--_placeholderColor);
     text-transform: uppercase;
     margin: 0 0 var(--eun-space-xs, 4px);
@@ -106,7 +106,7 @@ const colorPicker = css `
   }
   .swatch-button[aria-checked="true"] .swatch {
     border-color: var(--eun-color-primary-500, #3d6fff);
-    border-width: calc(var(--eun-borderWidth-m, 1.5px) * 2);
+    border-width: calc(var(--eun-border-width-m, 1.5px) * 2);
   }
   .swatch-button:focus-visible .swatch {
     outline-color: var(--_focusIndicator);
@@ -147,7 +147,7 @@ const colorPicker = css `
     font: inherit;
     color: var(--_textColor);
     background-color: var(--_background);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
     padding: var(--_padding);
     box-sizing: border-box;

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

@@ -4,7 +4,7 @@ import { ReadonlyMixinInterface } from "../../../mixins/readonly.mixin.js";
 import { ValidatorsMixinInterface, Validity } from "../../../mixins/validators.mixin.js";
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
-import { FieldVariantMixinInterface } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
 /**
  * Tag name of the counter component.
@@ -14,13 +14,13 @@ export declare const EunomiaCounterTagName = "eun-counter";
  * Type of the counter base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaCounterBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<number> & FormLabelMixinInterface & FieldVariantMixinInterface;
+type EunomiaCounterBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<number> & FormMixinInterface<number> & FormLabelMixinInterface & FieldAppearanceMixinInterface;
 declare const EunomiaCounterMixinBase: Constructor<EunomiaCounterBase>;
 /**
  * A numeric field with increment and decrement buttons, built on a native
  * number input.
  *
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} name - The field name

package/dist/components/form/counter/counter.js

@@ -12,7 +12,7 @@ import { ReadonlyMixin, } from "../../../mixins/readonly.mixin.js";
 import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
 import { FormMixin } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
-import { FieldVariantMixin, } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { counterStyles } from "./counter.styles.js";
@@ -26,12 +26,12 @@ export const EunomiaCounterTagName = "eun-counter";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaCounterMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))));
+const EunomiaCounterMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))));
 /**
  * A numeric field with increment and decrement buttons, built on a native
  * number input.
  *
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} name - The field name

package/dist/components/form/counter/counter.styles.js

@@ -39,11 +39,11 @@ const base = css `
     );
     --_borderRadius: var(
       --counter-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
     --_fieldWidth: var(--counter-field-width, 3.5rem);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     display: block;
     width: fit-content;
     max-width: 100%;
@@ -61,7 +61,7 @@ const base = css `
     display: inline-flex;
     align-items: stretch;
     background-color: var(--_background);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
     outline: 1px solid transparent;
     box-sizing: border-box;
@@ -122,11 +122,11 @@ const base = css `
   }
 
   #decrement {
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    border-inline-end: var(--eun-border-width-s, 1px) solid var(--_borderColor);
   }
 
   #increment {
-    border-inline-start: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    border-inline-start: var(--eun-border-width-s, 1px) solid var(--_borderColor);
   }
 
   #decrement:hover:not(:disabled),
@@ -180,22 +180,22 @@ const base = css `
     cursor: default;
   }
 
-  :host([variant="fill"]) {
+  :host([appearance="flat"]) {
     --_background: var(--counter-background, var(--eun-content-hover, #edeff0));
   }
-  :host([variant="fill"]) #field-wrapper:not(:focus-within) {
+  :host([appearance="flat"]) #field-wrapper:not(:focus-within) {
     border-color: transparent;
   }
-  :host([variant="fill"]) #field-wrapper:has(#field[aria-invalid="true"]) {
-    box-shadow: inset 0 0 0 var(--eun-borderWidth-m, 1.5px) var(--_errorColor);
+  :host([appearance="flat"]) #field-wrapper:has(#field[aria-invalid="true"]) {
+    box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px) var(--_errorColor);
   }
-  :host([variant="underline"]) #field-wrapper {
+  :host([appearance="underline"]) #field-wrapper {
     border: none;
     outline: none;
     border-radius: 0;
-    border-bottom: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
   }
-  :host([variant="underline"]) #field-wrapper:focus-within {
+  :host([appearance="underline"]) #field-wrapper:focus-within {
     outline: none;
   }
 `;

package/dist/components/form/date-picker/date-picker-day-grid.styles.js

@@ -13,7 +13,7 @@ export const datePickerDayGridStyles = css `
   }
   #calendar-weekdays span {
     color: var(--date-picker-weekday-color, var(--eun-text-secondary, #484e61));
-    font-size: var(--eun-fontSize-xxs, 10px);
+    font-size: var(--eun-font-size-xxs, 10px);
     text-align: center;
     text-transform: uppercase;
   }
@@ -26,7 +26,7 @@ export const datePickerDayGridStyles = css `
     grid-template-columns: repeat(5, 1fr);
   }
   .grid-cell.cell-day {
-    --_cellRadius: var(--eun-borderRadius-full, 999px);
+    --_cellRadius: var(--eun-border-radius-full, 999px);
     aspect-ratio: 1;
     border-radius: var(--_cellRadius);
   }