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

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

@@ -0,0 +1,213 @@
+import { css } from "lit";
+/**
+ * Base style for rating.
+ *
+ * Custom css variables:
+ * [--rating-size] - Set a custom width/height for each icon
+ * [--rating-gap] - Set a custom space between two icons
+ * [--rating-color] - Set a custom color to the filled icons
+ * [--rating-empty-color] - Set a custom color to the empty icons
+ * [--rating-error-color] - Set a custom color to the error message, and to the empty icons while in error
+ * [--rating-hint-color] - Set a custom color to the hint message
+ * [--rating-focus-outline-color] - Set a custom color to the focus outline drawn around the focused icon and the clear button
+ */
+const base = css `
+  :host {
+    --_iconSize: var(--rating-size, 24px);
+    --_gap: var(--rating-gap, var(--eun-space-xs, 4px));
+    --_color: var(--rating-color, var(--eun-color-primary-500, #3d6fff));
+    --_emptyColor: var(
+      --rating-empty-color,
+      color-mix(
+        in srgb,
+        var(--eun-text-color, #071621) 55%,
+        var(--eun-surface-color, #ffffff)
+      )
+    );
+    --_errorColor: var(
+      --rating-error-color,
+      var(--eun-color-critical-100, #aa0014)
+    );
+    --_hintColor: var(--rating-hint-color, var(--eun-text-secondary, #484e61));
+    --_focusIndicator: var(
+      --rating-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
+    font-family: var(--eun-font-family, "Mulish", sans-serif);
+    font-size: var(--eun-font-size-s, 14px);
+    display: inline-block;
+    vertical-align: middle;
+    outline: none;
+  }
+
+  #wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--eun-space-xs, 4px);
+  }
+
+  #control {
+    display: flex;
+    align-items: center;
+    gap: var(--eun-space-s, 8px);
+  }
+
+  #items {
+    display: flex;
+    gap: var(--_gap);
+    cursor: pointer;
+  }
+
+  .item {
+    position: relative;
+    flex: none;
+    width: var(--_iconSize);
+    height: var(--_iconSize);
+  }
+
+  :host([display-only]) #items {
+    cursor: default;
+  }
+
+  .icon {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .icon eun-icon {
+    --icon-size: var(--_iconSize);
+    display: block;
+    width: var(--_iconSize);
+    height: var(--_iconSize);
+  }
+
+  .empty {
+    --icon-color: var(--_emptyColor);
+  }
+
+  .fill {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    overflow: hidden;
+    --icon-color: var(--_color);
+  }
+
+  .fill eun-icon {
+    flex: none;
+  }
+
+  input {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    appearance: none;
+    pointer-events: none;
+  }
+
+  input.half {
+    width: 50%;
+  }
+
+  input.end {
+    inset-inline-start: 50%;
+    width: 50%;
+  }
+
+  .focus-ring {
+    position: absolute;
+    inset: -3px;
+    border-radius: var(--eun-border-radius-s, 4px);
+    outline: 2px solid transparent;
+    pointer-events: none;
+    transition: outline-color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
+  }
+
+  .focus-ring.half {
+    inset-inline-end: 50%;
+  }
+
+  input:focus-visible + .focus-ring {
+    outline-color: var(--_focusIndicator);
+  }
+
+  #clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    min-height: 24px;
+    padding: 2px;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--eun-text-secondary, #484e61);
+    cursor: pointer;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    --icon-size: 18px;
+    transition:
+      background-color var(--eun-duration-s, 150ms)
+        var(--eun-easing-default, ease),
+      outline-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
+  }
+
+  #clear:hover {
+    background: var(--eun-content-hover, #9696961a);
+  }
+
+  #clear:active {
+    background: var(--eun-content-pressed, #e4e6e8);
+  }
+
+  #clear:focus-visible {
+    outline-color: var(--_focusIndicator);
+  }
+
+  #items[aria-invalid="true"] {
+    --_emptyColor: var(--_errorColor);
+  }
+
+  :host([aria-readonly="true"]) {
+    --_color: var(--eun-readonly-color, #666e8a);
+  }
+
+  :host([aria-readonly="true"]) #items {
+    cursor: default;
+  }
+
+  :host([aria-disabled="true"]) {
+    --_color: var(--eun-text-disabled-color, #8d93aa);
+    --_emptyColor: var(--eun-disabled-content, #c1c9d6);
+  }
+
+  :host([aria-disabled="true"]) #items {
+    cursor: not-allowed;
+  }
+
+  @media (forced-colors: active) {
+    .fill {
+      --icon-color: CanvasText;
+    }
+
+    .empty {
+      --icon-color: CanvasText;
+    }
+
+    input:focus-visible + .focus-ring,
+    #clear:focus-visible {
+      outline-color: Highlight;
+    }
+
+    :host([aria-disabled="true"]) .icon eun-icon {
+      --icon-color: GrayText;
+    }
+  }
+`;
+export const ratingStyles = base;

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

