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

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

@@ -14,6 +14,8 @@ import { css } from "lit";
  * [--check-card-border-width] - Set a custom border width
  * [--check-card-border-radius] - Set a custom border radius to the card
  * [--check-card-padding] - Set a custom padding inside the card
+ * [--check-card-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --check-card-padding is set
+ * [--check-card-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --check-card-padding is set
  * [--check-card-min-width] - Set a custom minimum width for the card
  * [--check-card-icon-color] - Set a custom color to the leading icon when not checked
  * [--check-card-icon-color-checked] - Set a custom color to the leading icon when checked
@@ -28,7 +30,10 @@ const base = css `
       --check-card-border-color,
       var(--eun-border-color, #dee0e7)
     );
-    --_background: var(--check-card-background, var(--eun-surface-color, #ffffff));
+    --_background: var(
+      --check-card-background,
+      var(--eun-surface-color, #ffffff)
+    );
     --_errorColor: var(
       --check-card-error-color,
       var(--eun-color-critical-100, #aa0014)
@@ -47,7 +52,11 @@ const base = css `
       var(--eun-color-primary-500, #3d6fff)
     );
     --_minWidth: var(--check-card-min-width, 180px);
-    --_padding: var(--check-card-padding, var(--eun-space-m, 16px));
+    --_padding: var(
+      --check-card-padding,
+      var(--check-card-padding-block, var(--eun-space-m, 16px))
+        var(--check-card-padding-inline, var(--eun-space-m, 16px))
+    );
     --_borderRadius: var(
       --check-card-border-radius,
       var(--eun-border-radius-m, 10px)
@@ -64,7 +73,7 @@ const base = css `
     );
     --_background: var(
       --check-card-background-checked,
-      var(--eun-color-primary-bg-hover, rgba(18, 123, 185, 0.08))
+      var(--eun-color-primary-alpha-10, rgba(18, 123, 185, 0.08))
     );
     --_iconColor: var(
       --check-card-icon-color-checked,
@@ -137,7 +146,7 @@ const base = css `
     border-radius: var(--eun-border-radius-s, 5px);
     background: var(--_indicatorBackground);
     color: var(--_indicatorIcon);
-    transition: all 0.15s ease;
+    transition: all var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
   }
 `;
 export const checkCardStyles = base;

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

@@ -29,13 +29,17 @@ declare const EunomiaCheckboxList_base: import("../../../utils/constructor.type.
  * @prop {boolean} [inline=false] - Whether the list's elements are displayed in a row
  * @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
+ * @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
  * @fires {ChangeEvent} eunchange - Fired whenever the group's selection changes
  * @cssprop [--checkbox-list-gap] - Sets the gap between the labels and the list
  * @cssprop [--checkbox-list-options-gap] - Sets the gap between the checkboxes in the list
  * @cssprop [--checkbox-list-error-color] - Sets the color of the list's error state
+ * @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-checkbox-list
  */
 export declare class EunomiaCheckboxList extends EunomiaCheckboxList_base {
@@ -47,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
@@ -91,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,10 +5,11 @@ 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 } from "../../../mixins/form.mixin.js";
+import { FormMixin, hasErrorDisplayChange, } from "../../../mixins/form.mixin.js";
 import { DisabledMixin } from "../../../mixins/disabled.mixin.js";
 import { ValidatorsMixin } from "../../../mixins/validators.mixin.js";
 import { ReadonlyMixin } from "../../../mixins/readonly.mixin.js";
@@ -78,18 +79,27 @@ const Base = DisabledMixin(ValidatorsMixin(LitElement));
  * @prop {boolean} [inline=false] - Whether the list's elements are displayed in a row
  * @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
+ * @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
  * @fires {ChangeEvent} eunchange - Fired whenever the group's selection changes
  * @cssprop [--checkbox-list-gap] - Sets the gap between the labels and the list
  * @cssprop [--checkbox-list-options-gap] - Sets the gap between the checkboxes in the list
  * @cssprop [--checkbox-list-error-color] - Sets the color of the list's error state
+ * @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-checkbox-list
  */
 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
@@ -127,7 +137,7 @@ let EunomiaCheckboxList = class EunomiaCheckboxList extends FormLabelMixin(Reado
      * Setter allowing to check every child whose value is in the given list.
      */
     set value(values) {
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             this.fields.forEach((field) => {
                 field.checked = values.includes(field.value);
             });
@@ -156,31 +166,42 @@ 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;
             });
         }
-        if (_changedProperties.has("valid") ||
-            _changedProperties.has("hideError")) {
+        if (hasErrorDisplayChange(_changedProperties)) {
+            const { showError } = this;
             this.fields.forEach((field) => {
-                field.valid = this.valid && !this.hideError;
+                field.valid = !showError;
+                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;
@@ -209,7 +230,7 @@ let EunomiaCheckboxList = class EunomiaCheckboxList extends FormLabelMixin(Reado
      */
     formResetCallback() {
         super.formResetCallback?.();
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             this.sendChangeEvent();
         });
     }
@@ -237,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

@@ -30,7 +30,9 @@ declare const EunomiaCheckboxMixinBase: Constructor<EunomiaCheckboxBase>;
  * @prop {boolean} [disabled=false] - Whether the checkbox is disabled
  * @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 error message 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 a selection is required
  * @prop {string} name - The name of the checkbox field
@@ -52,6 +54,8 @@ declare const EunomiaCheckboxMixinBase: Constructor<EunomiaCheckboxBase>;
  * @cssprop [--checkbox-border-color] - Sets the border color of the checkbox
  * @cssprop [--checkbox-border-radius] - Sets the corner radius of the box
  * @cssprop [--checkbox-focus-outline-color] - Sets the color of the focus outline used for keyboard navigation
+ * @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
  * @fires click - Fired when the checkbox is clicked, including while indeterminate
  * @fires {ChangeEvent} eunchange - Fired when the checkbox's checked state changes
  * @element eun-checkbox

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

@@ -33,7 +33,9 @@ const EunomiaCheckboxMixinBase = CheckMixin(ReadonlyMixin(FormMixin(DisabledMixi
  * @prop {boolean} [disabled=false] - Whether the checkbox is disabled
  * @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 error message 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 a selection is required
  * @prop {string} name - The name of the checkbox field
@@ -55,6 +57,8 @@ const EunomiaCheckboxMixinBase = CheckMixin(ReadonlyMixin(FormMixin(DisabledMixi
  * @cssprop [--checkbox-border-color] - Sets the border color of the checkbox
  * @cssprop [--checkbox-border-radius] - Sets the corner radius of the box
  * @cssprop [--checkbox-focus-outline-color] - Sets the color of the focus outline used for keyboard navigation
+ * @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
  * @fires click - Fired when the checkbox is clicked, including while indeterminate
  * @fires {ChangeEvent} eunchange - Fired when the checkbox's checked state changes
  * @element eun-checkbox
@@ -94,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

@@ -42,7 +42,7 @@ const base = css `
     );
     --_icon: transparent;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-font-size-s, 14px);
