@aquera/nile-elements 1.3.9-beta-1.4 → 1.4.0-beta-1.0

package/dist/src/nile-carousel/nile-carousel.css.js

@@ -0,0 +1,169 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * Carousel CSS
+ */
+export const styles = css `
+  :host {
+    --slide-gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    display: block;
+    position: relative;
+  }
+
+  .carousel {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+
+  .carousel__content-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    width: 100%;
+  }
+
+  .carousel__slides {
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    gap: var(--slide-gap);
+    padding: 0px;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .carousel__slides::-webkit-scrollbar {
+    display: none;
+  }
+
+  .carousel__slides--horizontal {
+    flex-direction: row;
+  }
+
+  .carousel__slides--vertical {
+    flex-direction: column;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scroll-snap-type: y mandatory;
+  }
+
+  .carousel__slides:focus {
+    outline: none;
+  }
+
+  .carousel__slides:focus-visible {
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+    outline-offset: 2px;
+  }
+
+  ::slotted(nile-carousel-item) {
+    flex: 0 0 calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));
+    min-width: 0;
+  }
+
+  .carousel__navigation-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    padding: 0;
+    background: rgba(255, 255, 255, 0.9);
+    border: 1px solid var(--nile-colors-dark-200, var(--ng-colors-border-secondary));
+    border-radius: 50%;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .carousel__navigation-button:hover:not(.carousel__navigation-button--disabled) {
+    background: rgba(255, 255, 255, 1);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-tertiary));
+    transform: scale(1.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .carousel__navigation-button:active:not(.carousel__navigation-button--disabled) {
+    background: rgba(255, 255, 255, 1);
+    transform: scale(0.95);
+  }
+
+  .carousel__navigation-button--disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+
+  .carousel__navigation-button:focus {
+    outline: none;
+  }
+
+  .carousel__navigation-button:focus-visible {
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+    outline-offset: 2px;
+  }
+
+  .carousel__pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    margin-top: var(--nile-spacing-md, var(--ng-spacing-md));
+    position: relative;
+    z-index: 2;
+  }
+
+  .carousel__pagination-item {
+    width: 0.75rem;
+    height: 0.75rem;
+    padding: 0;
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border: 2px solid var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+
+  .carousel__pagination-item:hover {
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-tertiary));
+    transform: scale(1.15);
+    border-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary));
+  }
+
+  .carousel__pagination-item--active {
+    width: 0.875rem;
+    height: 0.875rem;
+    background: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+    border-color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  }
+
+  .carousel__pagination-item:focus {
+    outline: none;
+  }
+
+  .carousel__pagination-item:focus-visible {
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+    outline-offset: 2px;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-carousel.css.js.map

package/dist/src/nile-carousel/nile-carousel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-carousel.css.js","sourceRoot":"","sources":["../../../src/nile-carousel/nile-carousel.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4JxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Carousel CSS\n */\nexport const styles = css`\n  :host {\n    --slide-gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    display: block;\n    position: relative;\n  }\n\n  .carousel {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n  }\n\n  .carousel__content-wrapper {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    width: 100%;\n  }\n\n  .carousel__slides {\n    display: flex;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-snap-type: x mandatory;\n    scroll-behavior: smooth;\n    gap: var(--slide-gap);\n    padding: 0px;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    flex: 1;\n    min-width: 0;\n  }\n\n  .carousel__slides::-webkit-scrollbar {\n    display: none;\n  }\n\n  .carousel__slides--horizontal {\n    flex-direction: row;\n  }\n\n  .carousel__slides--vertical {\n    flex-direction: column;\n    overflow-x: hidden;\n    overflow-y: auto;\n    scroll-snap-type: y mandatory;\n  }\n\n  .carousel__slides:focus {\n    outline: none;\n  }\n\n  .carousel__slides:focus-visible {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    outline-offset: 2px;\n  }\n\n  ::slotted(nile-carousel-item) {\n    flex: 0 0 calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));\n    min-width: 0;\n  }\n\n  .carousel__navigation-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 2.5rem;\n    height: 2.5rem;\n    padding: 0;\n    background: rgba(255, 255, 255, 0.9);\n    border: 1px solid var(--nile-colors-dark-200, var(--ng-colors-border-secondary));\n    border-radius: 50%;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: pointer;\n    flex-shrink: 0;\n    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  }\n\n  .carousel__navigation-button:hover:not(.carousel__navigation-button--disabled) {\n    background: rgba(255, 255, 255, 1);\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-tertiary));\n    transform: scale(1.1);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  }\n\n  .carousel__navigation-button:active:not(.carousel__navigation-button--disabled) {\n    background: rgba(255, 255, 255, 1);\n    transform: scale(0.95);\n  }\n\n  .carousel__navigation-button--disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n\n  .carousel__navigation-button:focus {\n    outline: none;\n  }\n\n  .carousel__navigation-button:focus-visible {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    outline-offset: 2px;\n  }\n\n  .carousel__pagination {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    margin-top: var(--nile-spacing-md, var(--ng-spacing-md));\n    position: relative;\n    z-index: 2;\n  }\n\n  .carousel__pagination-item {\n    width: 0.75rem;\n    height: 0.75rem;\n    padding: 0;\n    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border: 2px solid var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: 50%;\n    cursor: pointer;\n    transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n  }\n\n  .carousel__pagination-item:hover {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-border-tertiary));\n    transform: scale(1.15);\n    border-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary));\n  }\n\n  .carousel__pagination-item--active {\n    width: 0.875rem;\n    height: 0.875rem;\n    background: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    border-color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\n  }\n\n  .carousel__pagination-item:focus {\n    outline: none;\n  }\n\n  .carousel__pagination-item:focus-visible {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    outline-offset: 2px;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n`;\n\nexport default [styles];\n\n"]}

package/dist/src/nile-carousel/nile-carousel.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import '../nile-icon';
+import './nile-carousel-item/nile-carousel-item';
+import { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+import type { PropertyValueMap } from 'lit';
+export declare class NileCarousel extends NileElement {
+    static styles: CSSResultArray;
+    navigation: boolean;
+    pagination: boolean;
+    slidesPerPage: number;
+    slidesPerMove: number;
+    orientation: 'horizontal' | 'vertical';
+    scrollContainer: HTMLElement;
+    paginationContainer: HTMLElement;
+    activeSlide: number;
+    scrolling: boolean;
+    private mutationObserver;
+    private pendingSlideChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected willUpdate(changedProperties: PropertyValueMap<NileCarousel> | Map<PropertyKey, unknown>): void;
+    private getPageCount;
+    private getCurrentPage;
+    private canScrollNext;
+    private canScrollPrev;
+    private getSlides;
+    private handleKeyDown;
+    private handleScroll;
+    private handleScrollEnd;
+    private handleSlotChange;
+    private initializeSlides;
+    handleSlideChange(): void;
+    updateSlidesSnap(): void;
+    previous(behavior?: ScrollBehavior): void;
+    next(behavior?: ScrollBehavior): void;
+    goToSlide(index: number, behavior?: ScrollBehavior): void;
+    private scrollToSlide;
+    private renderNavigationButton;
+    private renderScrollContainer;
+    private renderPaginationItem;
+    private renderPagination;
+    render(): TemplateResult<1>;
+}
+export default NileCarousel;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-carousel': NileCarousel;
+    }
+}

package/dist/src/nile-carousel/nile-carousel.js

@@ -0,0 +1,340 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import '../nile-icon';
+import './nile-carousel-item/nile-carousel-item';
+import { html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import { range } from 'lit/directives/range.js';
+import { clamp } from '../internal/math';
+import { prefersReducedMotion } from '../internal/animate';
+import { watch } from '../internal/watch';
+import { styles } from './nile-carousel.css';
+import NileElement from '../internal/nile-element';
+import { isCarouselItem, findMostVisibleSlide, getPageCount, getCurrentPage, canScrollNext, canScrollPrev, shouldSnapToSlide, calculateScrollPosition } from './carousel-helpers';
+let NileCarousel = class NileCarousel extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.navigation = false;
+        this.pagination = false;
+        this.slidesPerPage = 1;
+        this.slidesPerMove = 1;
+        this.orientation = 'horizontal';
+        this.activeSlide = 0;
+        this.scrolling = false;
+        this.pendingSlideChange = false;
+        this.handleScroll = () => {
+            if (!this.scrollContainer) {
+                return;
+            }
+            this.scrolling = true;
+            this.pendingSlideChange = false;
+            const slides = this.getSlides();
+            const mostVisibleSlide = findMostVisibleSlide(slides, this.scrollContainer, this.orientation);
+            if (mostVisibleSlide) {
+                const newActiveIndex = slides.indexOf(mostVisibleSlide);
+                if (newActiveIndex !== -1 && newActiveIndex !== this.activeSlide) {
+                    this.activeSlide = newActiveIndex;
+                }
+            }
+        };
+        this.handleScrollEnd = () => {
+            this.scrolling = false;
+            this.pendingSlideChange = false;
+        };
+        this.handleSlotChange = () => {
+            this.initializeSlides();
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'region');
+        this.setAttribute('aria-label', 'carousel');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.mutationObserver?.disconnect();
+    }
+    firstUpdated() {
+        this.initializeSlides();
+        this.mutationObserver = new MutationObserver(this.handleSlotChange);
+        this.mutationObserver.observe(this, {
+            childList: true,
+            subtree: true
+        });
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('slidesPerMove') || changedProperties.has('slidesPerPage')) {
+            this.slidesPerMove = Math.min(this.slidesPerMove, this.slidesPerPage);
+        }
+    }
+    getPageCount() {
+        const slidesCount = this.getSlides().length;
+        return getPageCount(slidesCount, this.slidesPerPage, this.slidesPerMove);
+    }
+    getCurrentPage() {
+        return getCurrentPage(this.activeSlide, this.slidesPerMove);
+    }
+    canScrollNext() {
+        return canScrollNext(this.getCurrentPage(), this.getPageCount());
+    }
+    canScrollPrev() {
+        return canScrollPrev(this.getCurrentPage());
+    }
+    getSlides() {
+        return [...this.children].filter((el) => isCarouselItem(el));
+    }
+    handleKeyDown(event) {
+        if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+            const target = event.target;
+            const isFocusInPagination = target.closest('[part~="pagination-item"]') !== null;
+            const isNext = event.key === 'ArrowDown' || event.key === 'ArrowRight';
+            const isPrevious = event.key === 'ArrowUp' || event.key === 'ArrowLeft';
+            event.preventDefault();
+            if (isPrevious) {
+                this.previous();
+            }
+            if (isNext) {
+                this.next();
+            }
+            if (event.key === 'Home') {
+                this.goToSlide(0);
+            }
+            if (event.key === 'End') {
+                this.goToSlide(this.getSlides().length - 1);
+            }
+            if (isFocusInPagination) {
+                this.updateComplete.then(() => {
+                    const activePaginationItem = this.shadowRoot?.querySelector('[part~="pagination-item--active"]');
+                    if (activePaginationItem) {
+                        activePaginationItem.focus();
+                    }
+                });
+            }
+        }
+    }
+    initializeSlides() {
+        const slides = this.getSlides();
+        if (!slides.length) {
+            return;
+        }
+        slides.forEach((slide, i) => {
+            slide.classList.toggle('--is-active', i === this.activeSlide);
+        });
+        this.updateSlidesSnap();
+    }
+    handleSlideChange() {
+        const slides = this.getSlides();
+        slides.forEach((slide, i) => {
+            slide.classList.toggle('--is-active', i === this.activeSlide);
+        });
+        if (this.hasUpdated) {
+            this.emit('nile-slide-change', {
+                detail: {
+                    index: this.activeSlide,
+                    slide: slides[this.activeSlide]
+                }
+            });
+        }
+    }
+    updateSlidesSnap() {
+        const slides = this.getSlides();
+        const slidesPerMove = this.slidesPerMove;
+        slides.forEach((slide, i) => {
+            if (shouldSnapToSlide(i, slidesPerMove)) {
+                slide.style.removeProperty('scroll-snap-align');
+            }
+            else {
+                slide.style.setProperty('scroll-snap-align', 'none');
+            }
+        });
+    }
+    previous(behavior = 'smooth') {
+        this.goToSlide(this.activeSlide - this.slidesPerMove, behavior);
+    }
+    next(behavior = 'smooth') {
+        this.goToSlide(this.activeSlide + this.slidesPerMove, behavior);
+    }
+    goToSlide(index, behavior = 'smooth') {
+        const { slidesPerPage } = this;
+        const slides = this.getSlides();
+        if (!slides.length) {
+            return;
+        }
+        const newActiveSlide = clamp(index, 0, slides.length - slidesPerPage);
+        this.activeSlide = newActiveSlide;
+        const nextSlideIndex = clamp(index, 0, slides.length - 1);
+        const nextSlide = slides[nextSlideIndex];
+        this.scrollToSlide(nextSlide, prefersReducedMotion() ? 'auto' : behavior);
+    }
+    scrollToSlide(slide, behavior = 'smooth') {
+        this.pendingSlideChange = true;
+        window.requestAnimationFrame(() => {
+            if (!this.scrollContainer) {
+                return;
+            }
+            const scrollContainer = this.scrollContainer;
+            const scrollContainerRect = scrollContainer.getBoundingClientRect();
+            const nextSlideRect = slide.getBoundingClientRect();
+            const nextLeft = nextSlideRect.left - scrollContainerRect.left;
+            const nextTop = nextSlideRect.top - scrollContainerRect.top;
+            if (nextLeft || nextTop) {
+                const scrollPosition = calculateScrollPosition(nextSlideRect, scrollContainerRect, scrollContainer.scrollLeft, scrollContainer.scrollTop);
+                this.pendingSlideChange = true;
+                scrollContainer.scrollTo({
+                    left: scrollPosition.left,
+                    top: scrollPosition.top,
+                    behavior
+                });
+            }
+            else {
+                this.pendingSlideChange = false;
+            }
+        });
+    }
+    renderNavigationButton(direction, enabled, onClick) {
+        const isPrevious = direction === 'previous';
+        const iconName = isPrevious ? 'arrowleft' : 'arrowright';
+        const slotName = isPrevious ? 'previous-icon' : 'next-icon';
+        const partName = isPrevious ? 'navigation-button--previous' : 'navigation-button--next';
+        const ariaLabel = isPrevious ? 'Previous slide' : 'Next slide';
+        return html `
+      <button
+        part="navigation-button ${partName}"
+        class="${classMap({
+            'carousel__navigation-button': true,
+            [`carousel__navigation-button--${direction}`]: true,
+            'carousel__navigation-button--disabled': !enabled
+        })}"
+        aria-label="${ariaLabel}"
+        aria-controls="scroll-container"
+        aria-disabled="${enabled ? 'false' : 'true'}"
+        @click=${enabled ? onClick : null}
+      >
+        <slot name="${slotName}">
+          <nile-icon
+            library="system"
+            name="${iconName}"
+          ></nile-icon>
+        </slot>
+      </button>
+    `;
+    }
+    renderScrollContainer() {
+        return html `
+      <div
+        id="scroll-container"
+        part="scroll-container"
+        class="${classMap({
+            carousel__slides: true,
+            'carousel__slides--horizontal': this.orientation === 'horizontal',
+            'carousel__slides--vertical': this.orientation === 'vertical'
+        })}"
+        style="--slides-per-page: ${this.slidesPerPage};"
+        aria-busy="${this.scrolling ? 'true' : 'false'}"
+        aria-atomic="true"
+        tabindex="0"
+        @keydown=${this.handleKeyDown}
+        @scroll="${this.handleScroll}"
+        @scrollend=${this.handleScrollEnd}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+    renderPaginationItem(index, pagesCount, currentPage, slidesPerMove) {
+        const isActive = index === currentPage;
+        return html `
+      <button
+        part="pagination-item ${isActive ? 'pagination-item--active' : ''}"
+        class="${classMap({
+            'carousel__pagination-item': true,
+            'carousel__pagination-item--active': isActive
+        })}"
+        role="tab"
+        id="tab-${index + 1}"
+        aria-controls="slide-${index + 1}"
+        aria-selected="${isActive ? 'true' : 'false'}"
+        aria-label="${isActive
+            ? `Slide ${index + 1}`
+            : `Go to slide ${index + 1} of ${pagesCount}`}"
+        tabindex=${isActive ? '0' : '-1'}
+        @click=${() => this.goToSlide(index * slidesPerMove)}
+        @keydown=${this.handleKeyDown}
+      ></button>
+    `;
+    }
+    renderPagination() {
+        if (!this.pagination) {
+            return html ``;
+        }
+        const pagesCount = this.getPageCount();
+        const currentPage = this.getCurrentPage();
+        const slidesPerMove = this.slidesPerMove;
+        return html `
+      <div part="pagination" role="tablist" class="carousel__pagination">
+        ${map(range(pagesCount), index => this.renderPaginationItem(index, pagesCount, currentPage, slidesPerMove))}
+      </div>
+    `;
+    }
+    render() {
+        const prevEnabled = this.canScrollPrev();
+        const nextEnabled = this.canScrollNext();
+        return html `
+      <div part="base" class="carousel">
+        <div class="carousel__content-wrapper">
+          ${this.navigation ? this.renderNavigationButton('previous', prevEnabled, () => this.previous()) : ''}
+          ${this.renderScrollContainer()}
+          ${this.navigation ? this.renderNavigationButton('next', nextEnabled, () => this.next()) : ''}
+        </div>
+        ${this.renderPagination()}
+      </div>
+    `;
+    }
+};
+NileCarousel.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileCarousel.prototype, "navigation", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileCarousel.prototype, "pagination", void 0);
+__decorate([
+    property({ type: Number, attribute: 'slides-per-page' })
+], NileCarousel.prototype, "slidesPerPage", void 0);
+__decorate([
+    property({ type: Number, attribute: 'slides-per-move' })
+], NileCarousel.prototype, "slidesPerMove", void 0);
+__decorate([
+    property()
+], NileCarousel.prototype, "orientation", void 0);
+__decorate([
+    query('.carousel__slides')
+], NileCarousel.prototype, "scrollContainer", void 0);
+__decorate([
+    query('.carousel__pagination')
+], NileCarousel.prototype, "paginationContainer", void 0);
+__decorate([
+    state()
+], NileCarousel.prototype, "activeSlide", void 0);
+__decorate([
+    state()
+], NileCarousel.prototype, "scrolling", void 0);
+__decorate([
+    watch('activeSlide')
+], NileCarousel.prototype, "handleSlideChange", null);
+__decorate([
+    watch('slidesPerMove')
+], NileCarousel.prototype, "updateSlidesSnap", null);
+NileCarousel = __decorate([
+    customElement('nile-carousel')
+], NileCarousel);
+export { NileCarousel };
+export default NileCarousel;
+//# sourceMappingURL=nile-carousel.js.map

