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

package/dist/components/content/description-list/description-list.styles.js

@@ -0,0 +1,185 @@
+import { css } from "lit";
+import { cssFrom } from "../../../utils/media.styles.js";
+/**
+ * Light DOM style of the native `<dl>` slotted into `eun-description-list`.
+ * The component has no shadow root, so this one sheet styles it entirely:
+ * `eun-description-list` adopts it into its own root node (the document,
+ * or the shadow root it lives in), and the exact same rules are published
+ * as `description-list-ssr.css`, so a server-rendered list looks final
+ * before any script runs.
+ *
+ * Mobile first: the label sits above its value and the pairs fill a
+ * single column by default. From the `mobile` breakpoint up, the label
+ * moves beside its value unless `layout="stacked"`, and `columns` takes
+ * effect. A pair is either a bare `<dt>`/`<dd>` run or a `<div>` wrapping
+ * one; `columns` needs the `<div>` wrappers, since each one becomes a grid
+ * cell, and its first row gets no divider.
+ *
+ * Every rule is scoped to `eun-description-list > dl`, so it never touches
+ * a `<dl>` outside of it, and stays at a low specificity a consumer class
+ * overrides easily.
+ *
+ * Custom css variables:
+ * [--description-list-font-size] - Set a custom font size
+ * [--description-list-label-color] - Set a custom label (`<dt>`) color
+ * [--description-list-label-font-weight] - Set a custom label (`<dt>`) font weight
+ * [--description-list-value-color] - Set a custom value (`<dd>`) color
+ * [--description-list-label-width] - Set a custom label column width, beside the value
+ * [--description-list-row-gap] - Set a custom space between two pairs
+ * [--description-list-column-gap] - Set a custom space between a label and its value, and between two columns
+ * [--description-list-label-gap] - Set a custom space between a label and its value, above it
+ * [--description-list-divider-color] - Set a custom divider color, with `divided`
+ */
+const base = css `
+  eun-description-list {
+    --_dl-row-gap: var(--description-list-row-gap, var(--eun-space-m, 1rem));
+    --_dl-column-gap: var(
+      --description-list-column-gap,
+      var(--eun-space-l, 2rem)
+    );
+    --_dl-label-gap: var(
+      --description-list-label-gap,
+      var(--eun-space-xs, 0.25rem)
+    );
+    --_dl-label-width: var(--description-list-label-width, fit-content(40%));
+    --_dl-divider: var(--eun-border-width-s, 1px) solid
+      var(--description-list-divider-color, var(--eun-border-color, #dee0e7));
+    --_dl-columns: 1;
+    display: block;
+  }
+
+  eun-description-list > dl {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: baseline;
+    margin: 0;
+    font-family: var(--eun-font-family, "Mulish", sans-serif);
+    font-size: var(--description-list-font-size, var(--eun-font-size-s, 13px));
+    color: var(--description-list-value-color, var(--eun-text-color, #071621));
+  }
+
+  eun-description-list > dl > div {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    align-items: baseline;
+  }
+
+  eun-description-list > dl > dt,
+  eun-description-list > dl > div > dt {
+    grid-column: 1;
+    margin: 0;
+    font-weight: var(--description-list-label-font-weight, inherit);
+    color: var(
+      --description-list-label-color,
+      var(--eun-text-secondary, #484e61)
+    );
+  }
+
+  eun-description-list > dl > dd,
+  eun-description-list > dl > div > dd {
+    grid-column: 1;
+    min-width: 0;
+    margin: var(--_dl-label-gap) 0 0;
+    overflow-wrap: anywhere;
+  }
+
+  eun-description-list > dl > dd + dt,
+  eun-description-list > dl > div + div {
+    margin-top: var(--_dl-row-gap);
+  }
+
+  eun-description-list[divided] > dl > dd + dt,
+  eun-description-list[divided] > dl > div + div {
+    padding-top: var(--_dl-row-gap);
+    border-top: var(--_dl-divider);
+  }
+
+  @media ${cssFrom("mobile")} {
+    eun-description-list:not([layout="stacked"]) > dl {
+      grid-template-columns: var(--_dl-label-width) minmax(0, 1fr);
+    }
+
+    eun-description-list:not([layout="stacked"]) > dl > dd,
+    eun-description-list:not([layout="stacked"]) > dl > div > dd {
+      grid-column: 2;
+      margin-top: 0;
+      padding-inline-start: var(--_dl-column-gap);
+    }
+
+    eun-description-list:not([layout="stacked"]) > dl > dd + dd,
+    eun-description-list:not([layout="stacked"]) > dl > div > dd + dd {
+      margin-top: var(--_dl-label-gap);
+    }
+
+    eun-description-list:not([layout="stacked"]) > dl > dd + dt + dd {
+      margin-top: var(--_dl-row-gap);
+    }
+
+    eun-description-list[divided]:not([layout="stacked"]) > dl > dd + dt + dd {
+      padding-top: var(--_dl-row-gap);
+      border-top: var(--_dl-divider);
+    }
+  }
+
+  eun-description-list[align="center"] > dl {
+    text-align: center;
+  }
+
+  eun-description-list[align="end"] > dl {
+    text-align: end;
+  }
+
+  eun-description-list[columns="2"] {
+    --_dl-columns: 2;
+  }
+
+  eun-description-list[columns="3"] {
+    --_dl-columns: 3;
+  }
+
+  eun-description-list[columns="4"] {
+    --_dl-columns: 4;
+  }
+
+  @media ${cssFrom("mobile")} {
+    eun-description-list[align="space-between"]:not([layout="stacked"])
+      > dl
+      > dd,
+    eun-description-list[align="space-between"]:not([layout="stacked"])
+      > dl
+      > div
+      > dd {
+      text-align: end;
+    }
+
+    eun-description-list:is([columns="2"], [columns="3"], [columns="4"]) > dl {
+      grid-template-columns: repeat(var(--_dl-columns), minmax(0, 1fr));
+      column-gap: var(--_dl-column-gap);
+    }
+
+    eun-description-list:is([columns="2"], [columns="3"], [columns="4"])
+      > dl
+      > div {
+      grid-column: auto;
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    eun-description-list:is([columns="2"], [columns="3"], [columns="4"]):not(
+        [layout="stacked"]
+      )
+      > dl
+      > div {
+      grid-template-columns: var(--_dl-label-width) minmax(0, 1fr);
+    }
+
+    eun-description-list[columns="2"] > dl > div:nth-child(-n + 2),
+    eun-description-list[columns="3"] > dl > div:nth-child(-n + 3),
+    eun-description-list[columns="4"] > dl > div:nth-child(-n + 4) {
+      margin-top: 0;
+      padding-top: 0;
+      border-top: none;
+    }
+  }
+`;
+export const descriptionListStyles = base;

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

