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

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

@@ -5,6 +5,12 @@ import { EunomiaIconName } from "../../content/icon/icon.type.js";
  * Tag name of the search component.
  */
 export declare const EunomiaSearchTagName = "eun-search";
+/**
+ * How the suggestions dropdown filters its options against the typed value.
+ * `contains` keeps the options whose label contains it, `none` shows every
+ * option as is, for results already filtered by a server.
+ */
+export type EunomiaSearchFilter = "contains" | "none";
 declare const EunomiaSearch_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/anchor-position.mixin.js").AnchorPositionMixinInterface> & typeof EunomiaInput;
 /**
  * An input field specialized for search: the native type is locked to
@@ -24,6 +30,8 @@ declare const EunomiaSearch_base: import("../../../utils/constructor.type.js").C
  *
  * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty. Applies to the real field, inline or inside the panel modal. The compact panel trigger button always shows the plain icon glyph, since it can't project the same slotted content a second time
  * @slot results - Content rendered below the field inside the panel, such as a result list. Only relevant when panel is set
+ * @slot trigger - Replaces the panel's built-in trigger button, for example with an icon button. A click on it opens the panel, and focus returns to it on close. Give it its own accessible name. Only relevant when panel is set
+ * @csspart trigger - The panel's built-in trigger button, shown while nothing is slotted in trigger
  * @prop {boolean} [shortcut=false] - Enables the Ctrl+K or Cmd+K global shortcut and its visual key hint badge
  * @prop {boolean} [panel=false] - Opens a modal command palette panel on shortcut or click instead of focusing inline
  * @prop {string} [panelLabel] - The accessible name of the panel's dialog, used when label isn't set. Defaults to the localized string for the current locale (English: "Search")
@@ -31,8 +39,11 @@ declare const EunomiaSearch_base: import("../../../utils/constructor.type.js").C
  * @prop {string} [loadingLabel='Loading…'] - The accessible label announced by the loading indicator while loading is set
  * @prop {boolean} [suggestions=false] - Opens a dropdown listbox showing light DOM option and optgroup children matching the typed value, highlighting the matched substring. Ignored while panel is set
  * @prop {string} [noResultsLabel='No results'] - Text displayed in the dropdown when no option matches, while suggestions is set
- * @fires {ChangeEvent} eunchange - Fired on every value change
+ * @prop {'contains' | 'none'} [filter='contains'] - How the suggestions are filtered against the typed value. Contains keeps the options whose label contains it, none shows every option as is, for results already filtered by a server
+ * @fires {ChangeEvent} eunchange - Fired on every value change, typed or picked from the suggestions
+ * @fires {SelectEvent} eunselect - Fired when a suggestion is picked, with the option's value as key
  * @cssprop [--field-listbox-max-height=260px] - Sets the maximum height of the suggestions dropdown, past which it scrolls. Shared with the select component
+ * @cssprop [--field-listbox-border-radius] - Sets the corner radius of the suggestions dropdown, independent of the field's own radius. Shared with the select component
  * @cssprop [--field-listbox-transition-duration=200ms] - Sets the duration of the suggestions dropdown's open and close transition. Shared with the select component
  * @cssprop [--field-match-color] - Sets the color of the matched search substring, highlighted while suggestions is set. Shared with the select component
  * @cssprop [--field-match-background] - Sets the background of the matched search substring, none by default. Shared with the select component
@@ -120,9 +131,10 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      * mechanic (`AnchorPositionMixin`, CSS Anchor Positioning with a JS
      * fallback) as `eun-select`'s own dropdown, sharing its CSS custom
      * properties (`--field-listbox-max-height`, `--field-match-*`, etc.).
-     * Picking a suggestion sets `value` to its label (not a separate stored
-     * id, unlike `eun-select` — see the Suggestions example in the docs for
-     * why). Ignored while `panel` is set — combining the two isn't supported.
+     * Picking a suggestion sets `value` to its label, then fires `eunselect`
+     * with the option's own `value` attribute, so two options sharing a label
+     * stay distinguishable. Ignored while `panel` is set — combining the two
+     * isn't supported.
      * @default false
      */
     suggestions: boolean;
@@ -132,6 +144,14 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      * @default No results
      */
     noResultsLabel: string;
+    /**
+     * How the suggestions are filtered against the typed value : `contains`
+     * keeps the options whose label contains it, `none` shows every option as
+     * is, for results a server already filtered, possibly on another field
+     * than the label.
+     * @default contains
+     */
+    filter: EunomiaSearchFilter;
     /**
      * Whether the suggestions dropdown is currently open.
      * @internal
@@ -156,6 +176,12 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      * @readonly
      */
     private readonly fieldWrapperEl?;
