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

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

@@ -36,8 +36,8 @@ export const datePickerGridStyles = css `
     padding-inline: var(--eun-space-xs, 4px);
   }
   #grid-label {
-    font-size: var(--eun-fontSize-s, 14px);
-    font-weight: var(--eun-fontWeight-l);
+    font-size: var(--eun-font-size-s, 14px);
+    font-weight: var(--eun-font-weight-l);
     text-transform: capitalize;
   }
   button#grid-label.grid-label-button {
@@ -46,7 +46,7 @@ export const datePickerGridStyles = css `
     color: inherit;
     font: inherit;
     padding: var(--eun-space-xxs, 1.6px) var(--eun-space-xs, 4px);
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     cursor: pointer;
   }
   button#grid-label.grid-label-button:hover {
@@ -68,7 +68,7 @@ export const datePickerGridStyles = css `
     width: 28px;
     height: 28px;
     border: none;
-    border-radius: var(--eun-borderRadius-full, 999px);
+    border-radius: var(--eun-border-radius-full, 999px);
     background: none;
     color: var(--eun-text-color, #071621);
     cursor: pointer;
@@ -105,7 +105,7 @@ export const datePickerGridStyles = css `
     background: none;
     color: var(--eun-text-color, #071621);
     font: inherit;
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     cursor: pointer;
   }
   .grid-cell:hover:not(:disabled):not(.selected) {
@@ -121,8 +121,8 @@ export const datePickerGridStyles = css `
     );
   }
   .grid-cell.today {
-    font-weight: var(--eun-fontWeight-m);
-    box-shadow: inset 0 0 0 var(--eun-borderWidth-m, 1.5px)
+    font-weight: var(--eun-font-weight-m);
+    box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px)
       var(--date-picker-today-color, var(--eun-color-primary-500, #3d6fff));
   }
   .grid-cell:disabled {
@@ -159,21 +159,21 @@ export const datePickerGridStyles = css `
   .grid-cell.in-range.range-start::before {
     border-start-start-radius: var(
       --_cellRadius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     border-end-start-radius: var(
       --_cellRadius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
   }
   .grid-cell.in-range.range-end::before {
     border-start-end-radius: var(
       --_cellRadius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     border-end-end-radius: var(
       --_cellRadius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
   }
   .cell-label {
@@ -184,7 +184,7 @@ export const datePickerGridStyles = css `
     display: flex;
     justify-content: center;
     padding-block-start: var(--eun-space-xs, 4px);
-    border-top: var(--eun-borderWidth-s, 1px) solid
+    border-top: var(--eun-border-width-s, 1px) solid
       var(--_borderColor, var(--eun-color-grey-300, #dee0e7));
   }
   #today-button {
@@ -196,8 +196,8 @@ export const datePickerGridStyles = css `
       var(--eun-color-primary-500, #3d6fff)
     );
     font: inherit;
-    font-size: var(--eun-fontSize-s, 14px);
-    font-weight: var(--eun-fontWeight-m);
+    font-size: var(--eun-font-size-s, 14px);
+    font-weight: var(--eun-font-weight-m);
     cursor: pointer;
   }
   #today-button:hover {
@@ -207,6 +207,6 @@ export const datePickerGridStyles = css `
     outline: 2px solid
       var(--_focusIndicator, var(--eun-color-primary-500, #3d6fff));
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
   }
 `;

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

@@ -11,7 +11,7 @@ export const datePickerMonthGridStyles = css `
     grid-template-columns: repeat(3, 1fr);
   }
   .grid-cell.cell-month {
-    --_cellRadius: var(--eun-borderRadius-m, 8px);
+    --_cellRadius: var(--eun-border-radius-m, 8px);
     min-height: 40px;
     padding: var(--eun-space-xs, 4px);
     border-radius: var(--_cellRadius);

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

@@ -11,7 +11,7 @@ export const datePickerYearGridStyles = css `
     grid-template-columns: repeat(3, 1fr);
   }
   .grid-cell.cell-year {
-    --_cellRadius: var(--eun-borderRadius-m, 8px);
+    --_cellRadius: var(--eun-border-radius-m, 8px);
     min-height: 40px;
     padding: var(--eun-space-xs, 4px);
     border-radius: var(--_cellRadius);

package/dist/components/form/date-picker/date-picker.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 { AnchorPositionMixinInterface } from "../../../mixins/anchor-position.mixin.js";
 import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
@@ -21,7 +21,7 @@ export declare const EunomiaDatePickerTagName = "eun-date-picker";
  * interface element.
  * @internal
  */
-type EunomiaDatePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
+type EunomiaDatePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
 /**
  * A date field entered across segmented numeric day, month, and year
@@ -44,7 +44,7 @@ declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
  * normalized to January first of the selected year. The range mode
  * composes with all three.
  *
- * @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 {'single' | 'range'} [mode='single'] - Whether a single value or a start and end range is picked
  * @prop {'day' | 'month' | 'year'} [granularity='day'] - How precise the picked value is. Controls both the number of segments rendered and which calendar surface opens
  * @prop {Date | null} value - The picked value, in single mode. Normalized to the first of the month or January first of the year outside day granularity

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

@@ -13,7 +13,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 { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
 import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
@@ -55,7 +55,7 @@ const SEGMENT_SPIN_BOUNDS = {
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldVariantMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))));
+const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))));
 /**
  * A date field entered across segmented numeric day, month, and year
  * inputs, following the same accessible pattern used by several
@@ -77,7 +77,7 @@ const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldVar
  * normalized to January first of the selected year. The range mode
  * composes with all three.
  *
- * @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 {'single' | 'range'} [mode='single'] - Whether a single value or a start and end range is picked
  * @prop {'day' | 'month' | 'year'} [granularity='day'] - How precise the picked value is. Controls both the number of segments rendered and which calendar surface opens
  * @prop {Date | null} value - The picked value, in single mode. Normalized to the first of the month or January first of the year outside day granularity

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

@@ -34,7 +34,7 @@ const datePicker = css `
     width: 100%;
     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(--eun-space-xs, 4px) var(--eun-space-xs, 4px)
       var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
@@ -68,22 +68,22 @@ const datePicker = css `
   :host([aria-invalid="true"]) #field-wrapper:focus-within {
     outline-color: var(--_errorColor);
   }
-  :host([variant="fill"]) {
+  :host([appearance="flat"]) {
     --_background: var(--field-background, var(--eun-content-hover, #edeff0));
   }
-  :host([variant="fill"]) #field-wrapper {
+  :host([appearance="flat"]) #field-wrapper {
     border-color: transparent;
   }
-  :host([variant="fill"][aria-invalid="true"]) #field-wrapper {
-    box-shadow: inset 0 0 0 var(--eun-borderWidth-m, 1.5px) var(--_errorColor);
+  :host([appearance="flat"][aria-invalid="true"]) #field-wrapper {
+    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-bottom: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0;
   }
-  :host([variant="underline"]) #field-wrapper:focus-within {
+  :host([appearance="underline"]) #field-wrapper:focus-within {
     outline: none;
   }
   .segment-group {
@@ -134,7 +134,7 @@ const datePicker = css `
   }
   .time-segment-group {
     padding-inline-start: var(--eun-space-xs, 4px);
-    border-inline-start: var(--eun-borderWidth-s, 1px) solid
+    border-inline-start: var(--eun-border-width-s, 1px) solid
       var(--_borderColor, var(--eun-color-grey-300, #dee0e7));
   }
   .segment-divider,
@@ -148,7 +148,7 @@ const datePicker = css `
     justify-content: center;
     margin-inline-start: auto;
     border: none;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     background: none;
     padding: var(--eun-space-xxs, 1.6px);
     color: var(--_iconColor);
@@ -184,7 +184,7 @@ const datePicker = css `
     max-height: calc(100vh - 16px);
     overflow: auto;
     margin: 0;
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--_borderColor, var(--eun-color-grey-300, #dee0e7));
     border-radius: var(--_borderRadius);
     background: var(
@@ -213,11 +213,11 @@ const datePicker = css `
   #modal-date-preview {
     padding: var(--eun-space-m, 16px);
     margin-block-end: var(--eun-space-s, 8px);
-    border-bottom: var(--eun-borderWidth-s, 1px) solid
+    border-bottom: var(--eun-border-width-s, 1px) solid
       var(--_borderColor, var(--eun-color-grey-300, #dee0e7));
     color: var(--_textColor);
-    font-size: var(--eun-fontSize-l, 28px);
-    font-weight: var(--eun-fontWeight-l);
+    font-size: var(--eun-font-size-l, 28px);
+    font-weight: var(--eun-font-weight-l);
   }
   #modal-date {
     --modal-padding: 0;
@@ -266,21 +266,21 @@ const datePicker = css `
     padding: var(--eun-space-m);
   }
   #time-section {
-    border-top: var(--eun-borderWidth-s, 1px) solid
+    border-top: var(--eun-border-width-s, 1px) solid
       var(--_borderColor, var(--eun-color-grey-300, #dee0e7));
   }
   #timezone-label {
     margin: 0;
     padding-block-end: var(--eun-space-xs, 4px);
     color: var(--_hintColor);
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     text-align: center;
   }
   #popover-footer {
     display: flex;
     justify-content: flex-end;
     gap: var(--eun-space-s, 8px);
-    border-top: var(--eun-borderWidth-s, 1px) solid
+    border-top: var(--eun-border-width-s, 1px) solid
       var(--_borderColor, var(--eun-color-grey-300, #dee0e7));
     padding: var(--eun-space-m);
   }

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

@@ -5,7 +5,7 @@ import { ValidatorsMixinInterface, Validity } from "../../../mixins/validators.m
 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 { EunomiaIconName } from "../../content/icon/icon.type.js";
 import { Constructor } from "../../../utils/constructor.type.js";
 /**
@@ -20,14 +20,14 @@ export type EunomiaInputType = "text" | "email" | "number" | "tel" | "url" | "se
  * Type of the input base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaInputBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface;
+type EunomiaInputBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface;
 declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
 /**
  * A single-line text field, supporting several native input types.
  *
  * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty
  * @prop {'text' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'password'} [type='text'] - The native input type to apply
- * @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} placeholder - The placeholder shown when the field is empty

package/dist/components/form/input/input.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 { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { inputStyles } from "./input.styles.js";
@@ -29,13 +29,13 @@ export const EunomiaInputTagName = "eun-input";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaInputMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))));
+const EunomiaInputMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))));
 /**
  * A single-line text field, supporting several native input types.
  *
  * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty
  * @prop {'text' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'password'} [type='text'] - The native input type to apply
- * @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} placeholder - The placeholder shown when the field is empty
@@ -421,7 +421,7 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
             <eun-button
               class="confirm"
               size="s"
-              variant="primary"
+              color="primary"
               appearance="default"
               rounded
               type="button"

package/dist/components/form/input-file/input-file.d.ts

@@ -18,7 +18,7 @@ export type EunomiaInputFileKind = "image" | "file";
  * Type of the input-file base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaInputFileBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<File[]> & FormLabelMixinInterface;
+type EunomiaInputFileBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<File[]> & FormMixinInterface<File[]> & FormLabelMixinInterface;
 declare const EunomiaInputFileMixinBase: Constructor<EunomiaInputFileBase>;
 /**
  * A file upload field with a dropzone, showing image thumbnails or generic

package/dist/components/form/input-file/input-file.styles.js

@@ -49,7 +49,7 @@ const base = css `
     );
     --_borderRadius: var(
       --input-file-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
     --_itemBackground: var(
       --input-file-item-background,
@@ -59,7 +59,7 @@ const base = css `
     --_gap: var(--input-file-gap, var(--eun-space-s, 8px));
     --_thumbnailSize: var(--input-file-thumbnail-size, 96px);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     color: var(--_textColor);
     display: block;
     width: 100%;
@@ -92,7 +92,7 @@ const base = css `
     justify-content: center;
     gap: var(--eun-space-xs, 4px);
     padding: var(--eun-space-l, 32px) var(--eun-space-m, 16px);
-    border: var(--eun-borderWidth-m, 1.5px) dashed var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) dashed var(--_borderColor);
     border-radius: var(--_borderRadius);
     background-color: var(--_background);
     text-align: center;
@@ -158,7 +158,7 @@ const base = css `
     justify-content: space-between;
     gap: var(--eun-space-s, 8px);
     flex-wrap: wrap;
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(--_hintColor);
   }
   #header-actions {
@@ -176,7 +176,7 @@ const base = css `
     border: none;
     padding: 0;
     font: inherit;
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(--eun-color-primary-500, #3d6fff);
     cursor: pointer;
     text-decoration: underline;
@@ -189,7 +189,7 @@ const base = css `
   .text-button:focus-visible {
     outline: 2px solid var(--_focusIndicator);
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-xs, 4px);
+    border-radius: var(--eun-border-radius-xs, 4px);
   }
   #items {
     display: grid;
@@ -208,7 +208,7 @@ const base = css `
     position: relative;
     display: flex;
     background-color: var(--_itemBackground);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_itemBorderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_itemBorderColor);
     border-radius: var(--_borderRadius);
     box-sizing: border-box;
     cursor: pointer;
@@ -251,7 +251,7 @@ const base = css `
     white-space: nowrap;
   }
   .item-size {
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(--_hintColor);
   }
   .item-checkbox {
@@ -270,7 +270,7 @@ const base = css `
     justify-content: center;
     background: rgb(7 22 33 / 0.55);
     border: none;
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
     color: #fff;
     cursor: pointer;
     padding: 2px;

package/dist/components/form/input-phone/input-phone.d.ts

@@ -4,7 +4,7 @@ import { ReadonlyMixinInterface } from "../../../mixins/readonly.mixin.js";
 import { ValidatorsMixinInterface } 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 { AnchorPositionMixinInterface } from "../../../mixins/anchor-position.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
 /**
@@ -16,7 +16,7 @@ export declare const EunomiaInputPhoneTagName = "eun-input-phone";
  * interface element.
  * @internal
  */
-type EunomiaInputPhoneBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<string> & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface;
+type EunomiaInputPhoneBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface;
 declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
 /**
  * A phone number field rendered in two adjacent parts: a compact country
@@ -38,7 +38,7 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  * digits only.
  *
  * @slot [default] - An optional list of option elements restricting which countries appear in the dropdown, such as an option with value FR for France. When omitted, every built-in country is available
- * @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/input-phone/input-phone.js

@@ -13,7 +13,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 { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
@@ -62,7 +62,7 @@ const TRIGGER_POINTER_DOWN_WINDOW_MS = 100;
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldVariantMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base)))));
+const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base)))));
 /**
  * A phone number field rendered in two adjacent parts: a compact country
  * selector, showing only the flag, on the leading side, and the phone
@@ -83,7 +83,7 @@ const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldVariantMixin(FormLab
  * digits only.
  *
  * @slot [default] - An optional list of option elements restricting which countries appear in the dropdown, such as an option with value FR for France. When omitted, every built-in country is available
- * @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/input-phone/input-phone.styles.js

@@ -43,7 +43,7 @@ const inputPhone = css `
     flex-shrink: 0;
     padding: var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
     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-inline-end: none;
     border-radius: var(--_borderRadius) 0 0 var(--_borderRadius);
     outline: 1px solid transparent;
@@ -64,7 +64,7 @@ const inputPhone = css `
     outline-offset: 0;
   }
   .flag {
-    font-size: var(--eun-fontSize-m, 16px);
+    font-size: var(--eun-font-size-m, 16px);
     line-height: 1;
   }
   #field-wrapper {
@@ -77,7 +77,7 @@ const inputPhone = css `
     margin-inline-start: -1px;
     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: 0 var(--_borderRadius) var(--_borderRadius) 0;
     outline: 1px solid transparent;
     box-sizing: border-box;
@@ -128,41 +128,41 @@ const inputPhone = css `
     #field-wrapper:focus-within {
     outline-color: var(--_errorColor);
   }
-  :host([variant="fill"]) {
+  :host([appearance="flat"]) {
     --_background: var(--field-background, var(--eun-content-hover, #edeff0));
   }
-  :host([variant="fill"]:not(:hover)) #country-trigger:not(:focus-visible),
-  :host([variant="fill"]:not(:hover)) #field-wrapper:not(:focus-within) {
+  :host([appearance="flat"]:not(:hover)) #country-trigger:not(:focus-visible),
+  :host([appearance="flat"]:not(:hover)) #field-wrapper:not(:focus-within) {
     border-color: transparent;
   }
-  :host([variant="fill"]) #country-trigger {
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid
+  :host([appearance="flat"]) #country-trigger {
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(--eun-border-color, #dee0e7);
   }
-  :host([variant="fill"])
+  :host([appearance="flat"])
     #phone-group:has(#phone-field[aria-invalid="true"])
     #country-trigger,
-  :host([variant="fill"])
+  :host([appearance="flat"])
     #phone-group:has(#phone-field[aria-invalid="true"])
     #field-wrapper {
     border-color: var(--_errorColor);
   }
-  :host([variant="underline"]) #country-trigger,
-  :host([variant="underline"]) #field-wrapper {
+  :host([appearance="underline"]) #country-trigger,
+  :host([appearance="underline"]) #field-wrapper {
     border: none;
     outline: none;
-    border-bottom: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0;
   }
-  :host([variant="underline"]) #country-trigger {
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid
+  :host([appearance="underline"]) #country-trigger {
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(--eun-border-color, #dee0e7);
   }
-  :host([variant="underline"]) #field-wrapper {
+  :host([appearance="underline"]) #field-wrapper {
     margin-inline-start: 0;
   }
-  :host([variant="underline"]) #country-trigger:focus-visible,
-  :host([variant="underline"]) #field-wrapper:focus-within {
+  :host([appearance="underline"]) #country-trigger:focus-visible,
+  :host([appearance="underline"]) #field-wrapper:focus-within {
     outline: none;
   }
   .dial-code-prefix {
@@ -200,7 +200,7 @@ const inputPhone = css `
     color: var(--_textColor);
     background: var(--eun-content-hover, #edeff0);
     border: none;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     padding: var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
     outline: 1px solid transparent;
   }

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

@@ -13,17 +13,17 @@ const base = css `
   }
   #name {
     color: var(--eun-text-color, #071621);
-    font-size: var(--eun-fontSize-s, 14px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-s, 14px);
+    font-weight: var(--eun-font-weight-l, 700);
   }
   slot[name="instructions"] {
     display: block;
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(--eun-text-secondary, #484e61);
   }
   .required {
     color: var(--eun-color-critical-100, #aa0014);
-    font-size: var(--eun-fontSize-s, 10px);
+    font-size: var(--eun-font-size-s, 10px);
   }
 `;
 export const labelStyles = base;

package/dist/components/form/radio/radio-card.styles.js

@@ -50,7 +50,7 @@ const base = css `
     --_padding: var(--radio-card-padding, var(--eun-space-m, 16px));
     --_borderRadius: var(
       --radio-card-border-radius,
-      var(--eun-borderRadius-m, 10px)
+      var(--eun-border-radius-m, 10px)
     );
     --_indicatorBorder: var(--_borderColor);
     --_indicatorDot: transparent;

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

@@ -4,7 +4,7 @@ import type { EunomiaRadio } from "./radio.js";
  * Tag name of the radio list component.
  */
 export declare const EunomiaRadioListTagName = "eun-radio-list";
-declare const EunomiaRadioList_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 | undefined>> & 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 EunomiaRadioList_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 | undefined>> & 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 | undefined>> & typeof LitElement;
 /**
  * Groups radio children into a select one of many field, wrapped so the
  * group has a single accessible name and reads as one radio group to

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

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