@eunomia/elements 1.0.0-beta.5 → 1.0.0-beta.7

package/dist/components/content/image-carousel/image-carousel.d.ts

@@ -60,22 +60,26 @@ declare const EunomiaImageCarousel_base: import("../../../utils/constructor.type
  * @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
  * @prop {number} [autoplayInterval=4000] - Milliseconds between each autoplay advance
  * @attr {number} [autoplay-interval=4000] - Milliseconds between each autoplay advance
- * @attr {string} aria-label - The accessible name for the main stage. Defaults to "Image gallery"
- * @prop {string} [ariaLabelPrevious='Previous image'] - The accessible label of the previous controls, on both the main stage and the lightbox
- * @attr {string} [aria-label-previous='Previous image'] - The accessible label of the previous controls, on both the main stage and the lightbox
- * @prop {string} [ariaLabelNext='Next image'] - The accessible label of the next controls, on both the main stage and the lightbox
- * @attr {string} [aria-label-next='Next image'] - The accessible label of the next controls, on both the main stage and the lightbox
- * @prop {string} [ariaLabelExpand='View full-size image'] - The accessible label of the main stage's expand control
- * @attr {string} [aria-label-expand='View full-size image'] - The accessible label of the main stage's expand control
- * @prop {string} [ariaLabelLightbox='Image viewer'] - The accessible name of the lightbox dialog
- * @attr {string} [aria-label-lightbox='Image viewer'] - The accessible name of the lightbox dialog
+ * @attr {string} aria-label - The accessible name for the main stage. Defaults to the localized string for the current locale (English: "Image gallery")
+ * @prop {string} [previousLabel] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
+ * @attr {string} [previous-label] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
+ * @prop {string} [nextLabel] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
+ * @attr {string} [next-label] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
+ * @prop {string} [expandLabel] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
+ * @attr {string} [expand-label] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
+ * @prop {string} [lightboxLabel] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
+ * @attr {string} [lightbox-label] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
  * @fires {ImageChangeEvent} eunimagechange - Fired whenever the active image changes, from either the main stage or the lightbox
  * @cssprop [--image-carousel-aspect-ratio] - Sets the aspect ratio of the main stage
  * @cssprop [--image-carousel-object-fit] - Sets how the main image fits its box
  * @cssprop [--image-carousel-border-radius] - Sets the corner radius of the main stage
  * @cssprop [--image-carousel-background] - Sets the background color behind the main stage, visible when the image is set to fit without cropping
+ * @cssprop [--image-carousel-border-width] - Sets the border width of the main stage, once a border color is set
+ * @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-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
  * @cssprop [--image-carousel-transition-duration] - Sets the duration of the transition animation between images, for click, keyboard, and autoplay changes only, since a touch swipe never plays this
  * @cssprop [--image-carousel-swipe-duration] - Sets the duration of the main stage's touch swipe settling into place on release, whether committing or springing back. Forced to zero under reduced motion settings or when transitions are turned off
@@ -85,6 +89,7 @@ declare const EunomiaImageCarousel_base: import("../../../utils/constructor.type
  * @cssprop [--image-carousel-lightbox-image-radius] - Sets the corner radius of the lightbox's own image
  * @cssprop [--image-carousel-grid-width] - Sets the width of the lightbox's grid column
  * @cssprop [--image-carousel-grid-columns] - Sets the column count of the lightbox's grid
+ * @cssprop [--image-carousel-divider-color] - Sets the color of the line between the lightbox's main image and its grid
  * @cssprop [--image-carousel-dot-size] - Sets the size of the pagination dots
  * @cssprop [--image-carousel-dot-gap] - Sets the gap between pagination dots
  * @cssprop [--image-carousel-dot-color] - Sets the color of the pagination dots
@@ -182,24 +187,30 @@ export declare class EunomiaImageCarousel extends EunomiaImageCarousel_base {
     autoplayInterval: number;
     /**
      * Accessible label of the Previous controls (main stage and lightbox).
-     * @default Previous image
+     * Resolved from the locale dictionary when unset, so it follows
+     * `locale` automatically.
+     * @default {i18n:imageCarousel.previous}
      */
-    ariaLabelPrevious: string;
+    previousLabel?: string;
     /**
      * Accessible label of the Next controls (main stage and lightbox).
-     * @default Next image
+     * Resolved from the locale dictionary when unset, so it follows
+     * `locale` automatically.
+     * @default {i18n:imageCarousel.next}
      */
-    ariaLabelNext: string;
+    nextLabel?: string;
     /**
-     * Accessible label of the main stage's expand control.
-     * @default View full-size image
+     * Accessible label of the main stage's expand control. Resolved from the
+     * locale dictionary when unset, so it follows `locale` automatically.
+     * @default {i18n:imageCarousel.expand}
      */
-    ariaLabelExpand: string;
+    expandLabel?: string;
     /**
-     * Accessible name of the lightbox dialog.
-     * @default Image viewer
+     * Accessible name of the lightbox dialog. Resolved from the locale
+     * dictionary when unset, so it follows `locale` automatically.
+     * @default {i18n:imageCarousel.lightbox}
      */
-    ariaLabelLightbox: string;
+    lightboxLabel?: string;
     /**
      * Text of the visually-hidden live region, debounced so rapid prev/next
      * clicks announce once rather than flooding it.

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

@@ -13,6 +13,7 @@ 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";
 /**
  * Tag name of the image carousel component.
  */
@@ -56,22 +57,26 @@ export const EunomiaImageCarouselTagName = "eun-image-carousel";
  * @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
  * @prop {number} [autoplayInterval=4000] - Milliseconds between each autoplay advance
  * @attr {number} [autoplay-interval=4000] - Milliseconds between each autoplay advance
- * @attr {string} aria-label - The accessible name for the main stage. Defaults to "Image gallery"
- * @prop {string} [ariaLabelPrevious='Previous image'] - The accessible label of the previous controls, on both the main stage and the lightbox
- * @attr {string} [aria-label-previous='Previous image'] - The accessible label of the previous controls, on both the main stage and the lightbox
- * @prop {string} [ariaLabelNext='Next image'] - The accessible label of the next controls, on both the main stage and the lightbox
- * @attr {string} [aria-label-next='Next image'] - The accessible label of the next controls, on both the main stage and the lightbox
- * @prop {string} [ariaLabelExpand='View full-size image'] - The accessible label of the main stage's expand control
- * @attr {string} [aria-label-expand='View full-size image'] - The accessible label of the main stage's expand control
- * @prop {string} [ariaLabelLightbox='Image viewer'] - The accessible name of the lightbox dialog
- * @attr {string} [aria-label-lightbox='Image viewer'] - The accessible name of the lightbox dialog
+ * @attr {string} aria-label - The accessible name for the main stage. Defaults to the localized string for the current locale (English: "Image gallery")
+ * @prop {string} [previousLabel] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
+ * @attr {string} [previous-label] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
+ * @prop {string} [nextLabel] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
+ * @attr {string} [next-label] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
+ * @prop {string} [expandLabel] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
+ * @attr {string} [expand-label] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
+ * @prop {string} [lightboxLabel] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
+ * @attr {string} [lightbox-label] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
  * @fires {ImageChangeEvent} eunimagechange - Fired whenever the active image changes, from either the main stage or the lightbox
  * @cssprop [--image-carousel-aspect-ratio] - Sets the aspect ratio of the main stage
  * @cssprop [--image-carousel-object-fit] - Sets how the main image fits its box
  * @cssprop [--image-carousel-border-radius] - Sets the corner radius of the main stage
  * @cssprop [--image-carousel-background] - Sets the background color behind the main stage, visible when the image is set to fit without cropping
+ * @cssprop [--image-carousel-border-width] - Sets the border width of the main stage, once a border color is set
+ * @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-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
  * @cssprop [--image-carousel-transition-duration] - Sets the duration of the transition animation between images, for click, keyboard, and autoplay changes only, since a touch swipe never plays this
  * @cssprop [--image-carousel-swipe-duration] - Sets the duration of the main stage's touch swipe settling into place on release, whether committing or springing back. Forced to zero under reduced motion settings or when transitions are turned off
@@ -81,6 +86,7 @@ export const EunomiaImageCarouselTagName = "eun-image-carousel";
  * @cssprop [--image-carousel-lightbox-image-radius] - Sets the corner radius of the lightbox's own image
  * @cssprop [--image-carousel-grid-width] - Sets the width of the lightbox's grid column
  * @cssprop [--image-carousel-grid-columns] - Sets the column count of the lightbox's grid
+ * @cssprop [--image-carousel-divider-color] - Sets the color of the line between the lightbox's main image and its grid
  * @cssprop [--image-carousel-dot-size] - Sets the size of the pagination dots
  * @cssprop [--image-carousel-dot-gap] - Sets the gap between pagination dots
  * @cssprop [--image-carousel-dot-color] - Sets the color of the pagination dots
@@ -170,26 +176,6 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
          * @default 4000
          */
         this.autoplayInterval = 4000;
-        /**
-         * Accessible label of the Previous controls (main stage and lightbox).
-         * @default Previous image
-         */
-        this.ariaLabelPrevious = "Previous image";
-        /**
-         * Accessible label of the Next controls (main stage and lightbox).
-         * @default Next image
-         */
-        this.ariaLabelNext = "Next image";
-        /**
-         * Accessible label of the main stage's expand control.
-         * @default View full-size image
-         */
-        this.ariaLabelExpand = "View full-size image";
-        /**
-         * Accessible name of the lightbox dialog.
-         * @default Image viewer
-         */
-        this.ariaLabelLightbox = "Image viewer";
         /**
          * Text of the visually-hidden live region, debounced so rapid prev/next
          * clicks announce once rather than flooding it.
@@ -772,11 +758,11 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
         const edgeSign = this.dragDirection;
         const mainFinal = commit ? `${-edgeSign * 100}%` : "0px";
         const previewFinal = commit ? "0px" : `${edgeSign * 100}%`;
-        const duration = getComputedStyle(this).getPropertyValue("--_swipe-duration");
-        const instant = Number.parseFloat(duration) <= 0;
+        const duration = cssTimeToMs(getComputedStyle(this).getPropertyValue("--_swipe-duration")) ?? 260;
+        const instant = duration <= 0;
         const transition = instant
             ? "none"
-            : "transform var(--_swipe-duration) ease-out";
+            : "transform var(--_swipe-duration) var(--eun-easing-out, ease-out)";
         if (mainImg) {
             mainImg.style.transition = transition;
             mainImg.style.transform = `translateX(${mainFinal})`;
@@ -798,7 +784,7 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
             this.finalizeImageDrag(commit);
         };
         mainImg?.addEventListener("transitionend", onSettled, { once: true });
-        window.setTimeout(onSettled, Number.parseFloat(duration) || 260);
+        window.setTimeout(onSettled, duration || 260);
     }
     /**
      * Clears every inline style {@link beginImageDrag}/
@@ -837,7 +823,7 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
         };
         if (commit && target !== undefined) {
             this.goToIndex(target, direction, { skipTransition: true });
-            this.updateComplete.then(cleanup);
+            void this.updateComplete.then(cleanup);
         }
         else {
             cleanup();
@@ -982,7 +968,9 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
         type="button"
         id="expand-trigger"
         aria-haspopup="dialog"
-        aria-label="${this.ariaLabelExpand} (${this.activeIndex + 1}/${count})"
+        aria-label="${this.expandLabel ??
+            this.dictionary.imageCarousel.expand} (${this.activeIndex +
+            1}/${count})"
         @click=${this.handleExpandClick}
       >
         ${img}
@@ -1002,7 +990,8 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
         type="button"
         class="stage-nav"
         id="prev"
-        aria-label=${this.ariaLabelPrevious}
+        aria-label=${this.previousLabel ??
+            this.dictionary.imageCarousel.previous}
         ?disabled=${disablePrev}
         @click=${() => this.previous()}
       >
@@ -1012,7 +1001,7 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
         type="button"
         class="stage-nav"
         id="next"
-        aria-label=${this.ariaLabelNext}
+        aria-label=${this.nextLabel ?? this.dictionary.imageCarousel.next}
         ?disabled=${disableNext}
         @click=${() => this.next()}
       >
@@ -1028,7 +1017,11 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
      */
     renderThumbnails(count) {
         return html `
-      <div id="thumbnails" role="group" aria-label=${this.dictionary.imageCarousel.selectImage}>
+      <div
+        id="thumbnails"
+        role="group"
+        aria-label=${this.dictionary.imageCarousel.selectImage}
+      >
         ${this.images.map((image, index) => html `
             <button
               type="button"
@@ -1052,7 +1045,11 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
      */
     renderDots(count) {
         return html `
-      <div id="dots" role="group" aria-label=${this.dictionary.imageCarousel.imageNavigation}>
+      <div
+        id="dots"
+        role="group"
+        aria-label=${this.dictionary.imageCarousel.imageNavigation}
+      >
         ${this.images.map((_, index) => {
             const active = index === this.activeIndex;
             return html `
@@ -1099,9 +1096,9 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
         return html `
       <eun-modal
         id="modal"
-        kind="search"
         hide-actions
-        aria-label=${this.ariaLabelLightbox}
+        aria-label=${this.lightboxLabel ??
+            this.dictionary.imageCarousel.lightbox}
         @euncancel=${() => this.handleTransientResume()}
       >
         <div id="lightbox" @keydown=${this.handleKeydown}>
@@ -1136,7 +1133,8 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
                     type="button"
                     class="lightbox-nav"
                     id="lightbox-prev"
-                    aria-label=${this.ariaLabelPrevious}
+                    aria-label=${this.previousLabel ??
+                this.dictionary.imageCarousel.previous}
                     ?disabled=${!this.loop && this.activeIndex <= 0}
                     @click=${() => this.previous()}
                   >
@@ -1146,7 +1144,8 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
                     type="button"
                     class="lightbox-nav"
                     id="lightbox-next"
-                    aria-label=${this.ariaLabelNext}
+                    aria-label=${this.nextLabel ??
+                this.dictionary.imageCarousel.next}
                     ?disabled=${!this.loop && this.activeIndex >= count - 1}
                     @click=${() => this.next()}
                   >
@@ -1160,7 +1159,11 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
           </div>
           ${this.lightboxGrid && hasMultiple
             ? html `
-                <div id="lightbox-grid" role="group" aria-label=${this.dictionary.imageCarousel.allImages}>
+                <div
+                  id="lightbox-grid"
+                  role="group"
+                  aria-label=${this.dictionary.imageCarousel.allImages}
+                >
                   ${this.images.map((image, index) => html `
                       <button
                         type="button"
@@ -1196,7 +1199,7 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
       <div
         id="stage"
         role="group"
-        aria-label=${this.ariaLabel || "Image gallery"}
+        aria-label=${this.ariaLabel || this.dictionary.imageCarousel.gallery}
         @keydown=${this.handleKeydown}
       >
         ${this.renderMainImage(current, count)}
@@ -1245,7 +1248,7 @@ EunomiaImageCarousel.SWIPE_THRESHOLD = 40;
  */
 EunomiaImageCarousel.EDGE_RESISTANCE = 0.3;
 __decorate([
-    property({ type: Array, reflect: true })
+    property({ type: Array, reflect: true, useDefault: true })
 ], EunomiaImageCarousel.prototype, "images", void 0);
 __decorate([
     property({ type: Number, attribute: "active-index" })
@@ -1272,7 +1275,7 @@ __decorate([
     property({ type: Boolean })
 ], EunomiaImageCarousel.prototype, "loop", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaImageCarousel.prototype, "transition", void 0);
 __decorate([
     property({ type: Boolean })
@@ -1281,17 +1284,17 @@ __decorate([
     property({ type: Number, attribute: "autoplay-interval" })
 ], EunomiaImageCarousel.prototype, "autoplayInterval", void 0);
 __decorate([
-    property({ attribute: "aria-label-previous" })
-], EunomiaImageCarousel.prototype, "ariaLabelPrevious", void 0);
+    property({ attribute: "previous-label" })
+], EunomiaImageCarousel.prototype, "previousLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-next" })
-], EunomiaImageCarousel.prototype, "ariaLabelNext", void 0);
+    property({ attribute: "next-label" })
+], EunomiaImageCarousel.prototype, "nextLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-expand" })
-], EunomiaImageCarousel.prototype, "ariaLabelExpand", void 0);
+    property({ attribute: "expand-label" })
+], EunomiaImageCarousel.prototype, "expandLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-lightbox" })
-], EunomiaImageCarousel.prototype, "ariaLabelLightbox", void 0);
+    property({ attribute: "lightbox-label" })
+], EunomiaImageCarousel.prototype, "lightboxLabel", void 0);
 __decorate([
     state()
 ], EunomiaImageCarousel.prototype, "announcement", void 0);

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

@@ -1,5 +1,5 @@
 import { css } from "lit";
-import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
+import { cssBelow } from "../../../utils/media.styles.js";
 /**
  * Base style for the image carousel component.
  *
@@ -8,8 +8,12 @@ import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
  * [--image-carousel-object-fit] - Set a custom `object-fit` for the main image
  * [--image-carousel-border-radius] - Set a custom border radius for the main stage
  * [--image-carousel-background] - Set a custom background color behind the main stage, visible with `object-fit: contain`
+ * [--image-carousel-border-width] - Set a custom border width for the main stage, once a border color is set
+ * [--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-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
  * [--image-carousel-transition-duration] - Set a custom duration for the `transition` animation between images
  * [--image-carousel-swipe-duration] - Set a custom duration for the main stage's touch swipe settling into place on release (committing, or springing back)
@@ -19,6 +23,7 @@ import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
  * [--image-carousel-lightbox-image-radius] - Set a custom border radius for the lightbox's own image
  * [--image-carousel-grid-width] - Set a custom width for the lightbox's grid column
  * [--image-carousel-grid-columns] - Set a custom column count for the lightbox's grid
+ * [--image-carousel-divider-color] - Set a custom color for the line between the lightbox's main image and its grid
  * [--image-carousel-dot-size] - Set a custom size for the pagination dots
  * [--image-carousel-dot-gap] - Set a custom gap between pagination dots
  * [--image-carousel-dot-color] - Set a custom color for the pagination dots
@@ -29,7 +34,10 @@ const base = css `
     display: block;
     --_magnifierZoom: 2.5;
     --_transitionDuration: var(--image-carousel-transition-duration, 380ms);
-    --_swipe-duration: var(--image-carousel-swipe-duration, 200ms);
+    --_swipe-duration: var(
+      --image-carousel-swipe-duration,
+      var(--eun-duration-m, 200ms)
+    );
   }
 
   :host([transition="none"]) {
@@ -62,7 +70,18 @@ const base = css `
       var(--eun-surface-sunken, #f7f8fa)
     );
     outline: 3px solid transparent;
-    transition: outline-color 0.2s ease-out;
+    transition: outline-color var(--eun-duration-m, 200ms)
+      var(--eun-easing-out, ease-out);
+  }
+  #stage::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 4;
+    border: var(--image-carousel-border-width, var(--eun-border-width-s, 1px))
+      solid var(--image-carousel-border-color, transparent);
+    border-radius: inherit;
+    pointer-events: none;
   }
 
   #stage:has(#expand-trigger:focus-visible) {
@@ -100,7 +119,8 @@ const base = css `
   }
 
   #main-image {
-    transition: transform 0.15s ease;
+    transition: transform var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   #main-image.zoomed {
     transform: scale(var(--_magnifierZoom));
@@ -158,22 +178,28 @@ const base = css `
     }
   }
   .transition-slide.entering.dir-next {
-    animation: ic-slide-in-next var(--_transitionDuration) ease;
+    animation: ic-slide-in-next var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
   .transition-slide.entering.dir-prev {
-    animation: ic-slide-in-prev var(--_transitionDuration) ease;
+    animation: ic-slide-in-prev var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
   .transition-slide.leaving.dir-next {
-    animation: ic-slide-out-next var(--_transitionDuration) ease;
+    animation: ic-slide-out-next var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
   .transition-slide.leaving.dir-prev {
-    animation: ic-slide-out-prev var(--_transitionDuration) ease;
+    animation: ic-slide-out-prev var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
   .transition-fade.entering {
-    animation: ic-fade-in var(--_transitionDuration) ease;
+    animation: ic-fade-in var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
   .transition-fade.leaving {
-    animation: ic-fade-out var(--_transitionDuration) ease;
+    animation: ic-fade-out var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
 
   #expand-icon {
@@ -190,7 +216,8 @@ const base = css `
     background: rgba(7, 22, 33, 0.55);
     color: #fff;
     opacity: 0.85;
-    transition: opacity 0.2s ease;
+    transition: opacity var(--eun-duration-m, 200ms)
+      var(--eun-easing-default, ease);
     cursor: pointer;
   }
 
@@ -213,9 +240,10 @@ const base = css `
     box-shadow: none;
     outline: 2px solid transparent;
     transition:
-      outline 0.2s ease-out,
-      background-color 0.2s ease,
-      box-shadow 0.2s ease;
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-default, ease),
+      box-shadow var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
   #prev {
     left: var(--eun-space-s, 8px);
@@ -268,16 +296,17 @@ const base = css `
     width: var(--image-carousel-thumbnail-size, 64px);
     height: var(--image-carousel-thumbnail-size, 64px);
     overflow: hidden;
-    border: var(--eun-border-width-m, 1.5px) solid transparent;
+    border: var(--eun-border-width-m, 1.5px) solid
+      var(--image-carousel-thumbnail-border-color, transparent);
     border-radius: var(--eun-border-radius-s, 6px);
     cursor: pointer;
     opacity: 0.6;
     outline: 2px solid transparent;
     outline-offset: -2px;
     transition:
-      opacity 0.2s ease,
-      outline 0.2s ease-out,
-      border-color 0.2s ease;
+      opacity var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border-color var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
   .thumbnail img {
     display: block;
@@ -290,7 +319,10 @@ const base = css `
   }
   .thumbnail[aria-current="true"] {
     opacity: 1;
-    border-color: var(--eun-color-primary-500, #3d6fff);
+    border-color: var(
+      --image-carousel-thumbnail-active-border-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
   }
   .thumbnail:focus-visible {
     outline-color: var(--eun-color-primary-500, #3d6fff);
@@ -317,9 +349,10 @@ const base = css `
     outline: 2px solid transparent;
     outline-offset: 2px;
     transition:
-      width 0.2s ease,
-      border-radius 0.2s ease,
-      background-color 0.2s ease;
+      width var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      border-radius var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-default, ease);
   }
   .dot:focus-visible {
     outline-color: var(--eun-color-primary-500, #3d6fff);
@@ -334,6 +367,7 @@ const base = css `
   }
 
   #modal {
+    --modal-padding: 0;
     --modal-width: var(--image-carousel-lightbox-width, min(1200px, 94vw));
     --modal-max-height: var(
       --image-carousel-lightbox-max-height,
@@ -384,7 +418,8 @@ const base = css `
     cursor: pointer;
     outline: 2px solid transparent;
     outline-offset: 2px;
-    transition: background-color 0.2s ease;
+    transition: background-color var(--eun-duration-m, 200ms)
+      var(--eun-easing-default, ease);
   }
   #lightbox-prev {
     left: var(--eun-space-m, 16px);
@@ -426,20 +461,21 @@ const base = css `
     overflow-y: auto;
     background: var(--eun-surface-color, #ffffff);
     border-left: var(--eun-border-width-s, 1px) solid
-      var(--eun-border-color, #dee0e7);
+      var(--image-carousel-divider-color, var(--eun-border-color, #dee0e7));
   }
   .grid-item {
     all: unset;
     box-sizing: border-box;
     aspect-ratio: 1;
     overflow: hidden;
-    border: var(--eun-border-width-m, 1.5px) solid transparent;
+    border: var(--eun-border-width-m, 1.5px) solid
+      var(--image-carousel-thumbnail-border-color, transparent);
     border-radius: var(--eun-border-radius-s, 6px);
     cursor: pointer;
     opacity: 0.7;
     transition:
-      opacity 0.2s ease,
-      border-color 0.2s ease;
+      opacity var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      border-color var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
   .grid-item img {
     display: block;
@@ -452,14 +488,17 @@ const base = css `
   }
   .grid-item[aria-current="true"] {
     opacity: 1;
-    border-color: var(--eun-color-primary-500, #3d6fff);
+    border-color: var(
+      --image-carousel-thumbnail-active-border-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
   }
   .grid-item:focus-visible {
     outline: 2px solid var(--eun-color-primary-500, #3d6fff);
     outline-offset: 2px;
   }
 
-  @media (max-width: ${EUNOMIA_BREAKPOINTS.mobile}px) {
+  @media ${cssBelow("mobile")} {
     #lightbox {
       flex-direction: column;
     }
@@ -472,7 +511,7 @@ const base = css `
       overflow-x: auto;
       overflow-y: hidden;
       border-top: var(--eun-border-width-s, 1px) solid
-        var(--eun-border-color, #dee0e7);
+        var(--image-carousel-divider-color, var(--eun-border-color, #dee0e7));
       border-left: none;
     }
   }