+    /**
+     * The `trigger` slot, rendered in place of the field while `panel` is set,
+     * with the built-in trigger button as its fallback content.
+     * @internal
+     */
+    private readonly triggerSlot?;
     /**
      * The collapsed trigger button rendered in place of the field while
      * `panel` is set.
@@ -191,6 +217,14 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      * @private
      */
     private static readonly FIELD_POINTER_DOWN_WINDOW_MS;
+    /**
+     * Re-renders the suggestions whenever the light DOM `option`/`optgroup`
+     * children change, since they aren't reactive properties : a consumer
+     * replacing them with a server's results would otherwise stay unseen until
+     * some unrelated property changed.
+     * @internal
+     */
+    private readonly optionsObserver;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**
@@ -207,7 +241,7 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      * still-closed modal at this point, and focusing hidden popover content
      * is a no-op — leaving focus stranded on the (invisible) host with
      * nowhere to land, e.g. on a Shift+Tab back onto it from just past the
-     * trigger.
+     * trigger. A trigger slotted in `trigger` takes its place.
      * @protected
      */
     protected focusTarget(): HTMLElement | undefined;
@@ -219,6 +253,12 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      * Closes the command-palette panel. No-op when `panel` isn't set.
      */
     closePanel(): void;
+    /**
+     * Opens the panel on a click anywhere in the `trigger` slot, its slotted
+     * content or the built-in button it falls back to, unless disabled.
+     * @private
+     */
+    private readonly handleTriggerClick;
     /**
      * Lifecycle hook called after the component's first render. Attaches the
      * suggestions dropdown's event listeners directly on the field element,
@@ -250,7 +290,7 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
     private get effectiveQuery();
     /**
      * Options filtered by {@link effectiveQuery}. Shows every option when the
-     * field is empty.
+     * field is empty, or when {@link filter} is `none`.
      * @internal
      */
     private get filteredOptions();
@@ -318,6 +358,19 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      * @private
      */
     private readonly handleSuggestionsFieldActivate;
+    /**
+     * Closes the dropdown once focus has left the component entirely, e.g.
+     * `Tab`-ing away, same as `eun-select`'s own `handleFocusOut` : the
+     * Popover API's light-dismiss only reacts to outside clicks, not to focus
+     * moving via the keyboard. `closeSuggestions` checks the popover itself
+     * rather than `isOpen`, which only follows the asynchronous `toggle`
+     * event. Checked a frame later, since the newly focused
+     * element hasn't received focus yet when `focusout` fires. Picking an
+     * option never gets here, its row cancels `mousedown` so the field keeps
+     * focus.
+     * @private
+     */
+    private readonly handleSuggestionsFocusOut;
     /**
      * Opens the dropdown and resets the highlight on every keystroke. Bound to
      * the field's native `input` event (rather than reacting to `value`
@@ -329,9 +382,9 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      */
     private readonly handleSuggestionsInput;
     /**
-     * Picks a suggestion : sets `value` to its label (see the class doc's
-     * `suggestions` entry for why not its `value` attribute), notifies
-     * consumers, and closes the dropdown.
+     * Picks a suggestion : sets `value` to its label, fires `eunchange` with
+     * it like a keystroke would, then `eunselect` with the option's own
+     * `value`, and closes the dropdown.
      *
      * @param option the chosen option.
      * @private
@@ -495,7 +548,8 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
     private syncSuggestionsAria;
     /**
      * Renders the search component: the inherited inline field, or — when
-     * `panel` is set — a trigger button plus a `eun-modal[kind=search]`
+     * `panel` is set — a trigger (the `trigger` slot, falling back to a
+     * built-in button) plus a `eun-modal[kind=search]`
      * (flush, no padding, no close button) containing the real field (reused
      * via `renderField`, wrapped for its own full-width/no-border styling) and
      * a `results` slot.

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

@@ -13,10 +13,12 @@ import { EunomiaInput } from "../input/input.js";
 import { searchStyles } from "./search.styles.js";
 import { AnchorPositionMixin } from "../../../mixins/anchor-position.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
+import { SelectEvent } from "../../../events/select.event.js";
 import { listboxStyles, listboxAnchorPositioningStyles, } from "../shared-styles/listbox.styles.js";
 import { parseListboxOptions, renderHighlightedLabel, renderListboxRows, } from "../../../utils/listbox-options.utils.js";
 import { isWebKit } from "../../../utils/browser.utils.js";
 import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
+import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the search component.
  */
