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

package/dist/components/content/tooltip/tooltip.js

@@ -12,6 +12,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
 import { clampToViewport } from "../../../utils/dropdown-menu.utils.js";
 import { isWebKit } from "../../../utils/browser.utils.js";
+import { resolveFocusTarget } from "../../../utils/focusable-elements.utils.js";
 import { formatRichText } from "../../../utils/rich-text.utils.js";
 import { tooltipHostStyles, tooltipPanelStyles, tooltipAnchorPositioningStyles, } from "./tooltip.styles.js";
 import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
@@ -874,28 +875,43 @@ let EunomiaTooltip = EunomiaTooltip_1 = class EunomiaTooltip extends EunomiaTool
         return this.readPixelVar("--tooltip-gap", 8);
     }
     /**
-     * Links the slotted anchor's `aria-describedby` to the panel, so a screen
-     * reader announces the tooltip's content as a description of the anchor.
-     * Idempotent — only ever applied once per anchor.
+     * Links the anchor's focusable element to the panel, so a screen reader
+     * announces the tooltip's content as a description of whatever actually
+     * holds focus. Idempotent — only ever applied once per anchor.
      *
-     * A plain `id`-string `aria-describedby` reference works correctly here :
-     * unlike an earlier version of this component (where the panel lived in
-     * `eun-tooltip`'s own shadow root, a different tree scope than the
-     * anchor's), the panel is now portaled into the anchor's own tree scope
-     * (see {@link ensurePortal}), so this is an entirely ordinary same-scope
-     * ARIA reference.
+     * The described element is resolved by `resolveFocusTarget` rather than
+     * being the slotted anchor itself : when the anchor is a component
+     * (`<eun-link slot="anchor"><a href>…</a></eun-link>`, an `eun-button`
+     * with `href`), focus lands on the slotted `<a>` or on a control inside
+     * the component's shadow root, and a description set on the host is
+     * never announced.
+     *
+     * When that element shares the panel's tree scope (the anchor itself, or
+     * its light DOM descendants, since the panel is portaled into the
+     * anchor's own scope, see {@link ensurePortal}), a plain `id`-string
+     * `aria-describedby` is enough. A control inside the anchor's shadow root
+     * can't reference an id outside it, so it gets an element reference
+     * through `ariaDescribedByElements` instead.
      * @private
      */
     applyAriaDescribedBy() {
-        if (this.ariaDescribedByApplied || !this.anchorEl) {
+        if (this.ariaDescribedByApplied || !this.anchorEl || !this.panelEl) {
             return;
         }
         this.ariaDescribedByApplied = true;
-        const existing = this.anchorEl.getAttribute("aria-describedby");
+        const target = resolveFocusTarget(this.anchorEl);
+        if (target.getRootNode() !== this.portalRoot) {
+            const existing = target.ariaDescribedByElements ?? [];
+            if (!existing.includes(this.panelEl)) {
+                target.ariaDescribedByElements = [...existing, this.panelEl];
+            }
+            return;
+        }
+        const existing = target.getAttribute("aria-describedby");
         const ids = existing ? existing.split(/\s+/) : [];
         if (!ids.includes(this.panelId)) {
             ids.push(this.panelId);
-            this.anchorEl.setAttribute("aria-describedby", ids.join(" "));
+            target.setAttribute("aria-describedby", ids.join(" "));
         }
     }
     /**
@@ -1167,16 +1183,16 @@ __decorate([
     property({ reflect: true })
 ], EunomiaTooltip.prototype, "severity", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTooltip.prototype, "color", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTooltip.prototype, "appearance", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: "fixed-color" })
 ], EunomiaTooltip.prototype, "fixedColor", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTooltip.prototype, "placement", void 0);
 __decorate([
     property()

package/dist/components/content/tooltip/tooltip.styles.js

@@ -172,7 +172,7 @@ const panel = css `
     display: grid;
     row-gap: var(--tooltip-row-gap, var(--eun-space-xs, 4px));
     width: max-content;
-    min-width: var(--tooltip-min-width, 160px);
+    min-width: var(--tooltip-min-width, 0px);
     max-width: var(--tooltip-max-width, 280px);
     padding: var(
       --tooltip-padding,

package/dist/components/form/checkbox/check-card.d.ts

@@ -25,6 +25,7 @@ export declare const EunomiaCheckCardTagName = "eun-check-card";
  * @prop {boolean} [readonly=false] - Whether the card is read only
  * @prop {boolean} [indeterminate=false] - Whether the card value is indeterminate
  * @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 a selection is required

package/dist/components/form/checkbox/check-card.js

@@ -36,6 +36,7 @@ export const EunomiaCheckCardTagName = "eun-check-card";
  * @prop {boolean} [readonly=false] - Whether the card is read only
  * @prop {boolean} [indeterminate=false] - Whether the card value is indeterminate
  * @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 a selection is required

package/dist/components/form/checkbox/checkbox-list.d.ts

@@ -30,6 +30,7 @@ declare const EunomiaCheckboxList_base: import("../../../utils/constructor.type.
  * @prop {string[]} [defaultValue] - The default selected values
  * @attr {string} [default-value] - The default selected values, as a comma-separated string
  * @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<string[]>>} validators - A list of validation rules applied to the group's selected values
@@ -50,6 +51,11 @@ export declare class EunomiaCheckboxList extends EunomiaCheckboxList_base {
      * @readonly
      */
     static readonly styles: import("lit").CSSResult[];
+    /**
+     * Every change is a complete choice, so its error shows right away.
+     * @internal
+     */
+    errorOnChange: boolean;
     /**
      * Configuration options for the component Shadow DOM
      * @internal
@@ -94,6 +100,17 @@ export declare class EunomiaCheckboxList extends EunomiaCheckboxList_base {
      * Cleans up event listeners.
      */
     disconnectedCallback(): void;
+    /**
+     * Whether the group's own `disabled`/`readonly` changed in a way to pass
+     * on to every child : always once set, but not for the initial `false`,
+     * which would otherwise re-enable a child disabled on its own.
+     *
+     * @param changed - The changed properties of the update.
+     * @param name - The property to check.
+     * @returns true when the children should take the group's value.
+     * @private
+     */
+    private isGroupChange;
     /**
      * Lifecycle hook called whenever reactive properties change.
      * @param _changedProperties - Map of changed properties

package/dist/components/form/checkbox/checkbox-list.js

@@ -5,8 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, property, query } from "lit/decorators.js";
-import { html, LitElement } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { FormLabelMixin } from "../../../mixins/form-label.mixin.js";
 import { FormMixin, hasErrorDisplayChange, } from "../../../mixins/form.mixin.js";
 import { DisabledMixin } from "../../../mixins/disabled.mixin.js";
@@ -79,6 +80,7 @@ const Base = DisabledMixin(ValidatorsMixin(LitElement));
  * @prop {string[]} [defaultValue] - The default selected values
  * @attr {string} [default-value] - The default selected values, as a comma-separated string
  * @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<string[]>>} validators - A list of validation rules applied to the group's selected values
@@ -93,6 +95,11 @@ const Base = DisabledMixin(ValidatorsMixin(LitElement));
 let EunomiaCheckboxList = class EunomiaCheckboxList extends FormLabelMixin(ReadonlyMixin(FormMixin(Base))) {
     constructor() {
         super(...arguments);
+        /**
+         * Every change is a complete choice, so its error shows right away.
+         * @internal
+         */
+        this.errorOnChange = true;
         /**
          * Indicates whether the elements into the list should be displayed inline.
          * @default false
@@ -159,18 +166,31 @@ let EunomiaCheckboxList = class EunomiaCheckboxList extends FormLabelMixin(Reado
         this.optionsList?.removeEventListener("eunchange", this.handleChangeEvent);
         super.disconnectedCallback?.();
     }
+    /**
+     * Whether the group's own `disabled`/`readonly` changed in a way to pass
+     * on to every child : always once set, but not for the initial `false`,
+     * which would otherwise re-enable a child disabled on its own.
+     *
+     * @param changed - The changed properties of the update.
+     * @param name - The property to check.
+     * @returns true when the children should take the group's value.
+     * @private
+     */
+    isGroupChange(changed, name) {
+        return changed.has(name) && (this[name] || changed.get(name) !== undefined);
+    }
     /**
      * Lifecycle hook called whenever reactive properties change.
      * @param _changedProperties - Map of changed properties
      */
     updated(_changedProperties) {
         super.updated(_changedProperties);
-        if (_changedProperties.has("disabled")) {
+        if (this.isGroupChange(_changedProperties, "disabled")) {
             this.fields.forEach((field) => {
                 field.disabled = this.disabled;
             });
         }
-        if (_changedProperties.has("readonly")) {
+        if (this.isGroupChange(_changedProperties, "readonly")) {
             this.fields.forEach((field) => {
                 field.readonly = this.readonly;
             });
@@ -182,9 +202,6 @@ let EunomiaCheckboxList = class EunomiaCheckboxList extends FormLabelMixin(Reado
                 field.validationRequested = showError;
             });
         }
-        if (_changedProperties.has("label") && !this.hasAttribute("aria-label")) {
-            this.setAttribute("aria-label", `${this.label}. ${this.instructions ?? ""}`);
-        }
         if (_changedProperties.has("name")) {
             this.fields.forEach((field) => {
                 field.name = this.name;
@@ -241,22 +258,34 @@ let EunomiaCheckboxList = class EunomiaCheckboxList extends FormLabelMixin(Reado
      * @returns The rendered template
      */
     render() {
+        const description = this.renderDescription();
+        const describedBy = [
+            this.instructions ? "group-instructions" : "",
+            description === nothing ? "" : "description",
+        ]
+            .filter(Boolean)
+            .join(" ") || undefined;
         return html `
-      <fieldset id="fieldset">
+      <fieldset id="fieldset" role="presentation">
         <div id="legend">${this.renderFormLabels("options")}</div>
+        ${this.instructions
+            ? html `<span id="group-instructions" hidden
+              >${this.instructions}</span
+            >`
+            : nothing}
         <div
           id="options"
           part="options"
           role="group"
           class=${classMap({ inline: this.inline })}
           ?disabled=${this.disabled}
-          aria-labelledby="legend"
-          aria-describedby="messages"
+          aria-label=${ifDefined(this.label)}
+          aria-describedby=${ifDefined(describedBy)}
           aria-disabled=${this.disabled ? "true" : "false"}
         >
           <slot @slotchange=${this.handleSlotChange}></slot>
         </div>
-        ${this.renderDescription()}
+        ${description}
       </fieldset>
     `;
     }

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

@@ -31,6 +31,7 @@ declare const EunomiaCheckboxMixinBase: Constructor<EunomiaCheckboxBase>;
  * @prop {boolean} [readonly=false] - Whether the checkbox is read only
  * @prop {boolean} [indeterminate=false] - Whether the checkbox value is indeterminate
  * @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 a selection is required

package/dist/components/form/checkbox/checkbox.js

@@ -34,6 +34,7 @@ const EunomiaCheckboxMixinBase = CheckMixin(ReadonlyMixin(FormMixin(DisabledMixi
  * @prop {boolean} [readonly=false] - Whether the checkbox is read only
  * @prop {boolean} [indeterminate=false] - Whether the checkbox value is indeterminate
  * @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 a selection is required
@@ -97,7 +98,8 @@ let EunomiaCheckbox = class EunomiaCheckbox extends EunomiaCheckboxMixinBase {
      */
     updated(_changedProperties) {
         super.updated?.(_changedProperties);
-        if (_changedProperties.has("indeterminate")) {
+        if (_changedProperties.has("indeterminate") ||
+            _changedProperties.has("checked")) {
             this.setAttribute("aria-checked", !this.checked && this.indeterminate ? "mixed" : String(this.checked));
         }
         if (_changedProperties.has("label")) {

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

@@ -111,8 +111,9 @@ const base = css `
     --_focusIndicator: var(--_errorColor);
   }
 
-  :host([aria-disabled="true"][aria-checked="true"]) #checkbox-component {
-    --_icon: transparent;
+  :host([aria-disabled="true"][aria-checked="true"]) #checkbox-component,
+  :host([aria-disabled="true"][aria-checked="mixed"]) #checkbox-component {
+    --_icon: var(--eun-text-disabled-color, #8d93aa);
   }
 
   :host([aria-readonly="true"][aria-checked="true"]) #checkbox-component {

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

@@ -6,8 +6,11 @@ import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { EditableMixinInterface } from "../../../mixins/editable.mixin.js";
 import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixinInterface } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixinInterface } from "../../../mixins/field-size.mixin.js";
 import { AnchorPositionMixinInterface } from "../../../mixins/anchor-position.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
+import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the color picker component.
  */
@@ -17,7 +20,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 & RoundedMixinInterface & FieldSizeMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
 /**
  * A field for picking a color, as a `#rrggbb` hex string. Declare preset
@@ -55,6 +58,8 @@ declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
  * @prop {string} defaultValue - The default value applied when the field connects, and restored on form reset
  * @attr {string} [default-value] - The default value
  * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
+ * @prop {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The field size. A field and a button of the same size share the same height
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} name - The field name
@@ -62,12 +67,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 +82,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
@@ -107,11 +113,13 @@ declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
  * @cssprop [--field-edit-confirm-color] - Sets the color of the confirm button in readonly-available edit mode
  * @cssprop [--field-edit-cancel-color] - Sets the color of the cancel button in readonly-available edit mode
  * @cssprop [--field-listbox-max-height=260px] - Sets the maximum height of the dropdown panel, past which it scrolls
+ * @cssprop [--field-listbox-border-radius] - Sets the corner radius of the dropdown panel, independent of the field's own radius
  * @cssprop [--field-listbox-transition-duration=200ms] - Sets the duration of the dropdown panel's open and close animation
  * @cssprop [--color-picker-swatch-size=20px] - Sets the diameter of every swatch
  * @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
  * @cssprop [--eun-viewport-inset-bottom] - The same as eun-viewport-inset-top, reserved at the bottom of the viewport
  * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-color-picker
@@ -137,9 +145,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 +170,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 +206,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 +218,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 +243,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 +331,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 +444,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 +510,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 +547,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}).