@eunomia/elements 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/components/content/card/card.d.ts

@@ -36,7 +36,7 @@ declare const EunomiaCard_base: import("../../../utils/constructor.type.js").Con
  * @cssprop [--card-shadow] - Sets a box shadow for the default appearance, none by default. Replaced by a subtle elevation for the raised appearance, and unused by fill
  * @cssprop [--card-raised-hover-shadow] - Sets the box shadow on hover for the raised appearance
  * @cssprop [--card-hover-transform] - Sets a transform applied on hover or focus, for every appearance. Setting this always applies it, link or not. Left unset, a small lift only applies to linked cards, since a non-linked card gets the border, tint, or shadow change on hover but stays in place otherwise
- * @cssprop [--card-hover-border-color] - Sets the border color on hover or focus, for the default appearance only. Defaults to the primary color
+ * @cssprop [--card-hover-border-color] - Sets the border color on hover or focus, for every appearance, including fill and raised, whose border is otherwise transparent rather than absent, reserving the space so the color reveals with no layout shift. Defaults to the primary color
  * @cssprop [--card-hover-background] - Sets the background color on hover or focus, for the default appearance only, unchanged by default. See card-fill-hover-background for the fill appearance
  * @cssprop [--card-hover-duration] - Sets the duration of the hover transition
  * @cssprop [--card-transition] - Overrides the card's whole hover transition, for example to animate an extra property alongside the built-in ones. Defaults to transform, outline, box shadow, background color, and border color

package/dist/components/content/card/card.js

@@ -44,7 +44,7 @@ export const EunomiaCardTagName = "eun-card";
  * @cssprop [--card-shadow] - Sets a box shadow for the default appearance, none by default. Replaced by a subtle elevation for the raised appearance, and unused by fill
  * @cssprop [--card-raised-hover-shadow] - Sets the box shadow on hover for the raised appearance
  * @cssprop [--card-hover-transform] - Sets a transform applied on hover or focus, for every appearance. Setting this always applies it, link or not. Left unset, a small lift only applies to linked cards, since a non-linked card gets the border, tint, or shadow change on hover but stays in place otherwise
- * @cssprop [--card-hover-border-color] - Sets the border color on hover or focus, for the default appearance only. Defaults to the primary color
+ * @cssprop [--card-hover-border-color] - Sets the border color on hover or focus, for every appearance, including fill and raised, whose border is otherwise transparent rather than absent, reserving the space so the color reveals with no layout shift. Defaults to the primary color
  * @cssprop [--card-hover-background] - Sets the background color on hover or focus, for the default appearance only, unchanged by default. See card-fill-hover-background for the fill appearance
  * @cssprop [--card-hover-duration] - Sets the duration of the hover transition
  * @cssprop [--card-transition] - Overrides the card's whole hover transition, for example to animate an extra property alongside the built-in ones. Defaults to transform, outline, box shadow, background color, and border color

package/dist/components/content/card/card.styles.js

@@ -72,15 +72,23 @@ const base = css `
       --card-hover-background,
       var(--card-background, var(--eun-surface-color, #ffffff))
     );
-    border-color: var(
-      --card-hover-border-color,
-      var(--eun-color-primary-500, #3d6fff)
-    );
   }
 
   :host([appearance="fill"]) #card,
   :host([appearance="raised"]) #card {
-    border: none;
+    border-color: transparent;
+  }
+
+  :host([appearance="fill"]) #card:hover,
+  :host([appearance="fill"]) #card:focus-visible,
+  :host([appearance="raised"]) #card:hover,
+  :host([appearance="raised"]) #card:focus-visible,
+  #card:hover,
+  #card:focus-visible {
+    border-color: var(
+      --card-hover-border-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
   }
 
   :host([appearance="fill"]) #card {

package/dist/components/content/card/sliding-card.styles.js

@@ -38,10 +38,6 @@ const base = css `
     width: var(--sliding-card-width, 300px);
     height: var(--sliding-card-height, 280px);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    background: var(
-      --sliding-card-front-background,
-      var(--eun-surface-color, #ffffff)
-    );
     clip-path: inset(0 0 calc(-1 * var(--sliding-card-fade-height, 60px)) 0);
   }
 

