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

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

@@ -0,0 +1,213 @@
+import { css } from "lit";
+/**
+ * Base style for rating.
+ *
+ * Custom css variables:
+ * [--rating-size] - Set a custom width/height for each icon
+ * [--rating-gap] - Set a custom space between two icons
+ * [--rating-color] - Set a custom color to the filled icons
+ * [--rating-empty-color] - Set a custom color to the empty icons
+ * [--rating-error-color] - Set a custom color to the error message, and to the empty icons while in error
+ * [--rating-hint-color] - Set a custom color to the hint message
+ * [--rating-focus-outline-color] - Set a custom color to the focus outline drawn around the focused icon and the clear button
+ */
+const base = css `
+  :host {
+    --_iconSize: var(--rating-size, 24px);
+    --_gap: var(--rating-gap, var(--eun-space-xs, 4px));
+    --_color: var(--rating-color, var(--eun-color-primary-500, #3d6fff));
+    --_emptyColor: var(
+      --rating-empty-color,
+      color-mix(
+        in srgb,
+        var(--eun-text-color, #071621) 55%,
+        var(--eun-surface-color, #ffffff)
+      )
+    );
+    --_errorColor: var(
+      --rating-error-color,
+      var(--eun-color-critical-100, #aa0014)
+    );
+    --_hintColor: var(--rating-hint-color, var(--eun-text-secondary, #484e61));
+    --_focusIndicator: var(
+      --rating-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
+    font-family: var(--eun-font-family, "Mulish", sans-serif);
+    font-size: var(--eun-font-size-s, 14px);
+    display: inline-block;
+    vertical-align: middle;
+    outline: none;
+  }
+
+  #wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--eun-space-xs, 4px);
+  }
+
+  #control {
+    display: flex;
+    align-items: center;
+    gap: var(--eun-space-s, 8px);
+  }
+
+  #items {
+    display: flex;
+    gap: var(--_gap);
+    cursor: pointer;
+  }
+
+  .item {
+    position: relative;
+    flex: none;
+    width: var(--_iconSize);
+    height: var(--_iconSize);
+  }
+
+  :host([display-only]) #items {
+    cursor: default;
+  }
+
+  .icon {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .icon eun-icon {
+    --icon-size: var(--_iconSize);
+    display: block;
+    width: var(--_iconSize);
+    height: var(--_iconSize);
+  }
+
+  .empty {
+    --icon-color: var(--_emptyColor);
+  }
+
+  .fill {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    overflow: hidden;
+    --icon-color: var(--_color);
+  }
+
+  .fill eun-icon {
+    flex: none;
+  }
+
+  input {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    appearance: none;
+    pointer-events: none;
+  }
+
+  input.half {
+    width: 50%;
+  }
+
+  input.end {
+    inset-inline-start: 50%;
+    width: 50%;
+  }
+
+  .focus-ring {
+    position: absolute;
+    inset: -3px;
+    border-radius: var(--eun-border-radius-s, 4px);
+    outline: 2px solid transparent;
+    pointer-events: none;
+    transition: outline-color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
+  }
+
+  .focus-ring.half {
+    inset-inline-end: 50%;
+  }
+
+  input:focus-visible + .focus-ring {
+    outline-color: var(--_focusIndicator);
+  }
+
+  #clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    min-height: 24px;
+    padding: 2px;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--eun-text-secondary, #484e61);
+    cursor: pointer;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    --icon-size: 18px;
+    transition:
+      background-color var(--eun-duration-s, 150ms)
+        var(--eun-easing-default, ease),
+      outline-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
+  }
+
+  #clear:hover {
+    background: var(--eun-content-hover, #9696961a);
+  }
+
+  #clear:active {
+    background: var(--eun-content-pressed, #e4e6e8);
+  }
+
+  #clear:focus-visible {
+    outline-color: var(--_focusIndicator);
+  }
+
+  #items[aria-invalid="true"] {
+    --_emptyColor: var(--_errorColor);
+  }
+
+  :host([aria-readonly="true"]) {
+    --_color: var(--eun-readonly-color, #666e8a);
+  }
+
+  :host([aria-readonly="true"]) #items {
+    cursor: default;
+  }
+
+  :host([aria-disabled="true"]) {
+    --_color: var(--eun-text-disabled-color, #8d93aa);
+    --_emptyColor: var(--eun-disabled-content, #c1c9d6);
+  }
+
+  :host([aria-disabled="true"]) #items {
+    cursor: not-allowed;
+  }
+
+  @media (forced-colors: active) {
+    .fill {
+      --icon-color: CanvasText;
+    }
+
+    .empty {
+      --icon-color: CanvasText;
+    }
+
+    input:focus-visible + .focus-ring,
+    #clear:focus-visible {
+      outline-color: Highlight;
+    }
+
+    :host([aria-disabled="true"]) .icon eun-icon {
+      --icon-color: GrayText;
+    }
+  }
+`;
+export const ratingStyles = base;

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

