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

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

@@ -5,6 +5,12 @@ import { EunomiaIconName } from "../../content/icon/icon.type.js";
  * Tag name of the search component.
  */
 export declare const EunomiaSearchTagName = "eun-search";
+/**
+ * How the suggestions dropdown filters its options against the typed value.
+ * `contains` keeps the options whose label contains it, `none` shows every
+ * option as is, for results already filtered by a server.
+ */
+export type EunomiaSearchFilter = "contains" | "none";
 declare const EunomiaSearch_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/anchor-position.mixin.js").AnchorPositionMixinInterface> & typeof EunomiaInput;
 /**
  * An input field specialized for search: the native type is locked to
@@ -24,15 +30,20 @@ declare const EunomiaSearch_base: import("../../../utils/constructor.type.js").C
  *
  * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty. Applies to the real field, inline or inside the panel modal. The compact panel trigger button always shows the plain icon glyph, since it can't project the same slotted content a second time
  * @slot results - Content rendered below the field inside the panel, such as a result list. Only relevant when panel is set
+ * @slot trigger - Replaces the panel's built-in trigger button, for example with an icon button. A click on it opens the panel, and focus returns to it on close. Give it its own accessible name. Only relevant when panel is set
+ * @csspart trigger - The panel's built-in trigger button, shown while nothing is slotted in trigger
  * @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
  * @prop {string} [noResultsLabel='No results'] - Text displayed in the dropdown when no option matches, while suggestions is set
- * @fires {ChangeEvent} eunchange - Fired on every value change
+ * @prop {'contains' | 'none'} [filter='contains'] - How the suggestions are filtered against the typed value. Contains keeps the options whose label contains it, none shows every option as is, for results already filtered by a server
+ * @fires {ChangeEvent} eunchange - Fired on every value change, typed or picked from the suggestions
+ * @fires {SelectEvent} eunselect - Fired when a suggestion is picked, with the option's value as key
  * @cssprop [--field-listbox-max-height=260px] - Sets the maximum height of the suggestions dropdown, past which it scrolls. Shared with the select component
+ * @cssprop [--field-listbox-border-radius] - Sets the corner radius of the suggestions dropdown, independent of the field's own radius. Shared with the select component
  * @cssprop [--field-listbox-transition-duration=200ms] - Sets the duration of the suggestions dropdown's open and close transition. Shared with the select component
  * @cssprop [--field-match-color] - Sets the color of the matched search substring, highlighted while suggestions is set. Shared with the select component
  * @cssprop [--field-match-background] - Sets the background of the matched search substring, none by default. Shared with the select component
@@ -54,7 +65,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 +103,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
@@ -119,9 +131,10 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      * mechanic (`AnchorPositionMixin`, CSS Anchor Positioning with a JS
      * fallback) as `eun-select`'s own dropdown, sharing its CSS custom
      * properties (`--field-listbox-max-height`, `--field-match-*`, etc.).
-     * Picking a suggestion sets `value` to its label (not a separate stored
-     * id, unlike `eun-select` — see the Suggestions example in the docs for
-     * why). Ignored while `panel` is set — combining the two isn't supported.
+     * Picking a suggestion sets `value` to its label, then fires `eunselect`
+     * with the option's own `value` attribute, so two options sharing a label
+     * stay distinguishable. Ignored while `panel` is set — combining the two
+     * isn't supported.
      * @default false
      */
     suggestions: boolean;
@@ -131,6 +144,14 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      * @default No results
      */
     noResultsLabel: string;
+    /**
+     * How the suggestions are filtered against the typed value : `contains`
+     * keeps the options whose label contains it, `none` shows every option as
+     * is, for results a server already filtered, possibly on another field
+     * than the label.
+     * @default contains
+     */
+    filter: EunomiaSearchFilter;
     /**
      * Whether the suggestions dropdown is currently open.
      * @internal
@@ -155,6 +176,12 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      * @readonly
      */
     private readonly fieldWrapperEl?;
