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

package/dist/components/form/select/select.js

@@ -16,13 +16,16 @@ import { FormMixin } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { EditableMixin, } from "../../../mixins/editable.mixin.js";
 import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixin, } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixin, } from "../../../mixins/field-size.mixin.js";
 import { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { selectStyles } from "./select.styles.js";
 import { isWebKit } from "../../../utils/browser.utils.js";
-import { parseListboxOptions, renderHighlightedLabel, } from "../../../utils/listbox-options.utils.js";
+import { parseListboxOptions, renderHighlightedLabel, renderListboxRows, } from "../../../utils/listbox-options.utils.js";
 import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
+import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the select component.
  */
@@ -32,7 +35,7 @@ export const EunomiaSelectTagName = "eun-select";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
+const EunomiaSelectMixinBase = LocalizableMixin(AnchorPositionMixin(RoundedMixin(FieldSizeMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))))))));
 /**
  * A field that picks one or more values from a list of option and optgroup
  * children. Set searchable to let the field also filter that list as the
@@ -59,6 +62,8 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabe
  * @prop {boolean} [native=false] - Renders the field as a real select, using the browser's own dropdown instead of the listbox panel. Takes priority over searchable and multiple, neither of which a native dropdown can support
  * @prop {boolean} [multiple=false] - Whether more than one option can be picked at once. Each option then renders a checkbox, and picking one toggles it without closing the dropdown, so value becomes an array of every picked option's value. Ignored while native is set
  * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
+ * @prop {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The field size. A field and a button of the same size share the same height
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} name - The field name
@@ -69,6 +74,7 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabe
  * @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
@@ -79,10 +85,10 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabe
  * @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
@@ -111,10 +117,12 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabe
  * @cssprop [--field-confirm-link-color] - Sets the color of the confirm slot's link, while editing in readonlyAvailable mode
  * @cssprop [--field-confirm-link-color-hover] - Sets the hover color of the confirm slot's link
  * @cssprop [--field-listbox-max-height=260px] - Sets the maximum height of the dropdown panel, past which it scrolls
+ * @cssprop [--field-listbox-border-radius] - Sets the corner radius of the dropdown panel, independent of the field's own radius
  * @cssprop [--field-listbox-transition-duration=200ms] - Sets the duration of the dropdown panel's open and close height transition, disabled entirely by the no-animation attribute or reduced motion settings
  * @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. Set on the root or an ancestor rather than on the field itself
  * @cssprop [--eun-viewport-inset-bottom] - The same as eun-viewport-inset-top, reserved at the bottom of the viewport, such as for a sticky footer
  * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-select
@@ -122,6 +130,11 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabe
 let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectMixinBase {
     constructor() {
         super(...arguments);
+        /**
+         * Every change is a complete choice, so its error shows right away.
+         * @internal
+         */
+        this.errorOnChange = true;
         /**
          * Indicates whether the field filters its options as the user types.
          * When false, the field is read-only and driven by Arrow keys, `Enter`,
@@ -165,27 +178,11 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
          * @default Select…
          */
         this.selectPlaceholder = "Select…";
-        /**
-         * Text displayed in place of the value when readonly and empty.
-         * @default No value set
-         */
-        this.emptyValueLabel = "No value set";
         /**
          * Text displayed in the dropdown when no option matches the search.
          * @default No results
          */
         this.noResultsLabel = "No results";
