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

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

@@ -8,6 +8,7 @@ import { EditableMixinInterface } from "../../../mixins/editable.mixin.js";
 import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
 import { AnchorPositionMixinInterface } from "../../../mixins/anchor-position.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
+import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the color picker component.
  */
@@ -17,7 +18,7 @@ export declare const EunomiaColorPickerTagName = "eun-color-picker";
  * interface elements.
  * @internal
  */
-type EunomiaColorPickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface;
+type EunomiaColorPickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
 /**
  * A field for picking a color, as a `#rrggbb` hex string. Declare preset
@@ -62,12 +63,13 @@ declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether a color 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>>} validators - The list of validation rules applied to the field value
  * @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 color selected'] - Text displayed in place of the value when empty
- * @attr {string} [empty-value-label='No color selected'] - Text displayed in place of the value when empty
+ * @prop {string} [emptyValueLabel] - Text displayed in place of the value when empty. Defaults to the localized string for the current locale (English: "No color selected")
+ * @attr {string} [empty-value-label] - Text displayed in place of the value when empty. Defaults to the localized string for the current locale (English: "No color selected")
  * @prop {string} [swatchesLabel='Presets'] - Heading shown above the preset swatches, while any are declared
  * @attr {string} [swatches-label='Presets'] - Heading shown above the preset swatches
  * @prop {string} [customLabel='Custom'] - Heading shown above the custom color row
@@ -76,10 +78,10 @@ declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
  * @attr {string} [native-input-label='Pick a custom color'] - Accessible label for the native OS color picker
  * @prop {string} [hexInputLabel='Hex color'] - Accessible label for the hex text input
  * @attr {string} [hex-input-label='Hex color'] - Accessible label for the hex text input
- * @prop {string} [confirmLabel='Confirm'] - The label of the confirm button in edit mode
- * @attr {string} [confirm-label='Confirm'] - The label of the confirm button in edit mode
- * @prop {string} [cancelLabel='Cancel'] - The label of the cancel button in edit mode
- * @attr {string} [cancel-label='Cancel'] - The label of the cancel button in edit mode
+ * @prop {string} [confirmLabel] - The label of the confirm button in edit mode. Defaults to the localized string for the current locale (English: "Confirm")
+ * @attr {string} [confirm-label] - The label of the confirm button in edit mode. Defaults to the localized string for the current locale (English: "Confirm")
+ * @prop {string} [cancelLabel] - The label of the cancel button in edit mode. Defaults to the localized string for the current locale (English: "Cancel")
+ * @attr {string} [cancel-label] - The label of the cancel button in edit mode. Defaults to the localized string for the current locale (English: "Cancel")
  * @prop {boolean} [noAnimation=false] - Disables the dropdown panel's open and close height transition, on top of the automatic reduced motion handling
  * @attr {boolean} [no-animation=false] - Disables the dropdown panel's open and close height transition
  * @prop {boolean} [swatchOnly=false] - Renders as a native input type="color" styled as a plain swatch, with no panel, no presets, and no hex input at all — only the browser/OS's own color picker. Presets declared as option children are ignored while this is set
@@ -137,9 +139,9 @@ export declare class EunomiaColorPicker extends EunomiaColorPickerMixinBase {
     set defaultValue(rawValue: string | undefined);
     /**
      * Text displayed in place of the value when empty.
-     * @default No color selected
+     * Falls back to the localized string for the current locale when unset.
      */
-    emptyValueLabel: string;
+    emptyValueLabel?: string;
     /**
      * Heading shown above the preset swatches, while any are declared.
      * @default Presets
@@ -162,14 +164,14 @@ export declare class EunomiaColorPicker extends EunomiaColorPickerMixinBase {
     hexInputLabel: string;
     /**
      * Label of the confirm button in edit mode.
-     * @default Confirm
+     * 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;
     /**
      * Disables the dropdown panel's open/close height transition, both set
      * explicitly and whenever the browser reports `prefers-reduced-motion:
@@ -198,7 +200,7 @@ export declare class EunomiaColorPicker extends EunomiaColorPickerMixinBase {
      * opposite trade-off from `swatchOnly`. The leading native color swatch
      * that normally sits before the trigger button is gone entirely (the
      * button itself shows a plain decorative swatch instead), and the panel
-     * drops its hex input, leaving only the preset radiogroup : nothing
+     * drops its hex input, leaving only the preset listbox : nothing
      * outside the curated palette is reachable at all, not even by typing a
      * hex value. Has no effect without at least one `option` declared —
      * with none, {@link renderInlineCustomField} already offers nothing but
@@ -210,7 +212,7 @@ export declare class EunomiaColorPicker extends EunomiaColorPickerMixinBase {
     presetsOnly: boolean;
     /**
      * Renders the declared `option` presets directly as the field itself,
-     * the exact swatch radiogroup {@link renderPresets} already renders
+     * the exact swatch listbox {@link renderPresets} already renders
      * inside the panel, just in place of a trigger button and a panel to
      * open. No native color swatch, no hex input, no button, no popover of
      * any kind, since there is nothing left for one to open. Takes priority
@@ -235,6 +237,13 @@ export declare class EunomiaColorPicker extends EunomiaColorPickerMixinBase {
      * @internal
      */
     private hexDraft;
