@sekiui/elements 0.0.63 → 0.0.65

package/dist/collection/components/carousel/seki-carousel.js

@@ -0,0 +1,573 @@
+import { h, Host } from "@stencil/core";
+import EmblaCarousel from "embla-carousel";
+/**
+ * @slot - Carousel content (seki-carousel-content, arrows, dots)
+ */
+export class SekiCarousel {
+    constructor() {
+        // =========================================================================
+        // Props
+        // =========================================================================
+        /** Enable infinite loop scrolling */
+        this.loop = false;
+        /** Enable autoplay */
+        this.autoplay = false;
+        /** Autoplay delay in milliseconds */
+        this.autoplayDelay = 4000;
+        /** Pause autoplay on hover */
+        this.pauseOnHover = true;
+        /** Number of slides to scroll at once */
+        this.slidesToScroll = 1;
+        /** Initial slide index */
+        this.startIndex = 0;
+        /** Enable momentum/free scrolling */
+        this.dragFree = false;
+        /** Accessible label for the carousel */
+        this.ariaLabel = 'Carousel';
+        // =========================================================================
+        // State
+        // =========================================================================
+        /** Currently selected slide index */
+        this.selectedIndex = 0;
+        /** Total number of scroll snaps */
+        this.scrollSnapCount = 0;
+        /** Whether can scroll to previous */
+        this.canScrollPrev = false;
+        /** Whether can scroll to next */
+        this.canScrollNext = false;
+        /** Whether autoplay is currently paused */
+        this.autoplayPaused = false;
+        // =========================================================================
+        // Private
+        // =========================================================================
+        this.emblaApi = null;
+        this.autoplayInterval = null;
+        this.viewportEl = null;
+        this.handleSelect = () => {
+            this.updateState();
+            this.slideChange.emit({
+                index: this.selectedIndex,
+                total: this.scrollSnapCount,
+            });
+        };
+        this.handleReInit = () => {
+            this.updateState();
+        };
+        this.handlePointerDown = () => {
+            if (this.autoplay) {
+                this.pauseAutoplay();
+            }
+        };
+        this.handlePointerUp = () => {
+            if (this.autoplay && this.autoplayPaused) {
+                this.resumeAutoplay();
+            }
+        };
+        this.handleMouseEnter = () => {
+            if (this.autoplay && this.pauseOnHover) {
+                this.pauseAutoplay();
+            }
+        };
+        this.handleMouseLeave = () => {
+            if (this.autoplay && this.pauseOnHover && this.autoplayPaused) {
+                this.resumeAutoplay();
+            }
+        };
+        this.handleFocusIn = () => {
+            if (this.autoplay) {
+                this.pauseAutoplay();
+            }
+        };
+        this.handleFocusOut = (event) => {
+            // Only resume if focus is leaving the carousel entirely
+            if (this.autoplay && !this.el.contains(event.relatedTarget)) {
+                this.resumeAutoplay();
+            }
+        };
+        this.handleKeyDown = (event) => {
+            var _a, _b, _c, _d;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    event.preventDefault();
+                    (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.scrollPrev();
+                    break;
+                case 'ArrowRight':
+                    event.preventDefault();
+                    (_b = this.emblaApi) === null || _b === void 0 ? void 0 : _b.scrollNext();
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    (_c = this.emblaApi) === null || _c === void 0 ? void 0 : _c.scrollTo(0);
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    (_d = this.emblaApi) === null || _d === void 0 ? void 0 : _d.scrollTo(this.scrollSnapCount - 1);
+                    break;
+            }
+        };
+    }
+    // =========================================================================
+    // Lifecycle
+    // =========================================================================
+    componentDidLoad() {
+        this.initEmbla();
+    }
+    disconnectedCallback() {
+        var _a;
+        this.stopAutoplay();
+        (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    // =========================================================================
+    // Watchers
+    // =========================================================================
+    handleAutoplayChange(newValue) {
+        if (newValue) {
+            this.startAutoplay();
+        }
+        else {
+            this.stopAutoplay();
+        }
+    }
+    handleOptionsChange() {
+        var _a;
+        // Reinitialize Embla with new options
+        (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.initEmbla();
+    }
+    // =========================================================================
+    // Public Methods
+    // =========================================================================
+    /** Scroll to the previous slide */
+    async scrollPrev() {
+        var _a;
+        (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.scrollPrev();
+    }
+    /** Scroll to the next slide */
+    async scrollNext() {
+        var _a;
+        (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.scrollNext();
+    }
+    /** Scroll to a specific slide index */
+    async goToSlide(index) {
+        var _a;
+        (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.scrollTo(index);
+    }
+    /** Get the currently selected slide index */
+    async getSelectedIndex() {
+        var _a, _b;
+        return (_b = (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.selectedScrollSnap()) !== null && _b !== void 0 ? _b : 0;
+    }
+    /** Get the carousel context for child components */
+    async getContext() {
+        return {
+            emblaApi: this.emblaApi,
+            selectedIndex: this.selectedIndex,
+            scrollSnapCount: this.scrollSnapCount,
+            canScrollPrev: this.canScrollPrev,
+            canScrollNext: this.canScrollNext,
+            scrollPrev: () => { var _a; return (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.scrollPrev(); },
+            scrollNext: () => { var _a; return (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.scrollNext(); },
+            scrollTo: (index) => { var _a; return (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.scrollTo(index); },
+        };
+    }
+    // =========================================================================
+    // Private Methods
+    // =========================================================================
+    initEmbla() {
+        // Find the viewport element (seki-carousel-content)
+        this.viewportEl = this.el.querySelector('seki-carousel-content');
+        if (!this.viewportEl) {
+            console.warn('seki-carousel: No seki-carousel-content found');
+            return;
+        }
+        // Get the inner container (seki-carousel-content uses shadow: false)
+        const containerEl = this.viewportEl.querySelector('.carousel-content');
+        if (!containerEl) {
+            // Wait for content to render
+            requestAnimationFrame(() => this.initEmbla());
+            return;
+        }
+        const options = {
+            loop: this.loop,
+            startIndex: this.startIndex,
+            slidesToScroll: this.slidesToScroll,
+            dragFree: this.dragFree,
+            containScroll: 'trimSnaps',
+        };
+        this.emblaApi = EmblaCarousel(this.viewportEl, options);
+        // Set up event listeners
+        this.emblaApi.on('select', this.handleSelect);
+        this.emblaApi.on('reInit', this.handleReInit);
+        this.emblaApi.on('pointerDown', this.handlePointerDown);
+        this.emblaApi.on('pointerUp', this.handlePointerUp);
+        // Initial state update
+        this.updateState();
+        // Start autoplay if enabled
+        if (this.autoplay) {
+            this.startAutoplay();
+        }
+    }
+    updateState() {
+        if (!this.emblaApi)
+            return;
+        this.selectedIndex = this.emblaApi.selectedScrollSnap();
+        this.scrollSnapCount = this.emblaApi.scrollSnapList().length;
+        this.canScrollPrev = this.emblaApi.canScrollPrev();
+        this.canScrollNext = this.emblaApi.canScrollNext();
+    }
+    startAutoplay() {
+        if (this.autoplayInterval)
+            return;
+        // Check for reduced motion preference
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            return;
+        }
+        this.autoplayInterval = setInterval(() => {
+            if (!this.autoplayPaused && this.emblaApi) {
+                if (this.loop || this.canScrollNext) {
+                    this.emblaApi.scrollNext();
+                }
+                else {
+                    // Reset to start if not looping
+                    this.emblaApi.scrollTo(0);
+                }
+            }
+        }, this.autoplayDelay);
+    }
+    stopAutoplay() {
+        if (this.autoplayInterval) {
+            clearInterval(this.autoplayInterval);
+            this.autoplayInterval = null;
+        }
+        this.autoplayPaused = false;
+    }
+    pauseAutoplay() {
+        this.autoplayPaused = true;
+    }
+    resumeAutoplay() {
+        this.autoplayPaused = false;
+    }
+    // =========================================================================
+    // Render
+    // =========================================================================
+    render() {
+        return (h(Host, { key: 'c36c7b0ee60c76891b222f1a0bb5e3175ad80a7f', class: "carousel", role: "region", "aria-roledescription": "carousel", "aria-label": this.ariaLabel, tabindex: "0", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusIn: this.handleFocusIn, onFocusOut: this.handleFocusOut, onKeyDown: this.handleKeyDown }, h("div", { key: '1c209253af84ddeffcd1f0e3b251652979dbe9e2', class: "carousel__container" }, h("slot", { key: 'fd73801a89aefd91573017c7c988926a3107a782' })), h("div", { key: '12bba43c1158a11032350fe6097268ecc882c8fd', class: "carousel__live-region", "aria-live": "polite", "aria-atomic": "true" }, `Slide ${this.selectedIndex + 1} of ${this.scrollSnapCount}`)));
+    }
+    static get is() { return "seki-carousel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-carousel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-carousel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "loop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable infinite loop scrolling"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loop",
+                "defaultValue": "false"
+            },
+            "autoplay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable autoplay"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autoplay",
+                "defaultValue": "false"
+            },
+            "autoplayDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Autoplay delay in milliseconds"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autoplay-delay",
+                "defaultValue": "4000"
+            },
+            "pauseOnHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pause autoplay on hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pause-on-hover",
+                "defaultValue": "true"
+            },
+            "slidesToScroll": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of slides to scroll at once"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slides-to-scroll",
+                "defaultValue": "1"
+            },
+            "startIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial slide index"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-index",
+                "defaultValue": "0"
+            },
+            "dragFree": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable momentum/free scrolling"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "drag-free",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the carousel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "'Carousel'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedIndex": {},
+            "scrollSnapCount": {},
+            "canScrollPrev": {},
+            "canScrollNext": {},
+            "autoplayPaused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "slideChange",
+                "name": "seki-slide-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected slide changes"
+                },
+                "complexType": {
+                    "original": "{ index: number; total: number }",
+                    "resolved": "{ index: number; total: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "scrollPrev": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scroll to the previous slide",
+                    "tags": []
+                }
+            },
+            "scrollNext": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scroll to the next slide",
+                    "tags": []
+                }
+            },
+            "goToSlide": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scroll to a specific slide index",
+                    "tags": []
+                }
+            },
+            "getSelectedIndex": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Get the currently selected slide index",
+                    "tags": []
+                }
+            },
+            "getContext": {
+                "complexType": {
+                    "signature": "() => Promise<CarouselContext>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "CarouselContext": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/carousel/seki-carousel.tsx",
+                            "id": "src/components/carousel/seki-carousel.tsx::CarouselContext"
+                        }
+                    },
+                    "return": "Promise<CarouselContext>"
+                },
+                "docs": {
+                    "text": "Get the carousel context for child components",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "autoplay",
+                "methodName": "handleAutoplayChange"
+            }, {
+                "propName": "loop",
+                "methodName": "handleOptionsChange"
+            }, {
+                "propName": "slidesToScroll",
+                "methodName": "handleOptionsChange"
+            }, {
+                "propName": "dragFree",
+                "methodName": "handleOptionsChange"
+            }];
+    }
+}

