@eunomia/elements 1.0.0-beta.9 → 1.0.0

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

@@ -40,7 +40,7 @@ declare const EunomiaChip_base: import("../../../utils/constructor.type.js").Con
  * corner treatment, a circle for a person's photo or a square for a
  * generic image thumbnail, not its placement.
  *
- * Removal is the chip's core behavior, so removable defaults to true. A
+ * removable adds a delete button. A
  * real button fires the close event when activated, reusing the same
  * event an alert's close button fires. Like an alert, a chip has no
  * visibility state of its own, so removing the element from the DOM in
@@ -67,8 +67,8 @@ declare const EunomiaChip_base: import("../../../utils/constructor.type.js").Con
  * @attr {string} [avatar-shape='circle'] - The shape of the leading avatar, initials, or image
  * @prop {string} avatarInitials - One or two characters shown in a colored badge in place of an image. Ignored once an avatar image is set, and takes priority over icon
  * @attr {string} [avatar-initials] - One or two characters shown in a colored badge in place of an image
- * @prop {boolean} [rounded=true] - Whether the chip is fully rounded, as a pill
- * @prop {boolean} [removable=true] - Shows the delete button. Clicking it fires the close event without changing the chip's own rendering
+ * @prop {boolean} [rounded=false] - Whether the chip is fully rounded, as a pill
+ * @prop {boolean} [removable=false] - Shows the delete button. Clicking it fires the close event without changing the chip's own rendering
  * @prop {boolean} [disabled=false] - Disables the delete button, preventing removal
  * @prop {string} [removeLabel] - A prefix combined with the chip's own slotted text to build the delete button's accessible name, such as "Remove Alice Doe", so multiple chips on the same page stay distinguishable to assistive technology. Defaults to the localized string for the current locale (English: "Remove")
  * @attr {string} [remove-label] - A prefix combined with the chip's own slotted text to build the delete button's accessible name. Defaults to the localized string for the current locale (English: "Remove")
