@eunomia/elements 1.0.0-beta.7 → 1.0.0-beta.8

package/dist/components/content/tooltip/tooltip.js

@@ -12,6 +12,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
 import { clampToViewport } from "../../../utils/dropdown-menu.utils.js";
 import { isWebKit } from "../../../utils/browser.utils.js";
+import { resolveFocusTarget } from "../../../utils/focusable-elements.utils.js";
 import { formatRichText } from "../../../utils/rich-text.utils.js";
 import { tooltipHostStyles, tooltipPanelStyles, tooltipAnchorPositioningStyles, } from "./tooltip.styles.js";
 import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
@@ -874,28 +875,43 @@ let EunomiaTooltip = EunomiaTooltip_1 = class EunomiaTooltip extends EunomiaTool
         return this.readPixelVar("--tooltip-gap", 8);
     }
     /**
-     * Links the slotted anchor's `aria-describedby` to the panel, so a screen
-     * reader announces the tooltip's content as a description of the anchor.
-     * Idempotent — only ever applied once per anchor.
+     * Links the anchor's focusable element to the panel, so a screen reader
+     * announces the tooltip's content as a description of whatever actually
+     * holds focus. Idempotent — only ever applied once per anchor.
      *
-     * A plain `id`-string `aria-describedby` reference works correctly here :
-     * unlike an earlier version of this component (where the panel lived in
-     * `eun-tooltip`'s own shadow root, a different tree scope than the
-     * anchor's), the panel is now portaled into the anchor's own tree scope
-     * (see {@link ensurePortal}), so this is an entirely ordinary same-scope
-     * ARIA reference.
+     * The described element is resolved by `resolveFocusTarget` rather than
+     * being the slotted anchor itself : when the anchor is a component
+     * (`<eun-link slot="anchor"><a href>…</a></eun-link>`, an `eun-button`
+     * with `href`), focus lands on the slotted `<a>` or on a control inside
+     * the component's shadow root, and a description set on the host is
+     * never announced.
+     *
+     * When that element shares the panel's tree scope (the anchor itself, or
+     * its light DOM descendants, since the panel is portaled into the
+     * anchor's own scope, see {@link ensurePortal}), a plain `id`-string
+     * `aria-describedby` is enough. A control inside the anchor's shadow root
+     * can't reference an id outside it, so it gets an element reference
+     * through `ariaDescribedByElements` instead.
      * @private
      */
     applyAriaDescribedBy() {
-        if (this.ariaDescribedByApplied || !this.anchorEl) {
+        if (this.ariaDescribedByApplied || !this.anchorEl || !this.panelEl) {
             return;
         }
         this.ariaDescribedByApplied = true;
-        const existing = this.anchorEl.getAttribute("aria-describedby");
+        const target = resolveFocusTarget(this.anchorEl);
+        if (target.getRootNode() !== this.portalRoot) {
+            const existing = target.ariaDescribedByElements ?? [];
+            if (!existing.includes(this.panelEl)) {
+                target.ariaDescribedByElements = [...existing, this.panelEl];
+            }
+            return;
+        }
+        const existing = target.getAttribute("aria-describedby");
         const ids = existing ? existing.split(/\s+/) : [];
         if (!ids.includes(this.panelId)) {
             ids.push(this.panelId);
-            this.anchorEl.setAttribute("aria-describedby", ids.join(" "));
+            target.setAttribute("aria-describedby", ids.join(" "));
         }
     }
     /**

package/dist/components/content/tooltip/tooltip.styles.js

@@ -172,7 +172,7 @@ const panel = css `
     display: grid;
     row-gap: var(--tooltip-row-gap, var(--eun-space-xs, 4px));
     width: max-content;
-    min-width: var(--tooltip-min-width, 160px);
+    min-width: var(--tooltip-min-width, 0px);
     max-width: var(--tooltip-max-width, 280px);
     padding: var(
       --tooltip-padding,

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

@@ -6,6 +6,8 @@ import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { EditableMixinInterface } from "../../../mixins/editable.mixin.js";
 import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixinInterface } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixinInterface } from "../../../mixins/field-size.mixin.js";
 import { AnchorPositionMixinInterface } from "../../../mixins/anchor-position.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
 import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
@@ -18,7 +20,7 @@ export declare const EunomiaColorPickerTagName = "eun-color-picker";
  * interface elements.
  * @internal
  */
-type EunomiaColorPickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
+type EunomiaColorPickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & RoundedMixinInterface & FieldSizeMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
 /**
  * A field for picking a color, as a `#rrggbb` hex string. Declare preset
@@ -56,6 +58,8 @@ declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
  * @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' | '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 {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The field size. A field and a button of the same size share the same height
  * @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
@@ -109,11 +113,13 @@ declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
  * @cssprop [--field-edit-confirm-color] - Sets the color of the confirm button in readonly-available edit mode
  * @cssprop [--field-edit-cancel-color] - Sets the color of the cancel button in readonly-available edit mode
  * @cssprop [--field-listbox-max-height=260px] - Sets the maximum height of the dropdown panel, past which it scrolls
+ * @cssprop [--field-listbox-border-radius] - Sets the corner radius of the dropdown panel, independent of the field's own radius
  * @cssprop [--field-listbox-transition-duration=200ms] - Sets the duration of the dropdown panel's open and close animation
  * @cssprop [--color-picker-swatch-size=20px] - Sets the diameter of every swatch
  * @cssprop [--eun-viewport-inset-top] - Reserves space, such as a page's sticky header height, that the dropdown panel keeps clear of at the top of the viewport
  * @cssprop [--eun-viewport-inset-bottom] - The same as eun-viewport-inset-top, reserved at the bottom of the viewport
  * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-color-picker

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

@@ -16,6 +16,8 @@ import { FormMixin } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { EditableMixin, } from "../../../mixins/editable.mixin.js";
 import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixin, } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixin, } from "../../../mixins/field-size.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";
@@ -34,7 +36,7 @@ export const EunomiaColorPickerTagName = "eun-color-picker";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaColorPickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))))));
+const EunomiaColorPickerMixinBase = LocalizableMixin(AnchorPositionMixin(RoundedMixin(FieldSizeMixin(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
@@ -71,6 +73,8 @@ const EunomiaColorPickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAp
  * @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' | '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 {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The field size. A field and a button of the same size share the same height
  * @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
@@ -124,11 +128,13 @@ const EunomiaColorPickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAp
  * @cssprop [--field-edit-confirm-color] - Sets the color of the confirm button in readonly-available edit mode
  * @cssprop [--field-edit-cancel-color] - Sets the color of the cancel button in readonly-available edit mode
  * @cssprop [--field-listbox-max-height=260px] - Sets the maximum height of the dropdown panel, past which it scrolls
+ * @cssprop [--field-listbox-border-radius] - Sets the corner radius of the dropdown panel, independent of the field's own radius
  * @cssprop [--field-listbox-transition-duration=200ms] - Sets the duration of the dropdown panel's open and close animation
  * @cssprop [--color-picker-swatch-size=20px] - Sets the diameter of every swatch
  * @cssprop [--eun-viewport-inset-top] - Reserves space, such as a page's sticky header height, that the dropdown panel keeps clear of at the top of the viewport
  * @cssprop [--eun-viewport-inset-bottom] - The same as eun-viewport-inset-top, reserved at the bottom of the viewport
  * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-color-picker
@@ -651,7 +657,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
           class="confirm"
           size="s"
           color="primary"
-          appearance="default"
+          appearance="soft"
           rounded
           type="button"
           @click=${this.handleConfirmClick}

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

@@ -126,6 +126,19 @@ const colorPicker = css `
   #native-swatch .swatch {
     pointer-events: none;
   }
+
+  button#field #trigger-swatch,
+  #field-wrapper > #custom-row .swatch {
+    --_fieldSwatchSize: min(
+      var(--color-picker-swatch-size, 20px),
+      calc(var(--_lineHeight) + 2 * var(--_paddingBlock))
+    );
+    width: var(--_fieldSwatchSize);
+    height: var(--_fieldSwatchSize);
+  }
+  #field-wrapper > #custom-row #native-swatch {
+    display: flex;
+  }
   #native-input {
     position: absolute;
     inset: 0;

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

@@ -5,6 +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 { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixinInterface } from "../../../mixins/rounded.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
 import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 /**
@@ -15,13 +16,14 @@ 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 & FieldAppearanceMixinInterface & LocalizableMixinInterface;
+type EunomiaCounterBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<number> & FormMixinInterface<number> & FormLabelMixinInterface & FieldAppearanceMixinInterface & RoundedMixinInterface & LocalizableMixinInterface;
 declare const EunomiaCounterMixinBase: Constructor<EunomiaCounterBase>;
 /**
  * A numeric field with increment and decrement buttons, built on a native
  * number input.
  *
  * @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 {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
  * @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

@@ -13,6 +13,7 @@ import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
 import { FormMixin } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixin, } from "../../../mixins/rounded.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { counterStyles } from "./counter.styles.js";
@@ -28,12 +29,13 @@ export const EunomiaCounterTagName = "eun-counter";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaCounterMixinBase = LocalizableMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base)))));
+const EunomiaCounterMixinBase = LocalizableMixin(RoundedMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))));
 /**
  * A numeric field with increment and decrement buttons, built on a native
  * number input.
  *
  * @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 {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
  * @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

@@ -37,10 +37,8 @@ const base = css `
       --counter-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
     );
-    --_borderRadius: var(
-      --counter-border-radius,
-      var(--eun-border-radius-m, 8px)
-    );
+    --_defaultBorderRadius: var(--eun-border-radius-m, 8px);
+    --_borderRadius: var(--counter-border-radius, var(--_defaultBorderRadius));
     --_fieldWidth: var(--counter-field-width, 3.5rem);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     font-size: var(--eun-font-size-s, 14px);
@@ -50,6 +48,10 @@ const base = css `
     outline: none;
   }
 
+  :host([rounded]) {
+    --_defaultBorderRadius: var(--eun-border-radius-xl, 999px);
+  }
+
   #wrapper {
     display: flex;
     flex-direction: column;

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

@@ -5,6 +5,8 @@ import { ValidatorsMixinInterface, Validity } from "../../../mixins/validators.m
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixinInterface } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixinInterface } from "../../../mixins/field-size.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 +23,7 @@ export declare const EunomiaDatePickerTagName = "eun-date-picker";
  * interface element.
  * @internal
  */
-type EunomiaDatePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
+type EunomiaDatePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldAppearanceMixinInterface & RoundedMixinInterface & FieldSizeMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
 /**
  * A date field entered across segmented numeric day, month, and year
@@ -45,6 +47,8 @@ declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
  * composes with all three.
  *
  * @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 {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The field size. A field and a button of the same size share the same height
  * @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
@@ -109,6 +113,7 @@ declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
  * @cssprop [--date-picker-panel-background] - Sets the background color of the popover panel
  * @cssprop [--date-picker-panel-transition-duration=200ms] - Sets the duration of the popover panel's open and close transition, disabled entirely by the no-animation attribute or reduced motion settings
  * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-date-picker

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

@@ -14,6 +14,8 @@ import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
 import { FormMixin, hasErrorDisplayChange, } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixin, } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixin, } from "../../../mixins/field-size.mixin.js";
 import { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
 import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
@@ -58,7 +60,7 @@ const SEGMENT_SPIN_BOUNDS = {
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))));
+const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(RoundedMixin(FieldSizeMixin(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
@@ -81,6 +83,8 @@ const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * composes with all three.
  *
  * @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 {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The field size. A field and a button of the same size share the same height
  * @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
@@ -145,6 +149,7 @@ const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * @cssprop [--date-picker-panel-background] - Sets the background color of the popover panel
  * @cssprop [--date-picker-panel-transition-duration=200ms] - Sets the duration of the popover panel's open and close transition, disabled entirely by the no-animation attribute or reduced motion settings
  * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-date-picker
@@ -2273,7 +2278,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
           ?disabled=${this.disabled}
           @click=${this.handleTriggerClick}
         >
-          <eun-icon name="calendar_today" size="16"></eun-icon>
+          <eun-icon name="calendar_today"></eun-icon>
         </button>
       </div>
     `;

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

@@ -31,15 +31,15 @@ const datePicker = css `
     display: flex;
     align-items: center;
     gap: var(--eun-space-xs, 4px);
-    width: 100%;
     color: var(--_textColor);
     background-color: var(--_background);
     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);
+    padding: var(--_paddingBlock) calc(var(--_defaultPaddingInline) / 2)
+      var(--_paddingBlock) var(--_defaultPaddingInline);
     outline: 1px solid transparent;
-    box-sizing: border-box;
+    box-sizing: content-box;
+    height: var(--_lineHeight);
     transition:
       border-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease),
       outline-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
@@ -94,9 +94,10 @@ const datePicker = css `
     box-sizing: content-box;
     border: none;
     background: none;
-    padding: var(--eun-space-xxs, 1.6px) 1px;
+    padding: 0 1px;
     color: inherit;
     font: inherit;
+    line-height: var(--_lineHeight);
     text-align: center;
     outline: none;
     overflow: visible;
@@ -124,10 +125,11 @@ const datePicker = css `
     box-sizing: content-box;
     border: none;
     background: none;
-    padding: var(--eun-space-xxs, 1.6px) 1px;
+    padding: 0 1px;
     width: 2.5ch;
     color: inherit;
     font: inherit;
+    line-height: var(--_lineHeight);
     text-align: center;
     outline: none;
     cursor: pointer;
@@ -143,6 +145,7 @@ const datePicker = css `
     padding-inline: 2px;
   }
   #calendar-trigger {
+    --icon-size: min(16px, var(--_lineHeight));
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -6,6 +6,8 @@ import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { EditableMixinInterface } from "../../../mixins/editable.mixin.js";
 import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixinInterface } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixinInterface } from "../../../mixins/field-size.mixin.js";
 import { EunomiaIconName } from "../../content/icon/icon.type.js";
 import { Constructor } from "../../../utils/constructor.type.js";
 import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
@@ -21,7 +23,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<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & LocalizableMixinInterface;
+type EunomiaInputBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & RoundedMixinInterface & FieldSizeMixinInterface & LocalizableMixinInterface;
 declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
 /**
  * A single-line text field, supporting several native input types.
@@ -29,6 +31,8 @@ declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
  * @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' | '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 {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The field size. A field and a button of the same size share the same height
  * @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
@@ -78,6 +82,7 @@ declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
  * @cssprop [--field-edit-confirm-color] - Sets the color of the confirm button in readonly-available edit mode
  * @cssprop [--field-edit-cancel-color] - Sets the color of the cancel button in readonly-available edit mode
  * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-input

package/dist/components/form/input/input.js

@@ -16,6 +16,8 @@ import { FormMixin } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { EditableMixin, } from "../../../mixins/editable.mixin.js";
 import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixin, } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixin, } from "../../../mixins/field-size.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { inputStyles } from "./input.styles.js";
@@ -31,13 +33,15 @@ export const EunomiaInputTagName = "eun-input";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaInputMixinBase = LocalizableMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
+const EunomiaInputMixinBase = LocalizableMixin(RoundedMixin(FieldSizeMixin(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' | '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 {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The field size. A field and a button of the same size share the same height
  * @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
@@ -87,6 +91,7 @@ const EunomiaInputMixinBase = LocalizableMixin(FieldAppearanceMixin(FormLabelMix
  * @cssprop [--field-edit-confirm-color] - Sets the color of the confirm button in readonly-available edit mode
  * @cssprop [--field-edit-cancel-color] - Sets the color of the cancel button in readonly-available edit mode
  * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-input
@@ -404,7 +409,7 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
               class="confirm"
               size="s"
               color="primary"
-              appearance="default"
+              appearance="soft"
               rounded
               type="button"
               @click=${this.confirmEdit}

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

@@ -5,6 +5,8 @@ import { ValidatorsMixinInterface } from "../../../mixins/validators.mixin.js";
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixinInterface } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixinInterface } from "../../../mixins/field-size.mixin.js";
 import { AnchorPositionMixinInterface } from "../../../mixins/anchor-position.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
 import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
@@ -17,7 +19,7 @@ export declare const EunomiaInputPhoneTagName = "eun-input-phone";
  * interface element.
  * @internal
  */
-type EunomiaInputPhoneBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
+type EunomiaInputPhoneBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & FormLabelMixinInterface & FieldAppearanceMixinInterface & RoundedMixinInterface & FieldSizeMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
 /**
  * A phone number field rendered in two adjacent parts: a compact country
@@ -40,6 +42,8 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  *
  * @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' | '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 {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The field size. A field and a button of the same size share the same height
  * @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
@@ -82,10 +86,12 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  * @cssprop [--field-hint-color] - Sets the color of the hint message
  * @cssprop [--field-focus-outline-color] - Sets the color of the focus outline
  * @cssprop [--field-listbox-max-height=260px] - Sets the maximum height of the country dropdown panel, past which it scrolls
+ * @cssprop [--field-listbox-border-radius] - Sets the corner radius of the country dropdown panel, independent of the field's own radius
  * @cssprop [--field-listbox-transition-duration=200ms] - Sets the duration of the dropdown panel's open and close height transition, disabled entirely under reduced motion settings
  * @cssprop [--eun-viewport-inset-top] - Reserves space, such as a page's sticky header height, that the dropdown panel keeps clear of at the top of the viewport. Set on the root or an ancestor rather than on the field itself
  * @cssprop [--eun-viewport-inset-bottom] - The same as eun-viewport-inset-top, reserved at the bottom of the viewport, such as for a sticky footer
  * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-input-phone

package/dist/components/form/input-phone/input-phone.js

@@ -15,6 +15,8 @@ import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
 import { FormMixin } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixin, } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixin, } from "../../../mixins/field-size.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";
@@ -66,7 +68,7 @@ const TRIGGER_POINTER_DOWN_WINDOW_MS = 100;
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaInputPhoneMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))));
+const EunomiaInputPhoneMixinBase = LocalizableMixin(AnchorPositionMixin(RoundedMixin(FieldSizeMixin(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
@@ -88,6 +90,8 @@ const EunomiaInputPhoneMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  *
  * @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' | '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 {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The field size. A field and a button of the same size share the same height
  * @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
@@ -130,10 +134,12 @@ const EunomiaInputPhoneMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * @cssprop [--field-hint-color] - Sets the color of the hint message
  * @cssprop [--field-focus-outline-color] - Sets the color of the focus outline
  * @cssprop [--field-listbox-max-height=260px] - Sets the maximum height of the country dropdown panel, past which it scrolls
+ * @cssprop [--field-listbox-border-radius] - Sets the corner radius of the country dropdown panel, independent of the field's own radius
  * @cssprop [--field-listbox-transition-duration=200ms] - Sets the duration of the dropdown panel's open and close height transition, disabled entirely under reduced motion settings
  * @cssprop [--eun-viewport-inset-top] - Reserves space, such as a page's sticky header height, that the dropdown panel keeps clear of at the top of the viewport. Set on the root or an ancestor rather than on the field itself
  * @cssprop [--eun-viewport-inset-bottom] - The same as eun-viewport-inset-top, reserved at the bottom of the viewport, such as for a sticky footer
  * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-input-phone

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

@@ -41,7 +41,7 @@ const inputPhone = css `
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    padding: var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
+    padding: 0 var(--_defaultPaddingInline);
     background-color: var(--_background);
     border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-inline-end: none;
@@ -64,7 +64,7 @@ const inputPhone = css `
     outline-offset: 0;
   }
   .flag {
-    font-size: var(--eun-font-size-m, 16px);
+    font-size: min(var(--eun-font-size-m, 16px), var(--_lineHeight));
     line-height: 1;
   }
   #field-wrapper {
@@ -178,7 +178,10 @@ const inputPhone = css `
     background: none;
     border: none;
     outline: none;
-    padding: var(--eun-space-s, 8px);
+    box-sizing: content-box;
+    height: var(--_lineHeight);
+    line-height: var(--_lineHeight);
+    padding: var(--_paddingBlock) var(--_defaultPaddingInline);
   }
   #phone-field::placeholder {
     color: var(--_placeholderColor);