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

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, } from "../../../utils/listbox-options.utils.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,15 +41,20 @@ 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} [ariaLabelPanel='Search'] - The accessible name of the panel's dialog, used when label isn't set
+ * @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")
  * @prop {boolean} [loading=false] - Whether a search request is currently in flight. Shows a spinning loading indicator in place of the clear button or shortcut hint on the inline field only. Ignored on the panel trigger and the panel's own field, which stay static, so reflect the loading state on the results slot instead
  * @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
@@ -64,7 +71,8 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
         /**
          * Always `"search"` — enforced in `willUpdate`, since `EunomiaInput` declares
          * `type` as a plain property (not an accessor), which TypeScript doesn't
-         * allow overriding as a getter/setter pair from a subclass.
+         * allow overriding as a getter/setter pair from a subclass. Never
+         * reflected, since it can't differ from its default.
          * @default search
          */
         this.type = "search";
@@ -97,13 +105,6 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
          * @default false
          */
         this.panel = false;
-        /**
-         * Accessible name of the panel's dialog, used as `eun-modal`'s `aria-label`
-         * since the panel renders no visible heading. Ignored when `label` is set
-         * (used instead, since it already names the field itself).
-         * @default Search
-         */
-        this.ariaLabelPanel = "Search";
         /**
          * Indicates whether a search request is currently in flight. Shows a
          * spinning `eun-loader` in place of the clear button/shortcut hint on the
@@ -129,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;
@@ -141,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
@@ -152,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}.
@@ -171,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`
@@ -295,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,18 +373,19 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
         }
     }
     /**
-     * Redirects the host's own focus (see `EunomiaInput.handleHostFocus`) to
+     * Sends a direct `focus()` call on the host to
      * the collapsed trigger button while `panel` is set, instead of the
      * inherited default (the native field) : that field lives inside the
      * 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();
     }
@@ -363,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`
@@ -386,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));
@@ -507,22 +569,22 @@ 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();
     }
     /**
-     * Renders the dropdown's option rows, inserting a non-interactive group
-     * heading whenever an option's `group` differs from the previous row's,
-     * and highlighting the matched substring — same rendering as
+     * Renders the dropdown's option rows, grouped under their `optgroup`
+     * label (see {@link renderListboxRows}), and highlighting the matched substring — same rendering as
      * `eun-select`'s own `renderOptionRows`, minus the `multiple` checkbox
      * (search has no multi-select concept) and the `selected` state now
      * meaning "exactly matches the current value" rather than "is the stored
@@ -533,40 +595,27 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
      * @private
      */
     renderSuggestionOptionRows(options) {
-        const rows = [];
         const query = this.effectiveQuery;
-        let lastGroup;
-        options.forEach((option, index) => {
-            if (option.group !== lastGroup) {
-                lastGroup = option.group;
-                if (option.group) {
-                    rows.push(html `<li class="group-label" role="presentation">
-              ${option.group}
-            </li>`);
-                }
-            }
-            rows.push(html `
+        return renderListboxRows(options, (option, index) => html `
         <li
           id="listbox-option-${index}"
           role="option"
           aria-selected=${option.label.toLowerCase() === query}
           class=${classMap({
-                highlighted: index === this.highlightedIndex,
-                selected: option.label.toLowerCase() === query,
-            })}
+            highlighted: index === this.highlightedIndex,
+            selected: option.label.toLowerCase() === query,
+        })}
           @mousedown=${(event) => {
-                event.preventDefault();
-                this.handleSelect(option);
-            }}
+            event.preventDefault();
+            this.handleSelect(option);
+        }}
           @mouseenter=${() => {
-                this.highlightedIndex = index;
-            }}
+            this.highlightedIndex = index;
+        }}
         >
           ${renderHighlightedLabel(option.label, query)}
         </li>
       `);
-        });
-        return rows;
     }
     /**
      * Renders the suggestions dropdown panel itself — only ever rendered
@@ -782,10 +831,12 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
             field.removeAttribute("role");
             field.removeAttribute("aria-expanded");
             field.removeAttribute("aria-controls");
+            field.removeAttribute("aria-autocomplete");
             field.removeAttribute("aria-activedescendant");
             return;
         }
         field.setAttribute("role", "combobox");
+        field.setAttribute("aria-autocomplete", "list");
         field.setAttribute("aria-expanded", this.isOpen ? "true" : "false");
         field.setAttribute("aria-controls", "listbox");
         if (this.highlightedIndex >= 0) {
@@ -797,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();
@@ -811,31 +864,36 @@ 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"
           hide-actions
           .closeable=${false}
-          aria-label=${this.label || this.ariaLabelPanel}
+          aria-label=${this.label ||
+            (this.panelLabel ?? this.dictionary.search.panel)}
         >
           <div id="panel-field">
             ${this.renderField(description !== nothing)}
@@ -858,7 +916,6 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
 EunomiaSearch.styles = [
     EunomiaInput.styles,
     listboxStyles,
-    // Never shipped to WebKit — see listboxAnchorPositioningStyles's own doc.
     ...(isWebKit ? [] : [listboxAnchorPositioningStyles]),
     searchStyles,
 ];
@@ -869,13 +926,13 @@ EunomiaSearch.styles = [
  */
 EunomiaSearch.FIELD_POINTER_DOWN_WINDOW_MS = 100;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, converter: { toAttribute: () => null } })
 ], EunomiaSearch.prototype, "type", void 0);
 __decorate([
     property()
 ], EunomiaSearch.prototype, "icon", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ converter: defaultTrueConverter })
 ], EunomiaSearch.prototype, "clearable", void 0);
 __decorate([
     property({ type: Boolean })
@@ -884,8 +941,8 @@ __decorate([
     property({ type: Boolean })
 ], EunomiaSearch.prototype, "panel", void 0);
 __decorate([
-    property({ attribute: "aria-label-panel" })
-], EunomiaSearch.prototype, "ariaLabelPanel", void 0);
+    property({ attribute: "panel-label" })
+], EunomiaSearch.prototype, "panelLabel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaSearch.prototype, "loading", void 0);
@@ -898,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);
@@ -910,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,9 +6,12 @@ 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";
+import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the select component.
  */
@@ -22,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;
+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
@@ -50,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
@@ -60,6 +65,7 @@ declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether a selection is required
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<Validators<string | string[]>>} validators - The list of validation rules applied to the field value
  * @prop {EunomiaIconName} icon - An optional leading icon
@@ -70,10 +76,10 @@ declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
  * @attr {string} [select-placeholder='Select…'] - The fallback for placeholder when searchable isn't set
  * @prop {boolean} [readonlyAvailable=false] - Whether the field can switch between a static display and an editable one
  * @attr {boolean} [readonly-available=false] - Whether the field can switch between a static display and an editable one
- * @prop {string} [emptyValueLabel='No value set'] - Text displayed in place of the value when readonly and empty
+ * @prop {string} [emptyValueLabel] - Text displayed in place of the value when readonly and empty. Defaults to the localized string for the current locale (English: "No value set")
  * @prop {string} [noResultsLabel='No results'] - Text displayed in the dropdown when no option matches the search
- * @prop {string} [confirmLabel='Confirm'] - The label of the confirm button, shown while editing in readonlyAvailable mode or while multiple and the dropdown is open. Set to an empty string to hide the button entirely
- * @attr {string} [confirm-label='Confirm'] - The label of the confirm button, shown while editing in readonlyAvailable mode or while multiple and the dropdown is open. Set to an empty string to hide the button entirely
+ * @prop {string} [confirmLabel] - The label of the confirm button, shown while editing in readonlyAvailable mode or while multiple and the dropdown is open. Set to an empty string to hide the button entirely. Defaults to the localized string for the current locale (English: "Confirm")
+ * @attr {string} [confirm-label] - The label of the confirm button, shown while editing in readonlyAvailable mode or while multiple and the dropdown is open. Set to an empty string to hide the button entirely. Defaults to the localized string for the current locale (English: "Confirm")
  * @prop {boolean} [noAnimation=false] - Disables the dropdown panel's open and close height transition, on top of the automatic reduced motion handling
  * @prop {boolean} [loading=false] - Whether options are currently being fetched. Shows a spinning loading indicator in place of the dropdown arrow, and a single disabled loading row instead of the option list. Has no effect while native, beyond the arrow swap
  * @prop {string} [loadingLabel='Loading…'] - The accessible label announced by the loading indicator while loading is set
@@ -102,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
@@ -119,6 +127,11 @@ export declare class EunomiaSelect extends EunomiaSelectMixinBase {
      * @readonly
      */
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Every change is a complete choice, so its error shows right away.
+     * @internal
+     */
+    errorOnChange: boolean;
     /**
      * The default value applied on connection and form reset. Overrides the
      * `defaultValue` accessor inherited from `FormMixin` only to drop its
@@ -215,9 +228,9 @@ export declare class EunomiaSelect extends EunomiaSelectMixinBase {
     selectPlaceholder: string;
     /**
      * Text displayed in place of the value when readonly and empty.
-     * @default No value set
+     * Falls back to the localized string for the current locale when unset.
      */
-    emptyValueLabel: string;
+    emptyValueLabel?: string;
     /**
      * Text displayed in the dropdown when no option matches the search.
      * @default No results
@@ -231,9 +244,9 @@ export declare class EunomiaSelect extends EunomiaSelectMixinBase {
      * Set to an empty string to hide the button entirely — e.g. for a
      * `readonlyAvailable` field where picking an option is already confirmation
      * enough on its own, and the extra button would just be clutter.
-     * @default Confirm
+     * Falls back to the localized string for the current locale when unset.
      */
-    confirmLabel: string;
+    confirmLabel?: string;
     /**
      * Indicates whether options are currently being fetched (e.g. a
      * server-filtered `searchable` field). Shows a spinning `eun-loader` in
@@ -483,6 +496,12 @@ export declare class EunomiaSelect extends EunomiaSelectMixinBase {
      * @param _changedProperties - Map of changed properties
      */
     protected updated(_changedProperties: PropertyValues): void;
+    /**
+     * The host is never a tab stop of its own : sequential navigation goes
+     * straight to the controls inside, in both directions, and
+     * {@link focus} covers a direct call on the host.
+     */
+    protected get hostTabStop(): boolean;
     /**
      * Returns the field element to focus/anchor on validation errors.
      *
@@ -707,8 +726,8 @@ export declare class EunomiaSelect extends EunomiaSelectMixinBase {
      */
     private renderHighlighted;
     /**
-     * Renders the dropdown's option rows, inserting a non-interactive group
-     * heading whenever an option's `group` differs from the previous row's.
+     * Renders the dropdown's option rows, grouped under their `optgroup`
+     * label (see {@link renderListboxRows}).
      *
      * @param options the options to render, already filtered.
      * @returns the rendered rows.