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

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

@@ -49,7 +49,7 @@ const base = css `
     );
     --_borderRadius: var(
       --input-file-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
     --_itemBackground: var(
       --input-file-item-background,
@@ -59,7 +59,7 @@ const base = css `
     --_gap: var(--input-file-gap, var(--eun-space-s, 8px));
     --_thumbnailSize: var(--input-file-thumbnail-size, 96px);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     color: var(--_textColor);
     display: block;
     width: 100%;
@@ -92,7 +92,7 @@ const base = css `
     justify-content: center;
     gap: var(--eun-space-xs, 4px);
     padding: var(--eun-space-l, 32px) var(--eun-space-m, 16px);
-    border: var(--eun-borderWidth-m, 1.5px) dashed var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) dashed var(--_borderColor);
     border-radius: var(--_borderRadius);
     background-color: var(--_background);
     text-align: center;
@@ -158,7 +158,7 @@ const base = css `
     justify-content: space-between;
     gap: var(--eun-space-s, 8px);
     flex-wrap: wrap;
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(--_hintColor);
   }
   #header-actions {
@@ -176,7 +176,7 @@ const base = css `
     border: none;
     padding: 0;
     font: inherit;
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(--eun-color-primary-500, #3d6fff);
     cursor: pointer;
     text-decoration: underline;
@@ -189,7 +189,7 @@ const base = css `
   .text-button:focus-visible {
     outline: 2px solid var(--_focusIndicator);
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-xs, 4px);
+    border-radius: var(--eun-border-radius-xs, 4px);
   }
   #items {
     display: grid;
@@ -208,7 +208,7 @@ const base = css `
     position: relative;
     display: flex;
     background-color: var(--_itemBackground);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_itemBorderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_itemBorderColor);
     border-radius: var(--_borderRadius);
     box-sizing: border-box;
     cursor: pointer;
@@ -251,7 +251,7 @@ const base = css `
     white-space: nowrap;
   }
   .item-size {
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(--_hintColor);
   }
   .item-checkbox {
@@ -270,7 +270,7 @@ const base = css `
     justify-content: center;
     background: rgb(7 22 33 / 0.55);
     border: none;
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
     color: #fff;
     cursor: pointer;
     padding: 2px;

package/dist/components/form/input-phone/input-phone.d.ts

@@ -16,7 +16,7 @@ export declare const EunomiaInputPhoneTagName = "eun-input-phone";
  * interface element.
  * @internal
  */
-type EunomiaInputPhoneBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<string> & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface;
+type EunomiaInputPhoneBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface;
 declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
 /**
  * A phone number field rendered in two adjacent parts: a compact country

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/input-phone/input-phone.styles.js

@@ -43,7 +43,7 @@ const inputPhone = css `
     flex-shrink: 0;
     padding: var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
     background-color: var(--_background);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-inline-end: none;
     border-radius: var(--_borderRadius) 0 0 var(--_borderRadius);
     outline: 1px solid transparent;
@@ -64,7 +64,7 @@ const inputPhone = css `
     outline-offset: 0;
   }
   .flag {
-    font-size: var(--eun-fontSize-m, 16px);
+    font-size: var(--eun-font-size-m, 16px);
     line-height: 1;
   }
   #field-wrapper {
@@ -77,7 +77,7 @@ const inputPhone = css `
     margin-inline-start: -1px;
     color: var(--_textColor);
     background-color: var(--_background);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0 var(--_borderRadius) var(--_borderRadius) 0;
     outline: 1px solid transparent;
     box-sizing: border-box;
@@ -136,7 +136,7 @@ const inputPhone = css `
     border-color: transparent;
   }
   :host([variant="fill"]) #country-trigger {
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(--eun-border-color, #dee0e7);
   }
   :host([variant="fill"])
@@ -151,11 +151,11 @@ const inputPhone = css `
   :host([variant="underline"]) #field-wrapper {
     border: none;
     outline: none;
-    border-bottom: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0;
   }
   :host([variant="underline"]) #country-trigger {
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(--eun-border-color, #dee0e7);
   }
   :host([variant="underline"]) #field-wrapper {
