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

package/dist/components/form/textarea/textarea.js

@@ -21,6 +21,7 @@ import { findRichTextColor, formatRichText, getPlainTextLength, populateEditable
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { textareaStyles } from "./textarea.styles.js";
 import { pickValidity } from "../../../utils/validity.utils.js";
+import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the textarea component.
  */
@@ -467,7 +468,7 @@ function getActiveColorName(root, kind) {
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaTextareaMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))));
+const EunomiaTextareaMixinBase = LocalizableMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
 /**
  * A multi-line text field, sharing its label, hint, and error chrome and
  * theming with the input component. It grows and shrinks to fit its
@@ -496,13 +497,14 @@ const EunomiaTextareaMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMix
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether the field is required
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<import('../../../types/form-validators.type.js').Validators<string>>} validators - The list of validation rules applied to the field value
  * @prop {number} rows - The fixed number of visible rows. When omitted, the field automatically grows and shrinks its height to fit its content
  * @prop {boolean} [readonlyAvailable=false] - Whether the field can switch between a static display and an editable one
  * @attr {boolean} [readonly-available=false] - Whether the field can switch between a static display and an editable one
  * @prop {boolean} [formatting=false] - Switches the field to a rich text surface with a formatting toolbar above it, and, combined with readonlyAvailable, renders the static display as formatted rich text instead of raw source
- * @prop {string} [formatToolbarLabel='Text formatting'] - The accessible label of the bold, italic, and underline toggle group
+ * @prop {string} [formatToolbarLabel='Text formatting'] - The accessible label of the formatting toolbar
  * @prop {string} [formatBoldLabel='Bold'] - The accessible label of the bold toggle
  * @prop {string} [formatItalicLabel='Italic'] - The accessible label of the italic toggle
  * @prop {string} [formatUnderlineLabel='Underline'] - The accessible label of the underline toggle
@@ -517,9 +519,9 @@ const EunomiaTextareaMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMix
  * @prop {string} [autocomplete='off'] - The native autocomplete attribute forwarded to the field
  * @prop {number} minlength - The native minimum length constraint forwarded to the field
  * @prop {number} maxlength - The field's maximum length. Forwarded natively when not formatting, and enforced manually otherwise. Either way, a live character counter is shown under the field
- * @prop {string} [emptyValueLabel='No value set'] - Text displayed in place of the value when readonly and empty
- * @prop {string} [confirmLabel='Save'] - The label of the confirm button in edit mode
- * @prop {string} [cancelLabel='Cancel'] - The label of the cancel button in edit mode
+ * @prop {string} [emptyValueLabel] - Text displayed in place of the value when readonly and empty. Defaults to the localized string for the current locale (English: "No value set")
+ * @prop {string} [confirmLabel] - The label of the confirm button in edit mode. Defaults to the localized string for the current locale (English: "Save")
+ * @prop {string} [cancelLabel] - The label of the cancel button in edit mode. Defaults to the localized string for the current locale (English: "Cancel")
  * @fires {ChangeEvent} eunchange - Fired on every value change, including one applied through the formatting toolbar
  * @fires {CommitEvent} euncommit - Fired when an edit is confirmed in readonlyAvailable mode
  * @cssprop [--field-background] - Sets the background color of the field
@@ -555,7 +557,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
          */
         this.formatting = false;
         /**
-         * Accessible label of the Bold/Italic/Underline toggle group.
+         * Accessible label of the formatting toolbar.
          * @default Text formatting
          */
         this.formatToolbarLabel = "Text formatting";
@@ -625,21 +627,6 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
          * @default off
          */
         this.autocomplete = "off";