@@ -39,6 +41,8 @@ export const EunomiaSearchTagName = "eun-search";
  *
  * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty. Applies to the real field, inline or inside the panel modal. The compact panel trigger button always shows the plain icon glyph, since it can't project the same slotted content a second time
  * @slot results - Content rendered below the field inside the panel, such as a result list. Only relevant when panel is set
+ * @slot trigger - Replaces the panel's built-in trigger button, for example with an icon button. A click on it opens the panel, and focus returns to it on close. Give it its own accessible name. Only relevant when panel is set
+ * @csspart trigger - The panel's built-in trigger button, shown while nothing is slotted in trigger
  * @prop {boolean} [shortcut=false] - Enables the Ctrl+K or Cmd+K global shortcut and its visual key hint badge
  * @prop {boolean} [panel=false] - Opens a modal command palette panel on shortcut or click instead of focusing inline
  * @prop {string} [panelLabel] - The accessible name of the panel's dialog, used when label isn't set. Defaults to the localized string for the current locale (English: "Search")
@@ -46,8 +50,11 @@ export const EunomiaSearchTagName = "eun-search";
  * @prop {string} [loadingLabel='Loading…'] - The accessible label announced by the loading indicator while loading is set
  * @prop {boolean} [suggestions=false] - Opens a dropdown listbox showing light DOM option and optgroup children matching the typed value, highlighting the matched substring. Ignored while panel is set
  * @prop {string} [noResultsLabel='No results'] - Text displayed in the dropdown when no option matches, while suggestions is set
- * @fires {ChangeEvent} eunchange - Fired on every value change
+ * @prop {'contains' | 'none'} [filter='contains'] - How the suggestions are filtered against the typed value. Contains keeps the options whose label contains it, none shows every option as is, for results already filtered by a server
+ * @fires {ChangeEvent} eunchange - Fired on every value change, typed or picked from the suggestions
+ * @fires {SelectEvent} eunselect - Fired when a suggestion is picked, with the option's value as key
  * @cssprop [--field-listbox-max-height=260px] - Sets the maximum height of the suggestions dropdown, past which it scrolls. Shared with the select component
+ * @cssprop [--field-listbox-border-radius] - Sets the corner radius of the suggestions dropdown, independent of the field's own radius. Shared with the select component
  * @cssprop [--field-listbox-transition-duration=200ms] - Sets the duration of the suggestions dropdown's open and close transition. Shared with the select component
  * @cssprop [--field-match-color] - Sets the color of the matched search substring, highlighted while suggestions is set. Shared with the select component
  * @cssprop [--field-match-background] - Sets the background of the matched search substring, none by default. Shared with the select component
@@ -123,9 +130,10 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
          * mechanic (`AnchorPositionMixin`, CSS Anchor Positioning with a JS
          * fallback) as `eun-select`'s own dropdown, sharing its CSS custom
          * properties (`--field-listbox-max-height`, `--field-match-*`, etc.).
-         * Picking a suggestion sets `value` to its label (not a separate stored
-         * id, unlike `eun-select` — see the Suggestions example in the docs for
-         * why). Ignored while `panel` is set — combining the two isn't supported.
+         * Picking a suggestion sets `value` to its label, then fires `eunselect`
+         * with the option's own `value` attribute, so two options sharing a label
+         * stay distinguishable. Ignored while `panel` is set — combining the two
+         * isn't supported.
          * @default false
          */
         this.suggestions = false;
@@ -135,6 +143,14 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
          * @default No results
          */
         this.noResultsLabel = "No results";
+        /**
+         * How the suggestions are filtered against the typed value : `contains`
+         * keeps the options whose label contains it, `none` shows every option as
+         * is, for results a server already filtered, possibly on another field
+         * than the label.
+         * @default contains
+         */
+        this.filter = "contains";
         /**
          * Whether the suggestions dropdown is currently open.
          * @internal
@@ -146,6 +162,29 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
          * @internal
          */
         this.highlightedIndex = -1;