+    /**
+     * The preset swatch last moved to with the keyboard, which holds the
+     * swatches' single tab stop ; `-1` until then, leaving it on the selected
+     * swatch (or the first one).
+     * @internal
+     */
+    private presetFocusIndex;
     /**
      * The field's trigger : a `<button>` opening the panel, or, while
      * {@link swatchOnly}, the native `<input type="color">` itself (no
@@ -316,6 +325,12 @@ export declare class EunomiaColorPicker extends EunomiaColorPickerMixinBase {
      * `eun-select` uses for its own search text vs. `value`.
      */
     protected willUpdate(_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.
      */
@@ -423,13 +438,11 @@ export declare class EunomiaColorPicker extends EunomiaColorPickerMixinBase {
     /**
      * Moves focus among preset swatches on Arrow/Home/End, without picking
      * anything : browsing the palette with the keyboard is deliberately
-     * non-destructive, since arrow keys are also how a screen reader user
-     * reviews the options before deciding on one. Picking only ever happens
-     * through an explicit activation instead, a click or an Enter/Space
-     * press, both already wired through the button's own native `click`
-     * handling. Every swatch is its own real Tab stop (see
-     * {@link renderSwatchRadiogroup}), so this is an alternative to Tab/
-     * Shift+Tab for moving between them, not the only way to reach one.
+     * non-destructive, as a listbox whose selection doesn't follow focus.
+     * Picking only ever happens through an explicit activation instead, a
+     * click or an Enter/Space press, both already wired through the button's
+     * own native `click` handling. The swatches share a single Tab stop,
+     * which follows the focus (see {@link renderSwatchListbox}).
      * @param event the native keyboard event.
      * @param index the index of the swatch that received the key press.
      * @private
@@ -491,28 +504,28 @@ export declare class EunomiaColorPicker extends EunomiaColorPickerMixinBase {
      */
     private renderReadonlyDisplay;
     /**
-     * Renders the preset swatch radiogroup, while any presets are declared.
+     * Renders the preset swatch listbox, while any presets are declared.
      * @param presets the parsed preset options.
      * @returns the rendered template.
      * @private
      */
     private renderPresets;
     /**
-     * Renders the preset swatch radiogroup itself, shared between
+     * Renders the preset swatch listbox itself, shared between
      * {@link renderPresets} (inside the panel, under its own "Presets"
      * heading) and {@link renderInlinePresetsField} (as the whole field,
      * with no heading of its own since the field's own label already names
      * it).
      * @param presets the preset options to render.
-     * @param ariaLabel the radiogroup's accessible name.
+     * @param ariaLabel the listbox's accessible name.
      * @param hasDescription whether a hint/error `#description` is being
      * rendered alongside the field, so it can be wired to `aria-describedby`
-     * directly on the radiogroup ; only relevant when it stands in for the
+     * directly on the listbox ; only relevant when it stands in for the
      * whole field on its own, see {@link renderInlinePresetsField}.
      * @returns the rendered template.
      * @private
      */
-    private renderSwatchRadiogroup;
+    private renderSwatchListbox;
     /**
      * Renders the panel's hex row : a plain hex text input, nothing else.
      * The native OS color picker never lives inside the panel — it's always
@@ -528,7 +541,7 @@ export declare class EunomiaColorPicker extends EunomiaColorPickerMixinBase {
     private renderHexRow;
     /**
      * Renders the declared `option` presets directly as the field itself,
-     * the same swatch radiogroup {@link renderPresets} renders inside the
+     * the same swatch listbox {@link renderPresets} renders inside the
      * panel, just in place of a trigger button and a panel to open at all.
      * Used whenever {@link presetsInline} is set and at least one preset is
      * declared (see {@link render}).

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

@@ -24,6 +24,7 @@ import { isWebKit } from "../../../utils/browser.utils.js";
 import { normalizeHexColor } from "../../../utils/color.utils.js";
 import { parseListboxOptions, } 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 color picker component.
  */
@@ -33,7 +34,7 @@ export const EunomiaColorPickerTagName = "eun-color-picker";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
+const EunomiaColorPickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))))));
 /**
  * A field for picking a color, as a `#rrggbb` hex string. Declare preset
  * swatches as light DOM `option` children, exactly like `eun-select` does
@@ -77,12 +78,13 @@ const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldAppearanceMixin(For
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether a color 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>>} validators - The list of validation rules applied to the field value
  * @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 color selected'] - Text displayed in place of the value when empty
- * @attr {string} [empty-value-label='No color selected'] - Text displayed in place of the value when empty
+ * @prop {string} [emptyValueLabel] - Text displayed in place of the value when empty. Defaults to the localized string for the current locale (English: "No color selected")
+ * @attr {string} [empty-value-label] - Text displayed in place of the value when empty. Defaults to the localized string for the current locale (English: "No color selected")
  * @prop {string} [swatchesLabel='Presets'] - Heading shown above the preset swatches, while any are declared
  * @attr {string} [swatches-label='Presets'] - Heading shown above the preset swatches
  * @prop {string} [customLabel='Custom'] - Heading shown above the custom color row
@@ -91,10 +93,10 @@ const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldAppearanceMixin(For
  * @attr {string} [native-input-label='Pick a custom color'] - Accessible label for the native OS color picker
  * @prop {string} [hexInputLabel='Hex color'] - Accessible label for the hex text input
  * @attr {string} [hex-input-label='Hex color'] - Accessible label for the hex text input
- * @prop {string} [confirmLabel='Confirm'] - The label of the confirm button in edit mode
- * @attr {string} [confirm-label='Confirm'] - The label of the confirm button in edit mode
- * @prop {string} [cancelLabel='Cancel'] - The label of the cancel button in edit mode
- * @attr {string} [cancel-label='Cancel'] - The label of the cancel button in edit mode
+ * @prop {string} [confirmLabel] - The label of the confirm button in edit mode. Defaults to the localized string for the current locale (English: "Confirm")
+ * @attr {string} [confirm-label] - The label of the confirm button in edit mode. Defaults to the localized string for the current locale (English: "Confirm")
+ * @prop {string} [cancelLabel] - The label of the cancel button in edit mode. Defaults to the localized string for the current locale (English: "Cancel")
+ * @attr {string} [cancel-label] - The label of the cancel button in edit mode. Defaults to the localized string for the current locale (English: "Cancel")
  * @prop {boolean} [noAnimation=false] - Disables the dropdown panel's open and close height transition, on top of the automatic reduced motion handling
  * @attr {boolean} [no-animation=false] - Disables the dropdown panel's open and close height transition
  * @prop {boolean} [swatchOnly=false] - Renders as a native input type="color" styled as a plain swatch, with no panel, no presets, and no hex input at all — only the browser/OS's own color picker. Presets declared as option children are ignored while this is set
@@ -134,11 +136,6 @@ const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldAppearanceMixin(For
 let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixinBase {
     constructor() {
         super(...arguments);
-        /**
-         * Text displayed in place of the value when empty.
-         * @default No color selected
-         */
-        this.emptyValueLabel = "No color selected";
         /**
          * Heading shown above the preset swatches, while any are declared.
          * @default Presets
@@ -159,16 +156,6 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
          * @default Hex color
          */
         this.hexInputLabel = "Hex color";