@@ -26,7 +26,7 @@ declare const EunomiaSearch_base: import("../../../utils/constructor.type.js").C
  * @slot results - Content rendered below the field inside the panel, such as a result list. Only relevant when panel is set
  * @prop {boolean} [shortcut=false] - Enables the Ctrl+K or Cmd+K global shortcut and its visual key hint badge
  * @prop {boolean} [panel=false] - Opens a modal command palette panel on shortcut or click instead of focusing inline
- * @prop {string} [ariaLabelPanel='Search'] - The accessible name of the panel's dialog, used when label isn't set
+ * @prop {string} [panelLabel] - The accessible name of the panel's dialog, used when label isn't set. Defaults to the localized string for the current locale (English: "Search")
  * @prop {boolean} [loading=false] - Whether a search request is currently in flight. Shows a spinning loading indicator in place of the clear button or shortcut hint on the inline field only. Ignored on the panel trigger and the panel's own field, which stay static, so reflect the loading state on the results slot instead
  * @prop {string} [loadingLabel='Loading…'] - The accessible label announced by the loading indicator while loading is set
  * @prop {boolean} [suggestions=false] - Opens a dropdown listbox showing light DOM option and optgroup children matching the typed value, highlighting the matched substring. Ignored while panel is set
@@ -54,7 +54,8 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
     /**
      * Always `"search"` — enforced in `willUpdate`, since `EunomiaInput` declares
      * `type` as a plain property (not an accessor), which TypeScript doesn't
-     * allow overriding as a getter/setter pair from a subclass.
+     * allow overriding as a getter/setter pair from a subclass. Never
+     * reflected, since it can't differ from its default.
      * @default search
      */
     type: EunomiaInputType;
@@ -91,9 +92,9 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      * Accessible name of the panel's dialog, used as `eun-modal`'s `aria-label`
      * since the panel renders no visible heading. Ignored when `label` is set
      * (used instead, since it already names the field itself).