@@ -200,7 +200,7 @@ const inputPhone = css `
     color: var(--_textColor);
     background: var(--eun-content-hover, #edeff0);
     border: none;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     padding: var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
     outline: 1px solid transparent;
   }

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

@@ -13,17 +13,17 @@ const base = css `
   }
   #name {
     color: var(--eun-text-color, #071621);
-    font-size: var(--eun-fontSize-s, 14px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-s, 14px);
+    font-weight: var(--eun-font-weight-l, 700);
   }
   slot[name="instructions"] {
     display: block;
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(--eun-text-secondary, #484e61);
   }
   .required {
     color: var(--eun-color-critical-100, #aa0014);
-    font-size: var(--eun-fontSize-s, 10px);
+    font-size: var(--eun-font-size-s, 10px);
   }
 `;
 export const labelStyles = base;

package/dist/components/form/radio/radio-card.styles.js

@@ -50,7 +50,7 @@ const base = css `
     --_padding: var(--radio-card-padding, var(--eun-space-m, 16px));
     --_borderRadius: var(
       --radio-card-border-radius,
-      var(--eun-borderRadius-m, 10px)
+      var(--eun-border-radius-m, 10px)
     );
     --_indicatorBorder: var(--_borderColor);
     --_indicatorDot: transparent;

package/dist/components/form/radio/radio-list.d.ts

@@ -4,7 +4,7 @@ import type { EunomiaRadio } from "./radio.js";
  * Tag name of the radio list component.
  */
 export declare const EunomiaRadioListTagName = "eun-radio-list";
-declare const EunomiaRadioList_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/form-label.mixin.js").FormLabelMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/readonly.mixin.js").ReadonlyMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/form.mixin.js").FormMixinInterface<string | undefined>> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/disabled.mixin.js").DisabledMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/validators.mixin.js").ValidatorsMixinInterface> & typeof LitElement;
+declare const EunomiaRadioList_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/form-label.mixin.js").FormLabelMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/readonly.mixin.js").ReadonlyMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/form.mixin.js").FormMixinInterface<string | undefined>> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/disabled.mixin.js").DisabledMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/validators.mixin.js").ValidatorsMixinInterface<string | undefined>> & typeof LitElement;
 /**
  * Groups radio children into a select one of many field, wrapped so the
  * group has a single accessible name and reads as one radio group to

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/radio/radio.d.ts

@@ -13,7 +13,7 @@ export declare const EunomiaRadioTagName = "eun-radio";
  * Type of the radio base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaRadioBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<string> & RadioMixinInterface;
+type EunomiaRadioBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<boolean> & FormMixinInterface<string> & RadioMixinInterface;
 /**
  * Base class with composed mixins used to handle component extends elements type
  * @internal

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

@@ -21,7 +21,7 @@ const base = css `
     --_borderColor: var(--radio-border-color, var(--eun-border-color, #dee0e7));
     --_background: var(--radio-background, transparent);
     --_color: var(--eun-text-color, #071621);
-    --_roundDiameter: var(--radio-size, var(--eun-fontSize-m, 16px));
+    --_roundDiameter: var(--radio-size, var(--eun-font-size-m, 16px));
     --_focusIndicator: var(
       --radio-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -35,7 +35,7 @@ const base = css `
     --_roundGap: 2px;
     --_cursor: pointer;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     display: inline-flex;
     align-items: center;
     outline: none;

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

@@ -11,11 +11,11 @@ const search = css `
     align-items: center;
     padding: 2px 6px;
     font-family: inherit;
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(--_iconColor);
     background: var(--eun-content-hover, #edeff0);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
+    border-radius: var(--eun-border-radius-s, 5px);
   }
   #field-wrapper #shortcut-hint {
     position: absolute;
@@ -46,7 +46,7 @@ const search = css `
     text-align: left;
     color: var(--_textColor);
     background-color: var(--_background);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
     padding: var(--_padding);
     box-sizing: border-box;
@@ -80,7 +80,7 @@ const search = css `
   :host([variant="underline"]) #search-trigger {
     border: none;
     outline: none;
-    border-bottom: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0;
   }
   :host([variant="underline"]) #search-trigger:focus-visible {
@@ -106,7 +106,7 @@ const search = css `
     top: 0;
     z-index: 1;
     background: var(--modal-background, var(--eun-surface-color, #ffffff));
-    border-bottom: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
   }
   #panel-field #field-wrapper {
     position: relative;

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

@@ -22,7 +22,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 & FormMixinInterface<SelectValue> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface;
+type EunomiaSelectBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<SelectValue> & FormMixinInterface<SelectValue> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface;
 declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
 /**
  * A field that picks one or more values from a list of option and optgroup
@@ -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}.

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

@@ -53,6 +53,7 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldVariantMixin(FormLabelMi
  * @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
@@ -229,6 +230,15 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
         this.handleIconSlotChange = () => {
             this.requestUpdate();
         };
+        /**
+         * 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
+         */
+        this.handleActionsSlotChange = () => {
+            this.requestUpdate();
+        };
         /**
          * Redirects focus to the native field whenever the host itself receives
          * it. The host stays in the tab order (`DisabledMixin`) rather than
@@ -795,11 +805,11 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
             this.value = current.includes(option.value)
                 ? current.filter((value) => value !== option.value)
                 : [...current, option.value];
-            this.dispatchEvent(new ChangeEvent());
+            this.dispatchEvent(new ChangeEvent(this.value));
             return;
         }
         this.value = option.value;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
         this.closeListbox();
         if (this.readonlyAvailable) {
             this.confirmEdit();
@@ -816,7 +826,7 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
      */
     handleNativeChange(event) {
         this.value = event.target.value;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
         if (this.readonlyAvailable) {
             this.confirmEdit();
         }
@@ -1166,7 +1176,7 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
           aria-describedby=${hasDescription ? "description" : nothing}
           ?disabled=${this.disabled || this.readonly}
           ?required=${this.required}
-          aria-invalid=${this.valid ? "false" : "true"}
+          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
           @change=${this.handleNativeChange}
         ></select>
         ${this.showConfirmLink ? this.renderConfirmLink() : nothing}
@@ -1215,7 +1225,7 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
           ?disabled=${this.disabled}
           ?readonly=${this.readonly || !this.searchable}
           aria-required=${this.required ? "true" : "false"}
-          aria-invalid=${this.valid ? "false" : "true"}
+          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
           @pointerdown=${this.handleFieldPointerDown}
           @focus=${this.handleFieldActivate}
           @click=${this.handleFieldActivate}
@@ -1234,6 +1244,16 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
         @toggle=${this.handlePopoverToggle}
       >
         ${this.renderListboxRows(options)}
+        <li
+          class="actions"
+          role="presentation"
+          ?hidden=${!this.actionsSlotEls?.length}
+        >
+          <slot
+            name="actions"
+            @slotchange=${this.handleActionsSlotChange}
+          ></slot>
+        </li>
       </ul>
     `;
     }
@@ -1381,6 +1401,9 @@ __decorate([
 __decorate([
     queryAssignedElements({ slot: "icon" })
 ], EunomiaSelect.prototype, "iconSlotEls", void 0);
+__decorate([
+    queryAssignedElements({ slot: "actions" })
+], EunomiaSelect.prototype, "actionsSlotEls", void 0);
 EunomiaSelect = EunomiaSelect_1 = __decorate([
     customElement(EunomiaSelectTagName)
 ], EunomiaSelect);

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

@@ -27,7 +27,7 @@ const select = css `
     right: var(--eun-space-m, 16px);
     pointer-events: none;
     color: var(--_iconColor);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     transition: transform 0.15s ease;
   }
   #select-arrow.open {