-        /**
-         * Label of the confirm button — shown while editing in `readonlyAvailable`
-         * mode, or while `multiple` and the dropdown is open (see the class doc).
-         * Slot content into `confirm` instead for anything richer than plain text
-         * (an icon, for instance) ; slotted content, when present, overrides this.
-         * 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
-         */
-        this.confirmLabel = "Confirm";
         /**
          * Indicates whether options are currently being fetched (e.g. a
          * server-filtered `searchable` field). Shows a spinning `eun-loader` in
@@ -515,7 +512,8 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
      * @internal
      */
     get hasConfirmContent() {
-        return this.hasConfirmSlot || !!this.confirmLabel;
+        return (this.hasConfirmSlot ||
+            !!(this.confirmLabel ?? this.dictionary.common.confirm));
     }
     /**
      * The normalised search query driving both filtering and highlighting.
@@ -608,9 +606,22 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
         }
         if (_changedProperties.has("readonly") ||
             _changedProperties.has("disabled")) {
-            this.setAttribute("tabindex", this.disabled || this.readonly ? "-1" : "0");
+            if (this.disabled || this.readonly) {
+                this.setAttribute("tabindex", "-1");
+            }
+            else {
+                this.removeAttribute("tabindex");
+            }
         }
     }
+    /**
+     * 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.
      *
@@ -929,6 +940,27 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
                 }
                 break;
             }
+            case " ": {
+                // Space opens the list, then picks the highlighted option, as in
+                // a select-only combobox, unless it continues a type-ahead search
+                // or is typed into the search text.
+                if (this.searchable || this.typeaheadBuffer) {
+                    if (!this.searchable) {
+                        this.handleTypeahead(event);
+                    }
+                    break;
+                }
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.openListbox();
+                    break;
+                }
+                const option = this.filteredOptions[this.highlightedIndex];
+                if (option) {
+                    this.handleSelect(option);
+                }
+                break;
+            }
             default:
                 if (!this.searchable) {
                     this.handleTypeahead(event);
@@ -988,27 +1020,17 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
         return renderHighlightedLabel(label, this.effectiveQuery);
     }
     /**
-     * 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.
      * @private
      */
     renderOptionRows(options) {
-        const rows = [];
-        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>`);
-                }
-            }
+        return renderListboxRows(options, (option, index) => {
             const selected = this.isSelected(option);
-            rows.push(html `
+            return html `
         <li
           id="listbox-option-${index}"
           role="option"
@@ -1034,9 +1056,8 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
                 ? this.renderHighlighted(option.label)
                 : option.label}
         </li>
-      `);
+      `;
         });
-        return rows;
     }
     /**
      * Whether the confirm trigger should render at all right now — while
@@ -1089,7 +1110,9 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
         }
         return html `
       <button type="button" id="confirm-link" @click=${this.handleConfirmClick}>
-        <slot name="confirm">${this.confirmLabel}</slot>
+        <slot name="confirm"
+          >${this.confirmLabel ?? this.dictionary.common.confirm}</slot
+        >
       </button>
     `;
     }
@@ -1112,7 +1135,8 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
       >
         <slot name="readonly-content">
           <span class=${classMap({ empty: !label })}
-            >${label || this.emptyValueLabel}</span
+            >${label ||
+            (this.emptyValueLabel ?? this.dictionary.common.noValue)}</span
           >
         </slot>
       </div>

package/dist/components/form/shared-styles/field.styles.js

@@ -16,7 +16,8 @@ import { css } from "lit";
  * [--field-icon-color] - Set a custom color to the leading icon and action buttons
  * [--field-error-color] - Set a custom color to the error state content
  * [--field-hint-color] - Set a custom color to the hint message
- * [--field-font-size] - Set a custom font size for the field's value and placeholder
+ * [--field-font-size] - Set a custom font size for the field's value and placeholder, for every size
+ * [--field-line-height] - Set a custom line height for the field's value and placeholder, for every size
  * [--field-label-font-size] - Set a custom font size for the label (see label.styles.ts)
  * [--field-message-font-size] - Set a custom font size for the hint, error and instructions (see form-labels.styles.ts)
  * [--field-focus-outline-color] - Set a custom color to the focus outline
@@ -43,22 +44,50 @@ const base = css `
       --field-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
     );
-    --_borderRadius: var(
-      --field-border-radius,
-      var(--eun-border-radius-m, 8px)
-    );
+    --_defaultBorderRadius: var(--eun-border-radius-m, 8px);
+    --_borderRadius: var(--field-border-radius, var(--_defaultBorderRadius));
+    --_defaultPaddingInline: var(--eun-space-s, 8px);
+    --_defaultPaddingBlock: var(--eun-space-s, 8px);
+    --_defaultFontSize: var(--eun-font-size-s, 14px);
+    --_defaultLineHeight: 1rem;
+    --_paddingBlock: var(--field-padding-block, var(--_defaultPaddingBlock));
     --_padding: var(
       --field-padding,
-      var(--field-padding-block, var(--eun-space-s, 8px))
-        var(--field-padding-inline, var(--eun-space-s, 8px))
+      var(--_paddingBlock)
+        var(--field-padding-inline, var(--_defaultPaddingInline))
     );