package/dist/collection/components/checkbox/seki-checkbox.js

@@ -103,11 +103,11 @@ export class SekiCheckbox {
     render() {
         const isChecked = this.isChecked;
         const dataState = this.indeterminate ? 'indeterminate' : isChecked ? 'checked' : 'unchecked';
-        return (h(Host, { key: 'f615fa2a3599cc730f6290f96706f834d73bb2c6', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: '7353ecbafe329f9e140cbe7148ded0e60b3b98a0', type: "button", role: "checkbox", class: "checkbox", part: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: this.handleClick }, (isChecked || this.indeterminate) && (h("span", { key: '345b99b7f1fb0ddf2f78b5644f1f6512ced1be06', class: "indicator", part: "indicator" }, this.indeterminate ? (
+        return (h(Host, { key: '4d96fc6069e7aed2b871cd0d8dc08b56cde2afe7', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: '9ae2d2bdb41abfddd91d13305548a26cc5c1f9d1', type: "button", role: "checkbox", class: "checkbox", part: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: this.handleClick }, (isChecked || this.indeterminate) && (h("span", { key: '49cef415f26e56a2676bf3e715c4d1f211bcfd2a', class: "indicator", part: "indicator" }, this.indeterminate ? (
         // Minus icon for indeterminate state
         h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "5", y1: "12", x2: "19", y2: "12" }))) : (
         // Checkmark icon for checked state
-        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "20 6 9 17 4 12" })))))), this.name && (h("input", { key: '7815ee897cd4d98c90583fa4102c1f06550196f3', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "20 6 9 17 4 12" })))))), this.name && (h("input", { key: '86d8b33c4513fca4e12d7a29747d1f1dc90e7cd8', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
     }
     static get is() { return "seki-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/collapsible/seki-collapsible-content.js

@@ -86,11 +86,11 @@ export class SekiCollapsibleContent {
         else {
             contentStyle.height = '0';
         }
-        return (h(Host, { key: '30f65f82047f186205666eb0a57f26e9730ee691', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '09f2a033d858a35a1f48f8f6c7da21384d74dbd5', ref: (el) => (this.contentRef = el), part: "content", id: contentId, role: "region", "aria-labelledby": triggerId, "aria-hidden": !this._isOpen, class: {
+        return (h(Host, { key: 'e025e4f99175d7de796412bfe109875ce573849c', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'aea2cd5b9a0ed647b69558000e48efb1a419edf2', ref: (el) => (this.contentRef = el), part: "content", id: contentId, role: "region", "aria-labelledby": triggerId, "aria-hidden": !this._isOpen, class: {
                 'collapsible-content': true,
                 'collapsible-content--open': this._isOpen,
                 'collapsible-content--animating': this._isAnimating,
-            }, style: contentStyle }, h("div", { key: '5d3932cbcefb46248e839580499ff9cffd8fc33c', class: "collapsible-content-inner" }, h("slot", { key: '646147a4aaf4d7b4f3963c3f4b268acd104c9081' })))));
+            }, style: contentStyle }, h("div", { key: 'bf591bc5697d85681c8b95660bcd3a510fc42a31', class: "collapsible-content-inner" }, h("slot", { key: '77c9141495a0a24622cc08860056ee5b4aacb6f2' })))));
     }
     static get is() { return "seki-collapsible-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/collapsible/seki-collapsible.js

@@ -87,7 +87,7 @@ export class SekiCollapsible {
         };
     }
     render() {
-        return (h(Host, { key: 'e764ce79aff3a9639bff2d731d1b3e41ecbbcaa9', "data-state": this._isOpen ? 'open' : 'closed', "data-disabled": this.disabled ? '' : undefined }, h("div", { key: '97499c98f005772c2c25932fa10fb75257c9ae7e', part: "collapsible", class: "collapsible" }, h("slot", { key: '68f6ad93e370b5726a4ca92d0ac296881f118814' }))));
+        return (h(Host, { key: 'c65f0a79cc6f865f4e74e7c72b17c6ad01d496d2', "data-state": this._isOpen ? 'open' : 'closed', "data-disabled": this.disabled ? '' : undefined }, h("div", { key: 'fea15873c67cf46620d0f56578d8b1ca1f1a02e1', part: "collapsible", class: "collapsible" }, h("slot", { key: 'f27e929ea49fdd6b2fedb39cee2b67762795b022' }))));
     }
     static get is() { return "seki-collapsible"; }
     static get encapsulation() { return "shadow"; }