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

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

@@ -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-borderWidth-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));

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}

package/dist/components/form/textarea/textarea.js

@@ -733,7 +733,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
             this.lastSyncedValue = newValue;
             this.value = newValue;
             this.resizeEditableField();
-            this.dispatchEvent(new ChangeEvent());
+            this.dispatchEvent(new ChangeEvent(this.value));
             this.syncToolbarToSelection();
         };
         /**
@@ -1076,7 +1076,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
     handleInput(event) {
         this.value = event.target.value;
         this.resizeToContent();
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
     }
     /**
      * @see handleSelectionChange
@@ -1539,7 +1539,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         ?required=${this.required}
         minlength=${ifDefined(this.minlength)}
         maxlength=${ifDefined(this.maxlength)}
-        aria-invalid=${this.valid ? "false" : "true"}
+        aria-invalid=${!this.hideError && !this.disabled && !this.valid}
         aria-label=${ifDefined(this.label)}
         aria-describedby=${describedBy || nothing}
         @input=${this.handleInput}
@@ -1570,7 +1570,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         role="textbox"
         aria-multiline="true"
         aria-required=${this.required ? "true" : nothing}
-        aria-invalid=${this.valid ? "false" : "true"}
+        aria-invalid=${!this.hideError && !this.disabled && !this.valid}
         aria-label=${ifDefined(this.label)}
         aria-describedby=${describedBy || nothing}
         @beforeinput=${this.handleEditableBeforeInput}

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

@@ -535,7 +535,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
      */
     commitStaged() {
         this.value = this.stagingValue;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
     }
     /**
      * Applies a new hour/minute to {@link displaySource}'s calendar day (via
@@ -557,7 +557,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
             return;
         }
         this.value = next;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
     }
     /**
      * Commits a directly-typed, complete hour/minute (bypassing staging
@@ -572,7 +572,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
      */
     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/layout/animate/animate.d.ts

@@ -25,6 +25,8 @@ export type EunomiaAnimateAnimation = "none" | "fade" | "scroll-right" | "scroll
  * @prop {boolean} [once=true] - Whether the animation plays only the first time it enters the viewport, or replays every time it re-enters
  * @prop {number} [threshold=0.1] - The ratio of the element, from 0 to 1, that must be visible before the animation triggers
  * @prop {string} [rootMargin='0px'] - The margin applied around the viewport before threshold is evaluated, accepting CSS-like values such as -50px 0px
+ * @prop {EunomiaAnimateAnimation} [tabletAnimation] - Overrides `animation` at tablet-width viewports and narrower (max-width: 768px). Left unset, the viewport keeps using `animation`
+ * @prop {EunomiaAnimateAnimation} [mobileAnimation] - Overrides `animation` (and `tabletAnimation`, if also set) at mobile-width viewports and narrower (max-width: 600px)
  * @cssprop [--animate-distance] - Sets the travel distance for the scroll and faded-scroll animations
  * @element eun-animate
  */
