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

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

@@ -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 & FieldVariantMixinInterface & AnchorPositionMixinInterface;
 declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
 /**
  * A field for picking a color, as a `#rrggbb` hex string. Declare preset

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

@@ -14,7 +14,7 @@ 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 & FieldVariantMixinInterface;
 declare const EunomiaCounterMixinBase: Constructor<EunomiaCounterBase>;
 /**
  * A numeric field with increment and decrement buttons, built on a native

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),
@@ -187,13 +187,13 @@ const base = css `
     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);
+    box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px) var(--_errorColor);
   }
   :host([variant="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 {
     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);
   }

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

@@ -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 & FieldVariantMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
 /**
  * A date field entered across segmented numeric day, month, and year

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);
@@ -75,12 +75,12 @@ const datePicker = css `
     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);
+    box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px) var(--_errorColor);
   }
   :host([variant="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 {
@@ -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

@@ -20,7 +20,7 @@ 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 & FieldVariantMixinInterface;
 declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
 /**
  * A single-line text field, supporting several native input types.

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

@@ -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 & FieldVariantMixinInterface & AnchorPositionMixinInterface;
 declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
 /**
  * A phone number field rendered in two adjacent parts: a compact country

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;
@@ -136,7 +136,7 @@ const inputPhone = css `
     border-color: transparent;
   }
   :host([variant="fill"]) #country-trigger {
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(--eun-border-color, #dee0e7);
   }
   :host([variant="fill"])
@@ -151,11 +151,11 @@ const inputPhone = css `
   :host([variant="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
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(--eun-border-color, #dee0e7);
   }
   :host([variant="underline"]) #field-wrapper {
@@ -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

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

@@ -21,7 +21,7 @@ const base = css `
     --_borderColor: var(--radio-border-color, var(--eun-border-color, #dee0e7));
     --_background: var(--radio-background, transparent);
     --_color: var(--eun-text-color, #071621);
-    --_roundDiameter: var(--radio-size, var(--eun-fontSize-m, 16px));
+    --_roundDiameter: var(--radio-size, var(--eun-font-size-m, 16px));
     --_focusIndicator: var(
       --radio-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -35,7 +35,7 @@ const base = css `
     --_roundGap: 2px;
     --_cursor: pointer;
     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;