package/dist/components/content/chip/chip.styles.js

@@ -66,15 +66,15 @@ const base = css `
   :host([color="light"]:not([severity])) {
     --_background: var(
       --chip-background-color,
-      var(--eun-color-grey-100, #f7f8fa)
+      var(--eun-color-grey-0, #ffffff)
     );
     --_backgroundFilled: var(
       --chip-background-color,
-      var(--eun-color-grey-100, #f7f8fa)
+      var(--eun-color-grey-0, #ffffff)
     );
     --_border-color: var(
       --chip-border-color,
-      var(--eun-color-grey-100, #f7f8fa)
+      var(--eun-color-grey-0, #ffffff)
     );
     --_color: var(--chip-color, var(--eun-color-grey-600, #666e8a));
   }
@@ -84,15 +84,12 @@ const base = css `
   :host([color="medium"]:not([severity])) {
     --_background: var(
       --chip-background-color,
-      var(--eun-color-grey-200, #ecedf0)
-    );
-    --_backgroundFilled: var(
-      --chip-background-color,
-      var(--eun-color-grey-500, #8d93aa)
+      color-mix(in srgb, var(--eun-color-grey-700, #484e61) 20%, transparent)
     );
+    --_backgroundFilled: var(--_background);
     --_border-color: var(
       --chip-border-color,
-      var(--eun-color-grey-300, #dee0e7)
+      var(--eun-color-grey-700, #484e61)
     );
     --_color: var(--chip-color, var(--eun-color-grey-900, #000000));
   }

package/dist/components/content/collapse/collapse.styles.js

@@ -186,13 +186,6 @@ export const collapseStyles = css `
   #rich-text :last-child {
     margin-block-end: 0;
   }
-  #rich-text p {
-    margin-block: var(--eun-space-xs, 4px) 0;
-  }
-  #rich-text ul {
-    margin-block: var(--eun-space-xs, 4px) 0;
-    padding-inline-start: var(--eun-space-m, 16px);
-  }
   #rich-text a {
     color: var(--_richTextLinkColor);
   }

package/dist/components/content/icon/icon.d.ts

@@ -4,6 +4,18 @@ import { EunomiaIconName, EunomiaIconType } from "./icon.type.js";
  * Tag name of the icon component.
  */
 export declare const EunomiaIconTagName = "eun-icon";
+/**
+ * Sets the URL the icon SVGs are served from, laid out as
+ * `<baseUrl>/<shape>/<name>.svg` (the `icons` folder shipped next to this
+ * component in the package). Needed when a bundler such as Turbopack
+ * rewrites `import.meta.url` to a `file:` URL, which can't be fetched from
+ * the browser. Copy or symlink that folder into your public assets, then
+ * call this once before any icon renders, e.g.
+ * `setIconBaseUrl("/eunomia-icons")`.
+ *
+ * @param url - Absolute or root-relative URL of the icons folder
+ */
+export declare function setIconBaseUrl(url: string): void;
 /**
  * An SVG-based icon that loads and renders dynamically based on its name.
  *
@@ -55,6 +67,26 @@ export declare class EunomiaIcon extends LitElement {
      * Gets the current size value set for the icon.
      */
     get size(): string | undefined;
+    /**
+     * Registers this icon so a later `setIconBaseUrl` call can reload it.
+     */
+    connectedCallback(): void;
+    /**
+     * Unregisters this icon, so a detached one isn't kept alive or reloaded.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Re-fetches the current icon, used when the icons' base URL changes
+     * after this icon already tried (and possibly failed) to load.
+     *
+     * @internal
+     */
+    reload(): void;
+    /**
+     * Loads the SVG whenever `name` or `shape` changes.
+     *
+     * @param _changedProperties - The properties changed by this update
+     */
     protected updated(_changedProperties: PropertyValues): void;
     /**
      * Dynamically imports the SVG markup for the given icon name
@@ -65,11 +97,22 @@ export declare class EunomiaIcon extends LitElement {
     private updateSvg;
     /**
      * Fetches the raw markup for a single icon file, co-located with this
-     * component (see `./icons/<shape>/<name>.svg`), resolved against
-     * `MODULE_URL` rather than `import.meta.url` directly — see that
-     * constant's doc comment for why. This still resolves correctly
-     * unbundled, straight off the filesystem/CDN, exactly like a direct
-     * `new URL(..., import.meta.url)` would.
+     * component (see `./icons/<shape>/<name>.svg`). Deliberately never
+     * passes a templated path straight to `new URL(...)` : Turbopack
+     * special-cases that exact call shape (a string with `${...}`
+     * interpolation as the first argument) for static asset resolution
+     * even when the base is routed through `MODULE_URL` rather than a bare
+     * `import.meta.url` literal — with ~5500 icon files across 2
+     * interpolated segments, it can't resolve the pattern and silently
+     * falls back to a single wrong file for every request instead of
+     * erroring. Building the URL from `MODULE_URL`'s own directory via
+     * plain string ops keeps every `new URL()` call single-argument and
+     * literal-free, so there's no templated call shape left for any
+     * bundler to intercept. This still resolves correctly unbundled,
+     * straight off the filesystem/CDN, exactly like the original
+     * `new URL(templatedPath, import.meta.url)` would have. A base set
+     * through `setIconBaseUrl` takes priority, and a bundler-rewritten
+     * `file:` module URL throws an explicit error instead of a CSP one.
      *
      * @param shape - Icon subfolder to fetch from
      * @param name - Icon file name, without extension

package/dist/components/content/icon/icon.js

@@ -30,20 +30,39 @@ export const EunomiaIconTagName = "eun-icon";
 const ICON_KEYWORD_REGEX = new RegExp(`_(outline|round|sharp)$`);
 /**
  * This module's own URL, captured once as a plain string rather than
- * read inline. Bundlers (Vite, webpack, Turbopack) special-case the
- * exact call shape `new URL(<literal>, import.meta.url)` to statically
- * resolve/copy the referenced asset. With two interpolated segments
- * (shape and name, see `fetchIconSvg`) across ~5500 icon files, that
- * static analysis has to fall back to a runtime lookup table keyed by
- * the computed path — mature under webpack, but buggy under Turbopack,
- * where every request resolves to the same wrong file regardless of
- * the name/shape asked for. Routing the base through this variable
- * keeps that call shape out of `fetchIconSvg` in every bundler, so the
- * lookup is a plain runtime `fetch` against a file already shipped,
- * byte-for-byte, at this path (see `scripts/copy-assets.mjs`) — the
- * same result, whether bundled or not.
+ * read inline, so `fetchIconSvg` never has to pass a templated path
+ * straight to `new URL(...)` — see that method's own doc comment for why
+ * that call shape is unsafe under Turbopack across ~5500 icon files.
+ * `import.meta.url` itself still needs reading somewhere, just not as
+ * part of a `new URL(<literal-with-interpolation>, ...)` call, which is
+ * the specific shape bundlers key their static asset resolution off of.
  */
 const MODULE_URL = import.meta.url;
+/**
+ * Base URL set through `setIconBaseUrl`, taking priority over the URL
+ * derived from `MODULE_URL` when defined.
+ */
+let iconBaseUrl;
+/**
+ * Icons currently in the DOM, so `setIconBaseUrl` can reload the ones
+ * that already tried to load before the base URL was set.
+ */
+const connectedIcons = new Set();
+/**
+ * Sets the URL the icon SVGs are served from, laid out as
+ * `<baseUrl>/<shape>/<name>.svg` (the `icons` folder shipped next to this
+ * component in the package). Needed when a bundler such as Turbopack
+ * rewrites `import.meta.url` to a `file:` URL, which can't be fetched from
+ * the browser. Copy or symlink that folder into your public assets, then
+ * call this once before any icon renders, e.g.
+ * `setIconBaseUrl("/eunomia-icons")`.
+ *
+ * @param url - Absolute or root-relative URL of the icons folder
+ */
+export function setIconBaseUrl(url) {
+    iconBaseUrl = url.endsWith("/") ? url.slice(0, -1) : url;
+    connectedIcons.forEach((icon) => icon.reload());
+}
 /**
  * An SVG-based icon that loads and renders dynamically based on its name.
  *
@@ -98,6 +117,34 @@ let EunomiaIcon = class EunomiaIcon extends LitElement {
     get size() {
         return __classPrivateFieldGet(this, _EunomiaIcon_size, "f");
     }
+    /**
+     * Registers this icon so a later `setIconBaseUrl` call can reload it.
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        connectedIcons.add(this);
+    }
+    /**
+     * Unregisters this icon, so a detached one isn't kept alive or reloaded.
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        connectedIcons.delete(this);
+    }
+    /**
+     * Re-fetches the current icon, used when the icons' base URL changes
+     * after this icon already tried (and possibly failed) to load.
+     *
+     * @internal
+     */
+    reload() {
+        this.updateSvg(this.name);
+    }
+    /**
+     * Loads the SVG whenever `name` or `shape` changes.
+     *
+     * @param _changedProperties - The properties changed by this update
+     */
     updated(_changedProperties) {
         if (_changedProperties.has("name") || _changedProperties.has("shape")) {
             this.updateSvg(this.name);
@@ -125,24 +172,49 @@ let EunomiaIcon = class EunomiaIcon extends LitElement {
             if (targetShape === "default") {
                 return;
             }
-            this.fetchIconSvg("default", baseName).then((svg) => {
+            this.fetchIconSvg("default", baseName)
+                .then((svg) => {
                 this.svgMarkup = svg;
-            });
+            })
+                .catch(() => undefined);
         });
     }
     /**
      * Fetches the raw markup for a single icon file, co-located with this
-     * component (see `./icons/<shape>/<name>.svg`), resolved against
-     * `MODULE_URL` rather than `import.meta.url` directly — see that
-     * constant's doc comment for why. This still resolves correctly
-     * unbundled, straight off the filesystem/CDN, exactly like a direct
-     * `new URL(..., import.meta.url)` would.
+     * component (see `./icons/<shape>/<name>.svg`). Deliberately never
+     * passes a templated path straight to `new URL(...)` : Turbopack
+     * special-cases that exact call shape (a string with `${...}`
+     * interpolation as the first argument) for static asset resolution
+     * even when the base is routed through `MODULE_URL` rather than a bare
+     * `import.meta.url` literal — with ~5500 icon files across 2
+     * interpolated segments, it can't resolve the pattern and silently
+     * falls back to a single wrong file for every request instead of
+     * erroring. Building the URL from `MODULE_URL`'s own directory via
+     * plain string ops keeps every `new URL()` call single-argument and
+     * literal-free, so there's no templated call shape left for any
+     * bundler to intercept. This still resolves correctly unbundled,
+     * straight off the filesystem/CDN, exactly like the original
+     * `new URL(templatedPath, import.meta.url)` would have. A base set
+     * through `setIconBaseUrl` takes priority, and a bundler-rewritten
+     * `file:` module URL throws an explicit error instead of a CSP one.
      *
      * @param shape - Icon subfolder to fetch from
      * @param name - Icon file name, without extension
      */
     async fetchIconSvg(shape, name) {
-        const url = new URL(`./icons/${shape}/${name}.svg`, MODULE_URL);
+        let url;
+        if (iconBaseUrl) {
+            url = `${iconBaseUrl}/${shape}/${name}.svg`;
+        }
+        else {
+            const moduleUrl = new URL(MODULE_URL);
+            if (moduleUrl.protocol === "file:") {
+                throw new Error("eun-icon can't locate its icons: the bundler rewrote import.meta.url to a file: URL. Serve the icons folder and call setIconBaseUrl().");
+            }
+            const moduleDir = moduleUrl.pathname.slice(0, moduleUrl.pathname.lastIndexOf("/"));
+            moduleUrl.pathname = `${moduleDir}/icons/${shape}/${name}.svg`;
+            url = moduleUrl.href;
+        }
         const response = await fetch(url);
         if (!response.ok) {
             throw new Error(`Icon not found: ${url}`);

package/dist/components/content/tag/tag.styles.js

@@ -34,18 +34,22 @@ const base = css `
     --_color: var(--eun-color-secondary-500, #e5a030);
   }
   :host([color="light"]:not([severity])) {
-    --_background: var(--eun-color-grey-100, #f7f8fa);
-    --_backgroundFilled: var(--eun-color-grey-100, #f7f8fa);
-    --_border-color: var(--eun-color-grey-100, #f7f8fa);
+    --_background: var(--eun-color-grey-0, #ffffff);
+    --_backgroundFilled: var(--eun-color-grey-0, #ffffff);
+    --_border-color: var(--eun-color-grey-0, #ffffff);
     --_color: var(--eun-color-grey-600, #666e8a);
   }
   :host([color="light"][appearance="outline"]:not([severity])) {
     --_color: var(--eun-color-grey-600, #666e8a);
   }
   :host([color="medium"]:not([severity])) {
-    --_background: var(--eun-color-grey-300, #dee0e7);
-    --_backgroundFilled: var(--eun-color-grey-500, #8d93aa);
-    --_border-color: var(--eun-color-grey-300, #dee0e7);
+    --_background: color-mix(
+      in srgb,
+      var(--eun-color-grey-700, #484e61) 20%,
+      transparent
+    );
+    --_backgroundFilled: var(--_background);
+    --_border-color: var(--eun-color-grey-700, #484e61);
     --_color: var(--eun-color-grey-900, #000000);
   }
   :host([color="dark"]:not([severity])) {

package/dist/components/content/tooltip/tooltip.styles.js

@@ -71,12 +71,12 @@ const panel = css `
   .eun-tooltip-panel:not([data-severity])[data-color="light"] {
     --_accent: var(--eun-color-grey-600, #666e8a);
     --_borderColor: var(--eun-color-grey-300, #dee0e7);
-    --_backgroundFilled: var(--eun-color-grey-100, #f7f8fa);
+    --_backgroundFilled: var(--eun-color-grey-0, #ffffff);
   }
   .eun-tooltip-panel:not([data-severity])[data-color="medium"] {
     --_accent: var(--eun-color-grey-900, #000000);
     --_borderColor: var(--eun-color-grey-300, #dee0e7);
-    --_backgroundFilled: var(--eun-color-grey-500, #8d93aa);
+    --_backgroundFilled: var(--eun-color-grey-700, #484e61);
   }
   .eun-tooltip-panel:not([data-severity])[data-color="dark"] {
     --_accent: var(--eun-color-grey-800, #071621);

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

@@ -219,7 +219,7 @@ let EunomiaCheckboxList = class EunomiaCheckboxList extends FormLabelMixin(Reado
      */
     sendChangeEvent() {
         this.checkValidity(this.value);
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
     }
     /**
      * Handler called when slot content changes.

package/dist/components/form/color-picker/color-picker.js

@@ -555,7 +555,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
     handleSelect(value) {
         this.value = value;
         this.hexDraft = value;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
         this.closeListbox();
     }
     /**
@@ -775,7 +775,9 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
           type="text"
           id="hex-input"
           aria-label=${this.hexInputLabel}
-          aria-invalid=${this.hexDraftInvalid ? "true" : "false"}
+          aria-invalid=${!this.hideError &&
+            !this.disabled &&
+            this.hexDraftInvalid}
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
           .value=${live(this.hexDraft)}
@@ -849,9 +851,9 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
             aria-label=${this.label || this.hexInputLabel}
             aria-describedby=${hasDescription ? "description" : nothing}
             aria-required=${this.required ? "true" : "false"}
-            aria-invalid=${this.hexDraftInvalid || !this.valid
-            ? "true"
-            : "false"}
+            aria-invalid=${!this.hideError &&
+            !this.disabled &&
+            (this.hexDraftInvalid || !this.valid)}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
             .value=${live(this.hexDraft)}
@@ -913,7 +915,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
           aria-describedby=${hasDescription ? "description" : nothing}
           ?disabled=${this.disabled}
           aria-required=${this.required ? "true" : "false"}
-          aria-invalid=${this.valid ? "false" : "true"}
+          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
           @click=${this.handleFieldActivate}
           @keydown=${this.handleFieldKeydown}
         >
@@ -986,7 +988,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
             aria-label=${ifDefined(this.triggerAccessibleLabel)}
             aria-describedby=${hasDescription ? "description" : nothing}
             ?disabled=${this.disabled || this.readonly}
-            aria-invalid=${this.valid ? "false" : "true"}
+            aria-invalid=${!this.hideError && !this.disabled && !this.valid}
             .value=${live(this.value || "#000000")}
             @input=${this.handleNativeInput}
           />

package/dist/components/form/counter/counter.js

@@ -213,7 +213,7 @@ let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
      */
     commitValue(next) {
         this.value = next;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
     }
     /**
      * Increments or decrements the value by `step`, clamped to `min`/`max`.
@@ -246,7 +246,7 @@ let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
         const parsed = raw === "" ? undefined : Number(raw);
         this.value =
             parsed === undefined || Number.isNaN(parsed) ? undefined : parsed;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
     }
     /**
      * Jumps to `min`/`max` on `Home`/`End`, the one bit of custom keyboard
@@ -313,7 +313,7 @@ let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
           max=${ifDefined(this.max)}
           step=${this.step}
           inputmode=${hasDecimalStep ? "decimal" : "numeric"}
-          aria-invalid=${this.valid ? "false" : "true"}
+          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
           aria-label=${ifDefined(this.label)}
           aria-describedby=${hasDescription ? "description" : nothing}
           @input=${this.handleInput}

package/dist/components/form/date-picker/date-picker.js

@@ -1225,7 +1225,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
                 end: dateToSegments(this.stagingRange.end),
             };
         }
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.mode === "single" ? this.value : this.rangeValue));
     }
     /**
      * Commits a directly-typed, complete value (bypassing staging entirely —
@@ -1250,7 +1250,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         else {
             this.rangeValue = { ...this.rangeValue, [target]: date };
         }
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(target === "value" ? this.value : this.rangeValue));
         if (this.isOpen || this.isModalOpen) {
             this.resetStaging();
         }
@@ -1301,7 +1301,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
      */
     commitTypedTime(hour24, minute) {
         this.value = setZonedTime(this.value ?? new Date(), this.timezone, hour24, minute);
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
         if (this.isOpen || this.isModalOpen) {
             this.resetStaging();
         }

package/dist/components/form/input/input.js

@@ -262,7 +262,7 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
      */
     handleInput(event) {
         this.value = event.target.value;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
     }
     /**
      * Clears the field value.
@@ -270,7 +270,7 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
      */
     handleClear() {
         this.value = "";
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
         this.fieldEl?.focus();
     }
     /**

package/dist/components/form/input-file/input-file.js

@@ -413,7 +413,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
         }
         if (accepted.length) {
             this.value = nextValue;
-            this.dispatchEvent(new ChangeEvent());
+            this.dispatchEvent(new ChangeEvent(this.value));
         }
         if (rejected.length) {
             this.dispatchEvent(new FileRejectEvent(rejected));
@@ -445,7 +445,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
         }
         const next = current.filter((candidate) => candidate !== file);
         this.value = next;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
         this.updateComplete.then(() => {
             if (!next.length) {
                 this.firstFocusable()?.focus();
@@ -462,7 +462,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
     removeAll() {
         this.selected = new Set();
         this.value = [];
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
         this.updateComplete.then(() => this.firstFocusable()?.focus());
     }
     /**
@@ -474,7 +474,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
         const next = current.filter((file) => !this.selected.has(file));
         this.selected = new Set();
         this.value = next;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
         this.updateComplete.then(() => this.firstFocusable()?.focus());
     }
     toggleSelected(file, checked) {
@@ -594,7 +594,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
           ?multiple=${this.multiple}
           ?disabled=${disabled}
           aria-label=${ifDefined(this.label)}
-          aria-invalid=${this.valid ? "false" : "true"}
+          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
           aria-describedby=${hasDescription ? "description" : nothing}
           @change=${this.handleNativeChange}
         />

package/dist/components/form/input-phone/input-phone.js

@@ -529,7 +529,7 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
             input.value = formatted;
         }
         this.value = toE164(this.country, cappedSignificantDigits);
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
     }
     /**
      * Updates the search query filtering the country dropdown.
@@ -561,7 +561,7 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
         const trimmedSignificantDigits = significantDigits.slice(0, maxLength);
         this.nationalDigits = (hasTrunkZero ? "0" : "") + trimmedSignificantDigits;
         this.value = toE164(this.country, trimmedSignificantDigits);
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
         this.closeListbox();
         this.fieldEl?.focus();
     }
@@ -744,7 +744,7 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
               ?disabled=${this.disabled}
               ?readonly=${this.readonly}
               aria-describedby=${hasDescription ? "description" : nothing}
-              aria-invalid=${this.valid ? "false" : "true"}
+              aria-invalid=${!this.hideError && !this.disabled && !this.valid}
               @input=${this.handlePhoneInput}
             />
           </div>

package/dist/components/form/radio/radio-list.js

@@ -370,7 +370,7 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
      */
     sendChangeEvent() {
         this.checkValidity(this.value);
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
     }
     /**
      * Handler called when slot content changes.
@@ -404,7 +404,7 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
           aria-disabled=${this.disabled ? "true" : "false"}
           aria-readonly=${this.readonly ? "true" : "false"}
           aria-required=${this.required ? "true" : "false"}
-          aria-invalid=${this.valid ? "false" : "true"}
+          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
         >
           <slot @slotchange=${this.handleSlotChange}></slot>
         </div>

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

@@ -45,6 +45,7 @@ declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
  * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty
  * @slot [readonly-content] - Optional custom content displayed instead of the raw label in the static readonly display
  * @slot [confirm] - Optional custom content for the confirm trigger, such as an icon, displayed as a link while editing in readonlyAvailable mode, or while multiple and the dropdown is open. Overrides confirmLabel when used. The button itself always shows in either of those states unless confirmLabel is set to an empty string
+ * @slot [actions] - Optional content rendered in a footer row below the options, for actions unrelated to picking a value, such as a link to manage the list elsewhere. Hidden entirely when empty. Ignored while native is set
  * @prop {boolean} [searchable=false] - Whether the field filters its options as the user types. When false, the field is read only and driven by arrow keys, Enter, and type-ahead. Ignored while native is set
  * @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
@@ -308,6 +309,21 @@ export declare class EunomiaSelect extends EunomiaSelectMixinBase {
      * @private
      */
     private handleIconSlotChange;
+    /**
+     * Elements assigned to the `actions` slot, if any ; queried live so
+     * {@link renderField} can decide whether to render the footer row around
+     * it at all.
+     * @internal
+     * @readonly
+     */
+    private readonly actionsSlotEls;
+    /**
+     * Re-renders when the `actions` slot's assigned content changes, so the
+     * footer row correctly appears/disappears as content is slotted in or
+     * removed after the initial render.
+     * @private
+     */
+    private handleActionsSlotChange;
     /**
      * The listbox's currently running open/close {@link Animation}, if any —
      * see {@link playListboxOpenAnimation}/{@link playListboxCloseAnimation}.