@spfx-fast/sharepoint-ui 0.0.0-stage → 0.4.0

package/dist/elements/carousel.js

@@ -0,0 +1,1112 @@
+import { base } from "./shared.js";
+import { buttonControlCss } from "./button.js";
+let carouselId = 0;
+export function defineCarouselCard() {
+    if (customElements.get("spui-carousel-card"))
+        return;
+    class SpuiCarouselCard extends HTMLElement {
+        static observedAttributes = ["auto-size"];
+        get autoSize() { return this.hasAttribute("auto-size"); }
+        set autoSize(value) { this.toggleAttribute("auto-size", Boolean(value)); }
+        connectedCallback() {
+            if (!this.shadowRoot) {
+                const root = this.attachShadow({ mode: "open" });
+                const style = document.createElement("style");
+                style.textContent = `${base}:host{box-sizing:border-box;display:block;flex:0 0 var(--spui-carousel-slide-width,var(--spui-carousel-slide-size,100%));min-width:0;scroll-snap-align:var(--spui-carousel-align,start);scroll-snap-stop:always}:host([auto-size]){flex-basis:auto}:host([data-spui-carousel-space-start]){margin-inline-start:var(--spui-carousel-auto-space-start,0px)}:host([data-spui-carousel-space-end]){margin-inline-end:var(--spui-carousel-auto-space-end,0px)}:host([data-spui-carousel-motion]){grid-area:1/1;width:100%;flex:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--spui-carousel-motion-duration,240ms) var(--spui-motion-easing-standard,ease),visibility 0s linear var(--spui-carousel-motion-duration,240ms)}:host([data-spui-carousel-motion][data-spui-carousel-active]){opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}@media(prefers-reduced-motion:reduce){:host([data-spui-carousel-motion]){transition:none}}slot{display:block}`;
+                root.append(style, document.createElement("slot"));
+            }
+            this.setAttribute("role", this.getAttribute("role") || "group");
+            this.setAttribute("aria-roledescription", this.getAttribute("aria-roledescription") || "slide");
+        }
+    }
+    customElements.define("spui-carousel-card", SpuiCarouselCard);
+}
+export function defineCarouselNav() {
+    if (customElements.get("spui-carousel-nav"))
+        return;
+    class SpuiCarouselNav extends HTMLElement {
+        connectedCallback() {
+            if (this.shadowRoot)
+                return;
+            const root = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0}:host([appearance=brand]){--spui-carousel-indicator:var(--spui-ui-accent,#0078d4)}slot{display:contents}`;
+            const group = document.createElement("div");
+            group.setAttribute("role", "group");
+            group.setAttribute("aria-label", this.getAttribute("aria-label") || "Slide navigation");
+            const slot = document.createElement("slot");
+            group.append(slot);
+            root.append(style, group);
+        }
+    }
+    customElements.define("spui-carousel-nav", SpuiCarouselNav);
+}
+function defineCarouselNavControl(tag, image) {
+    if (customElements.get(tag))
+        return;
+    class SpuiCarouselNavControl extends HTMLElement {
+        static observedAttributes = ["index", "selected", "disabled", "label", "src", "alt"];
+        button;
+        picture;
+        get index() { const value = Number(this.getAttribute("index")); return Number.isInteger(value) && value >= 0 ? value : 0; }
+        set index(value) { this.setAttribute("index", String(Math.max(0, Math.floor(value)))); }
+        get selected() { return this.hasAttribute("selected"); }
+        set selected(value) { this.toggleAttribute("selected", Boolean(value)); }
+        get disabled() { return this.hasAttribute("disabled"); }
+        set disabled(value) { this.toggleAttribute("disabled", Boolean(value)); }
+        connectedCallback() {
+            if (!this.shadowRoot) {
+                const root = this.attachShadow({ mode: "open" });
+                const style = document.createElement("style");
+                style.textContent = `${base}:host{display:inline-flex;min-width:0}button{box-sizing:border-box;display:grid;place-items:center;min-width:44px;min-height:44px;padding:4px;border:1px solid var(--spui-ui-stroke,#d1d1d1);border-radius:var(--spui-control-radius,6px);background:var(--spui-ui-surface,#fff);color:var(--spui-ui-text,inherit);font:inherit;cursor:pointer}button[aria-current=step]{border-color:var(--spui-ui-accent,#0078d4);box-shadow:inset 0 0 0 1px var(--spui-ui-accent,#0078d4)}button:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px}img{display:block;width:56px;height:40px;object-fit:cover;border-radius:calc(var(--spui-control-radius,6px) - 2px)}slot{display:contents}@media(forced-colors:active){button{border-color:ButtonText}button[aria-current=step]{outline:2px solid Highlight}}`;
+                this.button = document.createElement("button");
+                this.button.type = "button";
+                if (image) {
+                    this.picture = document.createElement("img");
+                    const imageSlot = document.createElement("slot");
+                    imageSlot.name = "image";
+                    imageSlot.append(this.picture);
+                    this.button.append(imageSlot);
+                }
+                const content = document.createElement("slot");
+                this.button.append(content);
+                this.button.addEventListener("click", event => this.dispatchEvent(new CustomEvent("spui-carousel-nav-select", { bubbles: true, composed: true, detail: { index: this.index, event } })));
+                this.button.addEventListener("keydown", event => {
+                    const nav = this.closest("spui-carousel-nav");
+                    if (!nav)
+                        return;
+                    const buttons = [...nav.querySelectorAll("spui-carousel-nav-button,spui-carousel-nav-image-button")];
+                    const current = buttons.indexOf(this);
+                    const rtl = getComputedStyle(nav).direction === "rtl";
+                    const next = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : event.key === (rtl ? "ArrowLeft" : "ArrowRight") ? Math.min(buttons.length - 1, current + 1) : event.key === (rtl ? "ArrowRight" : "ArrowLeft") ? Math.max(0, current - 1) : -1;
+                    if (next < 0)
+                        return;
+                    event.preventDefault();
+                    buttons[next].shadowRoot?.querySelector("button")?.focus();
+                });
+                root.append(style, this.button);
+            }
+            this.sync();
+        }
+        attributeChangedCallback() { this.sync(); }
+        sync() {
+            if (!this.button)
+                return;
+            this.button.disabled = this.hasAttribute("disabled");
+            if (this.selected)
+                this.button.setAttribute("aria-current", "step");
+            else
+                this.button.removeAttribute("aria-current");
+            this.button.tabIndex = this.selected ? 0 : -1;
+            const label = this.getAttribute("label") || this.getAttribute("alt") || this.textContent?.trim() || `Slide ${this.index + 1}`;
+            this.button.setAttribute("aria-label", label);
+            if (this.picture) {
+                this.picture.src = this.getAttribute("src") || "";
+                this.picture.alt = this.getAttribute("alt") || "";
+            }
+        }
+    }
+    customElements.define(tag, SpuiCarouselNavControl);
+}
+export function defineCarouselNavButton() { defineCarouselNavControl("spui-carousel-nav-button", false); }
+export function defineCarouselNavImageButton() { defineCarouselNavControl("spui-carousel-nav-image-button", true); }
+export function defineCarouselButton() {
+    if (customElements.get("spui-carousel-button"))
+        return;
+    class SpuiCarouselButton extends HTMLElement {
+        static observedAttributes = ["nav-type", "disabled", "label"];
+        button;
+        get navType() { return this.getAttribute("nav-type") === "prev" ? "prev" : "next"; }
+        set navType(value) { this.setAttribute("nav-type", value); }
+        get disabled() { return this.hasAttribute("disabled"); }
+        set disabled(value) { this.toggleAttribute("disabled", Boolean(value)); }
+        connectedCallback() {
+            if (!this.shadowRoot) {
+                const root = this.attachShadow({ mode: "open" });
+                const style = document.createElement("style");
+                style.textContent = `${base}:host{display:inline-flex}button{box-sizing:border-box;min-width:44px;min-height:44px;padding:6px 10px;border:1px solid var(--spui-ui-stroke,#d1d1d1);border-radius:var(--spui-control-radius,6px);background:var(--spui-ui-surface,#fff);color:var(--spui-ui-text,inherit);font:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px}button:disabled{color:var(--spui-ui-muted,#777);opacity:.55;cursor:not-allowed}@media(forced-colors:active){button{border-color:ButtonText}button:focus-visible{outline-color:Highlight}}`;
+                this.button = document.createElement("button");
+                this.button.type = "button";
+                const icon = document.createElement("slot");
+                icon.name = "icon";
+                this.button.append(icon, document.createElement("slot"));
+                this.button.addEventListener("click", event => this.dispatchEvent(new CustomEvent("spui-carousel-button-activate", { bubbles: true, composed: true, detail: { navType: this.navType, event } })));
+                root.append(style, this.button);
+            }
+            this.sync();
+        }
+        attributeChangedCallback() { this.sync(); }
+        sync() { if (!this.button)
+            return; this.button.disabled = this.disabled; this.button.setAttribute("aria-label", this.getAttribute("label") || this.textContent?.trim() || (this.navType === "prev" ? "Previous slide" : "Next slide")); }
+    }
+    customElements.define("spui-carousel-button", SpuiCarouselButton);
+}
+export function defineCarouselAutoplayButton() {
+    if (customElements.get("spui-carousel-autoplay-button"))
+        return;
+    class SpuiCarouselAutoplayButton extends HTMLElement {
+        static observedAttributes = ["selected", "checked", "default-checked", "controlled", "is-accessible", "appearance", "size", "shape", "disabled", "disabled-focusable", "icon-position", "play-label", "pause-label", "aria-label", "aria-describedby", "title", "tabindex"];
+        button;
+        get selected() { return this.hasAttribute("selected"); }
+        set selected(value) { this.toggleAttribute("selected", Boolean(value)); }
+        connectedCallback() {
+            if (!this.shadowRoot) {
+                const root = this.attachShadow({ mode: "open" });
+                const style = document.createElement("style");
+                style.textContent = `${buttonControlCss}:host{display:inline-block;vertical-align:middle}:host([selected]) button{border-color:var(--spui-toggle-pressed-border,var(--spui-ui-accent,var(--colorBrandBackground,#0078d4)));background:var(--spui-toggle-pressed-background,color-mix(in srgb,var(--spui-ui-accent,var(--colorBrandBackground,#0078d4)) 12%,var(--spui-ui-surface,var(--colorNeutralBackground1,#fff))))}:host([selected]) button:hover:not(:disabled){background:var(--spui-toggle-pressed-hover,color-mix(in srgb,var(--spui-ui-accent,var(--colorBrandBackground,#0078d4)) 18%,var(--spui-ui-surface,var(--colorNeutralBackground1,#fff))))}:host([is-accessible][selected]) button{border-color:var(--spui-ui-accent,var(--colorBrandBackground,#0078d4));background:var(--spui-ui-accent,var(--colorBrandBackground,#0078d4));color:var(--spui-ui-accent-text,#fff)}:host([is-accessible][selected]) button:hover:not(:disabled){background:var(--spui-ui-accent-hover,var(--colorBrandBackgroundHover,#106ebe))}:host([disabled-focusable]) button:disabled{opacity:1}@media(forced-colors:active){:host([selected]) button{outline:1px solid Highlight}}`;
+                this.button = document.createElement("button");
+                this.button.type = "button";
+                this.button.part.add("control");
+                const iconWrap = document.createElement("span");
+                iconWrap.className = "icon";
+                iconWrap.hidden = true;
+                iconWrap.setAttribute("aria-hidden", "true");
+                const icon = document.createElement("slot");
+                icon.name = "icon";
+                icon.addEventListener("slotchange", () => { iconWrap.hidden = !icon.assignedNodes({ flatten: true }).length; });
+                iconWrap.append(icon);
+                const content = document.createElement("span");
+                content.className = "content";
+                const label = document.createElement("span");
+                label.part.add("label");
+                content.append(label);
+                this.button.append(iconWrap, content);
+                this.button.addEventListener("click", event => {
+                    if (this.hasAttribute("disabled")) {
+                        event.preventDefault();
+                        event.stopImmediatePropagation();
+                        return;
+                    }
+                    const checked = !this.selected;
+                    if (!this.hasAttribute("controlled"))
+                        this.selected = checked;
+                    this.dispatchEvent(new CustomEvent("spui-carousel-autoplay-toggle", { bubbles: true, composed: true, detail: { checked, event, type: "click" } }));
+                });
+                root.append(style, this.button);
+            }
+            if (!this.selected && !this.hasAttribute("controlled"))
+                this.selected = this.hasAttribute("default-checked") || this.hasAttribute("checked");
+            this.sync();
+        }
+        attributeChangedCallback(name, _oldValue, value) {
+            if (name === "checked" && this.isConnected && !this.hasAttribute("controlled"))
+                this.selected = value !== null;
+            if (this.isConnected)
+                this.sync();
+        }
+        sync() {
+            if (!this.button)
+                return;
+            const label = this.button.querySelector("[part=label]");
+            if (!label)
+                return;
+            const appearance = this.getAttribute("appearance") ?? "secondary";
+            this.button.className = appearance === "primary" ? "primary" : appearance === "outline" || appearance === "subtle" || appearance === "transparent" ? appearance : "secondary";
+            label.textContent = this.selected ? (this.getAttribute("pause-label") || "Pause") : (this.getAttribute("play-label") || "Play");
+            this.button.disabled = this.hasAttribute("disabled") && !this.hasAttribute("disabled-focusable");
+            if (this.hasAttribute("disabled-focusable") && this.hasAttribute("disabled"))
+                this.button.setAttribute("aria-disabled", "true");
+            else
+                this.button.removeAttribute("aria-disabled");
+            for (const name of ["aria-label", "aria-describedby", "title"]) {
+                const value = this.getAttribute(name);
+                if (name === "aria-label" && value === null)
+                    this.button.setAttribute(name, label.textContent);
+                else if (value === null)
+                    this.button.removeAttribute(name);
+                else
+                    this.button.setAttribute(name, value);
+            }
+            if (this.hasAttribute("tabindex"))
+                this.button.setAttribute("tabindex", this.getAttribute("tabindex"));
+            else if (!this.hasAttribute("disabled-focusable"))
+                this.button.removeAttribute("tabindex");
+            this.button.setAttribute("aria-pressed", String(this.selected));
+        }
+    }
+    customElements.define("spui-carousel-autoplay-button", SpuiCarouselAutoplayButton);
+}
+export function defineCarouselNavContainer() {
+    if (customElements.get("spui-carousel-nav-container"))
+        return;
+    class SpuiCarouselNavContainer extends HTMLElement {
+        static observedAttributes = ["layout"];
+        connectedCallback() {
+            if (this.shadowRoot) {
+                this.sync();
+                return;
+            }
+            const root = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:block;min-width:0}.container{display:flex;align-items:center;justify-content:center;gap:var(--spui-carousel-gap,8px);min-width:0}.container[data-layout=inline-wide]{justify-content:space-between}.container[data-layout=overlay],.container[data-layout=overlay-wide]{padding:4px;border-radius:var(--spui-control-radius,8px);background:var(--spui-carousel-control-background,var(--spui-ui-surface,#fff));box-shadow:var(--spui-card-shadow,0 2px 8px #0002)}.container[data-layout=overlay-wide]{justify-content:space-between}.container[data-layout=overlay-expanded]{justify-content:space-between;background:transparent}.middle{display:flex;align-items:center;justify-content:center;gap:var(--spui-carousel-gap,8px);min-width:0}slot[name=nav]{display:contents}`;
+            const container = document.createElement("div");
+            container.className = "container";
+            container.setAttribute("role", "group");
+            const previous = document.createElement("slot");
+            previous.name = "previous";
+            const middle = document.createElement("div");
+            middle.className = "middle";
+            const navigation = document.createElement("slot");
+            navigation.name = "navigation";
+            const autoplay = document.createElement("slot");
+            autoplay.name = "autoplay";
+            middle.append(navigation, autoplay);
+            const next = document.createElement("slot");
+            next.name = "next";
+            const rest = document.createElement("slot");
+            container.append(previous, middle, next, rest);
+            root.append(style, container);
+            this.sync();
+        }
+        attributeChangedCallback() { this.sync(); }
+        sync() { const container = this.shadowRoot?.querySelector(".container"); if (container)
+            container.dataset.layout = this.getAttribute("layout") || "inline"; }
+    }
+    customElements.define("spui-carousel-nav-container", SpuiCarouselNavContainer);
+}
+export function defineCarouselSlider() {
+    if (customElements.get("spui-carousel-slider"))
+        return;
+    class SpuiCarouselSlider extends HTMLElement {
+        static observedAttributes = ["card-focus"];
+        get cardFocus() { return this.hasAttribute("card-focus"); }
+        set cardFocus(value) { this.toggleAttribute("card-focus", Boolean(value)); }
+        focusedIndex = 0;
+        observer;
+        originalTabIndex = new WeakMap();
+        keydown = (event) => {
+            if (!this.cardFocus || !(event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End"))
+                return;
+            const cards = [...this.querySelectorAll("spui-carousel-card")];
+            if (!cards.length)
+                return;
+            const currentCard = event.target.closest("spui-carousel-card");
+            const current = cards.indexOf(currentCard);
+            const rtl = getComputedStyle(this).direction === "rtl";
+            if (event.key === "Home")
+                this.focusedIndex = 0;
+            else if (event.key === "End")
+                this.focusedIndex = cards.length - 1;
+            else
+                this.focusedIndex = (Math.max(0, current >= 0 ? current : this.focusedIndex) + (event.key === "ArrowRight" ? (rtl ? -1 : 1) : (rtl ? 1 : -1)) + cards.length) % cards.length;
+            event.preventDefault();
+            event.stopPropagation();
+            this.dispatchEvent(new CustomEvent("spui-carousel-card-focus", { bubbles: true, composed: true, detail: { index: this.focusedIndex, event } }));
+            cards.forEach((card, index) => { if (this.cardFocus)
+                card.tabIndex = index === this.focusedIndex ? 0 : -1; });
+            cards[this.focusedIndex].focus();
+        };
+        connectedCallback() {
+            if (!this.shadowRoot) {
+                const root = this.attachShadow({ mode: "open" });
+                const style = document.createElement("style");
+                style.textContent = `${base}:host{box-sizing:border-box;display:flex;flex:0 0 100%;gap:var(--spui-carousel-gap,0px);min-width:0;width:100%;overflow-anchor:none}:host([data-spui-carousel-motion]){display:contents}slot{display:contents}`;
+                root.append(style, document.createElement("slot"));
+            }
+            this.setAttribute("role", this.getAttribute("role") || "group");
+            this.addEventListener("keydown", this.keydown);
+            this.observer?.disconnect();
+            this.observer = new MutationObserver(() => this.syncCardFocus());
+            this.observer.observe(this, { childList: true, subtree: true });
+            this.syncCardFocus();
+        }
+        disconnectedCallback() { this.removeEventListener("keydown", this.keydown); this.observer?.disconnect(); this.observer = undefined; this.syncCardFocus(true); }
+        attributeChangedCallback() { this.toggleAttribute("data-card-focus", this.cardFocus); this.syncCardFocus(); }
+        syncCardFocus(restore = false) {
+            const cards = [...this.querySelectorAll("spui-carousel-card")];
+            cards.forEach((card, index) => {
+                if (restore || !this.cardFocus) {
+                    if (this.originalTabIndex.has(card)) {
+                        const original = this.originalTabIndex.get(card);
+                        if (original === null)
+                            card.removeAttribute("tabindex");
+                        else
+                            card.setAttribute("tabindex", original);
+                        this.originalTabIndex.delete(card);
+                    }
+                    return;
+                }
+                if (!this.originalTabIndex.has(card))
+                    this.originalTabIndex.set(card, card.getAttribute("tabindex"));
+                card.tabIndex = index === this.focusedIndex ? 0 : -1;
+            });
+        }
+    }
+    customElements.define("spui-carousel-slider", SpuiCarouselSlider);
+}
+export function defineCarouselViewport() {
+    if (customElements.get("spui-carousel-viewport"))
+        return;
+    class SpuiCarouselViewport extends HTMLElement {
+        connectedCallback() {
+            if (!this.shadowRoot) {
+                const root = this.attachShadow({ mode: "open" });
+                const style = document.createElement("style");
+                style.textContent = `${base}:host{display:contents;max-width:100%;width:auto}slot{display:contents}`;
+                root.append(style, document.createElement("slot"));
+            }
+            this.setAttribute("role", this.getAttribute("role") || "presentation");
+            this.draggable = true;
+        }
+    }
+    customElements.define("spui-carousel-viewport", SpuiCarouselViewport);
+}
+export function defineCarousel() {
+    if (customElements.get("spui-carousel"))
+        return;
+    defineCarouselCard();
+    defineCarouselNav();
+    defineCarouselNavButton();
+    defineCarouselNavImageButton();
+    defineCarouselButton();
+    defineCarouselAutoplayButton();
+    defineCarouselNavContainer();
+    defineCarouselSlider();
+    defineCarouselViewport();
+    class SpuiCarousel extends HTMLElement {
+        static observedAttributes = ["aria-label", "aria-roledescription", "previous-label", "next-label", "slide-label", "slide-group-label", "navigation-label", "play-label", "pause-label", "slide-width", "group-size", "draggable", "whitespace", "align", "appearance", "motion", "motion-duration", "motion-physics-duration", "autoplay", "autoplay-interval", "wrap", "circular", "controlled", "selected-index", "default-selected-index", "active-index", "default-active-index"];
+        viewport;
+        slideSlot;
+        previous;
+        next;
+        controls;
+        indicators;
+        slides = [];
+        current = 0;
+        pageSize = 1;
+        pageGroups = [];
+        slidePages = [];
+        requestedTarget = null;
+        requestedSource;
+        pendingScrollSource;
+        interacted = false;
+        raf = 0;
+        scrollEndTimer = 0;
+        events;
+        autoplayTimer = 0;
+        slideAnimationFrame = 0;
+        cancelSlideAnimation;
+        autoplayButton;
+        liveRegion;
+        autoplayRunning = false;
+        autoplayExplicitlyStarted = false;
+        lastScrollEvent;
+        contentObserver;
+        resizeObserver;
+        announcement;
+        drag;
+        originalSlideState = new WeakMap();
+        originalSlideLayout = new WeakMap();
+        originalSlideColumn = new WeakMap();
+        connectedCallback() {
+            if (!this.shadowRoot)
+                this.render();
+            this.events?.abort();
+            this.events = new AbortController();
+            this.slideSlot.addEventListener("slotchange", this.onSlotChange, { signal: this.events.signal });
+            this.contentObserver?.disconnect();
+            this.contentObserver = new MutationObserver(this.onSlotChange);
+            this.contentObserver.observe(this, { childList: true, subtree: true });
+            if (typeof ResizeObserver !== "undefined") {
+                this.resizeObserver?.disconnect();
+                this.resizeObserver = new ResizeObserver(() => { if (this.updatePageSize())
+                    this.syncSlides(false);
+                else
+                    this.syncWhitespace(); });
+                this.resizeObserver.observe(this.viewport);
+            }
+            this.viewport.addEventListener("scroll", this.onScroll, { passive: true, signal: this.events.signal });
+            this.viewport.addEventListener("scrollend", this.onScrollEnd, { signal: this.events.signal });
+            this.viewport.addEventListener("keydown", this.onViewportKeyDown, { signal: this.events.signal });
+            this.viewport.addEventListener("pointerdown", this.onPointerDown, { signal: this.events.signal });
+            this.viewport.addEventListener("pointermove", this.onPointerMove, { signal: this.events.signal });
+            this.viewport.addEventListener("pointerup", this.onPointerUp, { signal: this.events.signal });
+            this.viewport.addEventListener("pointercancel", this.onPointerUp, { signal: this.events.signal });
+            this.indicators.addEventListener("keydown", this.onIndicatorKeyDown, { signal: this.events.signal });
+            this.addEventListener("spui-carousel-nav-select", this.onNavSelect, { signal: this.events.signal });
+            this.addEventListener("spui-carousel-button-activate", this.onButtonActivate, { signal: this.events.signal });
+            this.addEventListener("spui-carousel-autoplay-toggle", this.toggleAutoplay, { signal: this.events.signal });
+            this.addEventListener("spui-carousel-card-focus", this.onCardFocus, { signal: this.events.signal });
+            this.addEventListener("pointerenter", this.pauseAutoplay, { signal: this.events.signal });
+            this.addEventListener("pointerleave", this.resumeAutoplay, { signal: this.events.signal });
+            this.addEventListener("focusin", this.pauseForFocus, { signal: this.events.signal });
+            this.addEventListener("focusout", this.onFocusOut, { signal: this.events.signal });
+            document.addEventListener("visibilitychange", this.onVisibilityChange, { signal: this.events.signal });
+            matchMedia("(prefers-reduced-motion: reduce)").addEventListener("change", this.onMotionPreference, { signal: this.events.signal });
+            this.autoplayButton.addEventListener("click", this.toggleAutoplay, { signal: this.events.signal });
+            this.autoplayRunning = this.hasAttribute("autoplay") && !matchMedia("(prefers-reduced-motion: reduce)").matches;
+            this.syncSlideWidth();
+            this.syncPresentation();
+            this.syncLabels();
+            this.syncSlides();
+            this.scheduleAutoplay();
+        }
+        disconnectedCallback() {
+            this.events?.abort();
+            this.events = undefined;
+            this.contentObserver?.disconnect();
+            this.contentObserver = undefined;
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = undefined;
+            this.stopSlideAnimation();
+            if (this.raf)
+                cancelAnimationFrame(this.raf);
+            this.raf = 0;
+            clearTimeout(this.scrollEndTimer);
+            this.scrollEndTimer = 0;
+            this.requestedTarget = null;
+            clearTimeout(this.autoplayTimer);
+            this.autoplayTimer = 0;
+            this.slides.forEach(slide => { this.restoreSlideState(slide); this.restoreSlideLayout(slide); });
+        }
+        attributeChangedCallback(name) {
+            if (!this.isConnected)
+                return;
+            if ((name === "selected-index" || name === "active-index") && this.hasAttribute("controlled"))
+                this.setIndex(Number(this.getAttribute(name)), false);
+            else if ((name === "default-selected-index" || name === "default-active-index") && !this.interacted)
+                this.setIndex(Number(this.getAttribute(name) ?? this.getAttribute("default-selected-index")), false);
+            this.syncLabels();
+            this.syncSlides();
+            if (name === "slide-width")
+                this.syncSlideWidth();
+            if (name === "motion") {
+                this.stopSlideAnimation();
+                this.requestedTarget = null;
+                this.requestedSource = undefined;
+            }
+            if (["align", "appearance", "motion", "motion-duration"].includes(name))
+                this.syncPresentation();
+            if (name === "autoplay")
+                this.autoplayRunning = this.hasAttribute("autoplay") && !matchMedia("(prefers-reduced-motion: reduce)").matches;
+            this.syncAutoplay();
+        }
+        get selectedIndex() { return this.current; }
+        set selectedIndex(value) { this.interacted = true; this.setIndex(value, false); }
+        get defaultSelectedIndex() { return this.current; }
+        set defaultSelectedIndex(value) { if (!this.interacted)
+            this.setIndex(value, false); }
+        get activeIndex() { return this.current; }
+        set activeIndex(value) { this.interacted = true; this.setIndex(value, false); }
+        get defaultActiveIndex() { return this.current; }
+        set defaultActiveIndex(value) { if (!this.interacted)
+            this.setIndex(value, false); }
+        get circular() { return this.hasAttribute("circular") || this.hasAttribute("wrap"); }
+        set circular(value) { this.toggleAttribute("circular", Boolean(value)); }
+        goTo(index) { this.requestIndex(index); }
+        nextSlide() { this.requestIndex(this.current + 1); }
+        previousSlide() { this.requestIndex(this.current - 1); }
+        get slideWidth() { return this.getAttribute("slide-width") || "100%"; }
+        set slideWidth(value) { this.setAttribute("slide-width", value); }
+        get groupSize() { const value = this.getAttribute("group-size") || "auto"; return value === "auto" ? value : Math.max(1, Math.floor(Number(value) || 1)); }
+        set groupSize(value) { this.setAttribute("group-size", String(value)); }
+        get draggable() { return this.hasAttribute("draggable"); }
+        set draggable(value) { this.toggleAttribute("draggable", Boolean(value)); }
+        get whitespace() { return this.hasAttribute("whitespace"); }
+        set whitespace(value) { this.toggleAttribute("whitespace", Boolean(value)); }
+        get align() { return this.getAttribute("align") === "start" || this.getAttribute("align") === "end" ? this.getAttribute("align") : "center"; }
+        set align(value) { this.setAttribute("align", value); }
+        get appearance() { return this.getAttribute("appearance") === "elevated" ? "elevated" : "flat"; }
+        set appearance(value) { this.setAttribute("appearance", value); }
+        get motion() {
+            if (this.getAttribute("motion") === "fade")
+                return "fade";
+            return this.hasAttribute("motion-physics-duration") ? { kind: "slide", duration: this.slideMotionDuration } : "slide";
+        }
+        set motion(value) {
+            if (typeof value === "string") {
+                this.setAttribute("motion", value);
+                this.removeAttribute("motion-physics-duration");
+            }
+            else {
+                this.setAttribute("motion", value.kind);
+                if (value.duration === undefined)
+                    this.removeAttribute("motion-physics-duration");
+                else
+                    this.setAttribute("motion-physics-duration", String(value.duration));
+            }
+        }
+        get motionDuration() { const raw = this.getAttribute("motion-duration"); const value = raw === null ? 240 : Number(raw); return Number.isFinite(value) ? Math.max(0, Math.min(2000, value)) : 240; }
+        set motionDuration(value) { this.setAttribute("motion-duration", String(value)); }
+        get slideMotionDuration() { const raw = this.getAttribute("motion-physics-duration"); const value = raw === null ? 25 : Number(raw); return Number.isFinite(value) ? Math.max(0, value) : 25; }
+        set slideMotionDuration(value) { this.setAttribute("motion-physics-duration", String(value)); }
+        syncSlideWidth() {
+            const value = this.getAttribute("slide-width")?.trim() || "100%";
+            this.style.setProperty("--spui-carousel-slide-size", CSS.supports("flex-basis", value) ? value : "100%");
+        }
+        updatePageSize() {
+            const previousGroups = this.pageGroups;
+            const activeSlide = previousGroups[this.current]?.[0] ?? 0;
+            const raw = this.getAttribute("group-size") || "auto";
+            const groups = [];
+            if (raw !== "auto") {
+                const requested = Number(raw);
+                const size = Number.isFinite(requested) && requested >= 1 ? Math.floor(requested) : 1;
+                for (let index = 0; index < this.slides.length; index += size)
+                    groups.push(Array.from({ length: Math.min(size, this.slides.length - index) }, (_, offset) => index + offset));
+            }
+            else if (this.viewport && this.slides.length) {
+                const available = this.viewport.clientWidth;
+                const gap = Number.parseFloat(getComputedStyle(this.viewport).columnGap) || 0;
+                if (available > 0) {
+                    let group = [];
+                    let used = 0;
+                    this.slides.forEach((slide, index) => {
+                        const measured = slide.getBoundingClientRect().width;
+                        const width = measured > 0 ? measured : available;
+                        const nextUsed = used + (group.length ? gap : 0) + width;
+                        if (group.length && nextUsed > available + 0.5) {
+                            groups.push(group);
+                            group = [];
+                            used = 0;
+                        }
+                        used += (group.length ? gap : 0) + width;
+                        group.push(index);
+                    });
+                    if (group.length)
+                        groups.push(group);
+                }
+                else {
+                    for (let index = 0; index < this.slides.length; index++)
+                        groups.push([index]);
+                }
+            }
+            else {
+                for (let index = 0; index < this.slides.length; index++)
+                    groups.push([index]);
+            }
+            const changed = groups.length !== previousGroups.length || groups.some((group, page) => group.length !== previousGroups[page]?.length || group.some((index, offset) => index !== previousGroups[page]?.[offset]));
+            if (changed) {
+                this.requestedTarget = null;
+                this.requestedSource = undefined;
+                this.pendingScrollSource = undefined;
+                this.stopSlideAnimation();
+            }
+            this.pageGroups = groups;
+            this.slidePages = Array(this.slides.length).fill(0);
+            groups.forEach((group, page) => group.forEach(index => { this.slidePages[index] = page; }));
+            this.pageSize = groups.reduce((largest, group) => Math.max(largest, group.length), 1);
+            this.current = Math.min(this.slidePages[activeSlide] ?? 0, Math.max(0, this.pageCount - 1));
+            this.style.setProperty("--spui-carousel-page-size", String(this.pageSize));
+            return changed;
+        }
+        get pageCount() { return this.pageGroups.length; }
+        pageForSlide(index) { return this.slidePages[index] ?? 0; }
+        firstSlideForPage(page) { return this.slides[this.pageGroups[page]?.[0] ?? 0]; }
+        columnForSlide(index) { return (this.pageGroups[this.pageForSlide(index)]?.indexOf(index) ?? 0) + 1; }
+        syncPresentation() {
+            this.style.setProperty("--spui-carousel-align", this.align);
+            this.style.setProperty("--spui-carousel-motion-duration", `${this.motionDuration}ms`);
+            this.querySelectorAll("spui-carousel-slider, spui-carousel-viewport").forEach(wrapper => wrapper.toggleAttribute("data-spui-carousel-motion", this.motion === "fade"));
+            this.syncWhitespace();
+            this.slides.forEach((slide, index) => this.applySlideState(slide, this.pageForSlide(index) === this.current, index));
+        }
+        syncWhitespace() {
+            const viewportWidth = this.viewport?.clientWidth || 0;
+            this.slides.forEach((slide, index) => {
+                const first = index === 0, last = index === this.slides.length - 1;
+                if (!this.whitespace || (!first && !last)) {
+                    this.restoreSlideLayout(slide);
+                    return;
+                }
+                if (!this.originalSlideLayout.has(slide))
+                    this.originalSlideLayout.set(slide, { startAttr: slide.getAttribute("data-spui-carousel-space-start"), endAttr: slide.getAttribute("data-spui-carousel-space-end"), startValue: slide.style.getPropertyValue("--spui-carousel-auto-space-start"), endValue: slide.style.getPropertyValue("--spui-carousel-auto-space-end") });
+                const remaining = Math.max(0, viewportWidth - slide.getBoundingClientRect().width);
+                const start = first && (this.align === "center" || this.align === "end") ? (this.align === "center" ? remaining / 2 : remaining) : 0;
+                const end = last && (this.align === "center" || this.align === "start") ? (this.align === "center" ? remaining / 2 : remaining) : 0;
+                slide.toggleAttribute("data-spui-carousel-space-start", start > 0);
+                slide.toggleAttribute("data-spui-carousel-space-end", end > 0);
+                if (start > 0)
+                    slide.style.setProperty("--spui-carousel-auto-space-start", `${start}px`);
+                else
+                    slide.style.removeProperty("--spui-carousel-auto-space-start");
+                if (end > 0)
+                    slide.style.setProperty("--spui-carousel-auto-space-end", `${end}px`);
+                else
+                    slide.style.removeProperty("--spui-carousel-auto-space-end");
+            });
+        }
+        restoreSlideLayout(slide) {
+            const original = this.originalSlideLayout.get(slide);
+            if (!original)
+                return;
+            if (original.startAttr === null)
+                slide.removeAttribute("data-spui-carousel-space-start");
+            else
+                slide.setAttribute("data-spui-carousel-space-start", original.startAttr);
+            if (original.endAttr === null)
+                slide.removeAttribute("data-spui-carousel-space-end");
+            else
+                slide.setAttribute("data-spui-carousel-space-end", original.endAttr);
+            if (original.startValue)
+                slide.style.setProperty("--spui-carousel-auto-space-start", original.startValue);
+            else
+                slide.style.removeProperty("--spui-carousel-auto-space-start");
+            if (original.endValue)
+                slide.style.setProperty("--spui-carousel-auto-space-end", original.endValue);
+            else
+                slide.style.removeProperty("--spui-carousel-auto-space-end");
+            this.originalSlideLayout.delete(slide);
+        }
+        applySlideState(slide, active, index) {
+            if (!this.originalSlideState.has(slide))
+                this.originalSlideState.set(slide, { inert: slide.inert, ariaHidden: slide.getAttribute("aria-hidden") });
+            const original = this.originalSlideState.get(slide);
+            slide.toggleAttribute("data-spui-carousel-motion", this.motion === "fade");
+            if (this.motion !== "fade") {
+                this.restoreSlideState(slide);
+                return;
+            }
+            if (!this.originalSlideColumn.has(slide))
+                this.originalSlideColumn.set(slide, { value: slide.style.getPropertyValue("--spui-carousel-slide-column"), gridArea: slide.style.gridArea });
+            slide.style.setProperty("--spui-carousel-slide-column", String(this.columnForSlide(index)));
+            slide.style.gridArea = "1 / var(--spui-carousel-slide-column) / 2 / span 1";
+            slide.toggleAttribute("data-spui-carousel-active", active);
+            if (!active && (slide.contains(document.activeElement) || slide.shadowRoot?.activeElement))
+                this.viewport?.focus({ preventScroll: true });
+            slide.inert = original.inert || !active;
+            if (active && original.ariaHidden === null)
+                slide.removeAttribute("aria-hidden");
+            else
+                slide.setAttribute("aria-hidden", active ? original.ariaHidden : "true");
+        }
+        restoreSlideState(slide) {
+            const original = this.originalSlideState.get(slide);
+            if (!original)
+                return;
+            slide.removeAttribute("data-spui-carousel-active");
+            slide.removeAttribute("data-spui-carousel-motion");
+            slide.inert = original.inert;
+            const originalColumn = this.originalSlideColumn.get(slide);
+            if (originalColumn !== undefined) {
+                if (originalColumn.value)
+                    slide.style.setProperty("--spui-carousel-slide-column", originalColumn.value);
+                else
+                    slide.style.removeProperty("--spui-carousel-slide-column");
+                slide.style.gridArea = originalColumn.gridArea;
+                this.originalSlideColumn.delete(slide);
+            }
+            if (original.ariaHidden === null)
+                slide.removeAttribute("aria-hidden");
+            else
+                slide.setAttribute("aria-hidden", original.ariaHidden);
+        }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{position:relative;display:block;min-width:0}:host([appearance=elevated]){box-sizing:border-box;padding:var(--spui-carousel-padding,12px);border:1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1));border-radius:var(--spui-card-radius,var(--spui-control-radius,8px));background:var(--spui-ui-surface,var(--spui-base-surface,#fff));color:var(--spui-ui-text,inherit);box-shadow:var(--spui-card-shadow,0 2px 8px #0002)}:host([data-empty=true]){display:none}::slotted(spui-carousel-nav-container[layout=overlay]),::slotted(spui-carousel-nav-container[layout=overlay-wide]){position:absolute;z-index:2;inset-inline:12px;inset-block-end:12px}::slotted(spui-carousel-nav-container[layout=overlay-expanded]){position:absolute;z-index:2;inset-inline:12px;inset-block-start:50%;transform:translateY(-50%)}::slotted(spui-carousel-slider){flex:0 0 100%;width:100%}:host([data-dragging]) .viewport{cursor:grabbing;user-select:none;scroll-snap-type:none}:host([data-dragging]) ::slotted(*){pointer-events:none}.viewport{display:flex;gap:var(--spui-carousel-gap,0px);min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--spui-carousel-scrollbar,var(--spui-ui-stroke,#c8c8c8)) transparent;scroll-behavior:smooth}:host([motion=fade]) .viewport{display:grid;overflow:hidden;scroll-snap-type:none}:host([motion=fade]) .viewport slot{display:contents}.viewport:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px}::slotted(*){box-sizing:border-box;flex:0 0 var(--spui-carousel-slide-width,var(--spui-carousel-slide-size,100%));min-width:0;scroll-snap-align:var(--spui-carousel-align,start);scroll-snap-stop:always}::slotted(spui-carousel-card[auto-size]){flex-basis:auto}::slotted([data-spui-carousel-space-start]){margin-inline-start:var(--spui-carousel-auto-space-start,0px)}::slotted([data-spui-carousel-space-end]){margin-inline-end:var(--spui-carousel-auto-space-end,0px)}:host([motion=fade]) ::slotted(*){grid-area:1/1;width:100%;flex:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--spui-carousel-motion-duration,240ms) var(--spui-motion-easing-standard,ease),visibility 0s linear var(--spui-carousel-motion-duration,240ms)}:host([motion=fade]) ::slotted([data-spui-carousel-active]){opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}.controls{display:flex;align-items:center;justify-content:center;gap:4px;min-height:48px;margin-block-start:4px}.controls[hidden]{display:none}.arrow,.indicator,.autoplay{box-sizing:border-box;display:grid;place-items:center;flex:none;min-width:44px;min-height:44px;padding:0 10px;border:1px solid var(--spui-carousel-control-border,var(--spui-ui-stroke,#d1d1d1));border-radius:var(--spui-control-radius,6px);background:var(--spui-carousel-control-background,var(--spui-ui-surface,#fff));color:var(--spui-carousel-control-foreground,var(--spui-ui-text,inherit));font:inherit;cursor:pointer}.arrow:hover:not(:disabled),.indicator:hover,.autoplay:hover{background:var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))}.arrow:focus-visible,.indicator:focus-visible,.autoplay:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px}.arrow:disabled{color:var(--spui-ui-muted,#777);opacity:.55;cursor:not-allowed}.arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.indicators{display:flex;align-items:center;justify-content:center;gap:2px}.indicator{position:relative;border:0;background:transparent}.indicator:before{width:22px;height:8px;border-radius:999px;background:var(--spui-carousel-indicator,var(--spui-ui-stroke,#a0a0a0));content:"";transform:scaleX(.36);transition:transform var(--spui-motion-duration-normal,150ms) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1)),background-color var(--spui-motion-duration-normal,150ms) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1))}.indicator[aria-current=step]:before{transform:scaleX(1);background:var(--spui-ui-accent,#0078d4)}@media(prefers-reduced-motion:reduce){.viewport{scroll-behavior:auto}.indicator:before{transition:none}:host([motion=fade]) ::slotted(*){transition:none}}@media(forced-colors:active){:host([appearance=elevated]){border-color:CanvasText;background:Canvas;color:CanvasText;box-shadow:none}.viewport:focus-visible,.arrow:focus-visible,.indicator:focus-visible,.autoplay:focus-visible{outline-color:Highlight}.arrow,.autoplay{border-color:ButtonText}.indicator:before{background:ButtonText}.indicator[aria-current=step]:before{background:Highlight}}:host(:dir(rtl)) .arrow.previous svg,:host(:dir(rtl)) .arrow.next svg{transform:rotate(180deg)}`;
+            style.textContent += ":host([motion=fade]) .viewport{grid-template-columns:repeat(var(--spui-carousel-page-size,1),minmax(0,1fr));grid-template-rows:minmax(0,1fr)}";
+            this.viewport = document.createElement("div");
+            this.viewport.className = "viewport";
+            this.viewport.setAttribute("role", "group");
+            this.viewport.setAttribute("tabindex", "0");
+            this.viewport.setAttribute("aria-label", "Carousel slides");
+            this.viewport.id = `spui-carousel-${++carouselId}`;
+            this.slideSlot = document.createElement("slot");
+            this.viewport.append(this.slideSlot);
+            this.controls = document.createElement("div");
+            this.controls.className = "controls";
+            this.controls.part.add("controls");
+            this.previous = this.createArrow("previous", "M14 5 7 12l7 7");
+            this.indicators = document.createElement("div");
+            this.indicators.className = "indicators";
+            this.indicators.setAttribute("role", "group");
+            this.indicators.setAttribute("aria-label", "Slide navigation");
+            this.next = this.createArrow("next", "m10 5 7 7-7 7");
+            this.autoplayButton = document.createElement("button");
+            this.autoplayButton.type = "button";
+            this.autoplayButton.className = "autoplay";
+            this.autoplayButton.part.add("autoplay");
+            const navigation = document.createElement("slot");
+            navigation.name = "navigation";
+            navigation.part.add("navigation");
+            this.controls.append(this.previous, this.indicators, this.next, this.autoplayButton, navigation);
+            this.liveRegion = document.createElement("div");
+            this.liveRegion.className = "announcement";
+            this.liveRegion.setAttribute("aria-live", "polite");
+            this.liveRegion.setAttribute("aria-atomic", "true");
+            const visuallyHidden = document.createElement("style");
+            visuallyHidden.textContent = ".announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}";
+            shadow.append(style, this.viewport, this.controls, visuallyHidden, this.liveRegion);
+        }
+        createArrow(name, path) {
+            const button = document.createElement("button");
+            button.type = "button";
+            button.className = `arrow ${name}`;
+            button.part.add(`button-${name}`);
+            button.setAttribute("aria-controls", this.viewport.id);
+            const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            svg.setAttribute("viewBox", "0 0 24 24");
+            svg.setAttribute("aria-hidden", "true");
+            const line = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            line.setAttribute("d", path);
+            svg.append(line);
+            button.append(svg);
+            button.addEventListener("click", event => this.requestIndex(this.current + (name === "next" ? 1 : -1), { event, type: "click" }));
+            return button;
+        }
+        syncLabels() {
+            this.setAttribute("role", this.getAttribute("role") || "region");
+            if (!this.getAttribute("aria-roledescription"))
+                this.setAttribute("aria-roledescription", "carousel");
+            if (!this.getAttribute("aria-label"))
+                this.setAttribute("aria-label", "Carousel");
+            this.previous?.setAttribute("aria-label", this.getAttribute("previous-label") || "Previous slide");
+            this.next?.setAttribute("aria-label", this.getAttribute("next-label") || "Next slide");
+            this.viewport?.setAttribute("aria-label", this.getAttribute("slide-group-label") || "Carousel slides");
+            this.indicators?.setAttribute("aria-label", this.getAttribute("navigation-label") || "Slide navigation");
+            this.syncAutoplay();
+        }
+        syncAutoplay() {
+            if (!this.autoplayButton)
+                return;
+            this.autoplayButton.hidden = this.pageCount < 2;
+            this.autoplayButton.textContent = this.autoplayRunning ? (this.getAttribute("pause-label") || "Pause") : (this.getAttribute("play-label") || "Play");
+            this.autoplayButton.setAttribute("aria-label", this.autoplayButton.textContent);
+            this.autoplayButton.setAttribute("aria-pressed", String(this.autoplayRunning));
+            this.querySelectorAll("spui-carousel-autoplay-button").forEach(button => button.toggleAttribute("selected", this.autoplayRunning));
+            this.scheduleAutoplay();
+        }
+        scheduleAutoplay() {
+            clearTimeout(this.autoplayTimer);
+            this.autoplayTimer = 0;
+            if (!this.isConnected || !this.autoplayRunning || this.pageCount < 2 || ((this.matches(":hover") || this.contains(document.activeElement)) && !this.autoplayExplicitlyStarted) || document.hidden)
+                return;
+            const interval = Number(this.getAttribute("autoplay-interval") || 4000);
+            this.autoplayTimer = window.setTimeout(() => { this.requestIndex((this.current + 1) % this.pageCount, { event: new Event("autoplay"), type: "autoplay" }); this.scheduleAutoplay(); }, Number.isFinite(interval) ? Math.max(1000, interval) : 4000);
+        }
+        pauseAutoplay = () => { clearTimeout(this.autoplayTimer); this.autoplayTimer = 0; };
+        pauseForFocus = () => { this.autoplayExplicitlyStarted = false; this.pauseAutoplay(); };
+        resumeAutoplay = () => this.scheduleAutoplay();
+        onFocusOut = (event) => { if (!this.contains(event.relatedTarget))
+            this.scheduleAutoplay(); };
+        onVisibilityChange = () => this.scheduleAutoplay();
+        onMotionPreference = (event) => { if (event.matches) {
+            this.autoplayRunning = false;
+            this.autoplayExplicitlyStarted = false;
+            this.syncAutoplay();
+        } };
+        toggleAutoplay = () => { this.autoplayRunning = !this.autoplayRunning; this.autoplayExplicitlyStarted = this.autoplayRunning; this.syncAutoplay(); };
+        syncSlides(recalculateGroups = true) {
+            if (!this.slideSlot)
+                return;
+            const collectSlides = (element) => {
+                if (element.localName === "spui-carousel-slider" || element.localName === "spui-carousel-viewport")
+                    return [...element.children].filter((child) => child instanceof HTMLElement).flatMap(collectSlides);
+                return [element];
+            };
+            const nextSlides = this.slideSlot.assignedElements({ flatten: true }).filter((element) => element instanceof HTMLElement).flatMap(collectSlides);
+            this.slides.filter(slide => !nextSlides.includes(slide)).forEach(slide => { this.resizeObserver?.unobserve(slide); this.restoreSlideState(slide); this.restoreSlideLayout(slide); });
+            this.slides = nextSlides;
+            if (recalculateGroups)
+                this.updatePageSize();
+            this.slides.forEach(slide => this.resizeObserver?.observe(slide));
+            this.syncWhitespace();
+            this.slides.forEach((slide, index) => {
+                slide.setAttribute("role", slide.getAttribute("role") || "group");
+                slide.setAttribute("aria-roledescription", slide.getAttribute("aria-roledescription") || "slide");
+                if (!slide.hasAttribute("aria-label")) {
+                    slide.dataset.spuiCarouselGeneratedLabel = "";
+                    slide.setAttribute("aria-label", this.formatSlideLabel(index));
+                }
+                else if (slide.dataset.spuiCarouselGeneratedLabel !== undefined)
+                    delete slide.dataset.spuiCarouselGeneratedLabel;
+            });
+            this.setAttribute("data-empty", String(this.slides.length === 0));
+            this.indicators.replaceChildren(...Array.from({ length: this.pageCount }, (_, index) => {
+                const button = document.createElement("button");
+                button.type = "button";
+                button.className = "indicator";
+                button.setAttribute("aria-label", this.formatPageLabel(index));
+                button.addEventListener("click", event => this.requestIndex(index, { event, type: "click" }));
+                return button;
+            }));
+            this.current = Math.min(Math.max(this.current, 0), Math.max(0, this.pageCount - 1));
+            if (!this.interacted && this.pageCount && this.current === 0 && this.hasAttribute("default-selected-index"))
+                this.current = Math.min(Math.max(Number(this.getAttribute("default-selected-index")) || 0, 0), this.pageCount - 1);
+            this.syncState();
+            this.syncAutoplay();
+            if (this.slides[this.current] && this.motion !== "fade")
+                this.scrollToIndex(this.current, "instant");
+        }
+        formatSlideLabel(index) {
+            return (this.getAttribute("slide-label") || "Slide {index} of {count}").replaceAll("{index}", String(index + 1)).replaceAll("{count}", String(this.slides.length || this.slideSlot?.assignedElements({ flatten: true }).length || 0));
+        }
+        formatPageLabel(index) {
+            return (this.getAttribute("slide-label") || "Slide {index} of {count}").replaceAll("{index}", String(index + 1)).replaceAll("{count}", String(this.pageCount));
+        }
+        requestIndex(index, source) {
+            if (!this.pageCount)
+                return;
+            const changeSource = source ?? { event: new Event("programmatic"), type: "programmatic" };
+            let next = index;
+            if (this.circular)
+                next = (next + this.pageCount) % this.pageCount;
+            else
+                next = Math.min(Math.max(next, 0), this.pageCount - 1);
+            if (next === this.current && !this.circular)
+                return;
+            if (!this.hasAttribute("controlled")) {
+                this.interacted = true;
+                this.setIndex(next, true, changeSource);
+            }
+            else
+                this.dispatch(next, changeSource);
+        }
+        setIndex(index, emit, source) {
+            const next = Math.min(Math.max(Number.isFinite(index) ? Math.trunc(index) : 0, 0), Math.max(0, this.pageCount - 1));
+            const changed = next !== this.current;
+            this.current = next;
+            this.syncState();
+            if (changed && this.motion !== "fade") {
+                this.requestedTarget = next;
+                this.requestedSource = source;
+                this.scrollToIndex(next, "smooth");
+            }
+            else if (this.motion === "fade") {
+                this.requestedTarget = null;
+                this.requestedSource = undefined;
+            }
+            if (changed && emit)
+                this.dispatch(next, source);
+        }
+        dispatch(index, source) {
+            const groups = this.pageGroups.map(group => [...group]);
+            this.liveRegion.textContent = this.announcement?.(index, this.pageCount, groups) || this.formatPageLabel(index);
+            const changeSource = source ?? { event: new Event("programmatic"), type: "programmatic" };
+            this.dispatchEvent(new CustomEvent("spui-carousel-change", { bubbles: true, composed: true, detail: { value: index, index, type: "select", event: changeSource.event, eventType: changeSource.type } }));
+        }
+        scrollToIndex(index, behavior) {
+            const slide = this.firstSlideForPage(index);
+            if (!slide)
+                return;
+            const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
+            if (behavior === "smooth" && !reduced && this.motion !== "fade" && this.slideMotionDuration > 0) {
+                this.animateSlideScroll(slide, this.slideMotionDuration);
+                return;
+            }
+            this.stopSlideAnimation();
+            slide.scrollIntoView({ behavior: "instant", block: "nearest", inline: this.align });
+        }
+        stopSlideAnimation() {
+            this.cancelSlideAnimation?.();
+            this.cancelSlideAnimation = undefined;
+            this.slideAnimationFrame = 0;
+            clearTimeout(this.scrollEndTimer);
+            this.scrollEndTimer = 0;
+        }
+        animateSlideScroll(slide, duration) {
+            this.stopSlideAnimation();
+            const viewport = this.viewport;
+            const originalSnap = viewport.style.scrollSnapType;
+            const originalBehavior = viewport.style.scrollBehavior;
+            const start = viewport.scrollLeft;
+            viewport.style.scrollSnapType = "none";
+            viewport.style.scrollBehavior = "auto";
+            slide.scrollIntoView({ behavior: "instant", block: "nearest", inline: this.align });
+            const target = viewport.scrollLeft;
+            viewport.scrollLeft = start;
+            let location = start;
+            let velocity = 0;
+            let active = true;
+            const restore = () => { viewport.style.scrollSnapType = originalSnap; viewport.style.scrollBehavior = originalBehavior; };
+            const cancel = () => {
+                if (!active)
+                    return;
+                active = false;
+                if (this.slideAnimationFrame)
+                    cancelAnimationFrame(this.slideAnimationFrame);
+                restore();
+            };
+            const finish = () => {
+                if (!active)
+                    return;
+                active = false;
+                viewport.scrollLeft = target;
+                restore();
+                this.cancelSlideAnimation = undefined;
+                this.slideAnimationFrame = 0;
+                if (this.requestedTarget !== null)
+                    this.onScrollEnd(this.lastScrollEvent);
+            };
+            this.cancelSlideAnimation = cancel;
+            const friction = 0.68;
+            const tick = () => {
+                if (!active)
+                    return;
+                const displacement = target - location;
+                velocity = (velocity + displacement / duration) * friction;
+                location += velocity;
+                viewport.scrollLeft = location;
+                if (Math.abs(target - location) < 0.4 && Math.abs(velocity) < 0.4)
+                    finish();
+                else
+                    this.slideAnimationFrame = requestAnimationFrame(tick);
+            };
+            if (Math.abs(target - start) < 0.4)
+                finish();
+            else
+                this.slideAnimationFrame = requestAnimationFrame(tick);
+        }
+        syncState() {
+            const count = this.pageCount;
+            this.controls.hidden = count < 2;
+            this.previous.disabled = !this.circular && this.current <= 0;
+            this.next.disabled = !this.circular && this.current >= count - 1;
+            this.indicators.querySelectorAll(".indicator").forEach((button, index) => {
+                if (index === this.current)
+                    button.setAttribute("aria-current", "step");
+                else
+                    button.removeAttribute("aria-current");
+                button.tabIndex = index === this.current ? 0 : -1;
+            });
+            this.slides.forEach((slide, index) => { if (slide.dataset.spuiCarouselGeneratedLabel !== undefined)
+                slide.setAttribute("aria-label", this.formatPageLabel(this.pageForSlide(index))); });
+            this.slides.forEach((slide, index) => this.applySlideState(slide, this.pageForSlide(index) === this.current, index));
+            this.querySelectorAll("spui-carousel-nav-button,spui-carousel-nav-image-button").forEach(button => {
+                const buttonIndex = Number(button.getAttribute("index"));
+                button.toggleAttribute("selected", buttonIndex === this.current);
+                button.toggleAttribute("disabled", buttonIndex >= count);
+            });
+            this.querySelectorAll("spui-carousel-button").forEach(button => button.disabled = !this.circular && (button.navType === "prev" ? this.current <= 0 : this.current >= count - 1));
+            this.dataset.selectedIndex = String(this.current);
+            this.syncAutoplay();
+        }
+        onSlotChange = () => this.syncSlides();
+        onNavSelect = (event) => { const detail = event.detail; this.requestIndex(Number(detail?.index), { event: detail?.event ?? new MouseEvent("click"), type: "click" }); };
+        onCardFocus = (event) => { const detail = event.detail; this.requestIndex(this.pageForSlide(Number(detail?.index)), { event: detail?.event ?? new KeyboardEvent("keydown"), type: "keydown" }); };
+        onButtonActivate = (event) => { const detail = event.detail; this.requestIndex(this.current + (detail?.navType === "prev" ? -1 : 1), { event: detail?.event ?? new MouseEvent("click"), type: "click" }); };
+        onScroll = (event) => {
+            this.lastScrollEvent = event;
+            if (this.motion === "fade")
+                return;
+            if (this.drag?.moved)
+                return;
+            if (this.requestedTarget !== null) {
+                clearTimeout(this.scrollEndTimer);
+                this.scrollEndTimer = window.setTimeout(() => this.onScrollEnd(event), 150);
+                return;
+            }
+            if (this.raf)
+                return;
+            this.raf = requestAnimationFrame(() => {
+                this.raf = 0;
+                if (this.requestedTarget !== null)
+                    return;
+                const nearest = this.nearestSlideIndex();
+                if (nearest !== this.current) {
+                    const source = this.pendingScrollSource ?? { event, type: "scroll" };
+                    this.pendingScrollSource = undefined;
+                    this.current = nearest;
+                    this.syncState();
+                    this.dispatch(nearest, source);
+                }
+            });
+        };
+        onPointerDown = (event) => {
+            if (!this.draggable || event.pointerType !== "mouse" || event.button !== 0 || (event.target instanceof HTMLElement && event.target.closest("button,a,input,textarea,select,[contenteditable=true]")))
+                return;
+            if (this.cancelSlideAnimation) {
+                this.stopSlideAnimation();
+                this.requestedTarget = null;
+                this.requestedSource = undefined;
+            }
+            this.drag = { pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, startScrollLeft: this.viewport.scrollLeft, moved: false };
+            this.viewport.setPointerCapture(event.pointerId);
+        };
+        onPointerMove = (event) => {
+            const drag = this.drag;
+            if (!drag || event.pointerId !== drag.pointerId)
+                return;
+            const dx = event.clientX - drag.startX, dy = event.clientY - drag.startY;
+            if (!drag.moved && Math.abs(dx) < 5)
+                return;
+            if (Math.abs(dy) > Math.abs(dx))
+                return;
+            drag.moved = true;
+            this.setAttribute("data-dragging", "");
+            this.viewport.scrollLeft = drag.startScrollLeft - (getComputedStyle(this).direction === "rtl" ? -dx : dx);
+            event.preventDefault();
+        };
+        onPointerUp = (event) => {
+            if (!this.drag || event.pointerId !== this.drag.pointerId)
+                return;
+            if (this.viewport.hasPointerCapture(event.pointerId))
+                this.viewport.releasePointerCapture(event.pointerId);
+            const moved = this.drag.moved;
+            this.drag = undefined;
+            this.removeAttribute("data-dragging");
+            if (moved && this.motion !== "fade") {
+                const next = this.nearestSlideIndex();
+                const source = { event, type: "drag" };
+                if (next === this.current)
+                    this.pendingScrollSource = source;
+                this.requestIndex(next, source);
+            }
+        };
+        nearestSlideIndex() {
+            const viewportBox = this.viewport.getBoundingClientRect();
+            const rtl = getComputedStyle(this.viewport).direction === "rtl";
+            const target = this.align === "center" ? viewportBox.left + viewportBox.width / 2 : this.align === "start" ? (rtl ? viewportBox.right : viewportBox.left) : (rtl ? viewportBox.left : viewportBox.right);
+            const nearest = this.slides.reduce((best, slide, index) => {
+                const rect = slide.getBoundingClientRect();
+                const point = this.align === "center" ? rect.left + rect.width / 2 : this.align === "start" ? (rtl ? rect.right : rect.left) : (rtl ? rect.left : rect.right);
+                const distance = Math.abs(point - target);
+                return distance < best.distance ? { index, distance } : best;
+            }, { index: 0, distance: Number.POSITIVE_INFINITY }).index;
+            return this.pageForSlide(nearest);
+        }
+        onScrollEnd = (event) => {
+            // The native scrollend event may belong to an interrupted smooth scroll.
+            // The attraction animation commits its own target from finish().
+            if (this.cancelSlideAnimation)
+                return;
+            if (this.motion === "fade") {
+                this.requestedTarget = null;
+                this.requestedSource = undefined;
+                clearTimeout(this.scrollEndTimer);
+                this.scrollEndTimer = 0;
+                return;
+            }
+            if (this.requestedTarget === null) {
+                this.pendingScrollSource = undefined;
+                return;
+            }
+            clearTimeout(this.scrollEndTimer);
+            this.scrollEndTimer = 0;
+            const target = this.requestedTarget;
+            this.requestedTarget = null;
+            const nearest = target ?? this.nearestSlideIndex();
+            const source = this.requestedSource ?? { event: event ?? this.lastScrollEvent ?? new Event("scroll"), type: "scroll" };
+            this.requestedSource = undefined;
+            if (nearest !== this.current) {
+                this.current = nearest;
+                this.syncState();
+                this.dispatch(nearest, source);
+            }
+        };
+        onViewportKeyDown = (event) => {
+            if (event.target instanceof HTMLElement && event.target.closest("input,textarea,select,button,a,[contenteditable=true],[role=slider],[role=textbox]"))
+                return;
+            const rtl = getComputedStyle(this).direction === "rtl";
+            const previous = rtl ? "ArrowRight" : "ArrowLeft";
+            const next = rtl ? "ArrowLeft" : "ArrowRight";
+            if (event.key !== previous && event.key !== next)
+                return;
+            event.preventDefault();
+            this.requestIndex(this.current + (event.key === next ? 1 : -1), { event, type: "keydown" });
+        };
+        onIndicatorKeyDown = (event) => {
+            const rtl = getComputedStyle(this).direction === "rtl";
+            const previous = rtl ? "ArrowRight" : "ArrowLeft";
+            const next = rtl ? "ArrowLeft" : "ArrowRight";
+            const index = event.key === "Home" ? 0 : event.key === "End" ? this.pageCount - 1 : event.key === previous ? this.current - 1 : event.key === next ? this.current + 1 : -1;
+            if (index < 0)
+                return;
+            event.preventDefault();
+            this.requestIndex(index, { event, type: "keydown" });
+            this.indicators.querySelectorAll(".indicator")[this.current]?.focus();
+        };
+    }
+    customElements.define("spui-carousel", SpuiCarousel);
+}