-        /**
-         * Text displayed in place of the value when readonly and empty.
-         * @default No value set
-         */
-        this.emptyValueLabel = "No value set";
-        /**
-         * Label of the confirm button in edit mode.
-         * @default Save
-         */
-        this.confirmLabel = "Save";
-        /**
-         * Label of the cancel button in edit mode.
-         * @default Cancel
-         */
-        this.cancelLabel = "Cancel";
         /**
          * Which color picker (text-color or highlight) is currently open, if any.
          * @private
@@ -692,18 +679,11 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
          */
         this.pendingCaretNode = null;
         /**
-         * Redirects focus to the native field whenever the host itself receives
-         * it. The host stays in the tab order (`DisabledMixin`) rather than
-         * being excluded via `tabindex="-1"` — for this form-associated
-         * component, that turned out to break Tab from reaching the field
-         * entirely, instead of just skipping the host. Redirecting keeps a
-         * single, real tab stop from the user's perspective without touching
-         * that tab order.
-         * @private
+         * Index, among {@link toolbarControls}, of the control holding the
+         * toolbar's single Tab stop.
+         * @internal
          */
-        this.handleHostFocus = () => {
-            this.fieldEl?.focus();
-        };
+        this.toolbarFocusIndex = 0;
         /**
          * Reads native HTML constraint validation from the underlying field
          * element (`required`, `minlength`, `maxlength`) when not `formatting` ;
@@ -914,6 +894,55 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
                 this.closeColorPicker();
             }
         };
+        /**
+         * Keyboard support of the toolbar, following the toolbar pattern :
+         * Left/Right move between its controls (wrapping), Home/End jump to the
+         * first and last, and Enter/Space pick an alignment. Listened to in the
+         * capture phase, ahead of the alignment group's own arrow handling.
+         * Up/Down are left to the alignment group, which selects the next
+         * alignment.
+         *
+         * @param event the keyboard event.
+         * @private
+         */
+        this.handleToolbarKeydown = {
+            handleEvent: (event) => {
+                const controls = this.toolbarControls().filter((control) => !control.hasAttribute("disabled"));
+                const current = controls.indexOf(event.target);
+                if (current === -1) {
+                    return;
+                }
+                const control = controls[current];
+                if ((event.key === "Enter" || event.key === " ") &&
+                    control.closest("#align-toolbar")) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    control.click();
+                    return;
+                }
+                let next;
+                switch (event.key) {
+                    case "ArrowRight":
+                        next = (current + 1) % controls.length;
+                        break;
+                    case "ArrowLeft":
+                        next = (current - 1 + controls.length) % controls.length;
+                        break;
+                    case "Home":
+                        next = 0;
+                        break;
+                    case "End":
+                        next = controls.length - 1;
+                        break;
+                    default:
+                        return;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                controls[next].focus();
+            },
+            capture: true,
+        };
     }
     /**
      * The default value applied on connection and form reset. Overrides the
@@ -932,15 +961,11 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         // @ts-expect-error — see comment above ; FormMixin's real setter exists.
         super.defaultValue = value;
     }
-    connectedCallback() {
-        super.connectedCallback?.();
-        this.addEventListener("focus", this.handleHostFocus);
-    }
     disconnectedCallback() {
-        this.removeEventListener("focus", this.handleHostFocus);
         document.removeEventListener("click", this.handleOutsideClick, {
             capture: true,
         });
+        clearTimeout(this.toolbarRovingTimer);
         super.disconnectedCallback?.();
     }
     /**
@@ -980,6 +1005,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
             }
             return;
         }
+        this.scheduleToolbarRoving();
         const shouldSync = ((changedProperties.has("editing") && this.editing) ||
             (changedProperties.has("formatting") && this.formatting) ||
             (changedProperties.has("value") &&
@@ -1013,6 +1039,14 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         }
         return { 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.
+     */
+    get hostTabStop() {
+        return false;
+    }
     /**
      * Returns the field element to focus/anchor on validation errors.
      *
@@ -1284,6 +1318,63 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         document.addEventListener("click", this.handleOutsideClick, {
             capture: true,
         });
+        void this.updateComplete.then(() => {
+            const swatches = this.colorSwatches();
+            (swatches.find((swatch) => swatch.ariaChecked === "true") ?? swatches[0])?.focus();
+        });
+    }
+    /**
+     * The swatches of the open color picker, in display order.
+     *
+     * @returns the swatch buttons, empty while no picker is open.
+     * @private
+     */
+    colorSwatches() {
+        return Array.from(this.shadowRoot?.querySelectorAll(".color-picker-panel .color-swatch") ?? []);
+    }
+    /**
+     * Keyboard support of the open color picker, following the menu pattern
+     * : arrows move between swatches (wrapping), Home/End jump to the first
+     * and last, Escape closes it, and Tab closes it before leaving it. Both
+     * return the focus to the picker's trigger.
+     *
+     * @param event the keyboard event.
+     * @private
+     */
+    handleColorPickerKeydown(event) {
+        const panel = event.currentTarget;
+        const trigger = panel.previousElementSibling;
+        if (event.key === "Escape" || event.key === "Tab") {
+            if (event.key === "Escape") {
+                event.preventDefault();
+            }
+            this.closeColorPicker();
+            trigger?.focus();
+            return;
+        }
+        const swatches = this.colorSwatches();
+        const current = swatches.indexOf(this.shadowRoot?.activeElement);
+        let next;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowDown":
+                next = (current + 1) % swatches.length;
+                break;
+            case "ArrowLeft":
+            case "ArrowUp":
+                next = (current - 1 + swatches.length) % swatches.length;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = swatches.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        swatches[next]?.focus();
     }
     /**
      * Closes whichever color picker is open, if any.
@@ -1329,6 +1420,56 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         this.closeColorPicker();
         void this.updateComplete.then(() => this.fieldEl?.focus());
     }
+    /**
+     * The toolbar's controls, in visual order : every format and alignment
+     * toggle, then both color picker triggers.
+     *
+     * @returns the controls, empty while the toolbar isn't rendered.
+     * @private
+     */
+    toolbarControls() {
+        return Array.from(this.shadowRoot?.querySelectorAll("#toolbar-groups eun-toggle-item, #toolbar-groups .color-picker-trigger") ?? []);
+    }
+    /**
+     * Applies the toolbar's roving `tabindex` once the toggle groups have
+     * applied their own (which they do after their items' updates), so the
+     * whole toolbar stays a single Tab stop.
+     * @private
+     */
+    scheduleToolbarRoving() {
+        clearTimeout(this.toolbarRovingTimer);
+        this.toolbarRovingTimer = setTimeout(() => this.applyToolbarRoving());
+    }
+    /**
+     * Makes the control at {@link toolbarFocusIndex} the toolbar's only Tab
+     * stop. Left alone while the toolbar is disabled, every control then
+     * being out of the Tab order already.
+     * @private
+     */
+    applyToolbarRoving() {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        const controls = this.toolbarControls();
+        const active = Math.min(this.toolbarFocusIndex, controls.length - 1);
+        controls.forEach((control, index) => {
+            control.setAttribute("tabindex", index === active ? "0" : "-1");
+        });
+    }
+    /**
+     * Remembers the toolbar control receiving the focus, so Tab comes back
+     * to it.
+     *
+     * @param event the focus event.
+     * @private
+     */
+    handleToolbarFocusIn(event) {
+        const index = this.toolbarControls().indexOf(event.target);
+        if (index !== -1 && index !== this.toolbarFocusIndex) {
+            this.toolbarFocusIndex = index;
+            this.applyToolbarRoving();
+        }
+    }
     /**
      * Renders the formatting toolbar, shown above the field itself (never
      * above the readonly display) when `formatting` is set.
@@ -1342,11 +1483,14 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         return html `
       <div
         id="toolbar-groups"
+        role="toolbar"
+        aria-label=${this.formatToolbarLabel}
         @mousedown=${(event) => event.preventDefault()}
+        @focusin=${this.handleToolbarFocusIn}
+        @keydown=${this.handleToolbarKeydown}
       >
         <eun-toggle-group
           id="toolbar"
-          aria-label=${this.formatToolbarLabel}
           ?disabled=${toolbarDisabled}
           @eunchange=${this.handleToolbarChange}
         >
@@ -1422,7 +1566,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         <button
           type="button"
           class="color-picker-trigger"
-          aria-haspopup="true"
+          aria-haspopup="menu"
           aria-expanded=${isOpen ? "true" : "false"}
           aria-label=${label}
           ?disabled=${toolbarDisabled}
@@ -1439,12 +1583,13 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
                 class="color-picker-panel"
                 role="menu"
                 aria-label=${label}
-                @keydown=${(event) => event.key === "Escape" && this.closeColorPicker()}
+                @keydown=${this.handleColorPickerKeydown}
               >
                 <button
                   type="button"
                   class="color-swatch clear"
                   role="menuitemradio"
+                  tabindex="-1"
                   aria-checked=${activeName === null ? "true" : "false"}
                   aria-label=${this.formatColorClearLabel}
                   @click=${() => this.selectColor(kind, null)}
@@ -1454,6 +1599,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
                       type="button"
                       class="color-swatch"
                       role="menuitemradio"
+                      tabindex="-1"
                       aria-checked=${activeName === color.name
                 ? "true"
                 : "false"}
@@ -1520,7 +1666,10 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
             ? formatRichText(this.value)
             : html `<span
               class=${classMap({ "plain-value": true, empty: !hasValue })}
-              >${hasValue ? this.value : this.emptyValueLabel}</span
+              >${hasValue
+                ? this.value
+                : (this.emptyValueLabel ??
+                    this.dictionary.common.noValue)}</span
             >`}
       </div>
     `;
@@ -1626,7 +1775,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
               rounded
               type="button"
               @click=${this.confirmEdit}
-              >${this.confirmLabel}</eun-button
+              >${this.confirmLabel ?? this.dictionary.common.save}</eun-button
             >
             <eun-button
               class="cancel"
@@ -1636,7 +1785,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
               rounded
               type="button"
               @click=${this.cancelEdit}
-              >${this.cancelLabel}</eun-button
+              >${this.cancelLabel ?? this.dictionary.common.cancel}</eun-button
             >
           </div>
         `)}

package/dist/components/form/time-picker/time-picker-columns.d.ts

@@ -35,8 +35,8 @@ export interface TimePickerColumnsProps {
     ariaLabelHour?: string;
     ariaLabelMinute?: string;
     ariaLabelPeriod?: string;
-    ariaLabelIncrement?: string;
-    ariaLabelDecrement?: string;
+    incrementLabel?: string;
+    decrementLabel?: string;
     onHourChange: (hour24: number) => void;
     onMinuteChange: (minute: number) => void;
     onPeriodChange: (period: Period) => void;

package/dist/components/form/time-picker/time-picker-columns.js

@@ -73,8 +73,8 @@ export function renderTimePickerColumns(props) {
         disabled,
         noAnimation,
         label: props.ariaLabelHour ?? "Hour",
-        ariaLabelIncrement: props.ariaLabelIncrement ?? "Increase hour",
-        ariaLabelDecrement: props.ariaLabelDecrement ?? "Decrease hour",
+        incrementLabel: props.incrementLabel ?? "Increase hour",
+        decrementLabel: props.decrementLabel ?? "Decrease hour",
         min: hourMin,
         max: hourMax,
         current: display.hour,
@@ -89,8 +89,8 @@ export function renderTimePickerColumns(props) {
         disabled,
         noAnimation,
         label: props.ariaLabelMinute ?? "Minute",
-        ariaLabelIncrement: props.ariaLabelIncrement ?? "Increase minute",
-        ariaLabelDecrement: props.ariaLabelDecrement ?? "Decrease minute",
+        incrementLabel: props.incrementLabel ?? "Increase minute",
+        decrementLabel: props.decrementLabel ?? "Decrease minute",
         min: 0,
         max: 59,
         current: minute,
@@ -106,8 +106,8 @@ export function renderTimePickerColumns(props) {
             disabled,
             noAnimation,
             label: props.ariaLabelPeriod ?? "AM/PM",
-            ariaLabelIncrement: props.ariaLabelIncrement ?? "Toggle AM/PM",
-            ariaLabelDecrement: props.ariaLabelDecrement ?? "Toggle AM/PM",
+            incrementLabel: props.incrementLabel ?? "Toggle AM/PM",
+            decrementLabel: props.decrementLabel ?? "Toggle AM/PM",
             min: 0,
             max: 1,
             current: period === "AM" ? 0 : 1,
@@ -164,7 +164,7 @@ function renderColumn(config) {
         type="button"
         class="tp-arrow tp-arrow-up"
         tabindex="-1"
-        aria-label=${config.ariaLabelIncrement}
+        aria-label=${config.incrementLabel}
         ?disabled=${disabled}
         @click=${() => onStep(1)}
       >
@@ -194,7 +194,7 @@ function renderColumn(config) {
         type="button"
         class="tp-arrow tp-arrow-down"
         tabindex="-1"
-        aria-label=${config.ariaLabelDecrement}
+        aria-label=${config.decrementLabel}
         ?disabled=${disabled}
         @click=${() => onStep(-1)}
       >

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

@@ -65,14 +65,15 @@ declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether the field is required
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<Validators<Date | null>>} validators - The list of custom validation rules applied to the value
  * @prop {string} [applyLabel='Apply'] - The label of the mobile modal's confirm button
  * @attr {string} [apply-label='Apply'] - The label of the mobile modal's confirm button
- * @prop {string} [cancelLabel='Cancel'] - The label of the mobile modal's cancel button
- * @attr {string} [cancel-label='Cancel'] - The label of the mobile modal's cancel button
- * @prop {string} [ariaLabelClock='Open clock'] - The accessible label of the trailing clock button
- * @attr {string} [aria-label-clock='Open clock'] - The accessible label of the trailing clock button
+ * @prop {string} [cancelLabel] - The label of the mobile modal's cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @attr {string} [cancel-label] - The label of the mobile modal's cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [clockLabel] - The accessible label of the trailing clock button. Defaults to the localized string for the current locale (English: "Open clock")
+ * @attr {string} [clock-label] - The accessible label of the trailing clock button. Defaults to the localized string for the current locale (English: "Open clock")
  * @prop {string} [hourPlaceholder='hh'] - The placeholder shown in the empty hour segment
  * @attr {string} [hour-placeholder='hh'] - The placeholder shown in the empty hour segment
  * @prop {string} [minutePlaceholder='mm'] - The placeholder shown in the empty minute segment
@@ -186,14 +187,14 @@ export declare class EunomiaTimePicker extends EunomiaTimePickerMixinBase {
     applyLabel: string;
     /**
      * Label of the mobile modal's cancel button.
-     * @default Cancel
+     * Falls back to the localized string for the current locale when unset.
      */
-    cancelLabel: string;
+    cancelLabel?: string;
     /**
      * Accessible label of the trailing clock button.
-     * @default Open clock
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelClock: string;
+    clockLabel?: string;
     /**
      * Placeholder shown in the empty hour segment.
      * @default hh
@@ -227,6 +228,15 @@ export declare class EunomiaTimePicker extends EunomiaTimePickerMixinBase {
      * @internal
      */
     private isOpen;
+    constructor();
+    /**
+     * Submits the owning form on Enter in one of the field's segments, as a
+     * native time input does, since the browser never does it from a
+     * shadow root. Left alone while the panel is open, and on keys a
+     * segment already handles, such as Enter toggling the AM/PM segment.
+     * @private
+     */
+    private readonly handleImplicitSubmission;
     /**
      * Whether the mobile modal is open.
      * @internal
@@ -327,6 +337,12 @@ export declare class EunomiaTimePicker extends EunomiaTimePickerMixinBase {
      * @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 first segment element to focus/anchor on validation errors.
      *