@sekiui/elements 0.0.59 → 0.0.61

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

@@ -0,0 +1,101 @@
+import { h } from "@stencil/core";
+/**
+ * seki-pagination-link: Clickable page number link
+ *
+ * @component PaginationLink
+ */
+export class SekiPaginationLink {
+    constructor() {
+        /**
+         * Whether this link represents the current/active page
+         */
+        this.active = false;
+        /**
+         * Disables the link
+         */
+        this.disabled = false;
+    }
+    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: {
+                'seki-pagination-link': true,
+                'seki-pagination-link--active': !!this.active,
+                'seki-pagination-link--disabled': !!this.disabled,
+            }, part: "link" }, h("slot", { key: 'dc53ea38a64511be8dc65f4114e11cf3ee78212e' })));
+    }
+    static get is() { return "seki-pagination-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL for the pagination link"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this link represents the current/active page"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the link"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,77 @@
+import { h } from "@stencil/core";
+/**
+ * seki-pagination-next: Next page navigation button
+ *
+ * @component PaginationNext
+ */
+export class SekiPaginationNext {
+    constructor() {
+        /**
+         * Disables the button
+         */
+        this.disabled = false;
+    }
+    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: {
+                '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" }))));
+    }
+    static get is() { return "seki-pagination-next"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL for the next page"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,77 @@
+import { h } from "@stencil/core";
+/**
+ * seki-pagination-previous: Previous page navigation button
+ *
+ * @component PaginationPrevious
+ */
+export class SekiPaginationPrevious {
+    constructor() {
+        /**
+         * Disables the button
+         */
+        this.disabled = false;
+    }
+    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: {
+                '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")));
+    }
+    static get is() { return "seki-pagination-previous"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL for the previous page"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,151 @@
+/* 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-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-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;
+  --seki-pagination-size: 2.25rem;
+
+  display: block;
+}
+
+/* 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%));
+}
+
+/* Nav wrapper */
+.seki-pagination {
+  display: flex;
+  justify-content: center;
+  font-family: var(--seki-pagination-font-family);
+  font-size: var(--seki-pagination-font-size);
+}
+
+/* Content list */
+.seki-pagination-content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--seki-pagination-gap);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Item wrapper */
+.seki-pagination-item {
+  display: inline-flex;
+}
+
+/* Base link styles */
+.seki-pagination-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--seki-pagination-size);
+  height: var(--seki-pagination-size);
+  padding: 0 0.5rem;
+  border-radius: var(--seki-pagination-border-radius);
+  border: 1px solid var(--seki-pagination-border);
+  background: var(--seki-pagination-bg);
+  color: var(--seki-pagination-text-color);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+  gap: 0.25rem;
+}
+
+.seki-pagination-link:hover:not(.seki-pagination-link--disabled):not(.seki-pagination-link--active) {
+  background: var(--seki-pagination-bg-hover);
+}
+
+.seki-pagination-link:focus-visible {
+  outline: 2px solid var(--seki-pagination-bg-active);
+  outline-offset: 2px;
+}
+
+/* Active state */
+.seki-pagination-link--active {
+  background: var(--seki-pagination-bg-active);
+  color: var(--seki-pagination-text-active);
+  border-color: var(--seki-pagination-bg-active);
+  pointer-events: none;
+}
+
+/* Disabled state */
+.seki-pagination-link--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Navigation buttons (prev/next) */
+.seki-pagination-nav {
+  gap: 0.25rem;
+  padding: 0 0.75rem;
+}
+
+.seki-pagination-nav svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+/* Ellipsis */
+.seki-pagination-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--seki-pagination-size);
+  height: var(--seki-pagination-size);
+  color: var(--seki-pagination-text-muted);
+}
+
+.seki-pagination-ellipsis svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Screen reader only text */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: more) {
+  .seki-pagination-link {
+    border-width: 2px;
+  }
+
+  .seki-pagination-link:focus-visible {
+    outline-width: 3px;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .seki-pagination-link {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,37 @@
+import { h } from "@stencil/core";
+/**
+ * seki-pagination: Root pagination navigation component
+ *
+ * @component Pagination
+ * @example
+ * <seki-pagination>
+ *   <seki-pagination-content>
+ *     <seki-pagination-item>
+ *       <seki-pagination-previous href="#"></seki-pagination-previous>
+ *     </seki-pagination-item>
+ *     <seki-pagination-item>
+ *       <seki-pagination-link href="#">1</seki-pagination-link>
+ *     </seki-pagination-item>
+ *     <seki-pagination-item>
+ *       <seki-pagination-next href="#"></seki-pagination-next>
+ *     </seki-pagination-item>
+ *   </seki-pagination-content>
+ * </seki-pagination>
+ */
+export class SekiPagination {
+    render() {
+        return (h("nav", { key: 'dca247b34f5eaeda5ef674f3816c62b7321de982', role: "navigation", "aria-label": "pagination", class: "seki-pagination", part: "pagination" }, h("slot", { key: '7d411145416f993b54e67124c5c17def58a257f3' })));
+    }
+    static get is() { return "seki-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-pagination.css"]
+        };
+    }
+}

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

@@ -383,6 +383,80 @@
   --seki-radius-xl: 1rem;      /* 16px */
 }
 