@@ -36,7 +38,7 @@ export declare class EunomiaAnimate extends LitElement {
      * @internal
      * @readonly
      */
-    static readonly styles: import("lit").CSSResult;
+    static readonly styles: import("lit").CSSResult[];
     /**
      * Which transition to apply. `none` renders the content immediately, with
      * no transition, and skips setting up the `IntersectionObserver`
@@ -72,20 +74,53 @@ export declare class EunomiaAnimate extends LitElement {
      * @default 0px
      */
     rootMargin: string;
+    /**
+     * Overrides `animation` at tablet-width viewports and narrower
+     * (`max-width: 768px`, matching `EUNOMIA_BREAKPOINTS.tablet`). Purely a
+     * CSS `@media` switch (`animate.styles.ts`, mirrored in
+     * `animate-ssr.css` for the pre-hydration state) — never read from JS,
+     * so there's no `matchMedia` listener to keep in sync with the actual
+     * viewport, and no risk of the SSR/hydration mismatch that a JS-driven
+     * breakpoint switch would reintroduce. Left `undefined`, the viewport
+     * keeps using `animation`.
+     * @default undefined
+     */
+    tabletAnimation?: EunomiaAnimateAnimation;
+    /**
+     * Overrides `animation` (and `tabletAnimation`, if also set) at
+     * mobile-width viewports and narrower (`max-width: 600px`, matching
+     * `EUNOMIA_BREAKPOINTS.mobile`). Same pure-CSS mechanism as
+     * {@link tabletAnimation}.
+     * @default undefined
+     */
+    mobileAnimation?: EunomiaAnimateAnimation;
     /**
      * Observes the host's own viewport entry/exit. Left `undefined` while
-     * `animation` is `"none"` — see {@link setupObserver}.
+     * every breakpoint's effective animation is `"none"` — see
+     * {@link setupObserver} and {@link hasAnyAnimation}.
      * @internal
      */
     private observer?;
+    /**
+     * Whether at least one of `animation`, `tabletAnimation`, or
+     * `mobileAnimation` is set to something other than `"none"` — i.e.
+     * whether *some* viewport width could actually reveal an animation, and
+     * the observer is therefore worth setting up at all. Deliberately
+     * ignores the current viewport width itself: which of the three ends up
+     * active is a CSS `@media` decision, not something this component reads
+     * from JS (see {@link tabletAnimation}).
+     * @private
+     */
+    private get hasAnyAnimation();
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     /**
      * (Re)builds the `IntersectionObserver` for the current `threshold`/
-     * `rootMargin`, replacing any previous one — except while `animation` is
-     * `"none"`, where no observer is created at all : that variant renders
-     * unconditionally, so there'd be nothing for it to drive.
+     * `rootMargin`, replacing any previous one — except while
+     * {@link hasAnyAnimation} is `false`, where no observer is created at
+     * all : every viewport width renders unconditionally then, so there'd
+     * be nothing for it to drive.
      * @private
      */
     private setupObserver;

package/dist/components/layout/animate/animate.js

@@ -36,6 +36,8 @@ const IN_VIEW_ATTR = "in-view";
  * @prop {boolean} [once=true] - Whether the animation plays only the first time it enters the viewport, or replays every time it re-enters
  * @prop {number} [threshold=0.1] - The ratio of the element, from 0 to 1, that must be visible before the animation triggers
  * @prop {string} [rootMargin='0px'] - The margin applied around the viewport before threshold is evaluated, accepting CSS-like values such as -50px 0px
+ * @prop {EunomiaAnimateAnimation} [tabletAnimation] - Overrides `animation` at tablet-width viewports and narrower (max-width: 768px). Left unset, the viewport keeps using `animation`
+ * @prop {EunomiaAnimateAnimation} [mobileAnimation] - Overrides `animation` (and `tabletAnimation`, if also set) at mobile-width viewports and narrower (max-width: 600px)
  * @cssprop [--animate-distance] - Sets the travel distance for the scroll and faded-scroll animations
  * @element eun-animate
  */
@@ -78,6 +80,21 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
          */
         this.rootMargin = "0px";
     }