-     * @default Search
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelPanel: string;
+    panelLabel?: string;
     /**
      * Indicates whether a search request is currently in flight. Shows a
      * spinning `eun-loader` in place of the clear button/shortcut hint on the
@@ -200,7 +201,7 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      */
     protected willUpdate(changedProperties: PropertyValues): void;
     /**
-     * Redirects the host's own focus (see `EunomiaInput.handleHostFocus`) to
+     * Sends a direct `focus()` call on the host to
      * the collapsed trigger button while `panel` is set, instead of the
      * inherited default (the native field) : that field lives inside the
      * still-closed modal at this point, and focusing hidden popover content
@@ -360,9 +361,8 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      */
     private readonly handleSuggestionsPopoverToggle;
     /**
-     * Renders the dropdown's option rows, inserting a non-interactive group
-     * heading whenever an option's `group` differs from the previous row's,
-     * and highlighting the matched substring — same rendering as
+     * Renders the dropdown's option rows, grouped under their `optgroup`
+     * label (see {@link renderListboxRows}), and highlighting the matched substring — same rendering as
      * `eun-select`'s own `renderOptionRows`, minus the `multiple` checkbox
      * (search has no multi-select concept) and the `selected` state now
      * meaning "exactly matches the current value" rather than "is the stored

package/dist/components/form/search/search.js

@@ -14,7 +14,7 @@ import { searchStyles } from "./search.styles.js";
 import { AnchorPositionMixin } from "../../../mixins/anchor-position.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { listboxStyles, listboxAnchorPositioningStyles, } from "../shared-styles/listbox.styles.js";
-import { parseListboxOptions, renderHighlightedLabel, } from "../../../utils/listbox-options.utils.js";
+import { parseListboxOptions, renderHighlightedLabel, renderListboxRows, } from "../../../utils/listbox-options.utils.js";
 import { isWebKit } from "../../../utils/browser.utils.js";
 import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
 /**
@@ -41,7 +41,7 @@ export const EunomiaSearchTagName = "eun-search";
  * @slot results - Content rendered below the field inside the panel, such as a result list. Only relevant when panel is set
  * @prop {boolean} [shortcut=false] - Enables the Ctrl+K or Cmd+K global shortcut and its visual key hint badge
  * @prop {boolean} [panel=false] - Opens a modal command palette panel on shortcut or click instead of focusing inline
- * @prop {string} [ariaLabelPanel='Search'] - The accessible name of the panel's dialog, used when label isn't set
+ * @prop {string} [panelLabel] - The accessible name of the panel's dialog, used when label isn't set. Defaults to the localized string for the current locale (English: "Search")
  * @prop {boolean} [loading=false] - Whether a search request is currently in flight. Shows a spinning loading indicator in place of the clear button or shortcut hint on the inline field only. Ignored on the panel trigger and the panel's own field, which stay static, so reflect the loading state on the results slot instead
  * @prop {string} [loadingLabel='Loading…'] - The accessible label announced by the loading indicator while loading is set
  * @prop {boolean} [suggestions=false] - Opens a dropdown listbox showing light DOM option and optgroup children matching the typed value, highlighting the matched substring. Ignored while panel is set
@@ -64,7 +64,8 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
         /**
          * Always `"search"` — enforced in `willUpdate`, since `EunomiaInput` declares
          * `type` as a plain property (not an accessor), which TypeScript doesn't
-         * allow overriding as a getter/setter pair from a subclass.
+         * allow overriding as a getter/setter pair from a subclass. Never
+         * reflected, since it can't differ from its default.
          * @default search
          */
         this.type = "search";
@@ -97,13 +98,6 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
          * @default false
          */
         this.panel = false;