+/**
+ * SekiUI Design Tokens - Sidebar
+ * Based on shadcn/ui sidebar component
+ */
+
+/* =============================================================================
+   SIDEBAR TOKENS (Layer 3: Component-Specific)
+   ============================================================================= */
+
+:host {
+  /* Sidebar Sizing */
+  --seki-sidebar-width: 16rem;
+  --seki-sidebar-width-icon: 3rem;
+  --seki-sidebar-width-mobile: 18rem;
+
+  /* Sidebar Colors - Light Mode */
+  --seki-sidebar-background: hsl(0, 0%, 98.5%);
+  --seki-sidebar-foreground: hsl(0, 0%, 9%);
+  --seki-sidebar-primary: hsl(0, 0%, 12%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 97%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 12%);
+  --seki-sidebar-border: hsl(0, 0%, 90%);
+  --seki-sidebar-ring: hsl(0, 0%, 64%);
+
+  /* Menu Button Sizing */
+  --seki-sidebar-menu-button-height: 2rem;
+  --seki-sidebar-menu-button-height-lg: 3rem;
+  --seki-sidebar-menu-button-padding: 0.5rem;
+  --seki-sidebar-menu-button-gap: 0.5rem;
+  --seki-sidebar-menu-button-radius: var(--seki-radius-md, 0.375rem);
+
+  /* Menu Sub */
+  --seki-sidebar-menu-sub-padding-left: 1.75rem;
+  --seki-sidebar-menu-sub-border-width: 1px;
+
+  /* Group */
+  --seki-sidebar-group-padding: 0.5rem;
+  --seki-sidebar-group-label-height: 2rem;
+  --seki-sidebar-group-label-padding: 0.5rem;
+
+  /* Header/Footer */
+  --seki-sidebar-header-height: auto;
+  --seki-sidebar-footer-height: auto;
+  --seki-sidebar-header-padding: 0.5rem;
+  --seki-sidebar-footer-padding: 0.5rem;
+
+  /* Content */
+  --seki-sidebar-content-padding: 0.5rem;
+
+  /* Rail */
+  --seki-sidebar-rail-width: 1rem;
+
+  /* Transitions */
+  --seki-sidebar-transition-duration: 200ms;
+  --seki-sidebar-transition-timing: ease-in-out;
+
+  /* Mobile */
+  --seki-sidebar-mobile-breakpoint: 768px;
+  --seki-sidebar-overlay-bg: hsla(0, 0%, 0%, 0.8);
+}
+
+/* Dark Mode Sidebar Tokens */
+:host([data-theme='dark']) {
+  --seki-sidebar-background: hsl(0, 0%, 12%);
+  --seki-sidebar-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-primary: hsl(264, 100%, 60%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 18%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-border: hsla(0, 0%, 100%, 0.1);
+  --seki-sidebar-ring: hsl(0, 0%, 40%);
+}
+
 
 
 /**

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

@@ -334,7 +334,7 @@ export class SekiSelect {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: 'f9b0a239ecb0737c8341b1a2377d37d00374dfd7' }, h("slot", { key: '0245a9ff1da69043b08517ba859b305108710252' }), this.name && this.renderHiddenNativeElement()));
+        return (h(Host, { key: 'e746f51ef991f2ca5806d8e35c2f3e5f7361af21' }, h("slot", { key: 'ef2a9d3988198cea2f1df16ff4986921a8a72d4c' }), this.name && this.renderHiddenNativeElement()));
     }
     renderHiddenNativeElement() {
         if (this.multiple) {

package/dist/collection/components/select-content/seki-select-content.css

@@ -383,6 +383,80 @@
   --seki-radius-xl: 1rem;      /* 16px */
 }
 