@@ -56,8 +56,8 @@ const select = css `
     height: 16px;
     margin-inline-end: var(--eun-space-xs, 4px);
     vertical-align: -3px;
-    border: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border: var(--eun-border-width-s, 1px) solid var(--_borderColor);
+    border-radius: var(--eun-border-radius-s, 5px);
     --icon-color: transparent;
   }
   #listbox li.selected .option-checkbox {
@@ -65,6 +65,17 @@ const select = css `
     border-color: var(--eun-color-primary-500, #3d6fff);
     --icon-color: var(--eun-color-on-primary-500, #ffffff);
   }
+  #listbox .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--eun-space-s, 8px);
+    padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
+    cursor: default;
+    border-block-start: var(--eun-border-width-s, 1px) solid var(--_borderColor);
+  }
+  #listbox .actions[hidden] {
+    display: none;
+  }
   #confirm-link {
     position: absolute;
     right: calc(var(--eun-space-l, 32px) + var(--eun-space-xs, 4px));
@@ -74,7 +85,7 @@ const select = css `
     border: none;
     background: none;
     font: inherit;
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     color: var(
       --field-confirm-link-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -95,7 +106,7 @@ const select = css `
   #confirm-link:focus-visible {
     outline: 2px solid var(--_focusIndicator);
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-m);
+    border-radius: var(--eun-border-radius-m);
   }
 `;
 export const selectStyles = [

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

@@ -18,7 +18,7 @@ import { css } from "lit";
 const base = css `
   :host {
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     display: inline-block;
     outline: none;
   }

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