+    font-size: var(--field-label-font-size, var(--eun-font-size-s, 14px));
     display: inline-flex;
     align-items: center;
     outline: none;
@@ -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 {
@@ -167,7 +168,7 @@ const base = css `
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    transition: all 0.15s ease;
+    transition: all var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
     transform: translateY(calc((var(--_boxSize) + 2px - 1em) / 2));
     outline: 0px solid transparent;
     margin-block: -1px;

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
@@ -61,12 +62,14 @@ declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether a color is required
- * @prop {boolean} [hideError=false] - Whether the errors are hidden
+ * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
+ * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<Validators<string>>} 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
@@ -75,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
@@ -95,6 +98,8 @@ declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
  * @cssprop [--field-border-color-focus] - Sets the border color on focus
  * @cssprop [--field-border-radius] - Sets the corner radius of the field
  * @cssprop [--field-padding] - Sets the padding of the field
+ * @cssprop [--field-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --field-padding is set
+ * @cssprop [--field-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --field-padding is set
  * @cssprop [--field-text-color] - Sets the text color of the field
  * @cssprop [--field-placeholder-color] - Sets the color of the empty-value text
  * @cssprop [--field-icon-color] - Sets the color of the dropdown arrow
@@ -108,6 +113,9 @@ declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
  * @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-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
  */
 export declare class EunomiaColorPicker extends EunomiaColorPickerMixinBase {
@@ -131,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
@@ -156,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:
@@ -192,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
@@ -204,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
@@ -229,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
@@ -310,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.
      */
@@ -417,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
@@ -485,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
@@ -522,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}).