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

package/dist/components/form/select/select.js

@@ -21,8 +21,9 @@ import { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { selectStyles } from "./select.styles.js";
 import { isWebKit } from "../../../utils/browser.utils.js";
-import { parseListboxOptions, renderHighlightedLabel, } from "../../../utils/listbox-options.utils.js";
+import { parseListboxOptions, renderHighlightedLabel, renderListboxRows, } from "../../../utils/listbox-options.utils.js";
 import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
+import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the select component.
  */
@@ -32,7 +33,7 @@ export const EunomiaSelectTagName = "eun-select";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
+const EunomiaSelectMixinBase = LocalizableMixin(AnchorPositionMixin(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
@@ -69,6 +70,7 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabe
  * @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
@@ -79,10 +81,10 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabe
  * @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
@@ -122,6 +124,11 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabe
 let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectMixinBase {
     constructor() {
         super(...arguments);
+        /**
+         * Every change is a complete choice, so its error shows right away.
+         * @internal
+         */
+        this.errorOnChange = true;
         /**
          * Indicates whether the field filters its options as the user types.
          * When false, the field is read-only and driven by Arrow keys, `Enter`,
@@ -165,27 +172,11 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
          * @default Select…
          */
         this.selectPlaceholder = "Select…";
-        /**
-         * Text displayed in place of the value when readonly and empty.
-         * @default No value set
-         */
-        this.emptyValueLabel = "No value set";
         /**
          * Text displayed in the dropdown when no option matches the search.
          * @default No results
          */
         this.noResultsLabel = "No results";
-        /**
-         * Label of the confirm button — shown while editing in `readonlyAvailable`
-         * mode, or while `multiple` and the dropdown is open (see the class doc).
-         * Slot content into `confirm` instead for anything richer than plain text
-         * (an icon, for instance) ; slotted content, when present, overrides this.
-         * 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
-         */
-        this.confirmLabel = "Confirm";
         /**
          * Indicates whether options are currently being fetched (e.g. a
          * server-filtered `searchable` field). Shows a spinning `eun-loader` in
@@ -515,7 +506,8 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
      * @internal
      */
     get hasConfirmContent() {
-        return this.hasConfirmSlot || !!this.confirmLabel;
+        return (this.hasConfirmSlot ||
+            !!(this.confirmLabel ?? this.dictionary.common.confirm));
     }
     /**
      * The normalised search query driving both filtering and highlighting.
@@ -608,9 +600,22 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
         }
         if (_changedProperties.has("readonly") ||
             _changedProperties.has("disabled")) {
-            this.setAttribute("tabindex", this.disabled || this.readonly ? "-1" : "0");
+            if (this.disabled || this.readonly) {
+                this.setAttribute("tabindex", "-1");
+            }
+            else {
+                this.removeAttribute("tabindex");
+            }
         }
     }
+    /**
+     * 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.
+     */
+    get hostTabStop() {
+        return false;
+    }
     /**
      * Returns the field element to focus/anchor on validation errors.
      *
@@ -929,6 +934,27 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
                 }
                 break;
             }
+            case " ": {
+                // Space opens the list, then picks the highlighted option, as in
+                // a select-only combobox, unless it continues a type-ahead search
+                // or is typed into the search text.
+                if (this.searchable || this.typeaheadBuffer) {
+                    if (!this.searchable) {
+                        this.handleTypeahead(event);
+                    }
+                    break;
+                }
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.openListbox();
+                    break;
+                }
+                const option = this.filteredOptions[this.highlightedIndex];
+                if (option) {
+                    this.handleSelect(option);
+                }
+                break;
+            }
             default:
                 if (!this.searchable) {
                     this.handleTypeahead(event);
@@ -988,27 +1014,17 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
         return renderHighlightedLabel(label, this.effectiveQuery);
     }
     /**
-     * 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.
      * @private
      */
     renderOptionRows(options) {
-        const rows = [];
-        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>`);
-                }
-            }
+        return renderListboxRows(options, (option, index) => {
             const selected = this.isSelected(option);
-            rows.push(html `
+            return html `
         <li
           id="listbox-option-${index}"
           role="option"
@@ -1034,9 +1050,8 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
                 ? this.renderHighlighted(option.label)
                 : option.label}
         </li>
-      `);
+      `;
         });
-        return rows;
     }
     /**
      * Whether the confirm trigger should render at all right now — while
@@ -1089,7 +1104,9 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
         }
         return html `
       <button type="button" id="confirm-link" @click=${this.handleConfirmClick}>
-        <slot name="confirm">${this.confirmLabel}</slot>
+        <slot name="confirm"
+          >${this.confirmLabel ?? this.dictionary.common.confirm}</slot
+        >
       </button>
     `;
     }
@@ -1112,7 +1129,8 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
       >
         <slot name="readonly-content">
           <span class=${classMap({ empty: !label })}
-            >${label || this.emptyValueLabel}</span
+            >${label ||
+            (this.emptyValueLabel ?? this.dictionary.common.noValue)}</span
           >
         </slot>
       </div>

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

@@ -89,7 +89,17 @@ const listbox = css `
     text-align: center;
     color: var(--_placeholderColor);
   }
+  #listbox li.option-group {
+    padding: 0;
+    cursor: default;
+  }
+  #listbox .group-options {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
   #listbox .group-label {
+    padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
     cursor: default;
     padding-block-end: var(--eun-space-xxs, 1.6px);
     font-size: var(--eun-font-size-xs, 12px);

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

@@ -46,6 +46,7 @@ declare const EunomiaSliderMixinBase: Constructor<EunomiaSliderBase>;
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Present for API consistency with every other field, but inert here, since a slider's value can never be empty the way a text field's can
  * @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
  * @attr {boolean} [hide-error=false] - Whether the errors are hidden
  * @prop {boolean} [hideTooltip=false] - Hides the floating value bubble that otherwise appears above the thumb while dragging or focused
@@ -178,14 +179,6 @@ export declare class EunomiaSlider extends EunomiaSliderMixinBase {
     private hasFocus;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /**
-     * Redirects focus to the native field whenever the host itself receives
-     * it — the same pattern `eun-counter`/`eun-input` use, so the host stays
-     * in the tab order (`DisabledMixin`) rather than excluded via
-     * `tabindex="-1"`, which would break Tab from reaching the field at all.
-     * @private
-     */
-    private readonly handleHostFocus;
     /**
      * The value a native `<input type="range">` with no `value` attribute
      * resolves to on its own.
@@ -243,6 +236,12 @@ export declare class EunomiaSlider extends EunomiaSliderMixinBase {
      * @private
      */
     private get tickValues();
+    /**
+     * 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.
      *

package/dist/components/form/slider/slider.js

@@ -58,6 +58,7 @@ const EunomiaSliderMixinBase = FormLabelMixin(ReadonlyMixin(FormMixin(Base)));
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Present for API consistency with every other field, but inert here, since a slider's value can never be empty the way a text field's can
  * @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
  * @attr {boolean} [hide-error=false] - Whether the errors are hidden
  * @prop {boolean} [hideTooltip=false] - Hides the floating value bubble that otherwise appears above the thumb while dragging or focused
@@ -133,16 +134,6 @@ let EunomiaSlider = class EunomiaSlider extends EunomiaSliderMixinBase {
          * @internal
          */
         this.hasFocus = false;
-        /**
-         * Redirects focus to the native field whenever the host itself receives
-         * it — the same pattern `eun-counter`/`eun-input` use, so the host stays
-         * in the tab order (`DisabledMixin`) rather than excluded via
-         * `tabindex="-1"`, which would break Tab from reaching the field at all.
-         * @private
-         */
-        this.handleHostFocus = () => {
-            this.fieldEl?.focus();
-        };
         /**
          * Updates the value from dragging or a keyboard-driven native step, and
          * notifies consumers — fires on every native `input` event, so live and
@@ -256,10 +247,8 @@ let EunomiaSlider = class EunomiaSlider extends EunomiaSliderMixinBase {
     connectedCallback() {
         super.connectedCallback?.();
         this.value ??= this.clamp(this.defaultRangeValue);
-        this.addEventListener("focus", this.handleHostFocus);
     }
     disconnectedCallback() {
-        this.removeEventListener("focus", this.handleHostFocus);
         window.removeEventListener("pointerup", this.handlePointerUp);
         window.removeEventListener("pointercancel", this.handlePointerUp);
         super.disconnectedCallback?.();
@@ -361,6 +350,14 @@ let EunomiaSlider = class EunomiaSlider extends EunomiaSliderMixinBase {
         values.push(this.max);
         return values;
     }
+    /**
+     * 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.
+     */
+    get hostTabStop() {
+        return false;
+    }
     /**
      * Returns the field element to focus/anchor on validation errors.
      *

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

@@ -39,6 +39,7 @@ declare const EunomiaSwitchMixinBase: Constructor<EunomiaSwitchBase>;
  * @prop {boolean} [hideIcon=false] - Whether the icon inside the thumb is hidden
  * @attr {boolean} [hide-icon=false] - Whether the icon inside the thumb is 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
  * @attr {boolean} [hide-error=false] - Whether the error message is hidden
  * @prop {boolean} [required=false] - Whether the switch must be turned on to be valid

package/dist/components/form/switch/switch.js

@@ -44,6 +44,7 @@ const EunomiaSwitchMixinBase = CheckMixin(ReadonlyMixin(FormMixin(DisabledMixin(
  * @prop {boolean} [hideIcon=false] - Whether the icon inside the thumb is hidden
  * @attr {boolean} [hide-icon=false] - Whether the icon inside the thumb is 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
  * @attr {boolean} [hide-error=false] - Whether the error message is hidden
  * @prop {boolean} [required=false] - Whether the switch must be turned on to be valid

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

@@ -7,6 +7,7 @@ import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { EditableMixinInterface } from "../../../mixins/editable.mixin.js";
 import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
+import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the textarea component.
  */
@@ -15,7 +16,7 @@ export declare const EunomiaTextareaTagName = "eun-textarea";
  * Type of the textarea base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaTextareaBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface;
+type EunomiaTextareaBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & LocalizableMixinInterface;
 declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
 /**
  * A multi-line text field, sharing its label, hint, and error chrome and
@@ -45,13 +46,14 @@ declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether the field 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<import('../../../types/form-validators.type.js').Validators<string>>} validators - The list of validation rules applied to the field value
  * @prop {number} rows - The fixed number of visible rows. When omitted, the field automatically grows and shrinks its height to fit its content
  * @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 {boolean} [formatting=false] - Switches the field to a rich text surface with a formatting toolbar above it, and, combined with readonlyAvailable, renders the static display as formatted rich text instead of raw source
- * @prop {string} [formatToolbarLabel='Text formatting'] - The accessible label of the bold, italic, and underline toggle group
+ * @prop {string} [formatToolbarLabel='Text formatting'] - The accessible label of the formatting toolbar
  * @prop {string} [formatBoldLabel='Bold'] - The accessible label of the bold toggle
  * @prop {string} [formatItalicLabel='Italic'] - The accessible label of the italic toggle
  * @prop {string} [formatUnderlineLabel='Underline'] - The accessible label of the underline toggle
@@ -66,9 +68,9 @@ declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
  * @prop {string} [autocomplete='off'] - The native autocomplete attribute forwarded to the field
  * @prop {number} minlength - The native minimum length constraint forwarded to the field
  * @prop {number} maxlength - The field's maximum length. Forwarded natively when not formatting, and enforced manually otherwise. Either way, a live character counter is shown under the field
- * @prop {string} [emptyValueLabel='No value set'] - Text displayed in place of the value when readonly and empty
- * @prop {string} [confirmLabel='Save'] - The label of the confirm button in edit mode
- * @prop {string} [cancelLabel='Cancel'] - The label of the cancel button in edit mode
+ * @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} [confirmLabel] - The label of the confirm button in edit mode. Defaults to the localized string for the current locale (English: "Save")
+ * @prop {string} [cancelLabel] - The label of the cancel button in edit mode. Defaults to the localized string for the current locale (English: "Cancel")
  * @fires {ChangeEvent} eunchange - Fired on every value change, including one applied through the formatting toolbar
  * @fires {CommitEvent} euncommit - Fired when an edit is confirmed in readonlyAvailable mode
  * @cssprop [--field-background] - Sets the background color of the field
@@ -130,7 +132,7 @@ export declare class EunomiaTextarea extends EunomiaTextareaMixinBase {
      */
     formatting: boolean;
     /**
-     * Accessible label of the Bold/Italic/Underline toggle group.
+     * Accessible label of the formatting toolbar.
      * @default Text formatting
      */
     formatToolbarLabel: string;
@@ -213,19 +215,19 @@ export declare class EunomiaTextarea extends EunomiaTextareaMixinBase {
     maxlength?: number;
     /**
      * 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;
     /**
      * Label of the confirm button in edit mode.
-     * @default Save
+     * Falls back to the localized string for the current locale when unset.
      */
-    confirmLabel: string;
+    confirmLabel?: string;
     /**
      * Label of the cancel button in edit mode.
-     * @default Cancel
+     * Falls back to the localized string for the current locale when unset.
      */
-    cancelLabel: string;
+    cancelLabel?: string;
     /**
      * Which color picker (text-color or highlight) is currently open, if any.
      * @private
@@ -296,19 +298,18 @@ export declare class EunomiaTextarea extends EunomiaTextareaMixinBase {
      * @readonly
      */
     private readonly toolbarEl?;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     /**
-     * Redirects focus to the native field whenever the host itself receives
-     * it. The host stays in the tab order (`DisabledMixin`) rather than
-     * being excluded via `tabindex="-1"` — for this form-associated
-     * component, that turned out to break Tab from reaching the field
-     * entirely, instead of just skipping the host. Redirecting keeps a
-     * single, real tab stop from the user's perspective without touching
-     * that tab order.
-     * @private
+     * Index, among {@link toolbarControls}, of the control holding the
+     * toolbar's single Tab stop.
+     * @internal
      */
-    private handleHostFocus;
+    private toolbarFocusIndex;
+    /**
+     * Pending {@link applyToolbarRoving} call.
+     * @internal
+     */
+    private toolbarRovingTimer?;
+    disconnectedCallback(): void;
     /**
      * Lifecycle hook called after the first render : populates the
      * contenteditable surface (when `formatting`) and fits the field height
@@ -343,6 +344,12 @@ export declare class EunomiaTextarea extends EunomiaTextareaMixinBase {
      * @private
      */
     private checkEditableValidators;
+    /**
+     * 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.
      *
@@ -509,6 +516,23 @@ export declare class EunomiaTextarea extends EunomiaTextareaMixinBase {
      * @private
      */
     private toggleColorPicker;
+    /**
+     * The swatches of the open color picker, in display order.
+     *
+     * @returns the swatch buttons, empty while no picker is open.
+     * @private
+     */
+    private colorSwatches;
+    /**
+     * Keyboard support of the open color picker, following the menu pattern
+     * : arrows move between swatches (wrapping), Home/End jump to the first
+     * and last, Escape closes it, and Tab closes it before leaving it. Both
+     * return the focus to the picker's trigger.
+     *
+     * @param event the keyboard event.
+     * @private
+     */
+    private handleColorPickerKeydown;
     /**
      * Closes whichever color picker is open, if any.
      * @private
@@ -532,6 +556,48 @@ export declare class EunomiaTextarea extends EunomiaTextareaMixinBase {
      * @private
      */
     private selectColor;
+    /**
+     * The toolbar's controls, in visual order : every format and alignment
+     * toggle, then both color picker triggers.
+     *
+     * @returns the controls, empty while the toolbar isn't rendered.
+     * @private
+     */
+    private toolbarControls;
+    /**
+     * Applies the toolbar's roving `tabindex` once the toggle groups have
+     * applied their own (which they do after their items' updates), so the
+     * whole toolbar stays a single Tab stop.
+     * @private
+     */
+    private scheduleToolbarRoving;
+    /**
+     * Makes the control at {@link toolbarFocusIndex} the toolbar's only Tab
+     * stop. Left alone while the toolbar is disabled, every control then
+     * being out of the Tab order already.
+     * @private
+     */
+    private applyToolbarRoving;
+    /**
+     * Remembers the toolbar control receiving the focus, so Tab comes back
+     * to it.
+     *
+     * @param event the focus event.
+     * @private
+     */
+    private handleToolbarFocusIn;
+    /**
+     * Keyboard support of the toolbar, following the toolbar pattern :
+     * Left/Right move between its controls (wrapping), Home/End jump to the
+     * first and last, and Enter/Space pick an alignment. Listened to in the
+     * capture phase, ahead of the alignment group's own arrow handling.
+     * Up/Down are left to the alignment group, which selects the next
+     * alignment.
+     *
+     * @param event the keyboard event.
+     * @private
+     */
+    private readonly handleToolbarKeydown;
     /**
      * Renders the formatting toolbar, shown above the field itself (never
      * above the readonly display) when `formatting` is set.