@sekiui/elements 0.0.63 → 0.0.64

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

@@ -0,0 +1,119 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-C_O046uN.js';
+
+const sekiCarouselDotsCss = ":host{display:flex;justify-content:center;width:100%;padding-top:0.75rem}.carousel-dots__container{display:flex;align-items:center;justify-content:center;gap:var(--seki-carousel-dot-gap, 0.5rem)}.carousel-dots__dot{display:flex;align-items:center;justify-content:center;padding:0.25rem;border:none;background:transparent;cursor:pointer;transition:transform 0.2s ease}.carousel-dots__dot:hover{transform:scale(1.2)}.carousel-dots__dot:focus-visible{outline:2px solid var(--seki-color-ring, #3b82f6);outline-offset:2px;border-radius:50%}.carousel-dots__dot-inner{display:block;width:var(--seki-carousel-dot-size, 0.5rem);height:var(--seki-carousel-dot-size, 0.5rem);border-radius:50%;background:var(--seki-carousel-dot-color, #94a3b8);transition:background-color 0.2s ease, width 0.2s ease, height 0.2s ease}.carousel-dots__dot--active .carousel-dots__dot-inner{width:var(--seki-carousel-dot-active-size, 0.625rem);height:var(--seki-carousel-dot-active-size, 0.625rem);background:var(--seki-carousel-dot-active-color, #0f172a)}@media (prefers-reduced-motion: reduce){.carousel-dots__dot,.carousel-dots__dot-inner{transition:none}}";
+
+const SekiCarouselDots$1 = /*@__PURE__*/ proxyCustomElement(class SekiCarouselDots extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.selectedIndex = 0;
+        this.scrollSnapCount = 0;
+        this.parentCarousel = null;
+        this.unsubscribe = null;
+        this.handleSlideChange = async () => {
+            await this.updateState();
+        };
+        this.handleDotClick = async (index) => {
+            if (!this.parentCarousel)
+                return;
+            await this.parentCarousel.goToSlide(index);
+        };
+        this.handleKeyDown = (event, index) => {
+            var _a, _b;
+            const dots = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.carousel-dots__dot');
+            if (!dots)
+                return;
+            let targetIndex = null;
+            switch (event.key) {
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    event.preventDefault();
+                    targetIndex = index > 0 ? index - 1 : this.scrollSnapCount - 1;
+                    break;
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    event.preventDefault();
+                    targetIndex = index < this.scrollSnapCount - 1 ? index + 1 : 0;
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    targetIndex = 0;
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    targetIndex = this.scrollSnapCount - 1;
+                    break;
+            }
+            if (targetIndex !== null) {
+                (_b = dots[targetIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+                this.handleDotClick(targetIndex);
+            }
+        };
+    }
+    componentWillLoad() {
+        this.findParentCarousel();
+    }
+    componentDidLoad() {
+        this.subscribeToCarousel();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    findParentCarousel() {
+        this.parentCarousel = this.el.closest('seki-carousel');
+    }
+    async subscribeToCarousel() {
+        if (!this.parentCarousel)
+            return;
+        // Initial state
+        await this.updateState();
+        // Listen for slide changes
+        this.parentCarousel.addEventListener('seki-slide-change', this.handleSlideChange);
+        this.unsubscribe = () => {
+            var _a;
+            (_a = this.parentCarousel) === null || _a === void 0 ? void 0 : _a.removeEventListener('seki-slide-change', this.handleSlideChange);
+        };
+    }
+    async updateState() {
+        if (!this.parentCarousel)
+            return;
+        const context = await this.parentCarousel.getContext();
+        this.selectedIndex = context.selectedIndex;
+        this.scrollSnapCount = context.scrollSnapCount;
+    }
+    render() {
+        const dots = Array.from({ length: this.scrollSnapCount }, (_, i) => i);
+        return (h(Host, { key: '94362738e93936733be8af0e087772cfeea490f1', class: "carousel-dots" }, h("div", { key: '0b69b089634ee151104b1586bd5ed50b4b56b981', class: "carousel-dots__container", role: "tablist", "aria-label": "Carousel pagination" }, dots.map((index) => (h("button", { key: index, type: "button", class: {
+                'carousel-dots__dot': true,
+                'carousel-dots__dot--active': index === this.selectedIndex,
+            }, role: "tab", "aria-selected": index === this.selectedIndex ? 'true' : 'false', "aria-label": `Go to slide ${index + 1}`, tabindex: index === this.selectedIndex ? '0' : '-1', onClick: () => this.handleDotClick(index), onKeyDown: (e) => this.handleKeyDown(e, index) }, h("span", { class: "carousel-dots__dot-inner" })))))));
+    }
+    get el() { return this; }
+    static get style() { return sekiCarouselDotsCss; }
+}, [257, "seki-carousel-dots", {
+        "selectedIndex": [32],
+        "scrollSnapCount": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["seki-carousel-dots"];
+    components.forEach(tagName => { switch (tagName) {
+        case "seki-carousel-dots":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SekiCarouselDots$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SekiCarouselDots = SekiCarouselDots$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SekiCarouselDots, defineCustomElement };

package/dist/components/seki-carousel-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SekiCarouselItem extends Components.SekiCarouselItem, HTMLElement {}
+export const SekiCarouselItem: {
+    prototype: SekiCarouselItem;
+    new (): SekiCarouselItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,43 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-C_O046uN.js';
+
+const sekiCarouselItemCss = ":host{display:block;flex:0 0 auto;min-width:0;padding-left:var(--seki-carousel-gap, 1rem)}:host ::slotted(img){display:block;width:100%;height:auto;object-fit:cover}";
+
+const SekiCarouselItem$1 = /*@__PURE__*/ proxyCustomElement(class SekiCarouselItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * Width of the item as CSS flex-basis.
+         * Examples: '100%' (full width), '50%' (half), '33.33%' (third)
+         */
+        this.basis = '100%';
+    }
+    render() {
+        return (h(Host, { key: '54a39ec4d98934294fe9351d1f7ff5a05fe6cd13', class: "carousel-item", style: { flexBasis: this.basis }, role: "group", "aria-roledescription": "slide" }, h("slot", { key: 'f3bad935c7602fd9f6e5fb1180dd4a72751402f4' })));
+    }
+    static get style() { return sekiCarouselItemCss; }
+}, [257, "seki-carousel-item", {
+        "basis": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["seki-carousel-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "seki-carousel-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SekiCarouselItem$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SekiCarouselItem = SekiCarouselItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SekiCarouselItem, defineCustomElement };

package/dist/components/seki-carousel-next.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SekiCarouselNext extends Components.SekiCarouselNext, HTMLElement {}
+export const SekiCarouselNext: {
+    prototype: SekiCarouselNext;
+    new (): SekiCarouselNext;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,81 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-C_O046uN.js';
+
+const sekiCarouselNavigationCss = ":host{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);z-index:10}:host(.carousel-nav--prev){left:0.5rem}:host(.carousel-nav--next){right:0.5rem}.carousel-nav__button{display:flex;align-items:center;justify-content:center;width:var(--seki-carousel-arrow-size, 2.5rem);height:var(--seki-carousel-arrow-size, 2.5rem);padding:0;border:none;border-radius:50%;background:var(--seki-carousel-arrow-bg, rgba(255, 255, 255, 0.8));color:var(--seki-carousel-arrow-color, #0f172a);cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1)}.carousel-nav__button:hover:not(:disabled){background:var(--seki-carousel-arrow-bg-hover, rgba(255, 255, 255, 0.95));transform:scale(1.05)}.carousel-nav__button:focus-visible{outline:2px solid var(--seki-color-ring, #3b82f6);outline-offset:2px}.carousel-nav__button:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.carousel-nav__icon{width:1.25rem;height:1.25rem;flex-shrink:0}@media (max-width: 480px){:host(.carousel-nav--prev){left:0.25rem}:host(.carousel-nav--next){right:0.25rem}.carousel-nav__button{width:2rem;height:2rem}.carousel-nav__icon{width:1rem;height:1rem}}";
+
+const SekiCarouselNext$1 = /*@__PURE__*/ proxyCustomElement(class SekiCarouselNext extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.disabled = true;
+        this.parentCarousel = null;
+        this.unsubscribe = null;
+        this.handleSlideChange = async () => {
+            await this.updateState();
+        };
+        this.handleClick = async () => {
+            if (this.disabled || !this.parentCarousel)
+                return;
+            await this.parentCarousel.scrollNext();
+        };
+    }
+    componentWillLoad() {
+        this.findParentCarousel();
+    }
+    componentDidLoad() {
+        this.subscribeToCarousel();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    findParentCarousel() {
+        this.parentCarousel = this.el.closest('seki-carousel');
+    }
+    async subscribeToCarousel() {
+        if (!this.parentCarousel)
+            return;
+        // Initial state
+        await this.updateState();
+        // Listen for slide changes
+        this.parentCarousel.addEventListener('seki-slide-change', this.handleSlideChange);
+        this.unsubscribe = () => {
+            var _a;
+            (_a = this.parentCarousel) === null || _a === void 0 ? void 0 : _a.removeEventListener('seki-slide-change', this.handleSlideChange);
+        };
+    }
+    async updateState() {
+        if (!this.parentCarousel)
+            return;
+        const context = await this.parentCarousel.getContext();
+        this.disabled = !context.canScrollNext;
+    }
+    render() {
+        return (h(Host, { key: 'ba14cb410b0c92db37ba22aac1cd06b9c2988170', class: { 'carousel-nav': true, 'carousel-nav--next': true } }, h("button", { key: '7bd007f22cb950d918f96736d70f94eb7a6fc1de', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Next slide", onClick: this.handleClick }, h("svg", { key: '2e3b6fff2abff1f2533c4bb048c79bbeb89e5b3d', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'fabd3f3fa329abe2f3dd8b3b3c30a2766ade7870', points: "9 18 15 12 9 6" })))));
+    }
+    get el() { return this; }
+    static get style() { return sekiCarouselNavigationCss; }
+}, [257, "seki-carousel-next", {
+        "disabled": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["seki-carousel-next"];
+    components.forEach(tagName => { switch (tagName) {
+        case "seki-carousel-next":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SekiCarouselNext$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SekiCarouselNext = SekiCarouselNext$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SekiCarouselNext, defineCustomElement };

package/dist/components/seki-carousel-previous.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SekiCarouselPrevious extends Components.SekiCarouselPrevious, HTMLElement {}
+export const SekiCarouselPrevious: {
+    prototype: SekiCarouselPrevious;
+    new (): SekiCarouselPrevious;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,81 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-C_O046uN.js';
+
+const sekiCarouselNavigationCss = ":host{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);z-index:10}:host(.carousel-nav--prev){left:0.5rem}:host(.carousel-nav--next){right:0.5rem}.carousel-nav__button{display:flex;align-items:center;justify-content:center;width:var(--seki-carousel-arrow-size, 2.5rem);height:var(--seki-carousel-arrow-size, 2.5rem);padding:0;border:none;border-radius:50%;background:var(--seki-carousel-arrow-bg, rgba(255, 255, 255, 0.8));color:var(--seki-carousel-arrow-color, #0f172a);cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1)}.carousel-nav__button:hover:not(:disabled){background:var(--seki-carousel-arrow-bg-hover, rgba(255, 255, 255, 0.95));transform:scale(1.05)}.carousel-nav__button:focus-visible{outline:2px solid var(--seki-color-ring, #3b82f6);outline-offset:2px}.carousel-nav__button:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.carousel-nav__icon{width:1.25rem;height:1.25rem;flex-shrink:0}@media (max-width: 480px){:host(.carousel-nav--prev){left:0.25rem}:host(.carousel-nav--next){right:0.25rem}.carousel-nav__button{width:2rem;height:2rem}.carousel-nav__icon{width:1rem;height:1rem}}";
+
+const SekiCarouselPrevious$1 = /*@__PURE__*/ proxyCustomElement(class SekiCarouselPrevious extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.disabled = true;
+        this.parentCarousel = null;
+        this.unsubscribe = null;
+        this.handleSlideChange = async () => {
+            await this.updateState();
+        };
+        this.handleClick = async () => {
+            if (this.disabled || !this.parentCarousel)
+                return;
+            await this.parentCarousel.scrollPrev();
+        };
+    }
+    componentWillLoad() {
+        this.findParentCarousel();
+    }
+    componentDidLoad() {
+        this.subscribeToCarousel();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    findParentCarousel() {
+        this.parentCarousel = this.el.closest('seki-carousel');
+    }
+    async subscribeToCarousel() {
+        if (!this.parentCarousel)
+            return;
+        // Initial state
+        await this.updateState();
+        // Listen for slide changes
+        this.parentCarousel.addEventListener('seki-slide-change', this.handleSlideChange);
+        this.unsubscribe = () => {
+            var _a;
+            (_a = this.parentCarousel) === null || _a === void 0 ? void 0 : _a.removeEventListener('seki-slide-change', this.handleSlideChange);
+        };
+    }
+    async updateState() {
+        if (!this.parentCarousel)
+            return;
+        const context = await this.parentCarousel.getContext();
+        this.disabled = !context.canScrollPrev;
+    }
+    render() {
+        return (h(Host, { key: 'f06ada05f7248ea39e14b693d0cde6ba45321521', class: { 'carousel-nav': true, 'carousel-nav--prev': true } }, h("button", { key: '0f47c32406ca271f3cf2dfaa6ebe36877dfcb6dd', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Previous slide", onClick: this.handleClick }, h("svg", { key: '521f8ae84fbeb7ad17968ed0c8f444c9ec911c95', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'fe8503accd343f182270b1e823722763eaf5fa13', points: "15 18 9 12 15 6" })))));
+    }
+    get el() { return this; }
+    static get style() { return sekiCarouselNavigationCss; }
+}, [257, "seki-carousel-previous", {
+        "disabled": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["seki-carousel-previous"];
+    components.forEach(tagName => { switch (tagName) {
+        case "seki-carousel-previous":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SekiCarouselPrevious$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SekiCarouselPrevious = SekiCarouselPrevious$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SekiCarouselPrevious, defineCustomElement };

package/dist/components/seki-carousel.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SekiCarousel extends Components.SekiCarousel, HTMLElement {}
+export const SekiCarousel: {
+    prototype: SekiCarousel;
+    new (): SekiCarousel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;