+        /**
+         * Re-renders the suggestions whenever the light DOM `option`/`optgroup`
+         * children change, since they aren't reactive properties : a consumer
+         * replacing them with a server's results would otherwise stay unseen until
+         * some unrelated property changed.
+         * @internal
+         */
+        this.optionsObserver = new MutationObserver(() => {
+            if (this.highlightedIndex >= this.filteredOptions.length) {
+                this.highlightedIndex = -1;
+            }
+            this.requestUpdate();
+        });
+        /**
+         * Opens the panel on a click anywhere in the `trigger` slot, its slotted
+         * content or the built-in button it falls back to, unless disabled.
+         * @private
+         */
+        this.handleTriggerClick = () => {
+            if (!this.disabled) {
+                this.openPanel();
+            }
+        };
         /**
          * Records that the field itself was the pointerdown target — see
          * {@link fieldPointerDownAt}.
@@ -165,6 +204,25 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
             }
             this.openSuggestions();
         };
+        /**
+         * Closes the dropdown once focus has left the component entirely, e.g.
+         * `Tab`-ing away, same as `eun-select`'s own `handleFocusOut` : the
+         * Popover API's light-dismiss only reacts to outside clicks, not to focus
+         * moving via the keyboard. `closeSuggestions` checks the popover itself
+         * rather than `isOpen`, which only follows the asynchronous `toggle`
+         * event. Checked a frame later, since the newly focused
+         * element hasn't received focus yet when `focusout` fires. Picking an
+         * option never gets here, its row cancels `mousedown` so the field keeps
+         * focus.
+         * @private
+         */
+        this.handleSuggestionsFocusOut = () => {
+            requestAnimationFrame(() => {
+                if (!this.matches(":focus-within")) {
+                    this.closeSuggestions();
+                }
+            });
+        };
         /**
          * Opens the dropdown and resets the highlight on every keystroke. Bound to
          * the field's native `input` event (rather than reacting to `value`
@@ -289,9 +347,17 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
     connectedCallback() {
         super.connectedCallback?.();
         window.addEventListener("keydown", this.handleShortcut);
+        this.optionsObserver.observe(this, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+            attributes: true,
+            attributeFilter: ["value", "label"],
+        });
     }
     disconnectedCallback() {
         window.removeEventListener("keydown", this.handleShortcut);
+        this.optionsObserver.disconnect();
         super.disconnectedCallback?.();
     }
     /**
@@ -313,12 +379,13 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
      * still-closed modal at this point, and focusing hidden popover content
      * is a no-op — leaving focus stranded on the (invisible) host with
      * nowhere to land, e.g. on a Shift+Tab back onto it from just past the
-     * trigger.
+     * trigger. A trigger slotted in `trigger` takes its place.
      * @protected
      */
     focusTarget() {
         if (this.panel) {
-            return this.triggerEl;
+            const [slotted] = this.triggerSlot?.assignedElements() ?? [];
+            return slotted instanceof HTMLElement ? slotted : this.triggerEl;
         }
         return super.focusTarget();
     }
@@ -357,6 +424,7 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
         field.addEventListener("click", this.handleSuggestionsFieldActivate);
         field.addEventListener("input", this.handleSuggestionsInput);
         field.addEventListener("keydown", this.handleSuggestionsKeydown);
+        this.addEventListener("focusout", this.handleSuggestionsFocusOut);
     }
     /**
      * The available suggestions, parsed from the light DOM `option`/`optgroup`
@@ -380,12 +448,12 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
     }
     /**
      * Options filtered by {@link effectiveQuery}. Shows every option when the
-     * field is empty.
+     * field is empty, or when {@link filter} is `none`.
      * @internal
      */
     get filteredOptions() {
         const query = this.effectiveQuery;
-        if (!query) {
+        if (!query || this.filter === "none") {
             return this.options;
         }
         return this.options.filter((option) => option.label.toLowerCase().includes(query));
@@ -501,16 +569,17 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
         });
     }
     /**
-     * Picks a suggestion : sets `value` to its label (see the class doc's
-     * `suggestions` entry for why not its `value` attribute), notifies
-     * consumers, and closes the dropdown.
+     * Picks a suggestion : sets `value` to its label, fires `eunchange` with
+     * it like a keystroke would, then `eunselect` with the option's own
+     * `value`, and closes the dropdown.
      *
      * @param option the chosen option.
      * @private
      */
     handleSelect(option) {
         this.value = option.label;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
+        this.dispatchEvent(new SelectEvent(option.value));
         this.closeSuggestions();
     }
     /**
@@ -779,12 +848,14 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
     }
     /**
      * Renders the search component: the inherited inline field, or — when
-     * `panel` is set — a trigger button plus a `eun-modal[kind=search]`
+     * `panel` is set — a trigger (the `trigger` slot, falling back to a
+     * built-in button) plus a `eun-modal[kind=search]`
      * (flush, no padding, no close button) containing the real field (reused
      * via `renderField`, wrapped for its own full-width/no-border styling) and
      * a `results` slot.
      * @returns The rendered HTML template
      */