package/dist/src/nile-carousel/nile-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-carousel.js","sourceRoot":"","sources":["../../../src/nile-carousel/nile-carousel.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport '../nile-icon';\nimport './nile-carousel-item/nile-carousel-item';\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { range } from 'lit/directives/range.js';\nimport { clamp } from '../internal/math';\nimport { prefersReducedMotion } from '../internal/animate';\nimport { watch } from '../internal/watch';\nimport { styles } from './nile-carousel.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValueMap } from 'lit';\nimport type NileCarouselItem from './nile-carousel-item/nile-carousel-item';\nimport {\n  isCarouselItem,\n  findMostVisibleSlide,\n  getPageCount,\n  getCurrentPage,\n  canScrollNext,\n  canScrollPrev,\n  shouldSnapToSlide,\n  calculateScrollPosition\n} from './carousel-helpers';\n\n@customElement('nile-carousel')\nexport class NileCarousel extends NileElement {\n  static styles: CSSResultArray = [styles];\n\n  @property({ type: Boolean, reflect: true }) navigation = false;\n\n  @property({ type: Boolean, reflect: true }) pagination = false;\n\n  @property({ type: Number, attribute: 'slides-per-page' }) slidesPerPage = 1;\n\n  @property({ type: Number, attribute: 'slides-per-move' }) slidesPerMove = 1;\n\n  @property() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  @query('.carousel__slides') scrollContainer: HTMLElement;\n  @query('.carousel__pagination') paginationContainer: HTMLElement;\n\n  @state() activeSlide = 0;\n\n  @state() scrolling = false;\n\n  private mutationObserver: MutationObserver;\n  private pendingSlideChange = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'region');\n    this.setAttribute('aria-label', 'carousel');\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.mutationObserver?.disconnect();\n  }\n\n  protected firstUpdated(): void {\n    this.initializeSlides();\n    this.mutationObserver = new MutationObserver(this.handleSlotChange);\n    this.mutationObserver.observe(this, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  protected willUpdate(changedProperties: PropertyValueMap<NileCarousel> | Map<PropertyKey, unknown>): void {\n    if (changedProperties.has('slidesPerMove') || changedProperties.has('slidesPerPage')) {\n      this.slidesPerMove = Math.min(this.slidesPerMove, this.slidesPerPage);\n    }\n  }\n\n  private getPageCount() {\n    const slidesCount = this.getSlides().length;\n    return getPageCount(slidesCount, this.slidesPerPage, this.slidesPerMove);\n  }\n\n  private getCurrentPage() {\n    return getCurrentPage(this.activeSlide, this.slidesPerMove);\n  }\n\n  private canScrollNext(): boolean {\n    return canScrollNext(this.getCurrentPage(), this.getPageCount());\n  }\n\n  private canScrollPrev(): boolean {\n    return canScrollPrev(this.getCurrentPage());\n  }\n\n  private getSlides() {\n    return [...this.children].filter(\n      (el: HTMLElement) => isCarouselItem(el)\n    ) as NileCarouselItem[];\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n      const target = event.target as HTMLElement;\n      const isFocusInPagination = target.closest('[part~=\"pagination-item\"]') !== null;\n      const isNext =\n        event.key === 'ArrowDown' || event.key === 'ArrowRight';\n      const isPrevious =\n        event.key === 'ArrowUp' || event.key === 'ArrowLeft';\n\n      event.preventDefault();\n\n      if (isPrevious) {\n        this.previous();\n      }\n\n      if (isNext) {\n        this.next();\n      }\n\n      if (event.key === 'Home') {\n        this.goToSlide(0);\n      }\n\n      if (event.key === 'End') {\n        this.goToSlide(this.getSlides().length - 1);\n      }\n\n      if (isFocusInPagination) {\n        this.updateComplete.then(() => {\n          const activePaginationItem = this.shadowRoot?.querySelector<HTMLButtonElement>(\n            '[part~=\"pagination-item--active\"]'\n          );\n\n          if (activePaginationItem) {\n            activePaginationItem.focus();\n          }\n        });\n      }\n    }\n  }\n\n  private handleScroll = () => {\n    if (!this.scrollContainer) {\n      return;\n    }\n\n    this.scrolling = true;\n    this.pendingSlideChange = false;\n\n    const slides = this.getSlides();\n    const mostVisibleSlide = findMostVisibleSlide(slides, this.scrollContainer, this.orientation);\n\n    if (mostVisibleSlide) {\n      const newActiveIndex = slides.indexOf(mostVisibleSlide);\n      if (newActiveIndex !== -1 && newActiveIndex !== this.activeSlide) {\n        this.activeSlide = newActiveIndex;\n      }\n    }\n  };\n\n  private handleScrollEnd = () => {\n    this.scrolling = false;\n    this.pendingSlideChange = false;\n  };\n\n  private handleSlotChange = () => {\n    this.initializeSlides();\n  };\n\n  private initializeSlides() {\n    const slides = this.getSlides();\n    if (!slides.length) {\n      return;\n    }\n\n    slides.forEach((slide, i) => {\n      slide.classList.toggle('--is-active', i === this.activeSlide);\n    });\n\n    this.updateSlidesSnap();\n  }\n\n  @watch('activeSlide')\n  handleSlideChange() {\n    const slides = this.getSlides();\n    slides.forEach((slide, i) => {\n      slide.classList.toggle('--is-active', i === this.activeSlide);\n    });\n\n    if (this.hasUpdated) {\n      this.emit('nile-slide-change', {\n        detail: {\n          index: this.activeSlide,\n          slide: slides[this.activeSlide]\n        }\n      });\n    }\n  }\n\n  @watch('slidesPerMove')\n  updateSlidesSnap() {\n    const slides = this.getSlides();\n    const slidesPerMove = this.slidesPerMove;\n\n    slides.forEach((slide, i) => {\n      if (shouldSnapToSlide(i, slidesPerMove)) {\n        slide.style.removeProperty('scroll-snap-align');\n      } else {\n        slide.style.setProperty('scroll-snap-align', 'none');\n      }\n    });\n  }\n\n  previous(behavior: ScrollBehavior = 'smooth') {\n    this.goToSlide(this.activeSlide - this.slidesPerMove, behavior);\n  }\n\n  next(behavior: ScrollBehavior = 'smooth') {\n    this.goToSlide(this.activeSlide + this.slidesPerMove, behavior);\n  }\n\n  goToSlide(index: number, behavior: ScrollBehavior = 'smooth') {\n    const { slidesPerPage } = this;\n\n    const slides = this.getSlides();\n\n    if (!slides.length) {\n      return;\n    }\n\n    const newActiveSlide = clamp(index, 0, slides.length - slidesPerPage);\n    this.activeSlide = newActiveSlide;\n\n    const nextSlideIndex = clamp(\n      index,\n      0,\n      slides.length - 1\n    );\n\n    const nextSlide = slides[nextSlideIndex];\n\n    this.scrollToSlide(nextSlide, prefersReducedMotion() ? 'auto' : behavior);\n  }\n\n  private scrollToSlide(slide: HTMLElement, behavior: ScrollBehavior = 'smooth') {\n    this.pendingSlideChange = true;\n    window.requestAnimationFrame(() => {\n      if (!this.scrollContainer) {\n        return;\n      }\n\n      const scrollContainer = this.scrollContainer;\n      const scrollContainerRect = scrollContainer.getBoundingClientRect();\n      const nextSlideRect = slide.getBoundingClientRect();\n\n      const nextLeft = nextSlideRect.left - scrollContainerRect.left;\n      const nextTop = nextSlideRect.top - scrollContainerRect.top;\n\n      if (nextLeft || nextTop) {\n        const scrollPosition = calculateScrollPosition(\n          nextSlideRect,\n          scrollContainerRect,\n          scrollContainer.scrollLeft,\n          scrollContainer.scrollTop\n        );\n\n        this.pendingSlideChange = true;\n        scrollContainer.scrollTo({\n          left: scrollPosition.left,\n          top: scrollPosition.top,\n          behavior\n        });\n      } else {\n        this.pendingSlideChange = false;\n      }\n    });\n  }\n\n  private renderNavigationButton(\n    direction: 'previous' | 'next',\n    enabled: boolean,\n    onClick: () => void\n  ): TemplateResult {\n    const isPrevious = direction === 'previous';\n    const iconName = isPrevious ? 'arrowleft' : 'arrowright';\n    const slotName = isPrevious ? 'previous-icon' : 'next-icon';\n    const partName = isPrevious ? 'navigation-button--previous' : 'navigation-button--next';\n    const ariaLabel = isPrevious ? 'Previous slide' : 'Next slide';\n\n    return html`\n      <button\n        part=\"navigation-button ${partName}\"\n        class=\"${classMap({\n          'carousel__navigation-button': true,\n          [`carousel__navigation-button--${direction}`]: true,\n          'carousel__navigation-button--disabled': !enabled\n        })}\"\n        aria-label=\"${ariaLabel}\"\n        aria-controls=\"scroll-container\"\n        aria-disabled=\"${enabled ? 'false' : 'true'}\"\n        @click=${enabled ? onClick : null}\n      >\n        <slot name=\"${slotName}\">\n          <nile-icon\n            library=\"system\"\n            name=\"${iconName}\"\n          ></nile-icon>\n        </slot>\n      </button>\n    `;\n  }\n\n  private renderScrollContainer(): TemplateResult {\n    return html`\n      <div\n        id=\"scroll-container\"\n        part=\"scroll-container\"\n        class=\"${classMap({\n          carousel__slides: true,\n          'carousel__slides--horizontal': this.orientation === 'horizontal',\n          'carousel__slides--vertical': this.orientation === 'vertical'\n        })}\"\n        style=\"--slides-per-page: ${this.slidesPerPage};\"\n        aria-busy=\"${this.scrolling ? 'true' : 'false'}\"\n        aria-atomic=\"true\"\n        tabindex=\"0\"\n        @keydown=${this.handleKeyDown}\n        @scroll=\"${this.handleScroll}\"\n        @scrollend=${this.handleScrollEnd}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  private renderPaginationItem(index: number, pagesCount: number, currentPage: number, slidesPerMove: number): TemplateResult {\n    const isActive = index === currentPage;\n    return html`\n      <button\n        part=\"pagination-item ${isActive ? 'pagination-item--active' : ''}\"\n        class=\"${classMap({\n          'carousel__pagination-item': true,\n          'carousel__pagination-item--active': isActive\n        })}\"\n        role=\"tab\"\n        id=\"tab-${index + 1}\"\n        aria-controls=\"slide-${index + 1}\"\n        aria-selected=\"${isActive ? 'true' : 'false'}\"\n        aria-label=\"${isActive\n          ? `Slide ${index + 1}`\n          : `Go to slide ${index + 1} of ${pagesCount}`}\"\n        tabindex=${isActive ? '0' : '-1'}\n        @click=${() => this.goToSlide(index * slidesPerMove)}\n        @keydown=${this.handleKeyDown}\n      ></button>\n    `;\n  }\n\n  private renderPagination(): TemplateResult {\n    if (!this.pagination) {\n      return html``;\n    }\n\n    const pagesCount = this.getPageCount();\n    const currentPage = this.getCurrentPage();\n    const slidesPerMove = this.slidesPerMove;\n\n    return html`\n      <div part=\"pagination\" role=\"tablist\" class=\"carousel__pagination\">\n        ${map(range(pagesCount), index => this.renderPaginationItem(index, pagesCount, currentPage, slidesPerMove))}\n      </div>\n    `;\n  }\n\n  render() {\n    const prevEnabled = this.canScrollPrev();\n    const nextEnabled = this.canScrollNext();\n\n    return html`\n      <div part=\"base\" class=\"carousel\">\n        <div class=\"carousel__content-wrapper\">\n          ${this.navigation ? this.renderNavigationButton('previous', prevEnabled, () => this.previous()) : ''}\n          ${this.renderScrollContainer()}\n          ${this.navigation ? this.renderNavigationButton('next', nextEnabled, () => this.next()) : ''}\n        </div>\n        ${this.renderPagination()}\n      </div>\n    `;\n  }\n}\n\nexport default NileCarousel;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-carousel': NileCarousel;\n  }\n}\n\n"]}

