@sekiui/elements 0.0.63 → 0.0.64

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

@@ -0,0 +1,81 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BF5nneSK.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/cdn/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/cdn/seki-carousel-previous.js

@@ -0,0 +1,81 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BF5nneSK.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/cdn/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;