@@ -156,17 +156,15 @@ export declare class EunomiaChip extends EunomiaChip_base {
     avatarInitials?: string;
     /**
      * Indicates whether the chip should be fully rounded (a pill) or not.
-     * Reflected as an attribute (unlike `eun-tag`'s own `rounded`) so the
-     * default `true` value is visible to the CSS attribute selector that
-     * picks the pill's border radius, without requiring the consumer to
-     * write the attribute out explicitly just to keep the default.
-     * @default true
+     * Reflected so the CSS attribute selector that picks the pill's border
+     * radius also matches when set from JS.
+     * @default false
      */
     rounded: boolean;
     /**
      * Shows the delete button ; clicking it fires `eunclose` without changing
      * the chip's own rendering.
-     * @default true
+     * @default false
      */
     removable: boolean;
     /**

package/dist/components/content/chip/chip.js

@@ -10,7 +10,6 @@ import { CloseEvent } from "../../../events/close.event.js";
 import { resolveIcon } from "../../../utils/severity-icon.utils.js";
 import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 import { chipStyles } from "./chip.styles.js";
-import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the chip component.
  */
@@ -45,7 +44,7 @@ const DELETE_ICON_SIZES = {
  * corner treatment, a circle for a person's photo or a square for a
  * generic image thumbnail, not its placement.
  *
- * Removal is the chip's core behavior, so removable defaults to true. A
+ * removable adds a delete button. A
  * real button fires the close event when activated, reusing the same
  * event an alert's close button fires. Like an alert, a chip has no
  * visibility state of its own, so removing the element from the DOM in
@@ -72,8 +71,8 @@ const DELETE_ICON_SIZES = {
  * @attr {string} [avatar-shape='circle'] - The shape of the leading avatar, initials, or image
  * @prop {string} avatarInitials - One or two characters shown in a colored badge in place of an image. Ignored once an avatar image is set, and takes priority over icon
  * @attr {string} [avatar-initials] - One or two characters shown in a colored badge in place of an image
- * @prop {boolean} [rounded=true] - Whether the chip is fully rounded, as a pill
- * @prop {boolean} [removable=true] - Shows the delete button. Clicking it fires the close event without changing the chip's own rendering
+ * @prop {boolean} [rounded=false] - Whether the chip is fully rounded, as a pill
+ * @prop {boolean} [removable=false] - Shows the delete button. Clicking it fires the close event without changing the chip's own rendering
  * @prop {boolean} [disabled=false] - Disables the delete button, preventing removal
  * @prop {string} [removeLabel] - A prefix combined with the chip's own slotted text to build the delete button's accessible name, such as "Remove Alice Doe", so multiple chips on the same page stay distinguishable to assistive technology. Defaults to the localized string for the current locale (English: "Remove")
  * @attr {string} [remove-label] - A prefix combined with the chip's own slotted text to build the delete button's accessible name. Defaults to the localized string for the current locale (English: "Remove")
@@ -130,19 +129,17 @@ let EunomiaChip = class EunomiaChip extends LocalizableMixin(LitElement) {
         this.avatarShape = "circle";
         /**
          * Indicates whether the chip should be fully rounded (a pill) or not.
-         * Reflected as an attribute (unlike `eun-tag`'s own `rounded`) so the
-         * default `true` value is visible to the CSS attribute selector that
-         * picks the pill's border radius, without requiring the consumer to
-         * write the attribute out explicitly just to keep the default.
-         * @default true
+         * Reflected so the CSS attribute selector that picks the pill's border
+         * radius also matches when set from JS.
+         * @default false
          */
-        this.rounded = true;
+        this.rounded = false;
         /**
          * Shows the delete button ; clicking it fires `eunclose` without changing
          * the chip's own rendering.
-         * @default true
+         * @default false
          */
-        this.removable = true;
+        this.removable = false;
         /**
          * Disables the delete button, preventing removal.
          * @default false
@@ -364,10 +361,10 @@ __decorate([
     property({ attribute: "avatar-initials" })
 ], EunomiaChip.prototype, "avatarInitials", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter, reflect: true })
+    property({ type: Boolean, reflect: true })
 ], EunomiaChip.prototype, "rounded", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter, reflect: true })
+    property({ type: Boolean, reflect: true })
 ], EunomiaChip.prototype, "removable", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

package/dist/components/content/chip/chip.styles.js

@@ -32,7 +32,6 @@ const base = css `
   }
 
   :host {
-    /* Unlike a tag's transparent outline, a chip's sits on the surface. */
     --_bg-outline: var(--eun-surface-color, #ffffff);
   }
 
@@ -65,7 +64,7 @@ const base = css `
   :host {
     --_radius: var(--eun-border-radius-s, 5px);
   }
-  :host([rounded]:not([rounded="false"])) {
+  :host([rounded]) {
     --_radius: var(--eun-border-radius-xl, 999px);
   }
 
@@ -77,9 +76,6 @@ const base = css `
     height: var(--_height);
     --_borderWidth: var(--chip-border-width, var(--eun-border-width-s, 1px));
     background: var(--chip-background-color, var(--_bg));
-    /* Every appearance carries the same border box (transparent unless
-       drawn), taken out of the padding, so switching appearance or adding a
-       --chip-border-* never changes the chip's size. */
     border: var(--_borderWidth) solid var(--chip-border-color, var(--_bd));
     border-radius: var(--chip-border-radius, var(--_radius));
     padding-inline-start: max(

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

@@ -53,12 +53,16 @@ export declare const EunomiaCollapseTagName = "eun-collapse";
  * @prop {boolean} [disabled=false] - Whether the trigger is disabled
  * @prop {boolean} [independent=false] - Renders the trigger and panel as two fully rounded, separated boxes with a gap instead of the default flush shape with a divider. Use it for instances with no shared exclusivity between them
  * @fires {ChangeEvent} eunchange - Fired whenever open changes
+ * @csspart trigger - The trigger button, for effects its custom properties don't cover, such as an active indicator
+ * @csspart panel - The panel holding the content, below the trigger
  * @cssprop [--collapse-background] - Sets the background color of the trigger and panel while closed
  * @cssprop [--collapse-background-hover] - Sets the background color of the trigger on hover, while closed
  * @cssprop [--collapse-background-open] - Sets the background color of the trigger and panel while open
  * @cssprop [--collapse-color] - Sets the heading and icon color while closed
  * @cssprop [--collapse-color-hover] - Sets the heading and icon color of the trigger on hover, while closed
  * @cssprop [--collapse-color-open] - Sets the heading and icon color while open
+ * @cssprop [--collapse-background-focus] - Sets the background color of the trigger on keyboard focus
+ * @cssprop [--collapse-color-focus] - Sets the heading and icon color of the trigger on keyboard focus
  * @cssprop [--collapse-subheading-color] - Sets the color of the subheading
  * @cssprop [--collapse-content-color] - Sets the color of the panel's content. Rich text and slotted content both inherit it by default, and either can still override it locally
  * @cssprop [--collapse-content-font-size] - Sets the font size of the panel's content, inherited by richText and slotted content alike
@@ -75,6 +79,7 @@ export declare const EunomiaCollapseTagName = "eun-collapse";
  * @cssprop [--collapse-panel-padding-block] - Sets the vertical padding of the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
  * @cssprop [--collapse-panel-padding-inline] - Sets the horizontal padding of the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
  * @cssprop [--collapse-heading-font-size] - Sets the font size of the heading
+ * @cssprop [--collapse-heading-font-weight] - Sets the font weight of the heading
  * @cssprop [--collapse-subheading-font-size] - Sets the font size of the subheading
  * @cssprop [--collapse-divider-width] - Sets the width of the line between the trigger and the panel. Zero removes it
  * @cssprop [--collapse-divider-color] - Sets the color of the line between the trigger and the panel

package/dist/components/content/collapse/collapse.js

@@ -65,12 +65,16 @@ export const EunomiaCollapseTagName = "eun-collapse";
  * @prop {boolean} [disabled=false] - Whether the trigger is disabled
  * @prop {boolean} [independent=false] - Renders the trigger and panel as two fully rounded, separated boxes with a gap instead of the default flush shape with a divider. Use it for instances with no shared exclusivity between them
  * @fires {ChangeEvent} eunchange - Fired whenever open changes
+ * @csspart trigger - The trigger button, for effects its custom properties don't cover, such as an active indicator
+ * @csspart panel - The panel holding the content, below the trigger
  * @cssprop [--collapse-background] - Sets the background color of the trigger and panel while closed
  * @cssprop [--collapse-background-hover] - Sets the background color of the trigger on hover, while closed
  * @cssprop [--collapse-background-open] - Sets the background color of the trigger and panel while open
  * @cssprop [--collapse-color] - Sets the heading and icon color while closed
  * @cssprop [--collapse-color-hover] - Sets the heading and icon color of the trigger on hover, while closed
  * @cssprop [--collapse-color-open] - Sets the heading and icon color while open
+ * @cssprop [--collapse-background-focus] - Sets the background color of the trigger on keyboard focus
+ * @cssprop [--collapse-color-focus] - Sets the heading and icon color of the trigger on keyboard focus
  * @cssprop [--collapse-subheading-color] - Sets the color of the subheading
  * @cssprop [--collapse-content-color] - Sets the color of the panel's content. Rich text and slotted content both inherit it by default, and either can still override it locally
  * @cssprop [--collapse-content-font-size] - Sets the font size of the panel's content, inherited by richText and slotted content alike
@@ -87,6 +91,7 @@ export const EunomiaCollapseTagName = "eun-collapse";
  * @cssprop [--collapse-panel-padding-block] - Sets the vertical padding of the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
  * @cssprop [--collapse-panel-padding-inline] - Sets the horizontal padding of the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
  * @cssprop [--collapse-heading-font-size] - Sets the font size of the heading
+ * @cssprop [--collapse-heading-font-weight] - Sets the font weight of the heading
  * @cssprop [--collapse-subheading-font-size] - Sets the font size of the subheading
  * @cssprop [--collapse-divider-width] - Sets the width of the line between the trigger and the panel. Zero removes it
  * @cssprop [--collapse-divider-color] - Sets the color of the line between the trigger and the panel
@@ -411,6 +416,7 @@ let EunomiaCollapse = class EunomiaCollapse extends LitElement {
       <button
         type="button"
         id="header"
+        part="trigger"
         aria-expanded=${this.open ? "true" : "false"}
         aria-controls="panel"
         ?disabled=${this.disabled}
@@ -464,6 +470,7 @@ let EunomiaCollapse = class EunomiaCollapse extends LitElement {
         ${this.renderHeadingWrapper(trigger)}
         <div
           id="panel"
+          part="panel"
           ?inert=${!this.open && (this.disabled || !supportsUntilFound)}
           hidden=${this.panelHidden ? "until-found" : nothing}
           @beforematch=${this.handleBeforeMatch}

package/dist/components/content/collapse/collapse.styles.d.ts

@@ -8,6 +8,8 @@
  * [--collapse-color] - Set a custom heading/icon color while closed
  * [--collapse-color-hover] - Set a custom heading/icon color for the trigger on hover, while closed
  * [--collapse-color-open] - Set a custom heading/icon color while open
+ * [--collapse-background-focus] - Set a custom background color for the trigger on keyboard focus
+ * [--collapse-color-focus] - Set a custom heading/icon color for the trigger on keyboard focus
  * [--collapse-subheading-color] - Set a custom color for the subheading
  * [--collapse-content-color] - Set a custom color for the panel's content (rich text and slotted content both inherit it by default, and either can still override it locally)
  * [--collapse-content-font-size] - Set a custom font size for the panel's content, inherited by richText and slotted content alike
@@ -24,6 +26,7 @@
  * [--collapse-panel-padding-block] - Set a custom vertical padding for the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
  * [--collapse-panel-padding-inline] - Set a custom horizontal padding for the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
  * [--collapse-heading-font-size] - Set a custom font size for the heading
+ * [--collapse-heading-font-weight] - Set a custom font weight for the heading
  * [--collapse-subheading-font-size] - Set a custom font size for the subheading
  * [--collapse-divider-width] - Set a custom width for the line between the trigger and the panel. 0 removes it
  * [--collapse-divider-color] - Set a custom color for the line between the trigger and the panel

package/dist/components/content/collapse/collapse.styles.js

@@ -9,6 +9,8 @@ import { css } from "lit";
  * [--collapse-color] - Set a custom heading/icon color while closed
  * [--collapse-color-hover] - Set a custom heading/icon color for the trigger on hover, while closed
  * [--collapse-color-open] - Set a custom heading/icon color while open
+ * [--collapse-background-focus] - Set a custom background color for the trigger on keyboard focus
+ * [--collapse-color-focus] - Set a custom heading/icon color for the trigger on keyboard focus
  * [--collapse-subheading-color] - Set a custom color for the subheading
  * [--collapse-content-color] - Set a custom color for the panel's content (rich text and slotted content both inherit it by default, and either can still override it locally)
  * [--collapse-content-font-size] - Set a custom font size for the panel's content, inherited by richText and slotted content alike
@@ -25,6 +27,7 @@ import { css } from "lit";
  * [--collapse-panel-padding-block] - Set a custom vertical padding for the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
  * [--collapse-panel-padding-inline] - Set a custom horizontal padding for the panel, as one length applied to both sides. Ignored when --collapse-panel-padding or --collapse-padding is set
  * [--collapse-heading-font-size] - Set a custom font size for the heading
+ * [--collapse-heading-font-weight] - Set a custom font weight for the heading
  * [--collapse-subheading-font-size] - Set a custom font size for the subheading
  * [--collapse-divider-width] - Set a custom width for the line between the trigger and the panel. 0 removes it
  * [--collapse-divider-color] - Set a custom color for the line between the trigger and the panel
@@ -59,7 +62,7 @@ export const collapseStyles = css `
     );
     --_subheadingColor: var(
       --collapse-subheading-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
     --_contentColor: var(
       --collapse-content-color,
@@ -143,6 +146,10 @@ export const collapseStyles = css `
   #wrapper > h6 {
     margin: 0;
   }
+  #wrapper:not(.open) #header:focus-visible:not(:disabled) {
+    background: var(--collapse-background-focus, var(--_background));
+    color: var(--collapse-color-focus, var(--_color));
+  }
   #wrapper:not(.open) #header:hover:not(:disabled) {
     background: var(--_backgroundHover);
     color: var(--_colorHover);
@@ -170,6 +177,7 @@ export const collapseStyles = css `
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: var(--collapse-heading-font-size, var(--eun-font-size-s, 14px));
+    font-weight: var(--collapse-heading-font-weight, var(--eun-font-weight-l));
   }
   #heading ::slotted(*) {
     margin: 0;
@@ -250,6 +258,10 @@ export const collapseStyles = css `
       background-color var(--_transitionDuration)
         var(--eun-easing-out, ease-out);
   }
+  .open #header:focus-visible:not(:disabled) {
+    background: var(--collapse-background-focus, var(--_backgroundOpen));
+    color: var(--collapse-color-focus, var(--_colorOpen));
+  }
   .open #panel {
     grid-template-rows: 1fr;
     background: var(--_backgroundOpen);

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

@@ -72,7 +72,7 @@ const base = css `
     font-weight: var(--description-list-label-font-weight, inherit);
     color: var(
       --description-list-label-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
   }
 

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

@@ -48,13 +48,13 @@ declare const EunomiaImageCarousel_base: import("../../../utils/constructor.type
  * @prop {boolean} [magnifier=false] - Enables a hover-to-zoom effect on the main image, for mouse and pen pointers only. Has no effect on touch, which relies on the lightbox instead
  * @prop {number} [magnifierZoom=2.5] - How much the main image scales up under the cursor while hovering, with magnifier on
  * @attr {number} [magnifier-zoom=2.5] - How much the main image scales up under the cursor while hovering, with magnifier on
- * @prop {boolean} [showThumbnails=true] - Shows the thumbnail strip below the main stage, for jumping directly to an image
- * @attr {boolean} [show-thumbnails=true] - Shows the thumbnail strip below the main stage, for jumping directly to an image
- * @prop {boolean} [showDots=true] - Shows pagination dots below the main stage as a position indicator when the thumbnail strip is off. Has no effect while thumbnails are shown, since they already convey the same information
- * @attr {boolean} [show-dots=true] - Shows pagination dots below the main stage as a position indicator when the thumbnail strip is off. Has no effect while thumbnails are shown, since they already convey the same information
- * @prop {boolean} [lightbox=true] - Whether clicking the main image, or its expand control, opens the full-size lightbox
- * @prop {boolean} [lightboxGrid=true] - Shows a scrollable grid of every image alongside the lightbox's own main image, for jumping directly to one without closing it
- * @attr {boolean} [lightbox-grid=true] - Shows a scrollable grid of every image alongside the lightbox's own main image, for jumping directly to one without closing it
+ * @prop {boolean} [showThumbnails=false] - Shows the thumbnail strip below the main stage, for jumping directly to an image
+ * @attr {boolean} [show-thumbnails=false] - Shows the thumbnail strip below the main stage, for jumping directly to an image
+ * @prop {boolean} [showDots=false] - Shows pagination dots below the main stage as a position indicator when the thumbnail strip is off. Has no effect while thumbnails are shown, since they already convey the same information
+ * @attr {boolean} [show-dots=false] - Shows pagination dots below the main stage as a position indicator when the thumbnail strip is off. Has no effect while thumbnails are shown, since they already convey the same information
+ * @prop {boolean} [lightbox=false] - Whether clicking the main image, or its expand control, opens the full-size lightbox
+ * @prop {boolean} [lightboxGrid=false] - Shows a scrollable grid of every image alongside the lightbox's own main image, for jumping directly to one without closing it
+ * @attr {boolean} [lightbox-grid=false] - Shows a scrollable grid of every image alongside the lightbox's own main image, for jumping directly to one without closing it
  * @prop {boolean} [loop=false] - Wraps the previous and next controls around at the bounds instead of stopping there, on both the main stage and the lightbox
  * @prop {EunomiaImageCarouselTransition} [transition='slide'] - How the main stage and the lightbox animate between images
  * @prop {boolean} [autoplay=false] - Automatically advances to the next image on a set interval. Pauses on hover or focus and while the lightbox is open, but renders no pause or play control of its own, so pair this with a visible control calling the public pause and resume methods, since a moving gallery nobody can stop fails accessibility guidelines
@@ -78,6 +78,7 @@ declare const EunomiaImageCarousel_base: import("../../../utils/constructor.type
  * @cssprop [--image-carousel-border-color] - Sets the border color of the main stage, which has no border by default
  * @cssprop [--image-carousel-thumbnail-size] - Sets the size of each thumbnail
  * @cssprop [--image-carousel-thumbnail-gap] - Sets the gap between thumbnails, and between the strip and the main stage
+ * @cssprop [--image-carousel-thumbnail-fade-size] - Sets the width of the fade on the thumbnail strip's edges that still hide thumbnails
  * @cssprop [--image-carousel-thumbnail-border-color] - Sets the border color of the thumbnails and of the lightbox's grid items at rest, transparent by default
  * @cssprop [--image-carousel-thumbnail-active-border-color] - Sets the border color of the active thumbnail and of the lightbox's active grid item
  * @cssprop [--image-carousel-nav-color] - Sets the icon color of the main stage's previous and next controls
@@ -94,6 +95,8 @@ declare const EunomiaImageCarousel_base: import("../../../utils/constructor.type
  * @cssprop [--image-carousel-dot-gap] - Sets the gap between pagination dots
  * @cssprop [--image-carousel-dot-color] - Sets the color of the pagination dots
  * @cssprop [--image-carousel-dot-active-color] - Sets the color of the active pagination dot
+ * @cssprop [--image-carousel-focus-outline-color] - Sets the keyboard focus outline color of the stage, controls, thumbnails, dots and lightbox grid items
+ * @cssprop [--image-carousel-lightbox-focus-outline-color] - Sets the keyboard focus outline color of the lightbox's previous and next controls
  * @element eun-image-carousel
  */
 export declare class EunomiaImageCarousel extends EunomiaImageCarousel_base {
@@ -135,29 +138,28 @@ export declare class EunomiaImageCarousel extends EunomiaImageCarousel_base {
     /**
      * Shows the thumbnail strip below the main stage, for jumping directly
      * to an image.
-     * @default true
+     * @default false
      */
     showThumbnails: boolean;
     /**
      * Shows pagination dots below the main stage as a position indicator
      * (which image, how many total) when `showThumbnails` is off — without
      * either, there'd be no visible way to tell. No effect while thumbnails
-     * are shown, which already convey the same information ; set to `false`
-     * for neither.
-     * @default true
+     * are shown, which already convey the same information.
+     * @default false
      */
     showDots: boolean;
     /**
      * Whether clicking the main image (or its expand control) opens the
      * full-size lightbox.
-     * @default true
+     * @default false
      */
     lightbox: boolean;
     /**
      * Shows a scrollable grid of every image alongside the lightbox's own
      * main image — clicking a tile swaps the lightbox's image without
      * closing it, the same way a classifieds site's photo viewer does.
-     * @default true
+     * @default false
      */
     lightboxGrid: boolean;
     /**
@@ -259,6 +261,12 @@ export declare class EunomiaImageCarousel extends EunomiaImageCarousel_base {
      * @readonly
      */
     private readonly stageImagesEl?;
+    /**
+     * The thumbnail strip, `undefined` while `showThumbnails` is off.
+     * @internal
+     * @readonly
+     */
+    private readonly thumbnailsEl?;
     /**
      * Minimum horizontal drag distance (px) for a touch swipe to trigger
      * `previous()`/`next()` — see {@link handleSwipeEnd}. Also
@@ -361,6 +369,18 @@ export declare class EunomiaImageCarousel extends EunomiaImageCarousel_base {
      * @private
      */
     private manuallyPaused;
+    /**
+     * Watches the thumbnail strip's size, so its edge fades follow the
+     * available width — see {@link updateThumbnailsFade}.
+     * @private
+     */
+    private thumbnailsObserver?;
+    /**
+     * The strip {@link thumbnailsObserver} currently watches, to rewire it
+     * when `showThumbnails` re-renders the strip.
+     * @private
+     */
+    private observedThumbnailsEl?;
     /**
      * Debounced announcer for the live region, see {@link announcement}.
      * @private
@@ -369,6 +389,30 @@ export declare class EunomiaImageCarousel extends EunomiaImageCarousel_base {
     connectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /**
+     * Keeps the thumbnail strip's observer on the current strip, refreshes
+     * its edge fades, and scrolls the active thumbnail into view whenever
+     * the active image changes.
+     *
+     * @param changed the properties changed in this update.
+     * @private
+     */
+    private syncThumbnailsStrip;
+    /**
+     * Scrolls the strip, and only the strip (unlike `scrollIntoView`, which
+     * would also scroll the page), just enough to fully show the active
+     * thumbnail clear of the edge fades.
+     *
+     * @param strip the thumbnail strip.
+     * @private
+     */
+    private scrollActiveThumbnailIntoView;
+    /**
+     * Fades out whichever edge of the thumbnail strip still has thumbnails
+     * hidden past it, hinting that the strip scrolls that way.
+     * @private
+     */
+    private readonly updateThumbnailsFade;
     /**
      * Whether `el` is one of the prev/next controls (main stage or
      * lightbox) — the pair {@link restoreNavFocusIfDisabled} manages focus
@@ -761,5 +805,8 @@ declare global {
     interface HTMLElementTagNameMap {
         [EunomiaImageCarouselTagName]: EunomiaImageCarousel;
     }
+    interface EunomiaStringAttributeMap {
+        [EunomiaImageCarouselTagName]: "images";
+    }
 }
 export {};