+    /**
+     * Whether at least one of `animation`, `tabletAnimation`, or
+     * `mobileAnimation` is set to something other than `"none"` — i.e.
+     * whether *some* viewport width could actually reveal an animation, and
+     * the observer is therefore worth setting up at all. Deliberately
+     * ignores the current viewport width itself: which of the three ends up
+     * active is a CSS `@media` decision, not something this component reads
+     * from JS (see {@link tabletAnimation}).
+     * @private
+     */
+    get hasAnyAnimation() {
+        return (this.animation !== "none" ||
+            (this.tabletAnimation !== undefined && this.tabletAnimation !== "none") ||
+            (this.mobileAnimation !== undefined && this.mobileAnimation !== "none"));
+    }
     connectedCallback() {
         super.connectedCallback?.();
         this.setupObserver();
@@ -94,15 +111,10 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
         if (changed.has("delay")) {
             this.style.setProperty("--_delay", `${this.delay}ms`);
         }
-        // Rebuilds the observer whenever anything its own setup depends on
-        // changes : `animation` (switching to/from "none" starts/stops
-        // observing entirely), `threshold`/`rootMargin` (the observer's own
-        // options, otherwise frozen at whatever they were on connect), and
-        // `once` (so flipping it back to `false` after the element already
-        // triggered once — and got unobserved — resumes watching for exit/
-        // re-entry, rather than staying silently stuck).
         if (this.isConnected &&
             (changed.has("animation") ||
+                changed.has("tabletAnimation") ||
+                changed.has("mobileAnimation") ||
                 changed.has("threshold") ||
                 changed.has("rootMargin") ||
                 changed.has("once"))) {
@@ -111,14 +123,15 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
     }
     /**
      * (Re)builds the `IntersectionObserver` for the current `threshold`/
-     * `rootMargin`, replacing any previous one — except while `animation` is
-     * `"none"`, where no observer is created at all : that variant renders
-     * unconditionally, so there'd be nothing for it to drive.
+     * `rootMargin`, replacing any previous one — except while
+     * {@link hasAnyAnimation} is `false`, where no observer is created at
+     * all : every viewport width renders unconditionally then, so there'd
+     * be nothing for it to drive.
      * @private
      */
     setupObserver() {
         this.teardownObserver();
-        if (this.animation === "none") {
+        if (!this.hasAnyAnimation) {
             return;
         }
         this.observer = new IntersectionObserver(([entry]) => {
@@ -172,6 +185,12 @@ __decorate([
 __decorate([
     property({ attribute: "root-margin" })
 ], EunomiaAnimate.prototype, "rootMargin", void 0);
+__decorate([
+    property({ attribute: "tablet-animation", reflect: true })
+], EunomiaAnimate.prototype, "tabletAnimation", void 0);
+__decorate([
+    property({ attribute: "mobile-animation", reflect: true })
+], EunomiaAnimate.prototype, "mobileAnimation", void 0);
 EunomiaAnimate = __decorate([
     customElement(EunomiaAnimateTagName)
 ], EunomiaAnimate);

package/dist/components/layout/animate/animate.styles.d.ts

@@ -1 +1 @@
-export declare const animateStyles: import("lit").CSSResult;
+export declare const animateStyles: import("lit").CSSResult[];

package/dist/components/layout/animate/animate.styles.js

@@ -100,4 +100,194 @@ const base = css `
     }
   }
 `;
-export const animateStyles = base;
+/**
+ * \`tablet-animation\`/\`mobile-animation\` overrides — pure CSS \`@media\`
+ * switches, mirroring \`base\` above per animation value, so no JS ever
+ * needs to read the actual viewport width (see \`animate.ts\`'s own
+ * \`tabletAnimation\`/\`mobileAnimation\` doc comments). Placed after \`base\`
+ * so equal-specificity ties (e.g. both \`animation="fade"\` and
+ * \`tablet-animation="none"\` present at once) resolve in the narrower
+ * breakpoint's favor by source order, once its \`@media\` condition is true.
+ *
+ * \`max-width\` values match \`EUNOMIA_BREAKPOINTS.tablet\`/\`.mobile\`
+ * (\`breakpoints.ts\`) — hardcoded here since a plain CSS \`@media\` query
+ * can't read a JS constant.
+ */
+const breakpoints = css `
+  @media (max-width: 768px) {
+    :host([tablet-animation="none"]) {
+      opacity: 1;
+      transform: none;
+      transition-property: none;
+    }
+
+    :host([tablet-animation="fade"]) {
+      opacity: 0;
+      transition-property: opacity;
+    }
+    :host([tablet-animation="fade"][in-view]) {
+      opacity: 1;
+    }
+
+    :host([tablet-animation="scroll-right"]) {
+      transform: translateX(calc(-1 * var(--_distance)));
+      transition-property: transform;
+    }
+    :host([tablet-animation="scroll-right"][in-view]) {
+      transform: translateX(0);
+    }
+
+    :host([tablet-animation="scroll-left"]) {
+      transform: translateX(var(--_distance));
+      transition-property: transform;
+    }
+    :host([tablet-animation="scroll-left"][in-view]) {
+      transform: translateX(0);
+    }
+
+    :host([tablet-animation="scroll-top"]) {
+      transform: translateY(var(--_distance));
+      transition-property: transform;
+    }
+    :host([tablet-animation="scroll-top"][in-view]) {
+      transform: translateY(0);
+    }
+
+    :host([tablet-animation="scroll-bottom"]) {
+      transform: translateY(calc(-1 * var(--_distance)));
+      transition-property: transform;
+    }
+    :host([tablet-animation="scroll-bottom"][in-view]) {
+      transform: translateY(0);
+    }
+
+    :host([tablet-animation="faded-scroll-right"]) {
+      opacity: 0;
+      transform: translateX(calc(-1 * var(--_distance)));
+      transition-property: opacity, transform;
+    }
+    :host([tablet-animation="faded-scroll-right"][in-view]) {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    :host([tablet-animation="faded-scroll-left"]) {
+      opacity: 0;
+      transform: translateX(var(--_distance));
+      transition-property: opacity, transform;
+    }
+    :host([tablet-animation="faded-scroll-left"][in-view]) {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    :host([tablet-animation="faded-scroll-top"]) {
+      opacity: 0;
+      transform: translateY(var(--_distance));
+      transition-property: opacity, transform;
+    }
+    :host([tablet-animation="faded-scroll-top"][in-view]) {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    :host([tablet-animation="faded-scroll-bottom"]) {
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--_distance)));
+      transition-property: opacity, transform;
+    }
+    :host([tablet-animation="faded-scroll-bottom"][in-view]) {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (max-width: 600px) {
+    :host([mobile-animation="none"]) {
+      opacity: 1;
+      transform: none;
+      transition-property: none;
+    }
+
+    :host([mobile-animation="fade"]) {
+      opacity: 0;
+      transition-property: opacity;
+    }
+    :host([mobile-animation="fade"][in-view]) {
+      opacity: 1;
+    }
+
+    :host([mobile-animation="scroll-right"]) {
+      transform: translateX(calc(-1 * var(--_distance)));
+      transition-property: transform;
+    }
+    :host([mobile-animation="scroll-right"][in-view]) {
+      transform: translateX(0);
+    }
+
+    :host([mobile-animation="scroll-left"]) {
+      transform: translateX(var(--_distance));
+      transition-property: transform;
+    }
+    :host([mobile-animation="scroll-left"][in-view]) {
+      transform: translateX(0);
+    }
+
+    :host([mobile-animation="scroll-top"]) {
+      transform: translateY(var(--_distance));
+      transition-property: transform;
+    }
+    :host([mobile-animation="scroll-top"][in-view]) {
+      transform: translateY(0);
+    }
+
+    :host([mobile-animation="scroll-bottom"]) {
+      transform: translateY(calc(-1 * var(--_distance)));
+      transition-property: transform;
+    }
+    :host([mobile-animation="scroll-bottom"][in-view]) {
+      transform: translateY(0);
+    }
+
+    :host([mobile-animation="faded-scroll-right"]) {
+      opacity: 0;
+      transform: translateX(calc(-1 * var(--_distance)));
+      transition-property: opacity, transform;
+    }
+    :host([mobile-animation="faded-scroll-right"][in-view]) {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    :host([mobile-animation="faded-scroll-left"]) {
+      opacity: 0;
+      transform: translateX(var(--_distance));
+      transition-property: opacity, transform;
+    }
+    :host([mobile-animation="faded-scroll-left"][in-view]) {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    :host([mobile-animation="faded-scroll-top"]) {
+      opacity: 0;
+      transform: translateY(var(--_distance));
+      transition-property: opacity, transform;
+    }
+    :host([mobile-animation="faded-scroll-top"][in-view]) {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    :host([mobile-animation="faded-scroll-bottom"]) {
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--_distance)));
+      transition-property: opacity, transform;
+    }
+    :host([mobile-animation="faded-scroll-bottom"][in-view]) {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+export const animateStyles = [base, breakpoints];

package/dist/components/navigation/carousel/carousel.styles.js

@@ -50,7 +50,7 @@ const base = css `
 
   #carousel-header {
     display: flex;
-    align-items: var(--carousel-header-align, baseline);
+    align-items: var(--carousel-header-align, flex-end);
     justify-content: space-between;
     gap: var(--carousel-header-gap, var(--eun-space-m, 16px));
     margin-bottom: var(--eun-space-m, 16px);

package/dist/components/navigation/toolbar/toolbar.d.ts

@@ -54,6 +54,8 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * everything behind it, including the logo and any other bar content;
  * the burger is the only thing that stays visible in front of it.
  *
+ * @slot [menu-icon] - Replaces the burger's default open icon (an `eun-icon name="menu"`) with any content, shown while the panel is closed. Useful wherever `eun-icon`'s own dynamic SVG resolution doesn't fit, e.g. some bundler setups
+ * @slot [close-icon] - Replaces the burger's default close icon (an `eun-icon name="close"`) with any content, shown while the panel is open. See `menu-icon` above
  * @slot start - Left-side content, rendered after a logo image linking to logoHref whenever logoSrc is set
  * @slot center - Center content, truly centered independently of the start and end widths
  * @slot end - Right-side content
@@ -135,6 +137,7 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @cssprop [--toolbar-skip-links-background] - Sets the background of the skip-links bar, defaulting to a darker mix of the bar's own background
  * @cssprop [--toolbar-skip-links-color] - Sets the text color of the skip-links bar
  * @cssprop [--toolbar-skip-links-separator-color] - Sets the color of the divider drawn between skip links
+ * @cssprop [--toolbar-skip-links-gap] - Sets the gap between skip links, with the divider centered in it
  * @element eun-toolbar
  */
 export declare class EunomiaToolbar extends EunomiaToolbar_base {
@@ -302,6 +305,25 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
      * @readonly
      */
     private readonly burgerEl?;
+    /**
+     * Elements assigned to the `menu-icon` slot, if any ; queried live so the
+     * default `eun-icon` fallback correctly appears/disappears as content is
+     * slotted/removed, same pattern `eun-collapse`'s `chevron` slot uses.
+     * @internal
+     */
+    private readonly menuIconSlotEls;
+    /**
+     * Elements assigned to the `close-icon` slot, if any ; see
+     * {@link menuIconSlotEls}.
+     * @internal
+     */
+    private readonly closeIconSlotEls;
+    /**
+     * Re-renders once a `menu-icon`/`close-icon` slot's content changes, so
+     * the default `eun-icon` fallback correctly appears/disappears.
+     * @private
+     */
+    private handleIconSlotChange;
     /**
      * The live `matchMedia` list backing {@link mobile}, rebuilt whenever
      * `mobileBreakpoint` changes.