@@ -26,7 +26,7 @@ declare const EunomiaSearch_base: import("../../../utils/constructor.type.js").C
  * @slot results - Content rendered below the field inside the panel, such as a result list. Only relevant when panel is set
  * @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
@@ -38,6 +38,7 @@ declare const EunomiaSearch_base: import("../../../utils/constructor.type.js").C
  * @cssprop [--field-match-background] - Sets the background of the matched search substring, none by default. Shared with the select component
  * @cssprop [--field-match-font-weight] - Sets the font weight of the matched search substring. Shared with the select component
  * @cssprop [--field-match-text-decoration] - Sets the text decoration, such as underline, of the matched search substring, none by default. Shared with the select component
+ * @cssprop [--field-loader-color] - Sets the color of the spinner shown while loading, the icon color by default. Shared with the select component
  * @cssprop [--eun-viewport-inset-top] - Reserves space, such as a page's sticky header height, that the suggestions dropdown 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
  * @element eun-search
@@ -53,7 +54,8 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
     /**
      * 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
      */
     type: EunomiaInputType;
@@ -90,9 +92,9 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      * 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
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelPanel: string;
+    panelLabel?: string;
     /**
      * Indicates whether a search request is currently in flight. Shows a
      * spinning `eun-loader` in place of the clear button/shortcut hint on the
@@ -199,7 +201,7 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      */
     protected willUpdate(changedProperties: PropertyValues): void;
     /**
-     * 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
@@ -270,7 +272,7 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
     /**
      * The listbox's open/close animation duration, in ms : `0` under
      * `prefers-reduced-motion: reduce`, otherwise `--field-listbox-
-     * transition-duration` (default `200ms`).
+     * transition-duration` (default `--eun-duration-m`).
      *
      * @param el the listbox to read `--field-listbox-transition-duration` off.
      * @private
@@ -359,9 +361,8 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      */
     private readonly handleSuggestionsPopoverToggle;
     /**
-     * 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

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

@@ -14,8 +14,9 @@ import { searchStyles } from "./search.styles.js";
 import { AnchorPositionMixin } from "../../../mixins/anchor-position.mixin.js";
 import { ChangeEvent } from "../../../events/change.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";
 /**
  * Tag name of the search component.
  */
@@ -40,7 +41,7 @@ export const EunomiaSearchTagName = "eun-search";
  * @slot results - Content rendered below the field inside the panel, such as a result list. Only relevant when panel is set
  * @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
@@ -52,6 +53,7 @@ export const EunomiaSearchTagName = "eun-search";
  * @cssprop [--field-match-background] - Sets the background of the matched search substring, none by default. Shared with the select component
  * @cssprop [--field-match-font-weight] - Sets the font weight of the matched search substring. Shared with the select component
  * @cssprop [--field-match-text-decoration] - Sets the text decoration, such as underline, of the matched search substring, none by default. Shared with the select component
+ * @cssprop [--field-loader-color] - Sets the color of the spinner shown while loading, the icon color by default. Shared with the select component
  * @cssprop [--eun-viewport-inset-top] - Reserves space, such as a page's sticky header height, that the suggestions dropdown 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
  * @element eun-search