-        /**
-         * Label of the confirm button in edit mode.
-         * @default Confirm
-         */
-        this.confirmLabel = "Confirm";
-        /**
-         * Label of the cancel button in edit mode.
-         * @default Cancel
-         */
-        this.cancelLabel = "Cancel";
         /**
          * Disables the dropdown panel's open/close height transition, both set
          * explicitly and whenever the browser reports `prefers-reduced-motion:
@@ -197,7 +184,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
          * opposite trade-off from `swatchOnly`. The leading native color swatch
          * that normally sits before the trigger button is gone entirely (the
          * button itself shows a plain decorative swatch instead), and the panel
-         * drops its hex input, leaving only the preset radiogroup : nothing
+         * drops its hex input, leaving only the preset listbox : nothing
          * outside the curated palette is reachable at all, not even by typing a
          * hex value. Has no effect without at least one `option` declared —
          * with none, {@link renderInlineCustomField} already offers nothing but
@@ -209,7 +196,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
         this.presetsOnly = false;
         /**
          * Renders the declared `option` presets directly as the field itself,
-         * the exact swatch radiogroup {@link renderPresets} already renders
+         * the exact swatch listbox {@link renderPresets} already renders
          * inside the panel, just in place of a trigger button and a panel to
          * open. No native color swatch, no hex input, no button, no popover of
          * any kind, since there is nothing left for one to open. Takes priority
@@ -234,6 +221,13 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
          * @internal
          */
         this.hexDraft = "";