+    /* eslint-disable lit-a11y/click-events-have-key-events */
     render() {
         if (!this.panel) {
             return super.render();
@@ -793,25 +864,29 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
         return html `
       <div id="wrapper">
         ${this.renderFormLabels("search-trigger")}
-        <button
-          id="search-trigger"
-          type="button"
-          aria-haspopup="dialog"
-          aria-label=${ifDefined(this.label)}
-          aria-keyshortcuts=${ifDefined(this.shortcut ? "Control+K Meta+K" : undefined)}
-          ?disabled=${this.disabled}
-          @click=${this.openPanel}
-        >
-          ${this.icon
+        <slot name="trigger" @click=${this.handleTriggerClick}>
+          <button
+            id="search-trigger"
+            part="trigger"
+            type="button"
+            aria-haspopup="dialog"
+            aria-label=${ifDefined(this.label)}
+            aria-keyshortcuts=${ifDefined(this.shortcut ? "Control+K Meta+K" : undefined)}
+            ?disabled=${this.disabled}
+          >
+            ${this.icon
             ? html `<eun-icon
-                id="trigger-icon"
-                name=${this.icon}
-                size="16"
-              ></eun-icon>`
+                  id="trigger-icon"
+                  name=${this.icon}
+                  size="16"
+                ></eun-icon>`
             : nothing}
-          <span id="trigger-text" class="empty">${this.placeholder || ""}</span>
-          ${this.renderTriggerIndicator()}
-        </button>
+            <span id="trigger-text" class="empty"
+              >${this.placeholder || ""}</span
+            >
+            ${this.renderTriggerIndicator()}
+          </button>
+        </slot>
         <eun-modal
           id="panel"
           kind="search"
@@ -857,7 +932,7 @@ __decorate([
     property()
 ], EunomiaSearch.prototype, "icon", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ converter: defaultTrueConverter })
 ], EunomiaSearch.prototype, "clearable", void 0);
 __decorate([
     property({ type: Boolean })
@@ -880,6 +955,9 @@ __decorate([
 __decorate([
     property({ attribute: "no-results-label" })
 ], EunomiaSearch.prototype, "noResultsLabel", void 0);
+__decorate([
+    property()
+], EunomiaSearch.prototype, "filter", void 0);
 __decorate([
     state()
 ], EunomiaSearch.prototype, "isOpen", void 0);
@@ -892,6 +970,9 @@ __decorate([
 __decorate([
     query("#field-wrapper")
 ], EunomiaSearch.prototype, "fieldWrapperEl", void 0);
+__decorate([
+    query('slot[name="trigger"]')
+], EunomiaSearch.prototype, "triggerSlot", void 0);
 __decorate([
     query("#search-trigger")
 ], EunomiaSearch.prototype, "triggerEl", void 0);

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

@@ -113,6 +113,8 @@ const search = css `
     position: relative;
   }
   #panel-field #field {
+    box-sizing: border-box;
+    height: auto;
     width: 100%;
     border: none;
     border-radius: 0;

package/dist/components/form/select/select.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 { EunomiaIconName } from "../../content/icon/icon.type.js";
 import { Constructor } from "../../../utils/constructor.type.js";
@@ -23,7 +25,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<SelectValue> & FormMixinInterface<SelectValue> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
+type EunomiaSelectBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<SelectValue> & FormMixinInterface<SelectValue> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & RoundedMixinInterface & FieldSizeMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
 /**
  * A field that picks one or more values from a list of option and optgroup
@@ -51,6 +53,8 @@ declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
  * @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' | '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
@@ -104,10 +108,12 @@ declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
  * @cssprop [--field-confirm-link-color] - Sets the color of the confirm slot's link, while editing in readonlyAvailable mode
  * @cssprop [--field-confirm-link-color-hover] - Sets the hover color of the confirm slot's link
  * @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 height transition, disabled entirely by the no-animation attribute or 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-select

package/dist/components/form/select/select.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";
@@ -33,7 +35,7 @@ export const EunomiaSelectTagName = "eun-select";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaSelectMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))))));
+const EunomiaSelectMixinBase = LocalizableMixin(AnchorPositionMixin(RoundedMixin(FieldSizeMixin(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
@@ -60,6 +62,8 @@ const EunomiaSelectMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAppeara
  * @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' | '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
@@ -113,10 +117,12 @@ const EunomiaSelectMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAppeara
  * @cssprop [--field-confirm-link-color] - Sets the color of the confirm slot's link, while editing in readonlyAvailable mode
  * @cssprop [--field-confirm-link-color-hover] - Sets the hover color of the confirm slot's link
  * @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 height transition, disabled entirely by the no-animation attribute or 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-select

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

@@ -16,7 +16,8 @@ import { css } from "lit";
  * [--field-icon-color] - Set a custom color to the leading icon and action buttons
  * [--field-error-color] - Set a custom color to the error state content
  * [--field-hint-color] - Set a custom color to the hint message
- * [--field-font-size] - Set a custom font size for the field's value and placeholder
+ * [--field-font-size] - Set a custom font size for the field's value and placeholder, for every size
+ * [--field-line-height] - Set a custom line height for the field's value and placeholder, for every size
  * [--field-label-font-size] - Set a custom font size for the label (see label.styles.ts)
  * [--field-message-font-size] - Set a custom font size for the hint, error and instructions (see form-labels.styles.ts)
  * [--field-focus-outline-color] - Set a custom color to the focus outline
@@ -43,22 +44,50 @@ const base = css `
       --field-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
     );
-    --_borderRadius: var(
-      --field-border-radius,
-      var(--eun-border-radius-m, 8px)
-    );
+    --_defaultBorderRadius: var(--eun-border-radius-m, 8px);
+    --_borderRadius: var(--field-border-radius, var(--_defaultBorderRadius));
+    --_defaultPaddingInline: var(--eun-space-s, 8px);
+    --_defaultPaddingBlock: var(--eun-space-s, 8px);
+    --_defaultFontSize: var(--eun-font-size-s, 14px);
+    --_defaultLineHeight: 1rem;
+    --_paddingBlock: var(--field-padding-block, var(--_defaultPaddingBlock));
     --_padding: var(
       --field-padding,
-      var(--field-padding-block, var(--eun-space-s, 8px))
-        var(--field-padding-inline, var(--eun-space-s, 8px))
+      var(--_paddingBlock)
+        var(--field-padding-inline, var(--_defaultPaddingInline))
     );
+    --_lineHeight: var(--field-line-height, var(--_defaultLineHeight));
     --_shadow: var(--field-shadow, none);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--field-font-size, var(--eun-font-size-s, 14px));
+    font-size: var(--field-font-size, var(--_defaultFontSize));
     display: block;
     width: 100%;
     outline: none;
   }
+  :host([rounded]) {
+    --_defaultBorderRadius: var(--eun-border-radius-xl, 999px);
+    --_defaultPaddingInline: var(--eun-space-m, 16px);
+  }
+  :host([size="xs"]) {
+    --_defaultFontSize: var(--eun-font-size-xs, 10px);
+    --_defaultPaddingBlock: var(--eun-space-xxs, 1.6px);
+    --_defaultLineHeight: 10px;
+  }
+  :host([size="s"]) {
+    --_defaultFontSize: var(--eun-font-size-xs, 10px);
+    --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) / 2);
+    --_defaultLineHeight: 10px;
+  }
+  :host([size="l"]) {
+    --_defaultFontSize: var(--eun-font-size-m, 16px);
+    --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) * 1.25);
+    --_defaultLineHeight: 1.1rem;
+  }
+  :host([size="xl"]) {
+    --_defaultFontSize: var(--eun-font-size-l, 1.3rem);
+    --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) * 1.5);
+    --_defaultLineHeight: 1.3rem;
+  }
   #wrapper {
     display: flex;
     flex-direction: column;
@@ -77,6 +106,7 @@ const base = css `
     border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
     padding: var(--_padding);
+    line-height: var(--_lineHeight);
     outline: 1px solid transparent;
     box-shadow: var(--_shadow);
     box-sizing: border-box;
@@ -85,6 +115,12 @@ const base = css `
       outline-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
     appearance: none;
   }
+  input#field,
+  button#field {
+    box-sizing: content-box;
+    min-width: 0;
+    height: var(--_lineHeight);
+  }
   #field::placeholder {
     color: var(--_placeholderColor);
   }
@@ -181,6 +217,7 @@ const base = css `
   }
   #readonly-display {
     padding: var(--_padding);
+    line-height: var(--_lineHeight);
     border: var(--eun-border-width-m, 1.5px) solid transparent;
     border-radius: var(--_borderRadius);
     box-sizing: border-box;