package/dist/src/nile-checkbox/__snapshots__/nile-checkbox.test.snap.js

@@ -0,0 +1,31 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["NileCheckbox renders correctly with default properties"] = 
+`<label
+  class="checkbox checkbox--medium"
+  part="base"
+>
+  <input
+    aria-checked="false"
+    class="checkbox__input"
+    name=""
+    title=""
+    type="checkbox"
+  >
+  <span
+    class="checkbox__control"
+    part="control"
+  >
+  </span>
+  <div
+    class="checkbox__label"
+    part="label"
+  >
+    <slot>
+    </slot>
+  </div>
+</label>
+`;
+/* end snapshot NileCheckbox renders correctly with default properties */
+

package/dist/src/nile-chip/nile-chip.d.ts

@@ -28,6 +28,8 @@ export declare class NileChip extends NileElement {
     tagVariant: string;
     /** Adds a clear button when the input is not empty. */
     acceptUserInput: boolean;
+    /** When true, adds a chip when the input loses focus or when clicking outside the component. Only works when acceptUserInput is true. */
+    addOnBlur: boolean;
     /** Adds a clear button when the input is not empty. */
     clearable: boolean;
     /** Placeholder text to show as a hint when the input is empty. */
@@ -66,8 +68,10 @@ export declare class NileChip extends NileElement {
     private handleSelect;
     private handleRemove;
     private handleInputChange;
+    private addChipFromInputValue;
     private handleInputKeydown;
     private handleFocus;
+    private handleBlur;
     onTagsChanged(): void;
     private resetInput;
 }