+        /**
+         * The preset swatch last moved to with the keyboard, which holds the
+         * swatches' single tab stop ; `-1` until then, leaving it on the selected
+         * swatch (or the first one).
+         * @internal
+         */
+        this.presetFocusIndex = -1;
         /**
          * Reacts to the dropdown panel's native `toggle` event : the single
          * source of truth for open/close state. The panel is `popover="auto"`,
@@ -382,7 +376,10 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
         if (this.ariaLabel) {
             return this.ariaLabel;
         }
-        return this.swatchOnly ? this.value || this.emptyValueLabel : undefined;
+        return this.swatchOnly
+            ? this.value ||
+                (this.emptyValueLabel ?? this.dictionary.colorPicker.noColor)
+            : undefined;
     }
     /**
      * Lifecycle hook called when the element is connected to the DOM.
@@ -413,6 +410,14 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
             this.hexDraft = this.value ?? "";
         }
     }
+    /**
+     * 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.
      */
@@ -549,6 +554,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
      * @private
      */
     handleSelect(value) {
+        this.presetFocusIndex = -1;
         this.value = value;
         this.hexDraft = value;
         this.dispatchEvent(new ChangeEvent(this.value));
@@ -557,13 +563,11 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
     /**
      * Moves focus among preset swatches on Arrow/Home/End, without picking
      * anything : browsing the palette with the keyboard is deliberately
-     * non-destructive, since arrow keys are also how a screen reader user
-     * reviews the options before deciding on one. Picking only ever happens
-     * through an explicit activation instead, a click or an Enter/Space
-     * press, both already wired through the button's own native `click`
-     * handling. Every swatch is its own real Tab stop (see
-     * {@link renderSwatchRadiogroup}), so this is an alternative to Tab/
-     * Shift+Tab for moving between them, not the only way to reach one.
+     * non-destructive, as a listbox whose selection doesn't follow focus.
+     * Picking only ever happens through an explicit activation instead, a
+     * click or an Enter/Space press, both already wired through the button's
+     * own native `click` handling. The swatches share a single Tab stop,
+     * which follows the focus (see {@link renderSwatchListbox}).
      * @param event the native keyboard event.
      * @param index the index of the swatch that received the key press.
      * @private
@@ -590,6 +594,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
                 return;
         }
         event.preventDefault();
+        this.presetFocusIndex = nextIndex;
         this.presetButtonEls[nextIndex]?.focus();
     }
     /**
@@ -650,7 +655,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
           rounded
           type="button"
           @click=${this.handleConfirmClick}
-          >${this.confirmLabel}</eun-button
+          >${this.confirmLabel ?? this.dictionary.common.confirm}</eun-button
         >
         <eun-button
           class="cancel"
@@ -659,7 +664,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
           rounded
           type="button"
           @click=${this.handleCancelClick}
-          >${this.cancelLabel}</eun-button
+          >${this.cancelLabel ?? this.dictionary.common.cancel}</eun-button
         >
       </div>
     `;
@@ -687,14 +692,16 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
             ? nothing
             : html `
               <span class=${classMap({ empty: !this.value })}
-                >${this.value || this.emptyValueLabel}</span
+                >${this.value ||
+                (this.emptyValueLabel ??
+                    this.dictionary.colorPicker.noColor)}</span
               >
             `}
       </div>
     `;
     }
     /**
-     * Renders the preset swatch radiogroup, while any presets are declared.
+     * Renders the preset swatch listbox, while any presets are declared.
      * @param presets the parsed preset options.
      * @returns the rendered template.
      * @private
@@ -703,43 +710,47 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
         return html `
       <div>
         <span id="swatches-label">${this.swatchesLabel}</span>
-        ${this.renderSwatchRadiogroup(presets, this.swatchesLabel, false)}
+        ${this.renderSwatchListbox(presets, this.swatchesLabel, false)}
       </div>
     `;
     }
     /**
-     * Renders the preset swatch radiogroup itself, shared between
+     * Renders the preset swatch listbox itself, shared between
      * {@link renderPresets} (inside the panel, under its own "Presets"
      * heading) and {@link renderInlinePresetsField} (as the whole field,
      * with no heading of its own since the field's own label already names
      * it).
      * @param presets the preset options to render.
-     * @param ariaLabel the radiogroup's accessible name.
+     * @param ariaLabel the listbox's accessible name.
      * @param hasDescription whether a hint/error `#description` is being
      * rendered alongside the field, so it can be wired to `aria-describedby`
-     * directly on the radiogroup ; only relevant when it stands in for the
+     * directly on the listbox ; only relevant when it stands in for the
      * whole field on its own, see {@link renderInlinePresetsField}.
      * @returns the rendered template.
      * @private
      */
-    renderSwatchRadiogroup(presets, ariaLabel, hasDescription) {
+    renderSwatchListbox(presets, ariaLabel, hasDescription) {
+        const selectedIndex = presets.findIndex((preset) => preset.value === this.value);
+        const tabStop = this.presetFocusIndex >= 0 && this.presetFocusIndex < presets.length
+            ? this.presetFocusIndex
+            : Math.max(selectedIndex, 0);
         return html `
       <div
         id="swatches"
-        role="radiogroup"
+        role="listbox"
         aria-label=${ifDefined(ariaLabel)}
         aria-describedby=${hasDescription ? "description" : nothing}
       >
         ${presets.map((preset, index) => {
-            const checked = this.value === preset.value;
+            const selected = index === selectedIndex;
             return html `
             <button
               type="button"
               class="swatch-button"
-              role="radio"
-              aria-checked=${checked ? "true" : "false"}
+              role="option"
+              aria-selected=${selected ? "true" : "false"}
               aria-label=${preset.label}
-              tabindex="0"
+              tabindex=${index === tabStop ? "0" : "-1"}
               style="--_optionColor: ${preset.value}"
               @click=${() => this.handleSelect(preset.value)}
               @keydown=${(event) => this.handlePresetKeydown(event, index)}
@@ -792,7 +803,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
     }
     /**
      * Renders the declared `option` presets directly as the field itself,
-     * the same swatch radiogroup {@link renderPresets} renders inside the
+     * the same swatch listbox {@link renderPresets} renders inside the
      * panel, just in place of a trigger button and a panel to open at all.
      * Used whenever {@link presetsInline} is set and at least one preset is
      * declared (see {@link render}).
@@ -804,7 +815,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
     renderInlinePresetsField(hasDescription) {
         return html `
       <div id="field-wrapper">
-        ${this.renderSwatchRadiogroup(this.presets, this.triggerAccessibleLabel, hasDescription)}
+        ${this.renderSwatchListbox(this.presets, this.triggerAccessibleLabel, hasDescription)}
       </div>
       ${this.readonlyAvailable ? this.renderEditActions() : nothing}
     `;
@@ -907,7 +918,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
         <button
           type="button"
           id="field"
-          aria-haspopup="true"
+          aria-haspopup="dialog"
           aria-expanded=${this.isOpen}
           aria-label=${ifDefined(this.triggerAccessibleLabel)}
           aria-describedby=${hasDescription ? "description" : nothing}
@@ -927,7 +938,8 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
               `
             : nothing}
           <span id="value-text" class=${classMap({ empty: !this.value })}>
-            ${this.value || this.emptyValueLabel}
+            ${this.value ||
+            (this.emptyValueLabel ?? this.dictionary.colorPicker.noColor)}
           </span>
           <span
             id="field-arrow"
@@ -940,6 +952,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
       ${this.readonlyAvailable ? this.renderEditActions() : nothing}
       <div
         id="listbox"
+        role="dialog"
         popover="auto"
         aria-label=${ifDefined(this.label)}
         @toggle=${this.handlePopoverToggle}
@@ -1083,6 +1096,9 @@ __decorate([
 __decorate([
     state()
 ], EunomiaColorPicker.prototype, "hexDraft", void 0);
+__decorate([
+    state()
+], EunomiaColorPicker.prototype, "presetFocusIndex", void 0);
 __decorate([
     query("#field")
 ], EunomiaColorPicker.prototype, "fieldEl", void 0);

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

@@ -105,7 +105,7 @@ const colorPicker = css `
       outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
       border var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
-  .swatch-button[aria-checked="true"] .swatch {
+  .swatch-button[aria-selected="true"] .swatch {
     border-color: var(--eun-color-primary-500, #3d6fff);
     border-width: calc(var(--eun-border-width-m, 1.5px) * 2);
   }

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

@@ -6,6 +6,7 @@ import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.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 counter component.
  */
@@ -14,7 +15,7 @@ export declare const EunomiaCounterTagName = "eun-counter";
  * Type of the counter base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaCounterBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<number> & FormMixinInterface<number> & FormLabelMixinInterface & FieldAppearanceMixinInterface;
+type EunomiaCounterBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<number> & FormMixinInterface<number> & FormLabelMixinInterface & FieldAppearanceMixinInterface & LocalizableMixinInterface;
 declare const EunomiaCounterMixinBase: Constructor<EunomiaCounterBase>;
 /**
  * A numeric field with increment and decrement buttons, built on a native
@@ -34,13 +35,14 @@ declare const EunomiaCounterMixinBase: Constructor<EunomiaCounterBase>;
  * @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
  * @attr {boolean} [hide-error=false] - Whether the errors are hidden
  * @prop {Array<import('../../../types/form-validators.type.js').Validators<number>>} validators - The list of validation rules applied to the field value
- * @prop {string} [ariaLabelIncrement='Increase value'] - The accessible label of the increment button
- * @attr {string} [aria-label-increment='Increase value'] - The accessible label of the increment button
- * @prop {string} [ariaLabelDecrement='Decrease value'] - The accessible label of the decrement button
- * @attr {string} [aria-label-decrement='Decrease value'] - The accessible label of the decrement button
+ * @prop {string} [incrementLabel] - The accessible label of the increment button. Defaults to the localized string for the current locale (English: "Increase value")
+ * @attr {string} [increment-label] - The accessible label of the increment button. Defaults to the localized string for the current locale (English: "Increase value")
+ * @prop {string} [decrementLabel] - The accessible label of the decrement button. Defaults to the localized string for the current locale (English: "Decrease value")
+ * @attr {string} [decrement-label] - The accessible label of the decrement button. Defaults to the localized string for the current locale (English: "Decrease value")
  * @fires {ChangeEvent} eunchange - Fired on every value change
  * @cssprop [--counter-background] - Sets the background color of the field
  * @cssprop [--counter-border-color] - Sets the border color of the field
@@ -81,14 +83,14 @@ export declare class EunomiaCounter extends EunomiaCounterMixinBase {
     step: number;
     /**
      * Accessible label of the increment button.
-     * @default Increase value
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelIncrement: string;
+    incrementLabel?: string;
     /**
      * Accessible label of the decrement button.
-     * @default Decrease value
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelDecrement: string;
+    decrementLabel?: string;
     /**
      * The current numeric value, `undefined` while empty (e.g. after the
      * field is cleared by the user). Overrides the `value` accessor
@@ -121,17 +123,13 @@ export declare class EunomiaCounter extends EunomiaCounterMixinBase {
      * @readonly
      */
     private readonly fieldEl?;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    /**
-     * Redirects focus to the native field whenever the host itself receives
-     * it. See `eun-input`'s identical pattern : the host stays in the tab
-     * order (`DisabledMixin`) rather than being excluded via `tabindex="-1"`,
-     * which broke Tab from reaching the field entirely for this
-     * form-associated component, instead of just skipping the host.
+    constructor();
+    /**
+     * Submits the owning form on Enter in the field, as a native number
+     * input does, since the browser never does it from a shadow root.
      * @private
      */
-    private handleHostFocus;
+    private readonly handleImplicitSubmission;
     /**
      * Reads native HTML constraint validation from the underlying field
      * element (`required`, `min`, `max`, `step`, `badInput`).
@@ -139,6 +137,12 @@ export declare class EunomiaCounter extends EunomiaCounterMixinBase {
      * @returns validity state and optional message.
      */
     checkLocalValidators: () => Validity;
+    /**
+     * 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.
      *