@mcp-b/web-components 0.2.0

package/dist/carousel-Bktu7wrD.js

@@ -0,0 +1,843 @@
+import { Localize } from "./utilities/localize.js";
+import "./icon-BPVkNsY4.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import "./carousel-item-B5-X31Ha.js";
+import { css, html } from "lit";
+import { eventOptions, property, query, state } from "lit/decorators.js";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { classMap } from "lit/directives/class-map.js";
+import { SigveloItemChangeEvent } from "@mcp-b/wc-support/events/item";
+//#region src/components/carousel/carousel.styles.ts
+var carousel_styles_default = css`
+  :host {
+    --aspect-ratio: 16 / 9;
+    --item-gap: 2em;
+    --dot-size: 0.875em;
+    --dot-gap: 0.5em;
+    --dot-color: var(--sigvelo-color-neutral-bg-muted);
+    --dot-active-color: var(--sigvelo-color-neutral-bg-strong);
+
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    width: 100%;
+    max-width: 100%;
+    margin: 0 auto;
+    gap: 1em;
+  }
+
+  #items {
+    display: flex;
+    aspect-ratio: var(--aspect-ratio);
+    width: 100%;
+    overflow-x: scroll;
+    gap: var(--item-gap);
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    overflow-y: hidden;
+    transform: translateZ(0);
+    border-radius: var(--sigvelo-radius-md);
+    background-color: transparent;
+    scrollbar-width: none;
+    will-change: scroll-position;
+
+    &:focus-visible {
+      outline: var(--sigvelo-focus-ring);
+      outline-offset: var(--sigvelo-focus-offset);
+    }
+  }
+
+  #items::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Controls */
+  #controls {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1em;
+  }
+
+  /* When navigation buttons AND pagination are present */
+  :host([without-nav]) #controls {
+    justify-content: center;
+  }
+
+  /* Previous + next */
+  #previous-button,
+  #next-button {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 2.5em;
+    height: 2.5em;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: var(--sigvelo-radius-circle);
+    background: var(--sigvelo-color-neutral-bg-subtle);
+    color: var(--sigvelo-color-neutral-text-on-subtle);
+    font: inherit;
+    cursor: pointer;
+    transition: var(--sigvelo-motion-duration-interaction) translate ease;
+
+    &:active:not(:disabled) {
+      translate: 0 var(--sigvelo-motion-distance-xs);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    sigvelo-icon {
+      font-size: 1.25em;
+    }
+  }
+
+  #previous-button {
+    order: 1;
+  }
+
+  #next-button {
+    order: 3;
+  }
+
+  /* Pagination */
+  #pagination {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    order: 2;
+    gap: var(--dot-gap);
+  }
+
+  .pagination-dot {
+    position: relative;
+    width: var(--dot-size);
+    height: var(--dot-size);
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: var(--sigvelo-radius-circle);
+    background-color: var(--dot-color);
+    font: inherit;
+    cursor: pointer;
+    transition: all var(--carousel-transition-duration) ease;
+
+    &.active {
+      background-color: var(--dot-active-color);
+    }
+
+    /* Cover the gap to increase the hit area of each dot */
+    &::after {
+      position: absolute;
+      inset: calc(var(--dot-gap) / -2);
+      content: "";
+    }
+  }
+
+  /* Focus states for dots */
+  .pagination-dot:focus-visible {
+    outline: var(--sigvelo-focus-ring);
+    outline-offset: var(--sigvelo-focus-offset);
+    background-color: var(--dot-active-color);
+  }
+
+  /* When any dot has focus, active dots look inactive */
+  #pagination:has(.pagination-dot:focus) .pagination-dot.active:not(:focus) {
+    background-color: var(--dot-color);
+  }
+
+  /* The specific dot that has focus gets the active color */
+  #pagination:has(.pagination-dot:focus) .pagination-dot:focus {
+    background-color: var(--dot-active-color);
+  }
+
+  /* Reduced motion preference */
+  @media (prefers-reduced-motion: reduce) {
+    #items {
+      scroll-behavior: auto;
+    }
+
+    .pagination-dot.active {
+      transform: none;
+    }
+  }
+`;
+//#endregion
+//#region src/components/carousel/carousel.ts
+/**
+* <sigvelo-carousel>
+*
+* @summary Displays content in a scrollable horizontal slider with navigation controls.
+* @tag sigvelo-carousel
+* @documentation https://design-system.sigvelo.com/docs/components/carousel
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-carousel-item
+* @dependency sigvelo-sigvelo-icon
+*
+* @slot - The default slot for carousel items.
+*
+* @csspart items - The scrollable container that holds the carousel items.
+* @csspart controls - The container that surrounds nav buttons and pagination.
+* @csspart previous-button - The previous button.
+* @csspart next-button - The next button.
+* @csspart pagination - The container for the pagination dots.
+* @csspart pagination-dot - Each individual pagination dot.
+* @csspart pagination-dot-active - The active pagination dot.
+*
+* @event sigvelo-item-change - Emitted when the active item changes and the slide has been fully scrolled into view.
+*
+* @cssproperty [--aspect-ratio=16/9] - The aspect ratio of the carousel. By default, carousels render 100% wide, so
+*  this helps retain proportions across various devices. Gets applied to the `items` part.
+* @cssproperty [--item-gap=2rem] - The gap between items in the carousel.
+* @cssproperty [--dot-size=0.875em] - The size of each pagination dot.
+* @cssproperty [--dot-gap=0.5em] - The size of the gap between pagination dots.
+* @cssproperty [--dot-color=var(--sigvelo-color-neutral-bg-muted)] - The color of inactive pagination dots.
+* @cssproperty [--dot-active-color=var(--sigvelo-color-neutral-bg-strong)] - The color of active pagination dots.
+*
+* @cssstate scrolling - Applied when the carousel is scrolling.
+*
+* @example Default
+* ```html
+* <sigvelo-carousel label="Example slides" id="carousel__overview" loop>
+*   <sigvelo-carousel-item>Slide 1</sigvelo-carousel-item>
+*   <sigvelo-carousel-item>Slide 2</sigvelo-carousel-item>
+*   <sigvelo-carousel-item>Slide 3</sigvelo-carousel-item>
+*   <sigvelo-carousel-item>Slide 4</sigvelo-carousel-item>
+*   <sigvelo-carousel-item>Slide 5</sigvelo-carousel-item>
+* </sigvelo-carousel>
+*
+* <style>
+*   #carousel__overview {
+*     sigvelo-carousel-item {
+*       background: var(--sigvelo-color-neutral-bg-subtle);
+*       color: var(--sigvelo-color-text-muted);
+*       font-size: 2rem;
+*       font-weight: 500;
+*     }
+*   }
+* </style>
+*
+* <script>
+*   const carousel = document.getElementById('carousel__overview');
+*
+*   carousel.addEventListener('sigvelo-item-change', event => console.log(event.detail.index));
+* <\/script>
+* ```
+*
+* @example Providing content
+* Slot in `<sigvelo-carousel>` items with the content you'd like to show in each slide. Images work well, but you can add just about any content, including interactive elements such as links and buttons.
+*
+* By default, the carousel spans 100% of the width and uses a 16/9 aspect ratio. You can adjust this using the `--aspect-ratio` custom property as shown below. For full control over the width and height, you can target the `items` part using CSS.
+*
+* ```html
+* <sigvelo-carousel label="Example slides" id="carousel__providing">
+*   <sigvelo-carousel-item>
+*     <sigvelo-card>
+*       <img slot="media" src="https://images.unsplash.com/photo-1737912031624-e17ba0d7f673?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A gray and white cat sleeps on a blanket with evening lights in the background">
+*       <p>Kittens dream of chasing moonbeams across the sky.</p>
+*       <sigvelo-button slot="footer">Learn more</sigvelo-button>
+*     </sigvelo-card>
+*   </sigvelo-carousel-item>
+*
+*   <sigvelo-carousel-item>
+*     <sigvelo-card>
+*       <img slot="media" src="https://images.unsplash.com/photo-1707520595303-d6b499aa84af?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A kitten sleeps peacefully on the floor">
+*       <p>Kittens nap to plot their next playful adventure.</p>
+*       <sigvelo-button slot="footer">Learn more</sigvelo-button>
+*     </sigvelo-card>
+*   </sigvelo-carousel-item>
+*
+*   <sigvelo-carousel-item>
+*     <sigvelo-card>
+*       <img slot="media" src="https://images.unsplash.com/photo-1626603084013-1bf8c6627707?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="An orange cat sleeps peacefully at the edge of a bed">
+*       <p>Kittens snooze, dreaming of fluffy clouds to leap.</p>
+*       <sigvelo-button slot="footer">Learn more</sigvelo-button>
+*     </sigvelo-card>
+*   </sigvelo-carousel-item>
+*
+*   <sigvelo-carousel-item>
+*     <sigvelo-card>
+*       <img slot="media" src="https://images.unsplash.com/photo-1664037170371-045dee5604a3?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A sleepy cat looks up in dim, hazy purple lighting">
+*       <p>Kittens yawn, scheming to pounce on twilight stars.</p>
+*       <sigvelo-button slot="footer">Learn more</sigvelo-button>
+*     </sigvelo-card>
+*   </sigvelo-carousel-item>
+*
+*   <sigvelo-carousel-item>
+*     <sigvelo-card>
+*       <img slot="media" src="https://images.unsplash.com/photo-1518143099890-1e8a03745563?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A gray cat curled up but keeping an eye out">
+*       <p>Kittens curl up, plotting to unravel yarn mysteries.</p>
+*       <sigvelo-button slot="footer">Learn more</sigvelo-button>
+*     </sigvelo-card>
+*   </sigvelo-carousel-item>
+* </sigvelo-carousel>
+*
+* <style>
+*   #carousel__providing {
+*     --aspect-ratio: 3 / 4;
+*     --item-height: fit-content;
+*     max-width: 360px;
+*   }
+* </style>
+* ```
+*
+* @example Setting items by index
+* Use the `active-index` attribute to set the item that should show initially. The index is zero-based, so the first slide has an index of 0, the second slide has an index of 1, etc.
+*
+* ```html
+* <sigvelo-carousel active-index="2" id="carousel__index">
+*   <sigvelo-carousel-item>Slide 1</sigvelo-carousel-item>
+*   <sigvelo-carousel-item>Slide 2</sigvelo-carousel-item>
+*   <sigvelo-carousel-item>Slide 3</sigvelo-carousel-item>
+*   <sigvelo-carousel-item>Slide 4</sigvelo-carousel-item>
+*   <sigvelo-carousel-item>Slide 5</sigvelo-carousel-item>
+* </sigvelo-carousel>
+*
+* <style>
+*   #carousel__index {
+*     sigvelo-carousel-item {
+*       background: var(--sigvelo-color-neutral-bg-subtle);
+*       color: var(--sigvelo-color-text-muted);
+*       font-size: 2rem;
+*       font-weight: 500;
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Setting items by name
+* You can assign names to carousel items using the `name` attribute. When a carousel item is named, you can use the `active-name` attribute on the carousel to point to the respective item. This is a convenient way to reference specific slides without having to track index numbers.
+*
+* ```html
+* <sigvelo-carousel active-name="fourth" label="Named slides" id="carousel__named">
+*   <sigvelo-carousel-item name="first">Slide 1</sigvelo-carousel-item>
+*   <sigvelo-carousel-item name="second">Slide 2</sigvelo-carousel-item>
+*   <sigvelo-carousel-item name="third">Slide 3</sigvelo-carousel-item>
+*   <sigvelo-carousel-item name="fourth">Slide 4</sigvelo-carousel-item>
+*   <sigvelo-carousel-item name="fifth">Slide 5</sigvelo-carousel-item>
+* </sigvelo-carousel>
+*
+* <style>
+*   #carousel__named {
+*     sigvelo-carousel-item {
+*       background: var(--sigvelo-color-neutral-bg-subtle);
+*       color: var(--sigvelo-color-text-muted);
+*       font-size: 2rem;
+*       font-weight: 500;
+*     }
+*   }
+*
+*   .controls {
+*     display: flex;
+*     gap: 1rem;
+*     justify-content: center;
+*     margin-top: 1rem;
+*   }
+* </style>
+*
+* <script>
+*   const namedCarousel = document.getElementById('carousel__named');
+*
+*   namedCarousel.addEventListener('sigvelo-item-change', event => {
+*     console.log(`Active slide: ${namedCarousel.activeName || 'unnamed'} (index ${event.detail.index})`);
+*   });
+* <\/script>
+* ```
+*
+* @example Looping navigation
+* Add the `loop` attribute to enable looping when using navigation buttons and arrow keys. This will not cause slides to loop when scrolling.
+*
+* ```html
+* <sigvelo-carousel label="Looping slides" id="carousel__loop" loop>
+*   <sigvelo-carousel-item>Slide 1</sigvelo-carousel-item>
+*   <sigvelo-carousel-item>Slide 2</sigvelo-carousel-item>
+*   <sigvelo-carousel-item>Slide 3</sigvelo-carousel-item>
+*   <sigvelo-carousel-item>Slide 4</sigvelo-carousel-item>
+*   <sigvelo-carousel-item>Slide 5</sigvelo-carousel-item>
+* </sigvelo-carousel>
+*
+* <style>
+*   #carousel__loop sigvelo-carousel-item {
+*     background: var(--sigvelo-color-neutral-bg-subtle);
+*     color: var(--sigvelo-color-text-muted);
+*     font-size: 2rem;
+*     font-weight: 500;
+*   }
+* </style>
+* ```
+*
+* @example Hiding navigation
+* You can hide the previous/next buttons by adding the `without-nav` attribute. To hide the pagination dots, use the `without-pagination` attribute.
+*
+* ```html
+* <div id="carousel__without">
+*   <div class="controls">
+*     <sigvelo-switch checked label="With nav"></sigvelo-switch><br>
+*     <sigvelo-switch checked label="With pagination"></sigvelo-switch>
+*   </div>
+*
+*   <sigvelo-carousel>
+*     <sigvelo-carousel-item>Slide 1</sigvelo-carousel-item>
+*     <sigvelo-carousel-item>Slide 2</sigvelo-carousel-item>
+*     <sigvelo-carousel-item>Slide 3</sigvelo-carousel-item>
+*     <sigvelo-carousel-item>Slide 4</sigvelo-carousel-item>
+*     <sigvelo-carousel-item>Slide 5</sigvelo-carousel-item>
+*   </sigvelo-carousel>
+* </div>
+*
+* <script>
+*   const container = document.getElementById('carousel__without');
+*   const carousel = container.querySelector('sigvelo-carousel');
+*   const navSwitch = container.querySelectorAll('sigvelo-switch')[0];
+*   const paginationSwitch = container.querySelectorAll('sigvelo-switch')[1];
+*
+*   navSwitch.addEventListener('input', () => {
+*     carousel.toggleAttribute('without-nav', !navSwitch.checked);
+*   });
+*
+*   paginationSwitch.addEventListener('input', () => {
+*     carousel.toggleAttribute('without-pagination', !paginationSwitch.checked);
+*   });
+* <\/script>
+*
+* <style>
+*   #carousel__without {
+*     display: flex;
+*     flex-direction: column;
+*     gap: 1rem;
+*
+*     .controls {
+*       display: flex;
+*       gap: 1rem;
+*       justify-content: center;
+*     }
+*
+*     sigvelo-carousel-item {
+*       background: var(--sigvelo-color-neutral-bg-subtle);
+*       color: var(--sigvelo-color-text-muted);
+*       font-size: 2rem;
+*       font-weight: 500;
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Varying widths
+* You can create carousel items with various widths and max widths by applying the appropriate styles to each item.
+*
+* ```html
+* <sigvelo-carousel label="Cat nap slideshow" id="carousel__varying">
+*   <sigvelo-carousel-item>Slide 1</sigvelo-carousel-item>
+*   <sigvelo-carousel-item style="max-width: 350px;">Slide 2</sigvelo-carousel-item>
+*   <sigvelo-carousel-item style="max-width: 200px;">Slide 3</sigvelo-carousel-item>
+*   <sigvelo-carousel-item>Slide 4</sigvelo-carousel-item>
+*   <sigvelo-carousel-item style="max-width: 450px;">Slide 5</sigvelo-carousel-item>
+* </sigvelo-carousel>
+*
+* <style>
+*   #carousel__varying {
+*     sigvelo-carousel-item {
+*       background: var(--sigvelo-color-neutral-bg-subtle);
+*       color: var(--sigvelo-color-text-muted);
+*       font-size: 2rem;
+*       font-weight: 500;
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Styling carousels
+* Carousels come with a simple, minimal appearance. Feel free to customize them with your own styles.
+*
+* ```html
+* <sigvelo-carousel id="carousel__styling">
+*   <sigvelo-carousel-item>
+*     <img src="https://images.unsplash.com/photo-1737912031624-e17ba0d7f673?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A gray and white cat sleeps on a blanket with evening lights in the background">
+*   </sigvelo-carousel-item>
+*   <sigvelo-carousel-item>
+*     <img src="https://images.unsplash.com/photo-1707520595303-d6b499aa84af?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A kitten sleeps peacefully on the floor">
+*   </sigvelo-carousel-item>
+*   <sigvelo-carousel-item>
+*     <img src="https://images.unsplash.com/photo-1626603084013-1bf8c6627707?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="An orange cat sleeps peacefully at the edge of a bed">
+*   </sigvelo-carousel-item>
+*   <sigvelo-carousel-item>
+*     <img src="https://images.unsplash.com/photo-1664037170371-045dee5604a3?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A sleepy cat looks up in dim, hazy purple lighting">
+*   </sigvelo-carousel-item>
+*   <sigvelo-carousel-item>
+*     <img src="https://images.unsplash.com/photo-1518143099890-1e8a03745563?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A gray cat curled up but keeping an eye out">
+*   </sigvelo-carousel-item>
+* </sigvelo-carousel>
+*
+* <style>
+*   #carousel__styling {
+*     --dot-size: .75rem;
+*     --dot-color: #fff4;
+*     --dot-active-color: white;
+*
+*     &::part(items) {
+*       gap: .5rem;
+*     }
+*
+*     <!-- Previous & next buttons -->
+*     &::part(previous-button),
+*     &::part(next-button) {
+*       position: absolute;
+*       top: calc(50% - 2.5rem);
+*       width: 5rem;
+*       height: 5rem;
+*       border-radius: var(--sigvelo-radius-md);
+*       font-size: 1.5rem;
+*       background: none;
+*       color: white;
+*     }
+*
+*     &::part(previous-button) {
+*       left: 0;
+*     }
+*
+*     &::part(next-button) {
+*       right: 0;
+*     }
+*
+*     &::part(previous-button):disabled,
+*     &::part(next-button):disabled {
+*       display: none;
+*     }
+*
+*     <!-- Pagination container -->
+*     &::part(pagination) {
+*       position: absolute;
+*       bottom: 3rem;
+*       width: 100%;
+*       justify-content: center;
+*     }
+*
+*     &::part(pagination-dot):focus-visible {
+*       outline-width: 1.5px;
+*       outline-offset: 2px;
+*       outline-color: var(--sigvelo-color-text-muted);
+*     }
+*   }
+* </style>
+* ```
+*/
+var SigveloCarousel = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.hasInitialized = false;
+		this.isUserInitiated = false;
+		this.localize = new Localize(this);
+		this.pendingEventDispatch = false;
+		this.resizeObserver = null;
+		this.isScrolling = false;
+		this.itemCount = 0;
+		this.label = "";
+		this.activeIndex = 0;
+		this.activeName = "";
+		this.loop = false;
+		this.withoutNav = false;
+		this.withoutPagination = false;
+	}
+	static {
+		this.styles = carousel_styles_default;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setupResizeObserver();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.resizeObserver) {
+			this.resizeObserver.disconnect();
+			this.resizeObserver = null;
+		}
+	}
+	firstUpdated() {
+		this.setAttribute("role", "region");
+		this.setAttribute("aria-roledescription", "carousel");
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("activeIndex") && !this.isUserInitiated) this.setActiveItem(this.activeIndex, "instant");
+		if (changedProperties.has("activeName") && this.activeName) {
+			const foundIndex = this.getItems().findIndex((item) => item.getAttribute("name") === this.activeName);
+			if (foundIndex !== -1 && foundIndex !== this.activeIndex) {
+				this.activeIndex = foundIndex;
+				this.setActiveItem(foundIndex, "smooth");
+			}
+		}
+		if (changedProperties.has("label")) this.setAttribute("aria-label", this.label || this.localize.term("carousel"));
+		if (changedProperties.has("isScrolling")) this.customStates.set("scrolling", this.isScrolling);
+	}
+	/** Get the items from the default slot */
+	getItems() {
+		const slot = this.shadowRoot.querySelector("slot");
+		return slot ? slot.assignedElements().filter((el) => el.tagName.toLowerCase() === "sigvelo-carousel-item") : [];
+	}
+	handleSlotChange() {
+		this.itemCount = this.getItems().length;
+		const items = this.getItems();
+		items.forEach((item, i) => {
+			if (!item.hasAttribute("aria-label") && !item.hasAttribute("aria-labelledby")) item.setAttribute("aria-label", this.localize.term("numberOfTotal", i + 1, items.length));
+		});
+		this.setActiveItem(this.activeIndex, "instant");
+		this.setupResizeObserver();
+		requestAnimationFrame(() => {
+			if (!this.hasInitialized) this.hasInitialized = true;
+		});
+	}
+	/**
+	* Navigate to the selected dot's index
+	*/
+	handleDotClick(dot, index) {
+		this.isUserInitiated = true;
+		this.setActiveItem(index);
+		dot.focus();
+	}
+	/**
+	* Handle keyboard navigation for the pagination dots
+	*/
+	handleDotKeyDown(event, index) {
+		const isRtl = this.localize.dir() === "rtl";
+		const prevKey = isRtl ? "ArrowRight" : "ArrowLeft";
+		const nextKey = isRtl ? "ArrowLeft" : "ArrowRight";
+		const dots = this.shadowRoot.querySelectorAll(".pagination-dot");
+		if (!dots.length) return;
+		let nextIndex = index;
+		switch (event.key) {
+			case prevKey:
+				nextIndex = index - 1;
+				if (nextIndex < 0) nextIndex = this.loop ? this.itemCount - 1 : 0;
+				event.preventDefault();
+				break;
+			case nextKey:
+				nextIndex = index + 1;
+				if (nextIndex >= this.itemCount) nextIndex = this.loop ? 0 : this.itemCount - 1;
+				event.preventDefault();
+				break;
+			case "Home":
+				nextIndex = 0;
+				event.preventDefault();
+				break;
+			case "End":
+				nextIndex = this.itemCount - 1;
+				event.preventDefault();
+				break;
+			default: return;
+		}
+		if (nextIndex !== index) {
+			this.isUserInitiated = true;
+			this.setActiveItem(nextIndex);
+			dots[nextIndex].focus();
+		}
+	}
+	handleScrollSnapChanging(event) {
+		if (!this.items || !this.hasInitialized) return;
+		const snappingElement = event.snapTargetInline;
+		if (snappingElement) {
+			const items = this.getItems();
+			const newIndex = items.indexOf(snappingElement);
+			if (newIndex !== -1 && newIndex !== this.activeIndex) {
+				this.activeIndex = newIndex;
+				this.activeName = items[newIndex]?.getAttribute("name") || "";
+			}
+		}
+	}
+	handleScrollSnapChange(event) {
+		if (!this.items || !this.hasInitialized) return;
+		const snappedElement = event.snapTargetInline;
+		if (snappedElement) {
+			const items = this.getItems();
+			const newIndex = items.indexOf(snappedElement);
+			if (newIndex !== -1 && newIndex !== this.activeIndex) {
+				this.activeIndex = newIndex;
+				this.activeName = items[newIndex]?.getAttribute("name") || "";
+			}
+			if (this.isUserInitiated) this.pendingEventDispatch = true;
+		}
+	}
+	handleScroll() {
+		this.isScrolling = true;
+	}
+	handleScrollEnd() {
+		this.isScrolling = false;
+		if (this.pendingEventDispatch && this.isUserInitiated) {
+			this.dispatchEvent(new SigveloItemChangeEvent({ index: this.activeIndex }));
+			this.pendingEventDispatch = false;
+		}
+		this.isUserInitiated = false;
+	}
+	handleWheel() {
+		this.isUserInitiated = true;
+		(this.shadowRoot?.querySelector(".pagination-dot:focus"))?.blur();
+	}
+	/** Sets the active item and scrolls to it */
+	setActiveItem(index, behavior = "smooth") {
+		if (!this.items) return;
+		const boundedIndex = Math.max(0, Math.min(index, this.itemCount - 1));
+		const items = this.getItems();
+		if (items.length <= boundedIndex) return;
+		const targetItem = items[boundedIndex];
+		const containerWidth = this.items.clientWidth;
+		const itemWidth = targetItem.offsetWidth;
+		const scrollPosition = targetItem.offsetLeft - this.items.offsetLeft - (containerWidth - itemWidth) / 2;
+		this.items.scrollTo({
+			left: scrollPosition,
+			behavior
+		});
+	}
+	setupResizeObserver() {
+		const items = this.getItems();
+		this.resizeObserver?.disconnect();
+		this.resizeObserver = new ResizeObserver(() => {
+			this.setActiveItem(this.activeIndex, "instant");
+		});
+		items.forEach((item) => {
+			this.resizeObserver.observe(item);
+		});
+	}
+	/** Navigate to the specified item. */
+	scrollToIndex(index, scrollBehavior = "smooth") {
+		this.isUserInitiated = true;
+		this.setActiveItem(index, scrollBehavior);
+	}
+	/** Navigate to the next item */
+	scrollToNext(scrollBehavior = "smooth") {
+		this.isUserInitiated = true;
+		let newIndex = this.activeIndex + 1;
+		if (this.loop && newIndex >= this.itemCount) newIndex = 0;
+		this.setActiveItem(newIndex, scrollBehavior);
+	}
+	/** Navigate to the previous item */
+	scrollToPrevious(scrollBehavior = "smooth") {
+		this.isUserInitiated = true;
+		let newIndex = this.activeIndex - 1;
+		if (this.loop && newIndex < 0) newIndex = this.itemCount - 1;
+		this.setActiveItem(newIndex, scrollBehavior);
+	}
+	render() {
+		const hasControls = !this.withoutNav || !this.withoutPagination;
+		const isRtl = this.localize.dir() === "rtl";
+		return html`
+      <div
+        id="items"
+        part="items"
+        aria-live="polite"
+        aria-label=${this.localize.term("carousel") ?? "Carousel"}
+        tabindex="0"
+        @scroll=${this.handleScroll}
+        @scrollend=${this.handleScrollEnd}
+        @scrollsnapchanging=${this.handleScrollSnapChanging}
+        @scrollsnapchange=${this.handleScrollSnapChange}
+        @wheel=${this.handleWheel}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+
+      ${hasControls ? html`
+            <div id="controls" part="controls">
+              ${!this.withoutNav ? html`
+                    <button
+                      id="previous-button"
+                      part="previous-button"
+                      aria-label=${this.localize.term("previous")}
+                      ?disabled=${!this.loop && this.activeIndex === 0}
+                      tabindex=${this.withoutPagination ? 0 : -1}
+                      @click=${() => this.scrollToPrevious()}
+                    >
+                      <sigvelo-icon
+                        library="system"
+                        name=${isRtl ? "chevron-right" : "chevron-left"}
+                      ></sigvelo-icon>
+                    </button>
+
+                    <button
+                      id="next-button"
+                      part="next-button"
+                      aria-label=${this.localize.term("next")}
+                      ?disabled=${!this.loop && this.activeIndex === this.itemCount - 1}
+                      tabindex=${this.withoutPagination ? 0 : -1}
+                      @click=${() => this.scrollToNext()}
+                    >
+                      <sigvelo-icon
+                        library="system"
+                        name=${isRtl ? "chevron-left" : "chevron-right"}
+                      ></sigvelo-icon>
+                    </button>
+                  ` : ""}
+              ${!this.withoutPagination ? html`
+                    <div
+                      id="pagination"
+                      part="pagination"
+                      role="tablist"
+                      aria-label="Choose slide to display"
+                    >
+                      ${Array.from({ length: this.itemCount }, (_, i) => {
+			const isActive = i === this.activeIndex;
+			return html`
+                          <button
+                            part="pagination-dot ${isActive ? "pagination-dot-active" : ""}"
+                            class=${classMap({
+				"pagination-dot": true,
+				active: isActive
+			})}
+                            role="tab"
+                            aria-label="Go to slide ${i + 1}"
+                            aria-selected=${isActive ? "true" : "false"}
+                            tabindex=${isActive ? 0 : -1}
+                            @click=${(event) => this.handleDotClick(event.target, i)}
+                            @keydown=${(event) => this.handleDotKeyDown(event, i)}
+                          ></button>
+                        `;
+		})}
+                    </div>
+                  ` : ""}
+            </div>
+          ` : ""}
+    `;
+	}
+};
+__decorate([query("#items")], SigveloCarousel.prototype, "items", void 0);
+__decorate([state()], SigveloCarousel.prototype, "isScrolling", void 0);
+__decorate([state()], SigveloCarousel.prototype, "itemCount", void 0);
+__decorate([property({ type: String })], SigveloCarousel.prototype, "label", void 0);
+__decorate([property({
+	attribute: "active-index",
+	type: Number,
+	reflect: true
+})], SigveloCarousel.prototype, "activeIndex", void 0);
+__decorate([property({
+	attribute: "active-name",
+	reflect: true
+})], SigveloCarousel.prototype, "activeName", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloCarousel.prototype, "loop", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "without-nav",
+	reflect: true
+})], SigveloCarousel.prototype, "withoutNav", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "without-pagination",
+	reflect: true
+})], SigveloCarousel.prototype, "withoutPagination", void 0);
+__decorate([eventOptions({ passive: true })], SigveloCarousel.prototype, "handleScrollSnapChanging", null);
+__decorate([eventOptions({ passive: true })], SigveloCarousel.prototype, "handleScrollSnapChange", null);
+__decorate([eventOptions({ passive: true })], SigveloCarousel.prototype, "handleScroll", null);
+__decorate([eventOptions({ passive: true })], SigveloCarousel.prototype, "handleWheel", null);
+SigveloCarousel.disableWarning?.("change-in-update");
+customElements.define("sigvelo-carousel", SigveloCarousel);
+//#endregion
+export { SigveloCarousel as t };