@@ -62,7 +64,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";
@@ -95,13 +98,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
@@ -311,7 +307,7 @@ 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
@@ -426,7 +422,7 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
     /**
      * The listbox's open/close animation duration, in ms : `0` under
      * `prefers-reduced-motion: reduce`, otherwise `--field-listbox-
-     * transition-duration` (default `200ms`).
+     * transition-duration` (default `--eun-duration-m`).
      *
      * @param el the listbox to read `--field-listbox-transition-duration` off.
      * @private
@@ -435,18 +431,7 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
         if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
             return 0;
         }
-        const raw = getComputedStyle(el)
-            .getPropertyValue("--field-listbox-transition-duration")
-            .trim();
-        if (raw) {
-            const parsed = raw.endsWith("ms")
-                ? Number.parseFloat(raw)
-                : Number.parseFloat(raw) * 1000;
-            if (Number.isFinite(parsed) && parsed >= 0) {
-                return parsed;
-            }
-        }
-        return 200;
+        return resolveDurationMs(el, "--field-listbox-transition-duration", "m", 200);
     }
     /**
      * Plays the fade/scaleY-in, replacing any {@link listboxAnimation}
@@ -464,7 +449,7 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
         this.listboxAnimation = listbox.animate([
             { opacity: 0, transform: "scaleY(0.01)" },
             { opacity: 1, transform: "scaleY(1)" },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(listbox), fill: "forwards" });
     }
     /**
      * Closes the suggestions dropdown, if open. All state cleanup happens in
@@ -502,7 +487,7 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
         const animation = listbox.animate([
             { opacity: 1, transform: "scaleY(1)" },
             { opacity: 0, transform: "scaleY(0.01)" },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(listbox), fill: "forwards" });
         this.listboxAnimation = animation;
         animation.finished
             .then(() => {
@@ -529,9 +514,8 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
         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
@@ -542,40 +526,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
@@ -791,10 +762,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) {
@@ -844,7 +817,8 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
           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)}
@@ -867,7 +841,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,
 ];
@@ -878,7 +851,7 @@ 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()
@@ -893,8 +866,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);

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

@@ -26,15 +26,16 @@ const search = css `
   :host([loading]) #clear {
     display: none;
   }
+  #field-loader {
+    color: var(--field-loader-color, var(--_iconColor));
+  }
   #field-wrapper #field-loader {
     position: absolute;
     right: var(--eun-space-s, 8px);
     pointer-events: none;
-    color: var(--_iconColor);
   }
   #search-trigger #field-loader {
     flex-shrink: 0;
-    color: var(--_iconColor);
   }
   #search-trigger {
     position: relative;
@@ -54,8 +55,8 @@ const search = css `
     appearance: none;
     outline: 1px solid transparent;
     transition:
-      outline 0.15s ease,
-      border-color 0.15s ease;
+      outline var(--eun-duration-s, 150ms) var(--eun-easing-default, ease),
+      border-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
   }
   :host(:not([aria-disabled="true"])) #search-trigger:hover {
     border-color: var(

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

@@ -9,6 +9,7 @@ import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.
 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 +23,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 & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
 /**
  * A field that picks one or more values from a list of option and optgroup
@@ -59,7 +60,9 @@ declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @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
+ * @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
  * @prop {string} [placeholder] - The placeholder shown when the field is empty. Defaults to searchPlaceholder when searchable, and selectPlaceholder otherwise
@@ -69,10 +72,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
@@ -85,9 +88,12 @@ declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
  * @cssprop [--field-border-color-focus] - Sets the border color on focus
  * @cssprop [--field-border-radius] - Sets the corner radius of the field
  * @cssprop [--field-padding] - Sets the padding of the field
+ * @cssprop [--field-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --field-padding is set
+ * @cssprop [--field-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --field-padding is set
  * @cssprop [--field-text-color] - Sets the text color of the field
  * @cssprop [--field-placeholder-color] - Sets the color of the placeholder
  * @cssprop [--field-icon-color] - Sets the color of the leading icon and the dropdown arrow
+ * @cssprop [--field-loader-color] - Sets the color of the spinner shown while loading, the icon color by default. Shared with the search component
  * @cssprop [--field-error-color] - Sets the color of the error message
  * @cssprop [--field-hint-color] - Sets the color of the hint message
  * @cssprop [--field-focus-outline-color] - Sets the color of the focus outline
@@ -101,6 +107,9 @@ declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
  * @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-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
  */
 export declare class EunomiaSelect extends EunomiaSelectMixinBase {
@@ -112,6 +121,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
@@ -208,9 +222,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
@@ -224,9 +238,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
@@ -476,6 +490,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.
      *
@@ -506,7 +526,7 @@ export declare class EunomiaSelect extends EunomiaSelectMixinBase {
      * The listbox's open/close animation duration, in ms : `0` if `
      * noAnimation` is set or the browser reports `prefers-reduced-motion:
      * reduce`, otherwise `--field-listbox-transition-duration` (default
-     * `200ms`).
+     * `--eun-duration-m`).
      *
      * @param el the listbox to read `--field-listbox-transition-duration` off.
      * @private
@@ -700,8 +720,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.