+    --_lineHeight: var(--field-line-height, var(--_defaultLineHeight));
     --_shadow: var(--field-shadow, none);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--field-font-size, var(--eun-font-size-s, 14px));
+    font-size: var(--field-font-size, var(--_defaultFontSize));
     display: block;
     width: 100%;
     outline: none;
   }
+  :host([rounded]) {
+    --_defaultBorderRadius: var(--eun-border-radius-xl, 999px);
+    --_defaultPaddingInline: var(--eun-space-m, 16px);
+  }
+  :host([size="xs"]) {
+    --_defaultFontSize: var(--eun-font-size-xs, 10px);
+    --_defaultPaddingBlock: var(--eun-space-xxs, 1.6px);
+    --_defaultLineHeight: 10px;
+  }
+  :host([size="s"]) {
+    --_defaultFontSize: var(--eun-font-size-xs, 10px);
+    --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) / 2);
+    --_defaultLineHeight: 10px;
+  }
+  :host([size="l"]) {
+    --_defaultFontSize: var(--eun-font-size-m, 16px);
+    --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) * 1.25);
+    --_defaultLineHeight: 1.1rem;
+  }
+  :host([size="xl"]) {
+    --_defaultFontSize: var(--eun-font-size-l, 1.3rem);
+    --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) * 1.5);
+    --_defaultLineHeight: 1.3rem;
+  }
   #wrapper {
     display: flex;
     flex-direction: column;
@@ -77,6 +106,7 @@ const base = css `
     border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
     padding: var(--_padding);
+    line-height: var(--_lineHeight);
     outline: 1px solid transparent;
     box-shadow: var(--_shadow);
     box-sizing: border-box;
@@ -85,6 +115,12 @@ const base = css `
       outline-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
     appearance: none;
   }
+  input#field,
+  button#field {
+    box-sizing: content-box;
+    min-width: 0;
+    height: var(--_lineHeight);
+  }
   #field::placeholder {
     color: var(--_placeholderColor);
   }
