@sekiui/elements 0.0.61 → 0.0.63

package/dist/collection/components/navigation-menu/seki-navigation-menu.js

@@ -0,0 +1,434 @@
+import { h, Host } from "@stencil/core";
+export class SekiNavigationMenu {
+    constructor() {
+        // =========================================================================
+        // Props
+        // =========================================================================
+        /** Breakpoint in pixels for mobile hamburger mode */
+        this.mobileBreakpoint = 768;
+        /** Side from which mobile sheet opens */
+        this.mobileSide = 'right';
+        /** Accessible label for the navigation */
+        this.ariaLabel = 'Main navigation';
+        // =========================================================================
+        // State
+        // =========================================================================
+        /** Currently open menu item ID */
+        this.activeItem = null;
+        /** Currently hovered trigger ID (for indicator positioning) */
+        this.hoveredTrigger = null;
+        /** Whether mobile mode is active */
+        this.isMobile = false;
+        /** Whether mobile sheet is open */
+        this.mobileSheetOpen = false;
+        this.registeredItems = new Map();
+        this.triggerRects = new Map();
+        this.clickOutsideHandler = (event) => {
+            const target = event.target;
+            if (!this.el.contains(target)) {
+                this.closeItem();
+            }
+        };
+        this.handleHamburgerClick = () => {
+            this.toggleMobileSheet();
+        };
+        this.handleSheetClose = () => {
+            this.mobileSheetOpen = false;
+            this.mobileToggle.emit({ open: false });
+        };
+        this.handleBackdropClick = () => {
+            this.handleSheetClose();
+        };
+    }
+    // =========================================================================
+    // Lifecycle
+    // =========================================================================
+    componentWillLoad() {
+        this.checkMobileBreakpoint();
+    }
+    componentDidLoad() {
+        this.setupResizeObserver();
+        this.setupClickOutside();
+    }
+    disconnectedCallback() {
+        this.cleanupResizeObserver();
+        this.cleanupClickOutside();
+    }
+    // =========================================================================
+    // Public Methods
+    // =========================================================================
+    /** Get the navigation menu context for child components */
+    async getContext() {
+        return {
+            activeItem: this.activeItem,
+            hoveredTrigger: this.hoveredTrigger,
+            isMobile: this.isMobile,
+            registerItem: this.registerItem.bind(this),
+            unregisterItem: this.unregisterItem.bind(this),
+            openItem: this.openItem.bind(this),
+            closeItem: this.closeItem.bind(this),
+            setHoveredTrigger: this.setHoveredTrigger.bind(this),
+            getTriggerRect: this.getTriggerRect.bind(this),
+        };
+    }
+    /** Open a specific menu item */
+    async open(itemId) {
+        this.openItem(itemId);
+    }
+    /** Close the currently open menu item */
+    async close() {
+        this.closeItem();
+    }
+    /** Toggle mobile sheet */
+    async toggleMobileSheet() {
+        this.mobileSheetOpen = !this.mobileSheetOpen;
+        this.mobileToggle.emit({ open: this.mobileSheetOpen });
+    }
+    // =========================================================================
+    // Private Methods
+    // =========================================================================
+    setupResizeObserver() {
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.checkMobileBreakpoint();
+        });
+        this.resizeObserver.observe(document.body);
+    }
+    cleanupResizeObserver() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = undefined;
+        }
+    }
+    checkMobileBreakpoint() {
+        const wasMobile = this.isMobile;
+        this.isMobile = window.innerWidth < this.mobileBreakpoint;
+        // Close menu when switching modes
+        if (wasMobile !== this.isMobile) {
+            this.activeItem = null;
+            this.mobileSheetOpen = false;
+        }
+    }
+    setupClickOutside() {
+        document.addEventListener('click', this.clickOutsideHandler);
+    }
+    cleanupClickOutside() {
+        document.removeEventListener('click', this.clickOutsideHandler);
+    }
+    registerItem(_id) {
+        // Item registration will be handled by child components
+    }
+    unregisterItem(id) {
+        this.registeredItems.delete(id);
+        this.triggerRects.delete(id);
+    }
+    openItem(id) {
+        if (this.closeTimeout) {
+            clearTimeout(this.closeTimeout);
+            this.closeTimeout = undefined;
+        }
+        const previousItem = this.activeItem;
+        this.activeItem = id;
+        this.hoveredTrigger = id;
+        if (previousItem !== id) {
+            if (previousItem) {
+                this.menuClose.emit({ triggerId: previousItem });
+            }
+            this.menuOpen.emit({ triggerId: id });
+        }
+    }
+    closeItem() {
+        if (this.activeItem) {
+            const closingItem = this.activeItem;
+            this.activeItem = null;
+            this.hoveredTrigger = null;
+            this.menuClose.emit({ triggerId: closingItem });
+        }
+    }
+    setHoveredTrigger(id) {
+        this.hoveredTrigger = id;
+    }
+    getTriggerRect(id) {
+        return this.triggerRects.get(id) || null;
+    }
+    /** Called by trigger components to update their rect */
+    updateTriggerRect(id, rect) {
+        this.triggerRects.set(id, rect);
+    }
+    /** Schedule opening with delay (for hover) */
+    scheduleOpen(id, delay = 100) {
+        if (this.closeTimeout) {
+            clearTimeout(this.closeTimeout);
+            this.closeTimeout = undefined;
+        }
+        if (this.openTimeout) {
+            clearTimeout(this.openTimeout);
+        }
+        // If already open, switch immediately
+        if (this.activeItem !== null) {
+            this.openItem(id);
+            return;
+        }
+        this.openTimeout = setTimeout(() => {
+            this.openItem(id);
+        }, delay);
+    }
+    /** Schedule closing with delay (for hover) */
+    scheduleClose(delay = 150) {
+        if (this.openTimeout) {
+            clearTimeout(this.openTimeout);
+            this.openTimeout = undefined;
+        }
+        this.closeTimeout = setTimeout(() => {
+            this.closeItem();
+        }, delay);
+    }
+    /** Cancel scheduled close (when entering content) */
+    cancelClose() {
+        if (this.closeTimeout) {
+            clearTimeout(this.closeTimeout);
+            this.closeTimeout = undefined;
+        }
+    }
+    // =========================================================================
+    // Render
+    // =========================================================================
+    render() {
+        return (h(Host, { key: '68fbdf98973da6c8b2e13ee3aaaf59eea1ff4b83', class: {
+                'navigation-menu': true,
+                'navigation-menu--mobile': this.isMobile,
+            } }, h("nav", { key: 'e34e7fe77b9cc8b23ad7299900ada1e367b8cff8', class: "navigation-menu__nav", role: "navigation", "aria-label": this.ariaLabel }, this.isMobile ? this.renderMobileNav() : this.renderDesktopNav())));
+    }
+    renderDesktopNav() {
+        return [
+            h("div", { class: "navigation-menu__container" }, h("slot", null)),
+            h("seki-navigation-menu-viewport", { activeItem: this.activeItem, hoveredTrigger: this.hoveredTrigger }),
+        ];
+    }
+    renderMobileNav() {
+        return [
+            h("button", { type: "button", class: "navigation-menu__hamburger", onClick: this.handleHamburgerClick, "aria-expanded": String(this.mobileSheetOpen), "aria-controls": "navigation-menu-sheet", "aria-label": this.mobileSheetOpen ? 'Close menu' : 'Open menu' }, h("span", { class: "navigation-menu__hamburger-line" }), h("span", { class: "navigation-menu__hamburger-line" }), h("span", { class: "navigation-menu__hamburger-line" })),
+            this.mobileSheetOpen && (h("div", { class: "navigation-menu__sheet-backdrop", onClick: this.handleBackdropClick })),
+            h("div", { id: "navigation-menu-sheet", class: {
+                    'navigation-menu__sheet': true,
+                    'navigation-menu__sheet--open': this.mobileSheetOpen,
+                    [`navigation-menu__sheet--${this.mobileSide}`]: true,
+                } }, h("div", { class: "navigation-menu__sheet-header" }, h("button", { type: "button", class: "navigation-menu__sheet-close", onClick: this.handleSheetClose, "aria-label": "Close menu" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))), h("div", { class: "navigation-menu__sheet-content" }, h("slot", null))),
+        ];
+    }
+    static get is() { return "seki-navigation-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-navigation-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-navigation-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mobileBreakpoint": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Breakpoint in pixels for mobile hamburger mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mobile-breakpoint",
+                "defaultValue": "768"
+            },
+            "mobileSide": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Side from which mobile sheet opens"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mobile-side",
+                "defaultValue": "'right'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "'Main navigation'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeItem": {},
+            "hoveredTrigger": {},
+            "isMobile": {},
+            "mobileSheetOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "menuOpen",
+                "name": "seki-menu-open",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a menu item opens"
+                },
+                "complexType": {
+                    "original": "{ triggerId: string }",
+                    "resolved": "{ triggerId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "menuClose",
+                "name": "seki-menu-close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a menu item closes"
+                },
+                "complexType": {
+                    "original": "{ triggerId: string }",
+                    "resolved": "{ triggerId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mobileToggle",
+                "name": "seki-mobile-toggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when mobile sheet toggles"
+                },
+                "complexType": {
+                    "original": "{ open: boolean }",
+                    "resolved": "{ open: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getContext": {
+                "complexType": {
+                    "signature": "() => Promise<NavigationMenuContext>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NavigationMenuContext": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/navigation-menu/seki-navigation-menu.tsx",
+                            "id": "src/components/navigation-menu/seki-navigation-menu.tsx::NavigationMenuContext"
+                        }
+                    },
+                    "return": "Promise<NavigationMenuContext>"
+                },
+                "docs": {
+                    "text": "Get the navigation menu context for child components",
+                    "tags": []
+                }
+            },
+            "open": {
+                "complexType": {
+                    "signature": "(itemId: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "itemId",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Open a specific menu item",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Close the currently open menu item",
+                    "tags": []
+                }
+            },
+            "toggleMobileSheet": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle mobile sheet",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiPaginationContent {
     render() {
-        return (h("ul", { key: '1535dad40e5e2b3d7fc31cfc94f71353a20937df', class: "seki-pagination-content", part: "content" }, h("slot", { key: '8bacb2e13f3f0b4a2a95b3ddfa7700a1e335b05e' })));
+        return (h("ul", { key: 'dde8bab775210b72a1dbe6573d7ff641d637ce14', class: "seki-pagination-content", part: "content" }, h("slot", { key: '7081b0ce8becc4f515458d189d9c674d26283494' })));
     }
     static get is() { return "seki-pagination-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/seki-pagination-ellipsis.js

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiPaginationEllipsis {
     render() {
-        return (h("span", { key: '9a9fc21af9442c16c209bc59f2b4b94090d86cb3', "aria-hidden": "true", class: "seki-pagination-ellipsis", part: "ellipsis" }, h("svg", { key: 'dd5f6ce2c7b60635a141353e9ba63331dca91316', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { key: '05d5089ebfe256de3ea419840968667cfa5baa05', cx: "12", cy: "12", r: "1" }), h("circle", { key: 'ee6e8aca2f67d6aed1e3a8d82303dac1c3f2deab', cx: "19", cy: "12", r: "1" }), h("circle", { key: '6e59711fa2589088ee0773378e511f15190094f6', cx: "5", cy: "12", r: "1" })), h("span", { key: '29c5afcfb7e11381200ffa550cad0eb7e0085f5d', class: "sr-only" }, "More pages")));
+        return (h("span", { key: '8d7c96589c0a9876858bf24242e5aef194582fa8', "aria-hidden": "true", class: "seki-pagination-ellipsis", part: "ellipsis" }, h("svg", { key: '8031032fd6cbbb756c70b0b754274718cc284e6c', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { key: '5b7771358ac87ea01e010b04cd3983c4f248e9bb', cx: "12", cy: "12", r: "1" }), h("circle", { key: '1ab0a9db3e44f059204d3507bce6ff0067629c8e', cx: "19", cy: "12", r: "1" }), h("circle", { key: '3c38cb003dcd30b0f7557de8cc4c7dfb16091090', cx: "5", cy: "12", r: "1" })), h("span", { key: 'c9d1f10f476477986f62133dfb79b7d8b2aa8084', class: "sr-only" }, "More pages")));
     }
     static get is() { return "seki-pagination-ellipsis"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/seki-pagination-item.js

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiPaginationItem {
     render() {
-        return (h("li", { key: 'a58aef65168e39720ff40cd00a9cee9d3a4ed102', class: "seki-pagination-item", part: "item" }, h("slot", { key: 'd887cb0dbb35994712c41bd8521cfa6b37f92109' })));
+        return (h("li", { key: '3292952819d4eef90e17618817bb1df17ca26ee0', class: "seki-pagination-item", part: "item" }, h("slot", { key: 'ea9a7c8742b83a8b90ac0f1c400ba53632b5b0b1' })));
     }
     static get is() { return "seki-pagination-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/seki-pagination-link.js

@@ -17,11 +17,11 @@ export class SekiPaginationLink {
     }
     render() {
         const Tag = this.href && !this.disabled ? 'a' : 'span';
-        return (h(Tag, { key: 'daafd140f5bd5699994ff2d21c25527ee710c53e', href: this.href && !this.disabled ? this.href : undefined, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: {
+        return (h(Tag, { key: 'a2f89d236fde67e4b78b482083583771be686f21', href: this.href && !this.disabled ? this.href : undefined, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: {
                 'seki-pagination-link': true,
                 'seki-pagination-link--active': !!this.active,
                 'seki-pagination-link--disabled': !!this.disabled,
-            }, part: "link" }, h("slot", { key: 'dc53ea38a64511be8dc65f4114e11cf3ee78212e' })));
+            }, part: "link" }, h("slot", { key: 'd47ca99d158ab5e44e8baa1a563bd1961e361cae' })));
     }
     static get is() { return "seki-pagination-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,11 +13,11 @@ export class SekiPaginationNext {
     }
     render() {
         const Tag = this.href && !this.disabled ? 'a' : 'span';
-        return (h(Tag, { key: 'bcd8e5de903f8a92b4ecc81645e5274dbc53565d', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to next page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
+        return (h(Tag, { key: '48f50bba6ba7656deeaa2c0bfe543f54f2c4436c', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to next page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
                 'seki-pagination-link': true,
                 'seki-pagination-nav': true,
                 'seki-pagination-link--disabled': !!this.disabled,
-            }, part: "next" }, h("span", { key: '64dfa788b1bf29ce5eb2e8c32b4e58786d23a88b' }, "Next"), h("svg", { key: 'ad6ad6ff9cad77554cec1b38420876e779be7789', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '71d13e4c0baf4cc188ad4b41cd4f91ad428aaf88', d: "m9 18 6-6-6-6" }))));
+            }, part: "next" }, h("span", { key: '1c3fbea87fde87f4989452bd3fd20fa53db3fa82' }, "Next"), h("svg", { key: 'fd006cededfefb52df1569aadce5dbc2104af447', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '517df8ef351ef5b9ca45f40c51bf01098d033e3e', d: "m9 18 6-6-6-6" }))));
     }
     static get is() { return "seki-pagination-next"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,11 +13,11 @@ export class SekiPaginationPrevious {
     }
     render() {
         const Tag = this.href && !this.disabled ? 'a' : 'span';
-        return (h(Tag, { key: 'c991ad92f24d7d3e73a43ef61fceebf25b81fd47', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to previous page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
+        return (h(Tag, { key: '8f3766baf536109a9961406e02d47c7360b79f1f', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to previous page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
                 'seki-pagination-link': true,
                 'seki-pagination-nav': true,
                 'seki-pagination-link--disabled': !!this.disabled,
-            }, part: "previous" }, h("svg", { key: 'b8e7a14dc509fa36d822d1b89e0b3d38236a0d3d', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '409461f830158e4709ac035fd9e5cec7e1737977', d: "m15 18-6-6 6-6" })), h("span", { key: '8dd16240ef899ce6ef65b68dc0414560544c2133' }, "Previous")));
+            }, part: "previous" }, h("svg", { key: 'f9e47268abe19168269c000203a271807dd7497f', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: 'd86c3b068af2ef8367be0b5d140c60df401a3d3a', d: "m15 18-6-6 6-6" })), h("span", { key: 'ce55ae22526628cb60afcc3092f9bdb9c3c50f9f' }, "Previous")));
     }
     static get is() { return "seki-pagination-previous"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,14 +1,14 @@
 /* Pagination Component Styles with Design Tokens */
 
 :host {
-  --seki-pagination-text-color: var(--color-text-primary, hsl(220 9% 20%));
-  --seki-pagination-text-muted: var(--color-text-secondary, hsl(220 9% 46%));
+  --seki-pagination-text-color: var(--seki-foreground, hsl(0, 0%, 3.9%));
+  --seki-pagination-text-muted: var(--seki-muted-foreground, hsl(0, 0%, 45.1%));
   --seki-pagination-bg: transparent;
-  --seki-pagination-bg-hover: var(--color-surface-secondary, hsl(220 13% 95%));
-  --seki-pagination-bg-active: var(--color-primary, hsl(220 90% 56%));
-  --seki-pagination-text-active: var(--color-white, #ffffff);
-  --seki-pagination-border: var(--color-border, hsl(220 13% 91%));
-  --seki-pagination-border-radius: var(--radius-md, 6px);
+  --seki-pagination-bg-hover: var(--seki-muted, hsl(0, 0%, 96.1%));
+  --seki-pagination-bg-active: var(--seki-primary, hsl(0, 0%, 9%));
+  --seki-pagination-text-active: var(--seki-primary-foreground, hsl(0, 0%, 98%));
+  --seki-pagination-border: var(--seki-border, hsl(0, 0%, 89.8%));
+  --seki-pagination-border-radius: var(--seki-radius-md, 6px);
   --seki-pagination-font-size: var(--seki-font-size-sm, 14px);
   --seki-pagination-font-family: var(--seki-font-sans, system-ui, -apple-system, sans-serif);
   --seki-pagination-gap: 0.25rem;
@@ -19,11 +19,12 @@
 
 /* Dark mode support */
 :host([data-theme='dark']) {
-  --seki-pagination-text-color: var(--color-text-primary-dark, hsl(215 20% 85%));
-  --seki-pagination-text-muted: var(--color-text-secondary-dark, hsl(215 20% 65%));
-  --seki-pagination-bg-hover: var(--color-surface-secondary-dark, hsl(215 20% 20%));
-  --seki-pagination-bg-active: var(--color-primary-dark, hsl(220 90% 65%));
-  --seki-pagination-border: var(--color-border-dark, hsl(215 20% 25%));
+  --seki-pagination-text-color: var(--seki-foreground, hsl(0, 0%, 98%));
+  --seki-pagination-text-muted: var(--seki-muted-foreground, hsl(0, 0%, 63.9%));
+  --seki-pagination-bg-hover: var(--seki-muted, hsl(0, 0%, 14.9%));
+  --seki-pagination-bg-active: var(--seki-primary, hsl(0, 0%, 98%));
+  --seki-pagination-text-active: var(--seki-primary-foreground, hsl(0, 0%, 9%));
+  --seki-pagination-border: var(--seki-border, hsl(0, 0%, 14.9%));
 }
 
 /* Nav wrapper */

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

@@ -20,7 +20,7 @@ import { h } from "@stencil/core";
  */
 export class SekiPagination {
     render() {
-        return (h("nav", { key: 'dca247b34f5eaeda5ef674f3816c62b7321de982', role: "navigation", "aria-label": "pagination", class: "seki-pagination", part: "pagination" }, h("slot", { key: '7d411145416f993b54e67124c5c17def58a257f3' })));
+        return (h("nav", { key: 'e8aff28250d5c4724fe52f5d9163a9f7a3962a3e', role: "navigation", "aria-label": "pagination", class: "seki-pagination", part: "pagination" }, h("slot", { key: '7f562121ed1d87f21e95d06d215685607cfcda20' })));
     }
     static get is() { return "seki-pagination"; }
     static get encapsulation() { return "shadow"; }