@@ -30,6 +30,8 @@ export declare function setIconBaseUrl(url: string): void;
  * @cssprop [--icon-color] - Sets the color of the icon, defaulting to the surrounding text color
  * @cssprop [--icon-background] - Sets a background color behind the icon, for example for a hover highlight. Transparent by default
  * @cssprop [--icon-padding] - Sets the space between the icon and its background box. Zero by default
+ * @cssprop [--icon-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --icon-padding is set
+ * @cssprop [--icon-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --icon-padding is set
  * @cssprop [--icon-border-radius] - Sets the corner radius of the background box
  * @cssprop [--icon-transition] - Sets the transition applied to the icon's color, background, and size changes. 0.2s by default
  * @element eun-icon

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

@@ -86,6 +86,8 @@ export function setIconBaseUrl(url) {
  * @cssprop [--icon-color] - Sets the color of the icon, defaulting to the surrounding text color
  * @cssprop [--icon-background] - Sets a background color behind the icon, for example for a hover highlight. Transparent by default
  * @cssprop [--icon-padding] - Sets the space between the icon and its background box. Zero by default
+ * @cssprop [--icon-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --icon-padding is set
+ * @cssprop [--icon-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --icon-padding is set
  * @cssprop [--icon-border-radius] - Sets the corner radius of the background box
  * @cssprop [--icon-transition] - Sets the transition applied to the icon's color, background, and size changes. 0.2s by default
  * @element eun-icon

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

@@ -23,7 +23,10 @@ export const iconStyles = css `
     box-sizing: content-box;
     width: var(--_size);
     height: var(--_size);
-    padding: var(--icon-padding, 0);
+    padding: var(
+      --icon-padding,
+      var(--icon-padding-block, 0) var(--icon-padding-inline, 0)
+    );
     fill: var(--_color);
     color: var(--_color);
     background-color: var(--_background);

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} [ariaLabelPrevious] - 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} [aria-label-previous] - 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} [ariaLabelNext] - 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} [aria-label-next] - 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} [ariaLabelExpand] - 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} [aria-label-expand] - 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} [ariaLabelLightbox] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
+ * @attr {string} [aria-label-lightbox] - 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;
+    ariaLabelPrevious?: 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;
+    ariaLabelNext?: 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;
+    ariaLabelExpand?: 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;
+    ariaLabelLightbox?: 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} [ariaLabelPrevious] - 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} [aria-label-previous] - 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} [ariaLabelNext] - 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} [aria-label-next] - 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} [ariaLabelExpand] - 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} [aria-label-expand] - 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} [ariaLabelLightbox] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
+ * @attr {string} [aria-label-lightbox] - 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.ariaLabelExpand ??
+            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.ariaLabelPrevious ??
+            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.ariaLabelNext ?? 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.ariaLabelLightbox ??
+            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.ariaLabelPrevious ??
+                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.ariaLabelNext ??
+                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)}