@eunomia/elements 1.0.0-beta.9 → 1.0.0

package/dist/components/content/image-carousel/image-carousel.js

@@ -8,13 +8,13 @@ var EunomiaImageCarousel_1;
 import { customElement, property, query, state } from "lit/decorators.js";
 import { html, LitElement, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { readCssLength } from "../../../utils/css-length.utils.js";
 import { debounce } from "../../../utils/time.utils.js";
 import { createSwipeGesture, } from "../../../utils/swipe-gesture.utils.js";
 import { ImageChangeEvent } from "../../../events/imagechange.event.js";
 import { imageCarouselStyles } from "./image-carousel.styles.js";
 import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 import { cssTimeToMs } from "../../../utils/motion.utils.js";
-import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the image carousel component.
  */
@@ -46,13 +46,13 @@ export const EunomiaImageCarouselTagName = "eun-image-carousel";
  * @prop {boolean} [magnifier=false] - Enables a hover-to-zoom effect on the main image, for mouse and pen pointers only. Has no effect on touch, which relies on the lightbox instead
  * @prop {number} [magnifierZoom=2.5] - How much the main image scales up under the cursor while hovering, with magnifier on
  * @attr {number} [magnifier-zoom=2.5] - How much the main image scales up under the cursor while hovering, with magnifier on
- * @prop {boolean} [showThumbnails=true] - Shows the thumbnail strip below the main stage, for jumping directly to an image
- * @attr {boolean} [show-thumbnails=true] - Shows the thumbnail strip below the main stage, for jumping directly to an image
- * @prop {boolean} [showDots=true] - Shows pagination dots below the main stage as a position indicator when the thumbnail strip is off. Has no effect while thumbnails are shown, since they already convey the same information
- * @attr {boolean} [show-dots=true] - Shows pagination dots below the main stage as a position indicator when the thumbnail strip is off. Has no effect while thumbnails are shown, since they already convey the same information
- * @prop {boolean} [lightbox=true] - Whether clicking the main image, or its expand control, opens the full-size lightbox
- * @prop {boolean} [lightboxGrid=true] - Shows a scrollable grid of every image alongside the lightbox's own main image, for jumping directly to one without closing it
- * @attr {boolean} [lightbox-grid=true] - Shows a scrollable grid of every image alongside the lightbox's own main image, for jumping directly to one without closing it
+ * @prop {boolean} [showThumbnails=false] - Shows the thumbnail strip below the main stage, for jumping directly to an image
+ * @attr {boolean} [show-thumbnails=false] - Shows the thumbnail strip below the main stage, for jumping directly to an image
+ * @prop {boolean} [showDots=false] - Shows pagination dots below the main stage as a position indicator when the thumbnail strip is off. Has no effect while thumbnails are shown, since they already convey the same information
+ * @attr {boolean} [show-dots=false] - Shows pagination dots below the main stage as a position indicator when the thumbnail strip is off. Has no effect while thumbnails are shown, since they already convey the same information
+ * @prop {boolean} [lightbox=false] - Whether clicking the main image, or its expand control, opens the full-size lightbox
+ * @prop {boolean} [lightboxGrid=false] - Shows a scrollable grid of every image alongside the lightbox's own main image, for jumping directly to one without closing it
+ * @attr {boolean} [lightbox-grid=false] - Shows a scrollable grid of every image alongside the lightbox's own main image, for jumping directly to one without closing it
  * @prop {boolean} [loop=false] - Wraps the previous and next controls around at the bounds instead of stopping there, on both the main stage and the lightbox
  * @prop {EunomiaImageCarouselTransition} [transition='slide'] - How the main stage and the lightbox animate between images
  * @prop {boolean} [autoplay=false] - Automatically advances to the next image on a set interval. Pauses on hover or focus and while the lightbox is open, but renders no pause or play control of its own, so pair this with a visible control calling the public pause and resume methods, since a moving gallery nobody can stop fails accessibility guidelines
@@ -76,6 +76,7 @@ export const EunomiaImageCarouselTagName = "eun-image-carousel";
  * @cssprop [--image-carousel-border-color] - Sets the border color of the main stage, which has no border by default
  * @cssprop [--image-carousel-thumbnail-size] - Sets the size of each thumbnail
  * @cssprop [--image-carousel-thumbnail-gap] - Sets the gap between thumbnails, and between the strip and the main stage
+ * @cssprop [--image-carousel-thumbnail-fade-size] - Sets the width of the fade on the thumbnail strip's edges that still hide thumbnails
  * @cssprop [--image-carousel-thumbnail-border-color] - Sets the border color of the thumbnails and of the lightbox's grid items at rest, transparent by default
  * @cssprop [--image-carousel-thumbnail-active-border-color] - Sets the border color of the active thumbnail and of the lightbox's active grid item
  * @cssprop [--image-carousel-nav-color] - Sets the icon color of the main stage's previous and next controls
@@ -92,6 +93,8 @@ export const EunomiaImageCarouselTagName = "eun-image-carousel";
  * @cssprop [--image-carousel-dot-gap] - Sets the gap between pagination dots
  * @cssprop [--image-carousel-dot-color] - Sets the color of the pagination dots
  * @cssprop [--image-carousel-dot-active-color] - Sets the color of the active pagination dot
+ * @cssprop [--image-carousel-focus-outline-color] - Sets the keyboard focus outline color of the stage, controls, thumbnails, dots and lightbox grid items
+ * @cssprop [--image-carousel-lightbox-focus-outline-color] - Sets the keyboard focus outline color of the lightbox's previous and next controls
  * @element eun-image-carousel
  */
 let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel extends LocalizableMixin(LitElement) {
@@ -127,31 +130,30 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
         /**
          * Shows the thumbnail strip below the main stage, for jumping directly
          * to an image.
-         * @default true
+         * @default false
          */
-        this.showThumbnails = true;
+        this.showThumbnails = false;
         /**
          * Shows pagination dots below the main stage as a position indicator
          * (which image, how many total) when `showThumbnails` is off — without
          * either, there'd be no visible way to tell. No effect while thumbnails
-         * are shown, which already convey the same information ; set to `false`
-         * for neither.
-         * @default true
+         * are shown, which already convey the same information.
+         * @default false
          */
-        this.showDots = true;
+        this.showDots = false;
         /**
          * Whether clicking the main image (or its expand control) opens the
          * full-size lightbox.
-         * @default true
+         * @default false
          */
-        this.lightbox = true;
+        this.lightbox = false;
         /**
          * Shows a scrollable grid of every image alongside the lightbox's own
          * main image — clicking a tile swaps the lightbox's image without
          * closing it, the same way a classifieds site's photo viewer does.
-         * @default true
+         * @default false
          */
-        this.lightboxGrid = true;
+        this.lightboxGrid = false;
         /**
          * Wraps prev/next around at the bounds instead of stopping there, on
          * both the main stage and the lightbox.
@@ -230,6 +232,20 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
         this.scheduleAnnounce = debounce(() => {
             this.announcement = this.buildAnnouncement();
         }, 150);
+        /**
+         * Fades out whichever edge of the thumbnail strip still has thumbnails
+         * hidden past it, hinting that the strip scrolls that way.
+         * @private
+         */
+        this.updateThumbnailsFade = () => {
+            const strip = this.thumbnailsEl;
+            if (!strip) {
+                return;
+            }
+            const maxScroll = strip.scrollWidth - strip.clientWidth;
+            strip.toggleAttribute("data-fade-start", strip.scrollLeft > 1);
+            strip.toggleAttribute("data-fade-end", strip.scrollLeft < maxScroll - 1);
+        };
         /**
          * Pauses autoplay on hover/focus, without touching {@link manuallyPaused}
          * — it resumes on {@link handleTransientResume}, unless {@link pauseAutoplay}
@@ -490,6 +506,60 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
                 onDragCancel: this.handleStageDragCancel,
             });
         }
+        this.syncThumbnailsStrip(changed);
+    }
+    /**
+     * Keeps the thumbnail strip's observer on the current strip, refreshes
+     * its edge fades, and scrolls the active thumbnail into view whenever
+     * the active image changes.
+     *
+     * @param changed the properties changed in this update.
+     * @private
+     */
+    syncThumbnailsStrip(changed) {
+        const strip = this.thumbnailsEl;
+        if (strip !== this.observedThumbnailsEl) {
+            this.thumbnailsObserver?.disconnect();
+            this.observedThumbnailsEl = strip;
+            if (strip && typeof ResizeObserver !== "undefined") {
+                this.thumbnailsObserver ??= new ResizeObserver(this.updateThumbnailsFade);
+                this.thumbnailsObserver.observe(strip);
+            }
+        }
+        if (!strip) {
+            return;
+        }
+        if (changed.has("activeIndex")) {
+            this.scrollActiveThumbnailIntoView(strip);
+        }
+        this.updateThumbnailsFade();
+    }
+    /**
+     * Scrolls the strip, and only the strip (unlike `scrollIntoView`, which
+     * would also scroll the page), just enough to fully show the active
+     * thumbnail clear of the edge fades.
+     *
+     * @param strip the thumbnail strip.
+     * @private
+     */
+    scrollActiveThumbnailIntoView(strip) {
+        const thumb = strip.children[this.activeIndex];
+        if (!thumb) {
+            return;
+        }
+        const start = thumb.offsetLeft - strip.offsetLeft;
+        const end = start + thumb.offsetWidth;
+        const fade = readCssLength(strip, "--_thumbnailsFade") || 0;
+        let target;
+        if (start - fade < strip.scrollLeft) {
+            target = start - fade;
+        }
+        else if (end + fade > strip.scrollLeft + strip.clientWidth) {
+            target = end + fade - strip.clientWidth;
+        }
+        if (target !== undefined) {
+            strip.scrollTo({ left: Math.max(0, target), behavior: "smooth" });
+        }
     }
     /**
      * Whether `el` is one of the prev/next controls (main stage or
@@ -538,6 +608,8 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
         }
         this.swipeGesture?.destroy();
         this.dragPreviewEl?.remove();
+        this.thumbnailsObserver?.disconnect();
+        this.observedThumbnailsEl = undefined;
         super.disconnectedCallback?.();
     }
     /**
@@ -1022,6 +1094,7 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
         id="thumbnails"
         role="group"
         aria-label=${this.dictionary.imageCarousel.selectImage}
+        @scroll=${this.updateThumbnailsFade}
       >
         ${this.images.map((image, index) => html `
             <button
@@ -1098,6 +1171,8 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
       <eun-modal
         id="modal"
         hide-actions
+        closeable
+        close-on-backdrop
         aria-label=${this.lightboxLabel ??
             this.dictionary.imageCarousel.lightbox}
         @euncancel=${() => this.handleTransientResume()}
@@ -1261,16 +1336,16 @@ __decorate([
     property({ type: Number, attribute: "magnifier-zoom" })
 ], EunomiaImageCarousel.prototype, "magnifierZoom", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter, attribute: "show-thumbnails" })
+    property({ type: Boolean, attribute: "show-thumbnails" })
 ], EunomiaImageCarousel.prototype, "showThumbnails", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter, attribute: "show-dots" })
+    property({ type: Boolean, attribute: "show-dots" })
 ], EunomiaImageCarousel.prototype, "showDots", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter })
+    property({ type: Boolean })
 ], EunomiaImageCarousel.prototype, "lightbox", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter, attribute: "lightbox-grid" })
+    property({ type: Boolean, attribute: "lightbox-grid" })
 ], EunomiaImageCarousel.prototype, "lightboxGrid", void 0);
 __decorate([
     property({ type: Boolean })
@@ -1317,6 +1392,9 @@ __decorate([
 __decorate([
     query("#stage-images")
 ], EunomiaImageCarousel.prototype, "stageImagesEl", void 0);
+__decorate([
+    query("#thumbnails")
+], EunomiaImageCarousel.prototype, "thumbnailsEl", void 0);
 EunomiaImageCarousel = EunomiaImageCarousel_1 = __decorate([
     customElement(EunomiaImageCarouselTagName)
 ], EunomiaImageCarousel);

package/dist/components/content/image-carousel/image-carousel.styles.js

@@ -12,6 +12,7 @@ import { cssBelow } from "../../../utils/media.styles.js";
  * [--image-carousel-border-color] - Set a custom border color for the main stage (no border by default)
  * [--image-carousel-thumbnail-size] - Set a custom size for each thumbnail
  * [--image-carousel-thumbnail-gap] - Set a custom gap between thumbnails, and between the strip and the main stage
+ * [--image-carousel-thumbnail-fade-size] - Set a custom width for the fade on the thumbnail strip's edges that still hide thumbnails
  * [--image-carousel-thumbnail-border-color] - Set a custom border color for the thumbnails and the lightbox's grid items at rest (transparent by default)
  * [--image-carousel-thumbnail-active-border-color] - Set a custom border color for the active thumbnail and the lightbox's active grid item
  * [--image-carousel-nav-color] - Set a custom icon color for the main stage's prev/next controls
@@ -28,11 +29,18 @@ import { cssBelow } from "../../../utils/media.styles.js";
  * [--image-carousel-dot-gap] - Set a custom gap between pagination dots
  * [--image-carousel-dot-color] - Set a custom color for the pagination dots
  * [--image-carousel-dot-active-color] - Set a custom color for the active pagination dot
+ * [--image-carousel-focus-outline-color] - Set a custom keyboard focus outline color for the stage, controls, thumbnails, dots and grid items
+ * [--image-carousel-lightbox-focus-outline-color] - Set a custom keyboard focus outline color for the lightbox's previous and next controls
  */
 const base = css `
   :host {
     display: block;
+    min-width: 0;
     --_magnifierZoom: 2.5;
+    --_focusOutline: var(
+      --image-carousel-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
     --_transitionDuration: var(--image-carousel-transition-duration, 380ms);
     --_swipe-duration: var(
       --image-carousel-swipe-duration,
@@ -85,7 +93,7 @@ const base = css `
   }
 
   #stage:has(#expand-trigger:focus-visible) {
-    outline-color: var(--eun-color-primary-500, #3d6fff);
+    outline-color: var(--_focusOutline);
     outline-offset: 2px;
   }
 
@@ -256,7 +264,7 @@ const base = css `
     box-shadow: 0 2px 10px rgba(15, 23, 42, 0.28);
   }
   .stage-nav:focus-visible {
-    outline-color: var(--eun-color-primary-500, #3d6fff);
+    outline-color: var(--_focusOutline);
     outline-offset: 2px;
   }
   .stage-nav:disabled {
@@ -288,6 +296,23 @@ const base = css `
     gap: var(--image-carousel-thumbnail-gap, var(--eun-space-s, 8px));
     margin-top: var(--image-carousel-thumbnail-gap, var(--eun-space-s, 8px));
     overflow-x: auto;
+    contain: inline-size;
+    --_thumbnailsFade: var(--image-carousel-thumbnail-fade-size, 32px);
+    --_fadeStart: 0px;
+    --_fadeEnd: 0px;
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      #000 var(--_fadeStart),
+      #000 calc(100% - var(--_fadeEnd)),
+      transparent
+    );
+  }
+  #thumbnails[data-fade-start] {
+    --_fadeStart: var(--_thumbnailsFade);
+  }
+  #thumbnails[data-fade-end] {
+    --_fadeEnd: var(--_thumbnailsFade);
   }
   .thumbnail {
     all: unset;
@@ -325,11 +350,12 @@ const base = css `
     );
   }
   .thumbnail:focus-visible {
-    outline-color: var(--eun-color-primary-500, #3d6fff);
+    outline-color: var(--_focusOutline);
   }
 
   #dots {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     gap: var(--image-carousel-dot-gap, var(--eun-space-xs, 4px));
@@ -355,7 +381,7 @@ const base = css `
         var(--eun-easing-default, ease);
   }
   .dot:focus-visible {
-    outline-color: var(--eun-color-primary-500, #3d6fff);
+    outline-color: var(--_focusOutline);
   }
   .dot[aria-current="true"] {
     width: calc(var(--image-carousel-dot-size, 8px) * 3.5);
@@ -431,7 +457,7 @@ const base = css `
     background: rgba(0, 0, 0, 0.7);
   }
   .lightbox-nav:focus-visible {
-    outline-color: #fff;
+    outline-color: var(--image-carousel-lightbox-focus-outline-color, #fff);
   }
   .lightbox-nav:disabled {
     cursor: not-allowed;
@@ -494,7 +520,7 @@ const base = css `
     );
   }
   .grid-item:focus-visible {
-    outline: 2px solid var(--eun-color-primary-500, #3d6fff);
+    outline: 2px solid var(--_focusOutline);
     outline-offset: 2px;
   }
 

package/dist/components/content/password-strength/password-strength.styles.js

@@ -114,7 +114,7 @@ const base = css `
   #caption {
     color: var(
       --password-strength-caption-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
   }
 

package/dist/components/content/progress-bar/progress-bar.styles.js

@@ -103,7 +103,7 @@ const base = css `
     align-items: center;
     justify-content: space-between;
     gap: var(--eun-space-s, 8px);
-    color: var(--progress-bar-corner-color, var(--eun-text-secondary, #484e61));
+    color: var(--progress-bar-corner-color, var(--eun-text-secondary, #666e8a));
     font-size: var(
       --progress-bar-corner-font-size,
       var(--eun-font-size-xs, 12px)

package/dist/components/content/shared-styles/card-link.styles.js

@@ -37,7 +37,7 @@ const base = css `
       --card-link-badge-background,
       var(--eun-content-hover, #edeff0)
     );
-    color: var(--card-link-badge-color, var(--eun-text-secondary, #484e61));
+    color: var(--card-link-badge-color, var(--eun-text-secondary, #666e8a));
     transform: rotate(-45deg);
     pointer-events: none;
   }

package/dist/components/content/shared-styles/tone-surface.styles.js

@@ -36,7 +36,6 @@ import { css } from "lit";
  */
 export const toneSurfaceStyles = css `
   :host {
-    /* How each appearance reads the palette slots. */
     --_bg-default: var(--_tint);
     --_fg-default: var(--_accent);
     --_bg-fill: var(--_solid);
@@ -45,10 +44,9 @@ export const toneSurfaceStyles = css `
     --_fg-outline: var(--_accent);
     --_bd-outline: var(--_solid);
     --_bg-flat: var(--eun-content-hover, #edeff0);
-    --_fg-flat: var(--eun-text-secondary, #484e61);
+    --_fg-flat: var(--eun-text-secondary, #666e8a);
   }
 
-  /* Step 1 : palettes. "medium" is also the fallback before "color" reflects. */
   :host(:not([color]):not([severity])),
   :host([color="medium"]:not([severity])) {
     --_solid: var(--eun-color-grey-700, #484e61);

package/dist/components/form/checkbox/check-card.styles.js

@@ -40,12 +40,12 @@ const base = css `
     );
     --_hintColor: var(
       --check-card-hint-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
     --_color: var(--eun-text-color, #071621);
     --_iconColor: var(
       --check-card-icon-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
     --_focusIndicator: var(
       --check-card-focus-outline-color,

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

@@ -89,8 +89,10 @@ export declare class EunomiaCheckboxList extends EunomiaCheckboxList_base {
     get value(): string[];
     /**
      * Setter allowing to check every child whose value is in the given list.
+     * `null` or `undefined` (a reset with no default value, or an empty form
+     * model) unchecks every child.
      */
-    set value(values: string[]);
+    set value(values: string[] | null | undefined);
     /**
      * Lifecycle hook called after the first render.
      * Used to attach event listeners to the options list.

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

@@ -136,11 +136,13 @@ let EunomiaCheckboxList = class EunomiaCheckboxList extends FormLabelMixin(Reado
     }
     /**
      * Setter allowing to check every child whose value is in the given list.
+     * `null` or `undefined` (a reset with no default value, or an empty form
+     * model) unchecks every child.
      */
     set value(values) {
         void this.updateComplete.then(() => {
             this.fields.forEach((field) => {
-                field.checked = values.includes(field.value);
+                field.checked = values?.includes(field.value) ?? false;
             });
         });
     }

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

@@ -33,7 +33,7 @@ const base = css `
     );
     --_hintColor: var(
       --checkbox-hint-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
     --_color: var(--eun-text-color, #071621);
     --_focusIndicator: var(

package/dist/components/form/color-picker/color-picker.d.ts

@@ -1,7 +1,7 @@
 import { LitElement, PropertyValues, TemplateResult } from "lit";
 import { DisabledMixinInterface } from "../../../mixins/disabled.mixin.js";
 import { ReadonlyMixinInterface } from "../../../mixins/readonly.mixin.js";
-import { ValidatorsMixinInterface } from "../../../mixins/validators.mixin.js";
+import { Validity, ValidatorsMixinInterface } from "../../../mixins/validators.mixin.js";
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { EditableMixinInterface } from "../../../mixins/editable.mixin.js";
@@ -298,6 +298,30 @@ export declare class EunomiaColorPicker extends EunomiaColorPickerMixinBase {
      * @internal
      */
     private get hexDraftInvalid();
+    /**
+     * The value handed to the native `<input type="color">`, which only
+     * accepts a `#rrggbb` hex and logs a warning for anything else.
+     * @internal
+     */
+    private get nativeValue();
+    /**
+     * Whether the field is the inline hex text input (no presets), where an
+     * invalid draft stays visible after it's confirmed.
+     * @internal
+     */
+    private get isInlineHexField();
+    /**
+     * Reads local validation state : an invalid hex typed in the inline
+     * field, or an assigned `value` that isn't a color, reports `badInput`.
+     *
+     * @returns validity state and optional message.
+     */
+    checkLocalValidators: () => Validity;
+    /**
+     * `FormMixin`'s own `formResetCallback` restores `value` ; this also
+     * drops an invalid hex draft left in the field.
+     */
+    formResetCallback(): void;
     /**
      * The trigger button's accessible name : `label` when set, exactly like
      * every other field. Falls back next to a plain `aria-label` attribute
@@ -471,8 +495,9 @@ export declare class EunomiaColorPicker extends EunomiaColorPickerMixinBase {
     private handleHexInput;
     /**
      * Commits the hex draft to `value` once it normalizes to a real color ;
-     * otherwise reverts the draft back to the last committed `value`, so an
-     * abandoned invalid edit doesn't linger in the input.
+     * otherwise keeps it in the input, marked invalid, so the person sees
+     * why nothing was applied. An empty draft reverts to the last committed
+     * `value`.
      * @private
      */
     private handleHexCommit;

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

@@ -216,6 +216,22 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
          * @internal
          */
         this.presetFocusIndex = -1;
+        /**
+         * Reads local validation state : an invalid hex typed in the inline
+         * field, or an assigned `value` that isn't a color, reports `badInput`.
+         *
+         * @returns validity state and optional message.
+         */
+        this.checkLocalValidators = () => {
+            const isValueInvalid = !!this.value && normalizeHexColor(this.value) === null;
+            if (isValueInvalid || (this.isInlineHexField && this.hexDraftInvalid)) {
+                return {
+                    validity: { badInput: true },
+                    message: this.dictionary.validation.invalidColor,
+                };
+            }
+            return { validity: {} };
+        };
         /**
          * Reacts to the dropdown panel's native `toggle` event : the single
          * source of truth for open/close state. The panel is `popover="auto"`,
@@ -341,6 +357,32 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
     get hexDraftInvalid() {
         return this.hexDraft !== "" && normalizeHexColor(this.hexDraft) === null;
     }
+    /**
+     * The value handed to the native `<input type="color">`, which only
+     * accepts a `#rrggbb` hex and logs a warning for anything else.
+     * @internal
+     */
+    get nativeValue() {
+        return normalizeHexColor(this.value ?? "") ?? "#000000";
+    }
+    /**
+     * Whether the field is the inline hex text input (no presets), where an
+     * invalid draft stays visible after it's confirmed.
+     * @internal
+     */
+    get isInlineHexField() {
+        return (!(this.readonlyAvailable && !this.editing) &&
+            !this.swatchOnly &&
+            this.presets.length === 0);
+    }
+    /**
+     * `FormMixin`'s own `formResetCallback` restores `value` ; this also
+     * drops an invalid hex draft left in the field.
+     */
+    formResetCallback() {
+        super.formResetCallback();
+        this.hexDraft = this.value ?? "";
+    }
     /**
      * The trigger button's accessible name : `label` when set, exactly like
      * every other field. Falls back next to a plain `aria-label` attribute
@@ -393,10 +435,13 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
      * `eun-select` uses for its own search text vs. `value`.
      */
     willUpdate(_changedProperties) {
-        super.willUpdate(_changedProperties);
         if (_changedProperties.has("value") && !this.isOpen) {
             this.hexDraft = this.value ?? "";
         }
+        if (_changedProperties.has("hexDraft")) {
+            this.checkValidity(this.value);
+        }
+        super.willUpdate(_changedProperties);
     }
     /**
      * The host is never a tab stop of its own : sequential navigation goes
@@ -604,8 +649,9 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
     }
     /**
      * Commits the hex draft to `value` once it normalizes to a real color ;
-     * otherwise reverts the draft back to the last committed `value`, so an
-     * abandoned invalid edit doesn't linger in the input.
+     * otherwise keeps it in the input, marked invalid, so the person sees
+     * why nothing was applied. An empty draft reverts to the last committed
+     * `value`.
      * @private
      */
     handleHexCommit() {
@@ -613,7 +659,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
         if (normalized) {
             this.handleSelect(normalized);
         }
-        else {
+        else if (this.hexDraft.trim() === "") {
             this.hexDraft = this.value ?? "";
         }
     }
@@ -843,7 +889,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
               aria-label=${this.nativeInputLabel ??
             this.dictionary.colorPicker.nativeInput}
               ?disabled=${this.disabled || this.readonly}
-              .value=${live(this.value || "#000000")}
+              .value=${live(this.nativeValue)}
               @input=${this.handleNativeInput}
             />
           </label>
@@ -906,7 +952,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
                   aria-label=${this.nativeInputLabel ??
                 this.dictionary.colorPicker.nativeInput}
                   ?disabled=${this.disabled || this.readonly}
-                  .value=${live(this.value || "#000000")}
+                  .value=${live(this.nativeValue)}
                   @input=${this.handleNativeInput}
                 />
               </label>
@@ -996,7 +1042,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
             aria-describedby=${hasDescription ? "description" : nothing}
             ?disabled=${this.disabled || this.readonly}
             aria-invalid=${this.showError}
-            .value=${live(this.value || "#000000")}
+            .value=${live(this.nativeValue)}
             @input=${this.handleNativeInput}
           />
         </label>

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

@@ -148,7 +148,7 @@ let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
                 "rangeOverflow",
                 "stepMismatch",
                 "badInput",
-            ]);
+            ], this.validationDictionary.validation);
         };
         this.addEventListener("keydown", this.handleImplicitSubmission);
     }

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

@@ -26,13 +26,13 @@ const base = css `
     --_textColor: var(--counter-text-color, var(--eun-text-color, #071621));
     --_buttonColor: var(
       --counter-button-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
     --_errorColor: var(
       --counter-error-color,
       var(--eun-color-critical-100, #aa0014)
     );
-    --_hintColor: var(--counter-hint-color, var(--eun-text-secondary, #484e61));
+    --_hintColor: var(--counter-hint-color, var(--eun-text-secondary, #666e8a));
     --_focusIndicator: var(
       --counter-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)

package/dist/components/form/date-picker/date-picker-day-grid.styles.js

@@ -12,7 +12,7 @@ export const datePickerDayGridStyles = css `
     display: grid;
   }
   #calendar-weekdays span {
-    color: var(--date-picker-weekday-color, var(--eun-text-secondary, #484e61));
+    color: var(--date-picker-weekday-color, var(--eun-text-secondary, #666e8a));
     font-size: var(--eun-font-size-xxs, 10px);
     text-align: center;
     text-transform: uppercase;

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

@@ -15,7 +15,7 @@ import { endOfMonth, isSameMonth, isWithinRange, startOfMonth, } from "../../../
  * @returns the rendered template.
  */
 export function renderDatePickerMonthGrid(props) {
-    const { displayedYear, locale, previousYearLabel, chooseYearLabel, nextYearLabel } = props;
+    const { displayedYear, locale, previousYearLabel, chooseYearLabel, nextYearLabel, } = props;
     const months = Array.from({ length: 12 }, (_, month) => new Date(displayedYear, month, 1));
     return html `
     <div id="calendar">