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

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;

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

@@ -11,11 +11,11 @@ const search = css `
     align-items: center;
     padding: 2px 6px;
     font-family: inherit;
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(--_iconColor);
     background: var(--eun-content-hover, #edeff0);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
+    border-radius: var(--eun-border-radius-s, 5px);
   }
   #field-wrapper #shortcut-hint {
     position: absolute;
@@ -46,7 +46,7 @@ const search = css `
     text-align: left;
     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;
@@ -74,16 +74,16 @@ const search = css `
     background-color: var(--eun-disabled-color, #ecedf0);
     color: var(--eun-text-disabled-color, #8d93aa);
   }
-  :host([variant="fill"]) #search-trigger {
+  :host([appearance="flat"]) #search-trigger {
     border-color: transparent;
   }
-  :host([variant="underline"]) #search-trigger {
+  :host([appearance="underline"]) #search-trigger {
     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"]) #search-trigger:focus-visible {
+  :host([appearance="underline"]) #search-trigger:focus-visible {
     outline: none;
   }
   #trigger-icon {
@@ -106,7 +106,7 @@ const search = css `
     top: 0;
     z-index: 1;
     background: var(--modal-background, var(--eun-surface-color, #ffffff));
-    border-bottom: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
   }
   #panel-field #field-wrapper {
     position: relative;

package/dist/components/form/select/select.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 { EunomiaIconName } from "../../content/icon/icon.type.js";
 import { Constructor } from "../../../utils/constructor.type.js";
@@ -22,7 +22,7 @@ type SelectValue = string | string[];
  * Type of the select base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaSelectBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<SelectValue> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface;
+type EunomiaSelectBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<SelectValue> & FormMixinInterface<SelectValue> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface;
 declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
 /**
  * A field that picks one or more values from a list of option and optgroup
@@ -49,7 +49,7 @@ declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
  * @prop {boolean} [searchable=false] - Whether the field filters its options as the user types. When false, the field is read only and driven by arrow keys, Enter, and type-ahead. Ignored while native is set
  * @prop {boolean} [native=false] - Renders the field as a real select, using the browser's own dropdown instead of the listbox panel. Takes priority over searchable and multiple, neither of which a native dropdown can support
  * @prop {boolean} [multiple=false] - Whether more than one option can be picked at once. Each option then renders a checkbox, and picking one toggles it without closing the dropdown, so value becomes an array of every picked option's value. Ignored while native is set
- * @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/select/select.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";
@@ -31,7 +31,7 @@ export const EunomiaSelectTagName = "eun-select";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaSelectMixinBase = AnchorPositionMixin(FieldVariantMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
+const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
 /**
  * A field that picks one or more values from a list of option and optgroup
  * children. Set searchable to let the field also filter that list as the
@@ -57,7 +57,7 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldVariantMixin(FormLabelMi
  * @prop {boolean} [searchable=false] - Whether the field filters its options as the user types. When false, the field is read only and driven by arrow keys, Enter, and type-ahead. Ignored while native is set
  * @prop {boolean} [native=false] - Renders the field as a real select, using the browser's own dropdown instead of the listbox panel. Takes priority over searchable and multiple, neither of which a native dropdown can support
  * @prop {boolean} [multiple=false] - Whether more than one option can be picked at once. Each option then renders a checkbox, and picking one toggles it without closing the dropdown, so value becomes an array of every picked option's value. Ignored while native is set
- * @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/select/select.styles.js

@@ -27,7 +27,7 @@ const select = css `
     right: var(--eun-space-m, 16px);
     pointer-events: none;
     color: var(--_iconColor);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     transition: transform 0.15s ease;
   }
   #select-arrow.open {
@@ -56,8 +56,8 @@ const select = css `
     height: 16px;
     margin-inline-end: var(--eun-space-xs, 4px);
     vertical-align: -3px;
-    border: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border: var(--eun-border-width-s, 1px) solid var(--_borderColor);
+    border-radius: var(--eun-border-radius-s, 5px);
     --icon-color: transparent;
   }
   #listbox li.selected .option-checkbox {
@@ -71,7 +71,7 @@ const select = css `
     gap: var(--eun-space-s, 8px);
     padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
     cursor: default;
-    border-block-start: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    border-block-start: var(--eun-border-width-s, 1px) solid var(--_borderColor);
   }
   #listbox .actions[hidden] {
     display: none;
@@ -85,7 +85,7 @@ const select = css `
     border: none;
     background: none;
     font: inherit;
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     color: var(
       --field-confirm-link-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -106,7 +106,7 @@ const select = css `
   #confirm-link:focus-visible {
     outline: 2px solid var(--_focusIndicator);
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-m);
+    border-radius: var(--eun-border-radius-m);
   }
 `;
 export const selectStyles = [

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

@@ -18,7 +18,7 @@ import { css } from "lit";
 const base = css `
   :host {
     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-block;
     outline: none;
   }

package/dist/components/form/shared-styles/field.styles.js

@@ -38,14 +38,14 @@ const base = css `
       --field-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
     );
-    --_borderRadius: var(--field-border-radius, var(--eun-borderRadius-m, 8px));
+    --_borderRadius: var(--field-border-radius, var(--eun-border-radius-m, 8px));
     --_padding: var(
       --field-padding,
       var(--eun-space-s, 8px) var(--eun-space-s, 8px)
     );
     --_shadow: var(--field-shadow, none);
     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: 100%;
     outline: none;
@@ -65,7 +65,7 @@ const base = 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);
     outline: 1px solid transparent;
@@ -117,22 +117,22 @@ const base = css `
   #field[aria-invalid="true"]:focus-visible {
     outline-color: var(--_errorColor);
   }
-  :host([variant="fill"]) {
+  :host([appearance="flat"]) {
     --_background: var(--field-background, var(--eun-content-hover, #edeff0));
   }
-  :host([variant="fill"]) #field:not(:hover) {
+  :host([appearance="flat"]) #field:not(:hover) {
     border-color: transparent;
   }
-  :host([variant="fill"]) #field[aria-invalid="true"] {
-    box-shadow: inset 0 0 0 var(--eun-borderWidth-m, 1.5px) var(--_errorColor);
+  :host([appearance="flat"]) #field[aria-invalid="true"] {
+    box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px) var(--_errorColor);
   }
-  :host([variant="underline"]) #field {
+  :host([appearance="underline"]) #field {
     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:focus-visible {
+  :host([appearance="underline"]) #field:focus-visible {
     outline: none;
   }
   slot[name="icon"] {
@@ -168,11 +168,11 @@ const base = css `
   #password-toggle:focus-visible {
     outline: 2px solid var(--_focusIndicator);
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
   }
   #readonly-display {
     padding: var(--_padding);
-    border: var(--eun-borderWidth-m, 1.5px) solid transparent;
+    border: var(--eun-border-width-m, 1.5px) solid transparent;
     border-radius: var(--_borderRadius);
     box-sizing: border-box;
     cursor: text;

package/dist/components/form/shared-styles/form-labels.styles.js

@@ -4,7 +4,7 @@ const base = css `
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     display: block;
     margin-block-start: var(--eun-space-xs, 4px);
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     margin-block: 0;
   }
   #description span {

package/dist/components/form/shared-styles/listbox.styles.js

@@ -39,10 +39,10 @@ const listbox = css `
     max-height: var(--field-listbox-max-height, 260px);
     overflow-y: auto;
     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);
     background: var(--eun-surface-color, #ffffff);
-    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);
     box-shadow: var(
       --eun-shadow-m,
@@ -74,13 +74,13 @@ const listbox = css `
     background: var(--eun-content-hover, #edeff0);
   }
   #listbox li.selected {
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
     color: var(--eun-color-primary-500, #3d6fff);
   }
   #listbox li mark {
     background: var(--field-match-background, none);
     color: var(--field-match-color, var(--eun-color-primary-500, #3d6fff));
-    font-weight: var(--field-match-font-weight, var(--eun-fontWeight-l, 700));
+    font-weight: var(--field-match-font-weight, var(--eun-font-weight-l, 700));
     text-decoration: var(--field-match-text-decoration, none);
   }
   #listbox .no-results,
@@ -92,8 +92,8 @@ const listbox = css `
   #listbox .group-label {
     cursor: default;
     padding-block-end: var(--eun-space-xxs, 1.6px);
-    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;
   }

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

@@ -13,7 +13,7 @@ export declare const EunomiaSliderTagName = "eun-slider";
  * Type of the slider base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaSliderBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<number> & FormLabelMixinInterface;
+type EunomiaSliderBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<number> & FormMixinInterface<number> & FormLabelMixinInterface;
 declare const EunomiaSliderMixinBase: Constructor<EunomiaSliderBase>;
 /**
  * A form-associated control for picking a single numeric value out of a

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

@@ -26,7 +26,7 @@ const base = css `
     --_trackHeight: var(--slider-track-height, 6px);
     --_trackColor: var(
       --slider-track-background,
-      var(--eun-color-grey-200, #ecedf0)
+      var(--eun-surface-sunken-strong, #ecedf0)
     );
     --_fillColor: var(
       --slider-track-fill-background,
@@ -34,7 +34,7 @@ const base = css `
     );
     --_trackRadius: var(
       --slider-track-border-radius,
-      var(--eun-borderRadius-xl, 999px)
+      var(--eun-border-radius-xl, 999px)
     );
     --_thumbSize: var(--slider-thumb-size, 18px);
     --_thumbBackground: var(--slider-thumb-background, #fff);
@@ -62,7 +62,7 @@ const base = css `
       var(--eun-color-primary-500, #3d6fff)
     );
     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: 100%;
     outline: none;
@@ -113,12 +113,12 @@ const base = css `
     transform: translateX(-50%);
     background: var(--_tooltipBackground);
     color: var(--_tooltipColor);
-    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);
     line-height: 1;
     white-space: nowrap;
     padding: var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
-    border-radius: var(--eun-borderRadius-s, 4px);
+    border-radius: var(--eun-border-radius-s, 4px);
     pointer-events: none;
     font-variant-numeric: tabular-nums;
   }

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

@@ -13,7 +13,7 @@ export declare const EunomiaSwitchTagName = "eun-switch";
  * Type of the switch base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaSwitchBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<string> & CheckMixinInterface;
+type EunomiaSwitchBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<boolean> & FormMixinInterface<string> & CheckMixinInterface;
 /**
  * Base class with composed mixins used to handle component extends elements type.
  * Reuses the exact same behavior stack as `eun-checkbox` (form participation,

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

@@ -23,7 +23,7 @@ const base = css `
     --_trackBorder: var(--eun-border-color, #dee0e7);
     --_trackBackground: var(
       --switch-track-background,
-      var(--eun-color-grey-200, #ecedf0)
+      var(--eun-surface-sunken, #ecedf0)
     );
     --_thumbSize: var(--switch-thumb-size, calc(var(--_trackHeight) - 6px));
     --_thumbBackground: var(--switch-thumb-background, #fff);
@@ -37,9 +37,9 @@ const base = css `
       --switch-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
     );
-    --_trackBorderWidth: var(--eun-borderWidth-s, 1px);
+    --_trackBorderWidth: var(--eun-border-width-s, 1px);
     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: flex;
     width: 100%;
     outline: none;
@@ -70,7 +70,7 @@ const base = css `
     #track {
     --_trackBackground: var(
       --switch-track-background-hover,
-      var(--eun-content-hover, #edeff0)
+      var(--eun-surface-sunken-hover, #edeff0)
     );
   }
 
@@ -82,7 +82,7 @@ const base = css `
     #track {
     --_trackBackground: var(
       --switch-track-background-pressed,
-      var(--eun-content-pressed, #e4e6e8)
+      var(--eun-surface-sunken-pressed, #e4e6e8)
     );
   }
 
@@ -147,7 +147,7 @@ const base = css `
   }
 
   #label-text {
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
     line-height: 1.2;
   }
 
@@ -161,7 +161,7 @@ const base = css `
     height: var(--_trackHeight);
     background: var(--_trackBackground);
     border: var(--_trackBorderWidth) solid var(--_trackBorder);
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
     flex-shrink: 0;
     box-sizing: border-box;
     outline: 2px solid transparent;
@@ -178,7 +178,7 @@ const base = css `
     width: var(--_thumbSize);
     height: var(--_thumbSize);
     background: var(--_thumbBackground);
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
     box-shadow: var(--eun-shadow-xs, 0 1px 3px rgba(0, 0, 0, 0.18));
     display: flex;
     align-items: center;

package/dist/components/form/textarea/textarea.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 { Constructor } from "../../../utils/constructor.type.js";
 /**
  * Tag name of the textarea component.
@@ -15,7 +15,7 @@ export declare const EunomiaTextareaTagName = "eun-textarea";
  * Type of the textarea base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaTextareaBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface;
+type EunomiaTextareaBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface;
 declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
 /**
  * A multi-line text field, sharing its label, hint, and error chrome and
@@ -34,7 +34,7 @@ declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
  * typed by hand. See the Accessibility tab for the full keyboard and ARIA
  * details of the toolbar and both readonly behaviors.
  *
- * @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/textarea/textarea.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 { findRichTextColor, formatRichText, getPlainTextLength, populateEditableRoot, RICH_TEXT_COLORS, serializeEditableRoot, splitAlign, } from "../../../utils/rich-text.utils.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
@@ -467,7 +467,7 @@ function getActiveColorName(root, kind) {
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaTextareaMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))));
+const EunomiaTextareaMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))));
 /**
  * A multi-line text field, sharing its label, hint, and error chrome and
  * theming with the input component. It grows and shrinks to fit its
@@ -485,7 +485,7 @@ const EunomiaTextareaMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(
  * typed by hand. See the Accessibility tab for the full keyboard and ARIA
  * details of the toolbar and both readonly behaviors.
  *
- * @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
@@ -1625,7 +1625,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
             <eun-button
               class="cancel"
               size="s"
-              variant="critical"
+              color="critical"
               appearance="flat"
               rounded
               type="button"

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

@@ -72,12 +72,12 @@ const textarea = css `
     width: 2rem;
     height: 2rem;
     padding: 0;
-    border: var(--eun-borderWidth-m, 1.5px) solid
+    border: var(--eun-border-width-m, 1.5px) solid
       var(
         --_border-indicator-color,
         var(--field-border-color, var(--eun-border-color, #dee0e7))
       );
-    border-radius: var(--eun-borderRadius-m, 8px);
+    border-radius: var(--eun-border-radius-m, 8px);
     background: none;
     color: var(--_iconColor, var(--eun-text-secondary, #484e61));
     cursor: pointer;
@@ -104,9 +104,9 @@ const textarea = css `
     left: 0;
     margin: 0;
     padding: var(--eun-space-xs, 4px);
-    border: var(--eun-borderWidth-m, 1.5px) solid
+    border: var(--eun-border-width-m, 1.5px) solid
       var(--eun-border-color, #dee0e7);
-    border-radius: var(--eun-borderRadius-m, 8px);
+    border-radius: var(--eun-border-radius-m, 8px);
     background: var(--eun-surface-color, #ffffff);
     box-shadow: var(--eun-shadow-m, 0 4px 16px rgba(0, 0, 0, 0.12));
     display: grid;
@@ -120,7 +120,7 @@ const textarea = css `
     width: 1.75rem;
     height: 1.75rem;
     padding: 0;
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
     border: 2px solid transparent;
     background-color: var(--_swatch-bg);
     cursor: pointer;
@@ -149,7 +149,7 @@ const textarea = css `
     flex: 0 0 auto;
     margin-inline-start: auto;
     white-space: nowrap;
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(--_hintColor, var(--eun-text-secondary, #484e61));
   }
   #char-count[data-exceeded] {

package/dist/components/form/time-picker/time-picker-columns.styles.js

@@ -31,7 +31,7 @@ const timePickerColumns = css `
     align-items: center;
     justify-content: center;
     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, var(--eun-text-secondary, #484e61));
@@ -54,14 +54,14 @@ const timePickerColumns = css `
     align-items: center;
     justify-content: center;
     min-width: 48px;
-    font-size: var(--eun-fontSize-l, 24px);
-    font-weight: var(--eun-fontWeight-m, 600);
+    font-size: var(--eun-font-size-l, 24px);
+    font-weight: var(--eun-font-weight-m, 600);
     color: var(--_textColor, var(--eun-text-color, #071621));
     font-variant-numeric: tabular-nums;
   }
   .tp-value {
     padding: var(--eun-space-xs, 4px);
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     outline: 2px solid transparent;
     outline-offset: 2px;
     cursor: default;
@@ -81,7 +81,7 @@ const timePickerColumns = css `
     scrollbar-width: none;
     outline: 2px solid transparent;
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
   }
   .tp-wheel::-webkit-scrollbar {
     display: none;
@@ -113,7 +113,7 @@ const timePickerColumns = css `
   }
   .tp-wheel-item.selected {
     color: var(--_textColor, var(--eun-text-color, #071621));
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
   }
   @media (prefers-reduced-motion: reduce) {
     .tp-wheel {

package/dist/components/form/time-picker/time-picker-list.styles.js

@@ -19,7 +19,7 @@ const timePickerList = css `
     display: flex;
     align-items: center;
     border: none;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     background: none;
     padding: var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
     color: var(--_textColor, var(--eun-text-color, #071621));
@@ -49,7 +49,7 @@ const timePickerList = css `
       --time-picker-selected-color,
       var(--eun-color-primary-700, #3662e0)
     );
-    font-weight: var(--eun-fontWeight-m, 600);
+    font-weight: var(--eun-font-weight-m, 600);
   }
   .tp-list-item:disabled {
     cursor: not-allowed;

package/dist/components/form/time-picker/time-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";
@@ -19,7 +19,7 @@ export declare const EunomiaTimePickerTagName = "eun-time-picker";
  * interface element.
  * @internal
  */
-type EunomiaTimePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
+type EunomiaTimePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
 /**
  * A time field entered across segmented numeric hour and minute inputs,
@@ -39,7 +39,7 @@ declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
  * each hour, minute, and period column is its own spin button, grouped
  * under a labeled group.
  *
- * @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 {Date | null} value - The picked instant
  * @prop {Date | null} defaultValue - The default value applied when the field connects, and restored on form reset
  * @prop {string} [timezone] - The time zone the hour and minute are displayed and edited in. Defaults to the runtime's own