@@ -38,14 +38,14 @@ const base = css `
       --field-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
     );
-    --_borderRadius: var(--field-border-radius, var(--eun-borderRadius-m, 8px));
+    --_borderRadius: var(--field-border-radius, var(--eun-border-radius-m, 8px));
     --_padding: var(
       --field-padding,
       var(--eun-space-s, 8px) var(--eun-space-s, 8px)
     );
     --_shadow: var(--field-shadow, none);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     display: block;
     width: 100%;
     outline: none;
@@ -65,7 +65,7 @@ const base = css `
     font: inherit;
     color: var(--_textColor);
     background-color: var(--_background);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
     padding: var(--_padding);
     outline: 1px solid transparent;
@@ -124,12 +124,12 @@ const base = css `
     border-color: transparent;
   }
   :host([variant="fill"]) #field[aria-invalid="true"] {
-    box-shadow: inset 0 0 0 var(--eun-borderWidth-m, 1.5px) var(--_errorColor);
+    box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px) var(--_errorColor);
   }
   :host([variant="underline"]) #field {
     border: none;
     outline: none;
-    border-bottom: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0;
   }
   :host([variant="underline"]) #field:focus-visible {
@@ -168,11 +168,11 @@ const base = css `
   #password-toggle:focus-visible {
     outline: 2px solid var(--_focusIndicator);
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
   }
   #readonly-display {
     padding: var(--_padding);
-    border: var(--eun-borderWidth-m, 1.5px) solid transparent;
+    border: var(--eun-border-width-m, 1.5px) solid transparent;
     border-radius: var(--_borderRadius);
     box-sizing: border-box;
     cursor: text;

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

@@ -4,7 +4,7 @@ const base = css `
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     display: block;
     margin-block-start: var(--eun-space-xs, 4px);
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     margin-block: 0;
   }
   #description span {

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

@@ -39,10 +39,10 @@ const listbox = css `
     max-height: var(--field-listbox-max-height, 260px);
     overflow-y: auto;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     color: var(--_textColor);
     background: var(--eun-surface-color, #ffffff);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
     box-shadow: var(
       --eun-shadow-m,
@@ -74,13 +74,13 @@ const listbox = css `
     background: var(--eun-content-hover, #edeff0);
   }
   #listbox li.selected {
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
     color: var(--eun-color-primary-500, #3d6fff);
   }
   #listbox li mark {
     background: var(--field-match-background, none);
     color: var(--field-match-color, var(--eun-color-primary-500, #3d6fff));
-    font-weight: var(--field-match-font-weight, var(--eun-fontWeight-l, 700));
+    font-weight: var(--field-match-font-weight, var(--eun-font-weight-l, 700));
     text-decoration: var(--field-match-text-decoration, none);
   }
   #listbox .no-results,
@@ -92,8 +92,8 @@ const listbox = css `
   #listbox .group-label {
     cursor: default;
     padding-block-end: var(--eun-space-xxs, 1.6px);
-    font-size: var(--eun-fontSize-xs, 12px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-xs, 12px);
+    font-weight: var(--eun-font-weight-l, 700);
     color: var(--_placeholderColor);
     text-transform: uppercase;
   }

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

@@ -13,7 +13,7 @@ export declare const EunomiaSliderTagName = "eun-slider";
  * Type of the slider base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaSliderBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<number> & FormLabelMixinInterface;
+type EunomiaSliderBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<number> & FormMixinInterface<number> & FormLabelMixinInterface;
 declare const EunomiaSliderMixinBase: Constructor<EunomiaSliderBase>;
 /**
  * A form-associated control for picking a single numeric value out of a

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

@@ -150,7 +150,7 @@ let EunomiaSlider = class EunomiaSlider extends EunomiaSliderMixinBase {
          */
         this.handleInput = (event) => {
             this.value = Number(event.target.value);
-            this.dispatchEvent(new ChangeEvent());
+            this.dispatchEvent(new ChangeEvent(this.value));
         };
         /**
          * Blocks every native keyboard interaction (arrow keys, Home/End, Page
@@ -431,7 +431,7 @@ let EunomiaSlider = class EunomiaSlider extends EunomiaSliderMixinBase {
             step=${this.step}
             .value=${String(value)}
             ?disabled=${this.disabled}
-            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}