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

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

@@ -31,6 +31,7 @@ export declare function setIconBaseUrl(url: string): void;
  * @cssprop [--icon-background] - Sets a background color behind the icon, for example for a hover highlight. Transparent by default
  * @cssprop [--icon-padding] - Sets the space between the icon and its background box. Zero by default
  * @cssprop [--icon-border-radius] - Sets the corner radius of the background box
+ * @cssprop [--icon-transition] - Sets the transition applied to the icon's color, background, and size changes. 0.2s by default
  * @element eun-icon
  */
 export declare class EunomiaIcon extends LitElement {
@@ -60,9 +61,18 @@ export declare class EunomiaIcon extends LitElement {
     /**
      * Sets the size of the icon. Accepts any valid CSS size unit.
      * - If size ends with `%`, it will be converted to `rem`.
-     * - If no size is provided, defaults to `1rem`.
+     * - If no size is provided, falls back to `--icon-size`, then `1rem`.
+     *
+     * Applied on the internal wrapper (see {@link cssSize}) rather than as an
+     * inline style on the host, which an SSR framework would report as a
+     * hydration mismatch.
      */
     set size(size: string | undefined);
+    /**
+     * The CSS length {@link size} resolves to, or `undefined` when unset.
+     * @private
+     */
+    private get cssSize();
     /**
      * Gets the current size value set for the icon.
      */
@@ -149,7 +159,7 @@ export declare class EunomiaIcon extends LitElement {
      * Renders the icon component. If no `name` is set, renders nothing.
      * If SVG markup is available, it is rendered using `unsafeSVG`.
      */
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/content/icon/icon.js

@@ -4,21 +4,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
 var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     if (kind === "m") throw new TypeError("Private method is not writable");
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
 var _EunomiaIcon_size;
 import { html, LitElement, nothing } from "lit";
 import { property, state, customElement } from "lit/decorators.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { iconStyles } from "./icon.style.js";
 /**
  * Tag name of the icon component.
@@ -48,6 +49,14 @@ let iconBaseUrl;
  * that already tried to load before the base URL was set.
  */
 const connectedIcons = new Set();
+/**
+ * SVG markup already requested, keyed by URL, so every icon sharing a name
+ * (the same glyph repeated down a list, or rendered again after a
+ * re-mount) shares one request and renders from memory afterwards instead
+ * of waiting on its own round trip. A failed request is dropped, so a
+ * later attempt (after `setIconBaseUrl`, say) retries it.
+ */
+const svgCache = new Map();
 /**
  * Sets the URL the icon SVGs are served from, laid out as
  * `<baseUrl>/<shape>/<name>.svg` (the `icons` folder shipped next to this
@@ -78,6 +87,7 @@ export function setIconBaseUrl(url) {
  * @cssprop [--icon-background] - Sets a background color behind the icon, for example for a hover highlight. Transparent by default
  * @cssprop [--icon-padding] - Sets the space between the icon and its background box. Zero by default
  * @cssprop [--icon-border-radius] - Sets the corner radius of the background box
+ * @cssprop [--icon-transition] - Sets the transition applied to the icon's color, background, and size changes. 0.2s by default
  * @element eun-icon
  */
 let EunomiaIcon = class EunomiaIcon extends LitElement {
@@ -92,24 +102,33 @@ let EunomiaIcon = class EunomiaIcon extends LitElement {
     /**
      * Sets the size of the icon. Accepts any valid CSS size unit.
      * - If size ends with `%`, it will be converted to `rem`.
-     * - If no size is provided, defaults to `1rem`.
+     * - If no size is provided, falls back to `--icon-size`, then `1rem`.
+     *
+     * Applied on the internal wrapper (see {@link cssSize}) rather than as an
+     * inline style on the host, which an SSR framework would report as a
+     * hydration mismatch.
      */
     set size(size) {
+        const previous = __classPrivateFieldGet(this, _EunomiaIcon_size, "f");
         __classPrivateFieldSet(this, _EunomiaIcon_size, size, "f");
-        let cssSize;
+        this.requestUpdate("size", previous);
+    }
+    /**
+     * The CSS length {@link size} resolves to, or `undefined` when unset.
+     * @private
+     */
+    get cssSize() {
+        const size = __classPrivateFieldGet(this, _EunomiaIcon_size, "f");
         if (!size) {
-            cssSize = "1rem";
-        }
-        else if (/%$/.test(size)) {
-            cssSize = `${parseFloat(size) / 100}rem`;
+            return undefined;
         }
-        else if (/^\d+(\.\d+)?$/.test(size)) {
-            cssSize = `${size}px`;
+        if (/%$/.test(size)) {
+            return `${parseFloat(size) / 100}rem`;
         }
-        else {
-            cssSize = size;
+        if (/^\d+(\.\d+)?$/.test(size)) {
+            return `${size}px`;
         }
-        this.style.setProperty("--_size", cssSize);
+        return size;
     }
     /**
      * Gets the current size value set for the icon.
@@ -215,11 +234,18 @@ let EunomiaIcon = class EunomiaIcon extends LitElement {
             moduleUrl.pathname = `${moduleDir}/icons/${shape}/${name}.svg`;
             url = moduleUrl.href;
         }
-        const response = await fetch(url);
-        if (!response.ok) {
-            throw new Error(`Icon not found: ${url}`);
+        let svg = svgCache.get(url);
+        if (!svg) {
+            svg = fetch(url).then((response) => {
+                if (!response.ok) {
+                    throw new Error(`Icon not found: ${url}`);
+                }
+                return response.text();
+            });
+            svgCache.set(url, svg);
+            svg.catch(() => svgCache.delete(url));
         }
-        return response.text();
+        return svg;
     }
     /**
      * Determines the shape to render : the explicit `shape` property always
@@ -273,7 +299,11 @@ let EunomiaIcon = class EunomiaIcon extends LitElement {
         if (!this.name) {
             return nothing;
         }
-        return html `<span part="wrapper" aria-hidden="true">
+        return html `<span
+      part="wrapper"
+      aria-hidden="true"
+      style=${styleMap({ "--_size": this.cssSize })}
+    >
       ${this.svgMarkup ? unsafeSVG(this.svgMarkup) : nothing}
     </span>`;
     }
@@ -296,7 +326,7 @@ __decorate([
     state()
 ], EunomiaIcon.prototype, "svgMarkup", void 0);
 __decorate([
-    property({ hasChanged: () => false })
+    property({ attribute: "size" })
 ], EunomiaIcon.prototype, "size", null);
 EunomiaIcon = __decorate([
     customElement(EunomiaIconTagName)

package/dist/components/content/icon/icon.style.d.ts

@@ -8,5 +8,7 @@
  * --icon-padding : space between the icon and its background box. Zero by
  *   default, so the background hugs the icon exactly unless widened.
  * --icon-border-radius : corner radius of the background box.
+ * --icon-transition : transition applied to the icon's color, background,
+ *   and size changes. 0.2s by default.
  */
 export declare const iconStyles: import("lit").CSSResult;

package/dist/components/content/icon/icon.style.js

@@ -9,6 +9,8 @@ import { css } from "lit";
  * --icon-padding : space between the icon and its background box. Zero by
  *   default, so the background hugs the icon exactly unless widened.
  * --icon-border-radius : corner radius of the background box.
+ * --icon-transition : transition applied to the icon's color, background,
+ *   and size changes. 0.2s by default.
  */
 export const iconStyles = css `
   :host {
@@ -27,9 +29,10 @@ export const iconStyles = css `
     background-color: var(--_background);
     border-radius: var(--icon-border-radius, var(--eun-border-radius-m, 8px));
     text-decoration: none;
+    white-space: normal;
     display: inline-block;
     user-select: none;
-    transition: 0.2s;
+    transition: var(--icon-transition, 0.2s);
   }
   svg {
     width: 100%;

package/dist/components/content/shared-styles/card-link.styles.js

@@ -28,6 +28,7 @@ const base = css `
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    pointer-events: none;
     width: var(--card-link-badge-size, 18px);
     height: var(--card-link-badge-size, 18px);
     border-radius: 50%;

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

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

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

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

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

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

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

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

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

@@ -180,22 +180,22 @@ const base = css `
     cursor: default;
   }
 
-  :host([variant="fill"]) {
+  :host([appearance="flat"]) {
     --_background: var(--counter-background, var(--eun-content-hover, #edeff0));
   }
-  :host([variant="fill"]) #field-wrapper:not(:focus-within) {
+  :host([appearance="flat"]) #field-wrapper:not(:focus-within) {
     border-color: transparent;
   }
-  :host([variant="fill"]) #field-wrapper:has(#field[aria-invalid="true"]) {
+  :host([appearance="flat"]) #field-wrapper:has(#field[aria-invalid="true"]) {
     box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px) var(--_errorColor);
   }
-  :host([variant="underline"]) #field-wrapper {
+  :host([appearance="underline"]) #field-wrapper {
     border: none;
     outline: none;
     border-radius: 0;
     border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
   }
-  :host([variant="underline"]) #field-wrapper:focus-within {
+  :host([appearance="underline"]) #field-wrapper:focus-within {
     outline: none;
   }
 `;

package/dist/components/form/date-picker/date-picker.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<Date | null> & 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

@@ -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 {
+  :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-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 {

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<string> & 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-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<string> & 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

@@ -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 {
+  :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-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0;
   }
-  :host([variant="underline"]) #country-trigger {
+  :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 {