@sekiui/elements 0.0.63 → 0.0.65

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

@@ -0,0 +1,72 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Next slide navigation button.
+ * Automatically connects to parent seki-carousel.
+ */
+export class SekiCarouselNext {
+    constructor() {
+        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" })))));
+    }
+    static get is() { return "seki-carousel-next"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-carousel-navigation.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-carousel-navigation.css"]
+        };
+    }
+    static get states() {
+        return {
+            "disabled": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,72 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Previous slide navigation button.
+ * Automatically connects to parent seki-carousel.
+ */
+export class SekiCarouselPrevious {
+    constructor() {
+        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" })))));
+    }
+    static get is() { return "seki-carousel-previous"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-carousel-navigation.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-carousel-navigation.css"]
+        };
+    }
+    static get states() {
+        return {
+            "disabled": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,62 @@
+:host {
+  --seki-carousel-gap: 1rem;
+  --seki-carousel-arrow-size: 2.5rem;
+  --seki-carousel-arrow-bg: rgba(255, 255, 255, 0.8);
+  --seki-carousel-arrow-bg-hover: rgba(255, 255, 255, 0.95);
+  --seki-carousel-arrow-color: var(--seki-color-foreground, #0f172a);
+  --seki-carousel-dot-size: 0.5rem;
+  --seki-carousel-dot-active-size: 0.625rem;
+  --seki-carousel-dot-gap: 0.5rem;
+  --seki-carousel-dot-color: var(--seki-color-muted, #94a3b8);
+  --seki-carousel-dot-active-color: var(--seki-color-primary, #0f172a);
+
+  display: block;
+  position: relative;
+  width: 100%;
+}
+
+:host(:focus) {
+  outline: none;
+}
+
+:host(:focus-visible) {
+  outline: 2px solid var(--seki-color-ring, #3b82f6);
+  outline-offset: 2px;
+  border-radius: var(--seki-radius-md, 0.375rem);
+}
+
+.carousel__container {
+  position: relative;
+  width: 100%;
+}
+
+/* Screen reader only - live region */
+.carousel__live-region {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Dark mode support */
+:host([data-theme="dark"]),
+:host-context([data-theme="dark"]) {
+  --seki-carousel-arrow-bg: rgba(30, 41, 59, 0.8);
+  --seki-carousel-arrow-bg-hover: rgba(30, 41, 59, 0.95);
+  --seki-carousel-arrow-color: #f8fafc;
+  --seki-carousel-dot-color: #64748b;
+  --seki-carousel-dot-active-color: #f8fafc;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  :host * {
+    transition: none !important;
+    animation: none !important;
+  }
+}