-        /**
-         * Accessible name of the panel's dialog, used as `eun-modal`'s `aria-label`
-         * since the panel renders no visible heading. Ignored when `label` is set
-         * (used instead, since it already names the field itself).
-         * @default Search
-         */
-        this.ariaLabelPanel = "Search";
         /**
          * Indicates whether a search request is currently in flight. Shows a
          * spinning `eun-loader` in place of the clear button/shortcut hint on the
@@ -313,7 +307,7 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
         }
     }
     /**
-     * Redirects the host's own focus (see `EunomiaInput.handleHostFocus`) to
+     * Sends a direct `focus()` call on the host to
      * the collapsed trigger button while `panel` is set, instead of the
      * inherited default (the native field) : that field lives inside the
      * still-closed modal at this point, and focusing hidden popover content
@@ -520,9 +514,8 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
         this.closeSuggestions();
     }
     /**
-     * Renders the dropdown's option rows, inserting a non-interactive group
-     * heading whenever an option's `group` differs from the previous row's,
-     * and highlighting the matched substring — same rendering as
+     * Renders the dropdown's option rows, grouped under their `optgroup`
+     * label (see {@link renderListboxRows}), and highlighting the matched substring — same rendering as
      * `eun-select`'s own `renderOptionRows`, minus the `multiple` checkbox
      * (search has no multi-select concept) and the `selected` state now
      * meaning "exactly matches the current value" rather than "is the stored
@@ -533,40 +526,27 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
      * @private
      */
     renderSuggestionOptionRows(options) {
-        const rows = [];
         const query = this.effectiveQuery;
-        let lastGroup;
-        options.forEach((option, index) => {
-            if (option.group !== lastGroup) {
-                lastGroup = option.group;
-                if (option.group) {
-                    rows.push(html `<li class="group-label" role="presentation">
-              ${option.group}
-            </li>`);
-                }
-            }
-            rows.push(html `
+        return renderListboxRows(options, (option, index) => html `
         <li
           id="listbox-option-${index}"
           role="option"
           aria-selected=${option.label.toLowerCase() === query}
           class=${classMap({
-                highlighted: index === this.highlightedIndex,
-                selected: option.label.toLowerCase() === query,
-            })}
+            highlighted: index === this.highlightedIndex,
+            selected: option.label.toLowerCase() === query,
+        })}
           @mousedown=${(event) => {
-                event.preventDefault();
-                this.handleSelect(option);
-            }}
+            event.preventDefault();
+            this.handleSelect(option);
+        }}
           @mouseenter=${() => {
-                this.highlightedIndex = index;
-            }}
+            this.highlightedIndex = index;
+        }}
         >
           ${renderHighlightedLabel(option.label, query)}
         </li>
       `);
-        });
-        return rows;
     }
     /**
      * Renders the suggestions dropdown panel itself — only ever rendered
@@ -782,10 +762,12 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
             field.removeAttribute("role");
             field.removeAttribute("aria-expanded");
             field.removeAttribute("aria-controls");
+            field.removeAttribute("aria-autocomplete");
             field.removeAttribute("aria-activedescendant");
             return;
         }
         field.setAttribute("role", "combobox");
+        field.setAttribute("aria-autocomplete", "list");
         field.setAttribute("aria-expanded", this.isOpen ? "true" : "false");
         field.setAttribute("aria-controls", "listbox");
         if (this.highlightedIndex >= 0) {
@@ -835,7 +817,8 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
           kind="search"
           hide-actions
           .closeable=${false}
-          aria-label=${this.label || this.ariaLabelPanel}
+          aria-label=${this.label ||
+            (this.panelLabel ?? this.dictionary.search.panel)}
         >
           <div id="panel-field">
             ${this.renderField(description !== nothing)}
@@ -858,7 +841,6 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
 EunomiaSearch.styles = [
     EunomiaInput.styles,
     listboxStyles,
-    // Never shipped to WebKit — see listboxAnchorPositioningStyles's own doc.
     ...(isWebKit ? [] : [listboxAnchorPositioningStyles]),
     searchStyles,
 ];
@@ -869,7 +851,7 @@ EunomiaSearch.styles = [
  */
 EunomiaSearch.FIELD_POINTER_DOWN_WINDOW_MS = 100;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, converter: { toAttribute: () => null } })
 ], EunomiaSearch.prototype, "type", void 0);
 __decorate([
     property()
@@ -884,8 +866,8 @@ __decorate([
     property({ type: Boolean })
 ], EunomiaSearch.prototype, "panel", void 0);
 __decorate([
-    property({ attribute: "aria-label-panel" })
-], EunomiaSearch.prototype, "ariaLabelPanel", void 0);
+    property({ attribute: "panel-label" })
+], EunomiaSearch.prototype, "panelLabel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaSearch.prototype, "loading", void 0);

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

@@ -9,6 +9,7 @@ import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.
 import { AnchorPositionMixinInterface } from "../../../mixins/anchor-position.mixin.js";
 import { EunomiaIconName } from "../../content/icon/icon.type.js";
 import { Constructor } from "../../../utils/constructor.type.js";
+import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the select component.
  */
@@ -22,7 +23,7 @@ type SelectValue = string | string[];
  * Type of the select base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaSelectBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<SelectValue> & FormMixinInterface<SelectValue> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface;
+type EunomiaSelectBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<SelectValue> & FormMixinInterface<SelectValue> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
 /**
  * A field that picks one or more values from a list of option and optgroup
@@ -60,6 +61,7 @@ declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether a selection is required
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<Validators<string | string[]>>} validators - The list of validation rules applied to the field value
  * @prop {EunomiaIconName} icon - An optional leading icon
@@ -70,10 +72,10 @@ declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
  * @attr {string} [select-placeholder='Select…'] - The fallback for placeholder when searchable isn't set
  * @prop {boolean} [readonlyAvailable=false] - Whether the field can switch between a static display and an editable one
  * @attr {boolean} [readonly-available=false] - Whether the field can switch between a static display and an editable one
- * @prop {string} [emptyValueLabel='No value set'] - Text displayed in place of the value when readonly and empty
+ * @prop {string} [emptyValueLabel] - Text displayed in place of the value when readonly and empty. Defaults to the localized string for the current locale (English: "No value set")
  * @prop {string} [noResultsLabel='No results'] - Text displayed in the dropdown when no option matches the search
- * @prop {string} [confirmLabel='Confirm'] - The label of the confirm button, shown while editing in readonlyAvailable mode or while multiple and the dropdown is open. Set to an empty string to hide the button entirely
- * @attr {string} [confirm-label='Confirm'] - The label of the confirm button, shown while editing in readonlyAvailable mode or while multiple and the dropdown is open. Set to an empty string to hide the button entirely
+ * @prop {string} [confirmLabel] - The label of the confirm button, shown while editing in readonlyAvailable mode or while multiple and the dropdown is open. Set to an empty string to hide the button entirely. Defaults to the localized string for the current locale (English: "Confirm")
+ * @attr {string} [confirm-label] - The label of the confirm button, shown while editing in readonlyAvailable mode or while multiple and the dropdown is open. Set to an empty string to hide the button entirely. Defaults to the localized string for the current locale (English: "Confirm")
  * @prop {boolean} [noAnimation=false] - Disables the dropdown panel's open and close height transition, on top of the automatic reduced motion handling
  * @prop {boolean} [loading=false] - Whether options are currently being fetched. Shows a spinning loading indicator in place of the dropdown arrow, and a single disabled loading row instead of the option list. Has no effect while native, beyond the arrow swap
  * @prop {string} [loadingLabel='Loading…'] - The accessible label announced by the loading indicator while loading is set
@@ -119,6 +121,11 @@ export declare class EunomiaSelect extends EunomiaSelectMixinBase {
      * @readonly
      */
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Every change is a complete choice, so its error shows right away.
+     * @internal
+     */
+    errorOnChange: boolean;
     /**
      * The default value applied on connection and form reset. Overrides the
      * `defaultValue` accessor inherited from `FormMixin` only to drop its
@@ -215,9 +222,9 @@ export declare class EunomiaSelect extends EunomiaSelectMixinBase {
     selectPlaceholder: string;
     /**
      * Text displayed in place of the value when readonly and empty.
-     * @default No value set
+     * Falls back to the localized string for the current locale when unset.
      */
-    emptyValueLabel: string;
+    emptyValueLabel?: string;
     /**
      * Text displayed in the dropdown when no option matches the search.
      * @default No results
@@ -231,9 +238,9 @@ export declare class EunomiaSelect extends EunomiaSelectMixinBase {
      * Set to an empty string to hide the button entirely — e.g. for a
      * `readonlyAvailable` field where picking an option is already confirmation
      * enough on its own, and the extra button would just be clutter.
-     * @default Confirm
+     * Falls back to the localized string for the current locale when unset.
      */
-    confirmLabel: string;
+    confirmLabel?: string;
     /**
      * Indicates whether options are currently being fetched (e.g. a
      * server-filtered `searchable` field). Shows a spinning `eun-loader` in
@@ -483,6 +490,12 @@ export declare class EunomiaSelect extends EunomiaSelectMixinBase {
      * @param _changedProperties - Map of changed properties
      */
     protected updated(_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.
      *
@@ -707,8 +720,8 @@ export declare class EunomiaSelect extends EunomiaSelectMixinBase {
      */
     private renderHighlighted;
     /**
-     * Renders the dropdown's option rows, inserting a non-interactive group
-     * heading whenever an option's `group` differs from the previous row's.
+     * Renders the dropdown's option rows, grouped under their `optgroup`
+     * label (see {@link renderListboxRows}).
      *
      * @param options the options to render, already filtered.
      * @returns the rendered rows.