+    /**
+     * The `trigger` slot, rendered in place of the field while `panel` is set,
+     * with the built-in trigger button as its fallback content.
+     * @internal
+     */
+    private readonly triggerSlot?;
     /**
      * The collapsed trigger button rendered in place of the field while
      * `panel` is set.
@@ -190,6 +217,14 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      * @private
      */
     private static readonly FIELD_POINTER_DOWN_WINDOW_MS;
+    /**
+     * Re-renders the suggestions whenever the light DOM `option`/`optgroup`
+     * children change, since they aren't reactive properties : a consumer
+     * replacing them with a server's results would otherwise stay unseen until
+     * some unrelated property changed.
+     * @internal
+     */
+    private readonly optionsObserver;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**
@@ -200,13 +235,13 @@ 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
      * is a no-op — leaving focus stranded on the (invisible) host with
      * nowhere to land, e.g. on a Shift+Tab back onto it from just past the
-     * trigger.
+     * trigger. A trigger slotted in `trigger` takes its place.
      * @protected
      */
     protected focusTarget(): HTMLElement | undefined;
@@ -218,6 +253,12 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      * Closes the command-palette panel. No-op when `panel` isn't set.
      */
     closePanel(): void;
+    /**
+     * Opens the panel on a click anywhere in the `trigger` slot, its slotted
+     * content or the built-in button it falls back to, unless disabled.
+     * @private
+     */
+    private readonly handleTriggerClick;
     /**
      * Lifecycle hook called after the component's first render. Attaches the
      * suggestions dropdown's event listeners directly on the field element,
@@ -249,7 +290,7 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
     private get effectiveQuery();
     /**
      * Options filtered by {@link effectiveQuery}. Shows every option when the
-     * field is empty.
+     * field is empty, or when {@link filter} is `none`.
      * @internal
      */
     private get filteredOptions();
@@ -317,6 +358,19 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      * @private
      */
     private readonly handleSuggestionsFieldActivate;
+    /**
+     * Closes the dropdown once focus has left the component entirely, e.g.
+     * `Tab`-ing away, same as `eun-select`'s own `handleFocusOut` : the
+     * Popover API's light-dismiss only reacts to outside clicks, not to focus
+     * moving via the keyboard. `closeSuggestions` checks the popover itself
+     * rather than `isOpen`, which only follows the asynchronous `toggle`
+     * event. Checked a frame later, since the newly focused
+     * element hasn't received focus yet when `focusout` fires. Picking an
+     * option never gets here, its row cancels `mousedown` so the field keeps
+     * focus.
+     * @private
+     */
+    private readonly handleSuggestionsFocusOut;
     /**
      * Opens the dropdown and resets the highlight on every keystroke. Bound to
      * the field's native `input` event (rather than reacting to `value`
@@ -328,9 +382,9 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      */
     private readonly handleSuggestionsInput;
     /**
-     * Picks a suggestion : sets `value` to its label (see the class doc's
-     * `suggestions` entry for why not its `value` attribute), notifies
-     * consumers, and closes the dropdown.
+     * Picks a suggestion : sets `value` to its label, fires `eunchange` with
+     * it like a keystroke would, then `eunselect` with the option's own
+     * `value`, and closes the dropdown.
      *
      * @param option the chosen option.
      * @private
@@ -360,9 +414,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
@@ -495,7 +548,8 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
     private syncSuggestionsAria;
     /**
      * Renders the search component: the inherited inline field, or — when
-     * `panel` is set — a trigger button plus a `eun-modal[kind=search]`
+     * `panel` is set — a trigger (the `trigger` slot, falling back to a
+     * built-in button) plus a `eun-modal[kind=search]`
      * (flush, no padding, no close button) containing the real field (reused
      * via `renderField`, wrapped for its own full-width/no-border styling) and
      * a `results` slot.