@@ -181,6 +217,7 @@ const base = css `
   }
   #readonly-display {
     padding: var(--_padding);
+    line-height: var(--_lineHeight);
     border: var(--eun-border-width-m, 1.5px) solid transparent;
     border-radius: var(--_borderRadius);
     box-sizing: border-box;

package/dist/components/form/shared-styles/listbox.styles.js

@@ -18,6 +18,7 @@ import { css } from "lit";
  *
  * Custom css variables:
  * [--field-listbox-max-height=260px] - Set a custom maximum height for the dropdown panel, past which it scrolls
+ * [--field-listbox-border-radius] - Set a custom corner radius for the dropdown panel, independent of --field-border-radius
  * [--field-listbox-transition-duration=200ms] - Set a custom duration for the dropdown panel's open/close animation (played in JS — see each consumer's own `playListboxOpenAnimation`/`playListboxCloseAnimation`), disabled entirely by the `no-animation` attribute (`eun-select` only) or `prefers-reduced-motion: reduce`
  * [--field-match-color] - Set a custom color for the matched search substring, highlighted with `<mark>`
  * [--field-match-background] - Set a custom background for the matched search substring, none by default
@@ -43,7 +44,10 @@ const listbox = css `
     color: var(--_textColor);
     background: var(--eun-surface-color, #ffffff);
     border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
-    border-radius: var(--_borderRadius);
+    border-radius: var(
+      --field-listbox-border-radius,
+      var(--eun-border-radius-m, 8px)
+    );
     box-shadow: var(
       --eun-shadow-m,
       0 10px 15px -3px rgba(0, 0, 0, 0.1),
@@ -89,7 +93,17 @@ const listbox = css `
     text-align: center;
     color: var(--_placeholderColor);
   }
+  #listbox li.option-group {
+    padding: 0;
+    cursor: default;
+  }
+  #listbox .group-options {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
   #listbox .group-label {
+    padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
     cursor: default;
     padding-block-end: var(--eun-space-xxs, 1.6px);
     font-size: var(--eun-font-size-xs, 12px);

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

@@ -46,6 +46,7 @@ declare const EunomiaSliderMixinBase: Constructor<EunomiaSliderBase>;
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Present for API consistency with every other field, but inert here, since a slider's value can never be empty the way a text field's can
  * @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 {boolean} [hideTooltip=false] - Hides the floating value bubble that otherwise appears above the thumb while dragging or focused
@@ -178,14 +179,6 @@ export declare class EunomiaSlider extends EunomiaSliderMixinBase {
     private hasFocus;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /**
-     * Redirects focus to the native field whenever the host itself receives
-     * it — the same pattern `eun-counter`/`eun-input` use, so the host stays
-     * in the tab order (`DisabledMixin`) rather than excluded via
-     * `tabindex="-1"`, which would break Tab from reaching the field at all.
-     * @private
-     */
-    private readonly handleHostFocus;
     /**
      * The value a native `<input type="range">` with no `value` attribute
      * resolves to on its own.
@@ -243,6 +236,12 @@ export declare class EunomiaSlider extends EunomiaSliderMixinBase {
      * @private
      */
     private get tickValues();
+    /**
+     * 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.
      *

package/dist/components/form/slider/slider.js

@@ -58,6 +58,7 @@ const EunomiaSliderMixinBase = FormLabelMixin(ReadonlyMixin(FormMixin(Base)));
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Present for API consistency with every other field, but inert here, since a slider's value can never be empty the way a text field's can
  * @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 {boolean} [hideTooltip=false] - Hides the floating value bubble that otherwise appears above the thumb while dragging or focused
@@ -133,16 +134,6 @@ let EunomiaSlider = class EunomiaSlider extends EunomiaSliderMixinBase {
          * @internal
          */
         this.hasFocus = false;
-        /**
-         * Redirects focus to the native field whenever the host itself receives
-         * it — the same pattern `eun-counter`/`eun-input` use, so the host stays
-         * in the tab order (`DisabledMixin`) rather than excluded via
-         * `tabindex="-1"`, which would break Tab from reaching the field at all.
-         * @private
-         */
-        this.handleHostFocus = () => {
-            this.fieldEl?.focus();
-        };
         /**
          * Updates the value from dragging or a keyboard-driven native step, and
          * notifies consumers — fires on every native `input` event, so live and
@@ -256,10 +247,8 @@ let EunomiaSlider = class EunomiaSlider extends EunomiaSliderMixinBase {
     connectedCallback() {
         super.connectedCallback?.();
         this.value ??= this.clamp(this.defaultRangeValue);
-        this.addEventListener("focus", this.handleHostFocus);
     }
     disconnectedCallback() {
-        this.removeEventListener("focus", this.handleHostFocus);
         window.removeEventListener("pointerup", this.handlePointerUp);
         window.removeEventListener("pointercancel", this.handlePointerUp);
         super.disconnectedCallback?.();
@@ -361,6 +350,14 @@ let EunomiaSlider = class EunomiaSlider extends EunomiaSliderMixinBase {
         values.push(this.max);
         return values;
     }
+    /**
+     * 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.
      *

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

@@ -39,6 +39,7 @@ declare const EunomiaSwitchMixinBase: Constructor<EunomiaSwitchBase>;
  * @prop {boolean} [hideIcon=false] - Whether the icon inside the thumb is hidden
  * @attr {boolean} [hide-icon=false] - Whether the icon inside the thumb 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 the switch must be turned on to be valid

package/dist/components/form/switch/switch.js

@@ -44,6 +44,7 @@ const EunomiaSwitchMixinBase = CheckMixin(ReadonlyMixin(FormMixin(DisabledMixin(
  * @prop {boolean} [hideIcon=false] - Whether the icon inside the thumb is hidden
  * @attr {boolean} [hide-icon=false] - Whether the icon inside the thumb 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 the switch must be turned on to be valid