+/**
+ * SekiUI Design Tokens - Sidebar
+ * Based on shadcn/ui sidebar component
+ */
+
+/* =============================================================================
+   SIDEBAR TOKENS (Layer 3: Component-Specific)
+   ============================================================================= */
+
+:host {
+  /* Sidebar Sizing */
+  --seki-sidebar-width: 16rem;
+  --seki-sidebar-width-icon: 3rem;
+  --seki-sidebar-width-mobile: 18rem;
+
+  /* Sidebar Colors - Light Mode */
+  --seki-sidebar-background: hsl(0, 0%, 98.5%);
+  --seki-sidebar-foreground: hsl(0, 0%, 9%);
+  --seki-sidebar-primary: hsl(0, 0%, 12%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 97%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 12%);
+  --seki-sidebar-border: hsl(0, 0%, 90%);
+  --seki-sidebar-ring: hsl(0, 0%, 64%);
+
+  /* Menu Button Sizing */
+  --seki-sidebar-menu-button-height: 2rem;
+  --seki-sidebar-menu-button-height-lg: 3rem;
+  --seki-sidebar-menu-button-padding: 0.5rem;
+  --seki-sidebar-menu-button-gap: 0.5rem;
+  --seki-sidebar-menu-button-radius: var(--seki-radius-md, 0.375rem);
+
+  /* Menu Sub */
+  --seki-sidebar-menu-sub-padding-left: 1.75rem;
+  --seki-sidebar-menu-sub-border-width: 1px;
+
+  /* Group */
+  --seki-sidebar-group-padding: 0.5rem;
+  --seki-sidebar-group-label-height: 2rem;
+  --seki-sidebar-group-label-padding: 0.5rem;
+
+  /* Header/Footer */
+  --seki-sidebar-header-height: auto;
+  --seki-sidebar-footer-height: auto;
+  --seki-sidebar-header-padding: 0.5rem;
+  --seki-sidebar-footer-padding: 0.5rem;
+
+  /* Content */
+  --seki-sidebar-content-padding: 0.5rem;
+
+  /* Rail */
+  --seki-sidebar-rail-width: 1rem;
+
+  /* Transitions */
+  --seki-sidebar-transition-duration: 200ms;
+  --seki-sidebar-transition-timing: ease-in-out;
+
+  /* Mobile */
+  --seki-sidebar-mobile-breakpoint: 768px;
+  --seki-sidebar-overlay-bg: hsla(0, 0%, 0%, 0.8);
+}
+
+/* Dark Mode Sidebar Tokens */
+:host([data-theme='dark']) {
+  --seki-sidebar-background: hsl(0, 0%, 12%);
+  --seki-sidebar-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-primary: hsl(264, 100%, 60%);
+  --seki-sidebar-primary-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-accent: hsl(0, 0%, 18%);
+  --seki-sidebar-accent-foreground: hsl(0, 0%, 98.5%);
+  --seki-sidebar-border: hsla(0, 0%, 100%, 0.1);
+  --seki-sidebar-ring: hsl(0, 0%, 40%);
+}
+
 
 
 :host {