@sekiui/elements 0.0.60 → 0.0.63

package/dist/collection/components/table/seki-table-cell.js

@@ -0,0 +1,82 @@
+import { h } from "@stencil/core";
+/**
+ * seki-table-cell: Table data cell (td)
+ *
+ * @component TableCell
+ */
+export class SekiTableCell {
+    constructor() {
+        /**
+         * Text alignment
+         */
+        this.align = 'left';
+    }
+    render() {
+        const style = this.width ? { width: this.width } : {};
+        return (h("td", { key: 'a8fa83173fa0b47555eb398cac9fd99b241d99c0', class: {
+                'seki-table-cell': true,
+                [`seki-table-cell--${this.align}`]: true,
+            }, style: style }, h("slot", { key: '817df624147e16aaa899121a72a46a7f02503412' })));
+    }
+    static get is() { return "seki-table-cell"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-table-cell.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-table-cell.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableCellAlign",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {
+                        "TableCellAlign": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/table/seki-table-cell.tsx",
+                            "id": "src/components/table/seki-table-cell.tsx::TableCellAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text alignment"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'left'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Column width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            }
+        };
+    }
+}

package/dist/collection/components/table/seki-table-footer.css

@@ -0,0 +1,21 @@
+/* Table Footer Styles */
+
+:host {
+  display: table-footer-group;
+}
+
+.seki-table-footer {
+  display: table-footer-group;
+  border-top: 1px solid var(--seki-border, hsl(240 5.9% 90%));
+  background-color: var(--seki-muted, hsl(240 4.8% 95.9%));
+  font-weight: var(--seki-font-weight-medium, 500);
+}
+
+:host-context([data-theme='dark']) .seki-table-footer {
+  border-color: var(--seki-border, hsl(240 3.7% 15.9%));
+  background-color: var(--seki-muted, hsl(240 3.7% 15.9%));
+}
+
+::slotted(seki-table-row) {
+  display: table-row;
+}

package/dist/collection/components/table/seki-table-footer.js

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+/**
+ * seki-table-footer: Table footer wrapper (tfoot)
+ *
+ * @component TableFooter
+ */
+export class SekiTableFooter {
+    render() {
+        return (h("tfoot", { key: '132cb9ddace5223ad31bfcc4f1b3caeb49ea2a10', class: "seki-table-footer" }, h("slot", { key: 'e3fa2e6af8a80c8d4e3b5517582efeeca14db613' })));
+    }
+    static get is() { return "seki-table-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-table-footer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-table-footer.css"]
+        };
+    }
+}

package/dist/collection/components/table/seki-table-head.css

@@ -0,0 +1,53 @@
+/* Table Head Cell Styles */
+
+:host {
+  display: table-cell;
+}
+
+.seki-table-head {
+  display: table-cell;
+  height: 48px;
+  padding: 0 1rem;
+  text-align: left;
+  vertical-align: middle;
+  font-weight: var(--seki-font-weight-medium, 500);
+  color: var(--seki-muted-foreground, hsl(240 3.8% 46.1%));
+  white-space: nowrap;
+}
+
+:host-context([data-theme='dark']) .seki-table-head {
+  color: var(--seki-muted-foreground, hsl(240 5% 64.9%));
+}
+
+/* Alignment variants */
+.seki-table-head--left {
+  text-align: left;
+}
+
+.seki-table-head--center {
+  text-align: center;
+}
+
+.seki-table-head--right {
+  text-align: right;
+}
+
+/* Sortable columns */
+.seki-table-head--sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.seki-table-head--sortable:hover {
+  color: var(--seki-foreground, hsl(240 10% 3.9%));
+}
+
+:host-context([data-theme='dark']) .seki-table-head--sortable:hover {
+  color: var(--seki-foreground, hsl(0 0% 98%));
+}
+
+/* Sort icon */
+.seki-table-head__sort-icon {
+  margin-left: 0.25rem;
+  font-size: 0.75rem;
+}

package/dist/collection/components/table/seki-table-head.js

@@ -0,0 +1,130 @@
+import { h } from "@stencil/core";
+/**
+ * seki-table-head: Table header cell (th)
+ *
+ * @component TableHead
+ */
+export class SekiTableHead {
+    constructor() {
+        /**
+         * Text alignment
+         */
+        this.align = 'left';
+        /**
+         * Whether this column is sortable
+         */
+        this.sortable = false;
+    }
+    render() {
+        const style = this.width ? { width: this.width } : {};
+        return (h("th", { key: '893435a921d063137ef83f55f36e3f9fb2d3655e', class: {
+                'seki-table-head': true,
+                [`seki-table-head--${this.align}`]: true,
+                'seki-table-head--sortable': this.sortable,
+            }, style: style, "aria-sort": this.sortDirection === 'asc'
+                ? 'ascending'
+                : this.sortDirection === 'desc'
+                    ? 'descending'
+                    : undefined }, h("slot", { key: '5131db3d89bd477ddd3922939b2739d7f1073125' }), this.sortable && this.sortDirection && (h("span", { key: '7309f70c304da2383cb7049ad4a383258cdec725', class: "seki-table-head__sort-icon" }, this.sortDirection === 'asc' ? '↑' : '↓'))));
+    }
+    static get is() { return "seki-table-head"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-table-head.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-table-head.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableHeadAlign",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {
+                        "TableHeadAlign": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/table/seki-table-head.tsx",
+                            "id": "src/components/table/seki-table-head.tsx::TableHeadAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text alignment"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'left'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Column width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "sortable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this column is sortable"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sortable",
+                "defaultValue": "false"
+            },
+            "sortDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'asc' | 'desc'",
+                    "resolved": "\"asc\" | \"desc\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current sort direction"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sort-direction"
+            }
+        };
+    }
+}

package/dist/collection/components/table/seki-table-header.css

@@ -0,0 +1,18 @@
+/* Table Header Styles */
+
+:host {
+  display: table-header-group;
+}
+
+.seki-table-header {
+  border-bottom: 1px solid var(--seki-border, hsl(240 5.9% 90%));
+}
+
+:host-context([data-theme='dark']) .seki-table-header {
+  border-color: var(--seki-border, hsl(240 3.7% 15.9%));
+}
+
+/* Ensure slotted rows inherit proper styling */
+::slotted(seki-table-row) {
+  display: table-row;
+}

package/dist/collection/components/table/seki-table-header.js

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+/**
+ * seki-table-header: Table header wrapper (thead)
+ *
+ * @component TableHeader
+ */
+export class SekiTableHeader {
+    render() {
+        return (h("thead", { key: '4f071bfd536030cb26a2577e32a14eb9ee5dce9d', class: "seki-table-header" }, h("slot", { key: '630a54954db8f796ca8a77ff2593140bd597b076' })));
+    }
+    static get is() { return "seki-table-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-table-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-table-header.css"]
+        };
+    }
+}

package/dist/collection/components/table/seki-table-row.css

@@ -0,0 +1,39 @@
+/* Table Row Styles */
+
+:host {
+  display: table-row;
+  --seki-table-row-border: 1px solid var(--seki-border, hsl(240 5.9% 90%));
+}
+
+:host-context([data-theme='dark']) {
+  --seki-table-row-border: 1px solid var(--seki-border, hsl(240 3.7% 15.9%));
+}
+
+.seki-table-row {
+  display: table-row;
+  border-bottom: var(--seki-table-row-border);
+  transition: background-color 150ms ease;
+}
+
+.seki-table-row:hover {
+  background-color: var(--seki-muted, hsl(240 4.8% 95.9%));
+}
+
+:host-context([data-theme='dark']) .seki-table-row:hover {
+  background-color: var(--seki-muted, hsl(240 3.7% 15.9%));
+}
+
+.seki-table-row--selected {
+  background-color: var(--seki-muted, hsl(240 4.8% 95.9%));
+}
+
+:host-context([data-theme='dark']) .seki-table-row--selected {
+  background-color: var(--seki-muted, hsl(240 3.7% 15.9%));
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .seki-table-row {
+    transition: none;
+  }
+}

package/dist/collection/components/table/seki-table-row.js

@@ -0,0 +1,56 @@
+import { h } from "@stencil/core";
+/**
+ * seki-table-row: Table row wrapper (tr)
+ *
+ * @component TableRow
+ */
+export class SekiTableRow {
+    constructor() {
+        /**
+         * Whether this row is selected
+         */
+        this.selected = false;
+    }
+    render() {
+        return (h("tr", { key: '692f08d11423e77990268d7468ce406efee086f2', class: {
+                'seki-table-row': true,
+                'seki-table-row--selected': this.selected,
+            }, "data-state": this.selected ? 'selected' : undefined }, h("slot", { key: '44c639f6df13b2defe1ead36f3720fac5a64db3c' })));
+    }
+    static get is() { return "seki-table-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-table-row.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-table-row.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this row is selected"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,49 @@
+/* Table Component Styles */
+
+:host {
+  /* Colors */
+  --seki-table-bg: var(--seki-background, hsl(0 0% 100%));
+  --seki-table-text: var(--seki-foreground, hsl(240 10% 3.9%));
+  --seki-table-muted: var(--seki-muted-foreground, hsl(240 3.8% 46.1%));
+  --seki-table-border: var(--seki-border, hsl(240 5.9% 90%));
+  --seki-table-hover: var(--seki-muted, hsl(240 4.8% 95.9%));
+
+  /* Typography */
+  --seki-table-font-size: var(--seki-font-size-sm, 14px);
+  --seki-table-font-family: var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);
+
+  display: block;
+  width: 100%;
+}
+
+/* Dark mode support */
+:host-context([data-theme='dark']) {
+  --seki-table-bg: var(--seki-background, hsl(240 10% 3.9%));
+  --seki-table-text: var(--seki-foreground, hsl(0 0% 98%));
+  --seki-table-muted: var(--seki-muted-foreground, hsl(240 5% 64.9%));
+  --seki-table-border: var(--seki-border, hsl(240 3.7% 15.9%));
+  --seki-table-hover: var(--seki-muted, hsl(240 3.7% 15.9%));
+}
+
+.seki-table-container {
+  width: 100%;
+  overflow: auto;
+  border-radius: var(--radius-md, 8px);
+}
+
+.seki-table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-family: var(--seki-table-font-family);
+  font-size: var(--seki-table-font-size);
+  color: var(--seki-table-text);
+  caption-side: bottom;
+}
+
+/* Caption */
+.seki-table::slotted(caption) {
+  margin-top: 1rem;
+  font-size: 0.875rem;
+  color: var(--seki-table-muted);
+}

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

@@ -0,0 +1,59 @@
+import { h } from "@stencil/core";
+/**
+ * seki-table: A semantic table wrapper component
+ *
+ * @component Table
+ * @example
+ * <seki-table>
+ *   <seki-table-header>
+ *     <seki-table-row>
+ *       <seki-table-head>Name</seki-table-head>
+ *     </seki-table-row>
+ *   </seki-table-header>
+ *   <seki-table-body>
+ *     <seki-table-row>
+ *       <seki-table-cell>John</seki-table-cell>
+ *     </seki-table-row>
+ *   </seki-table-body>
+ * </seki-table>
+ */
+export class SekiTable {
+    render() {
+        return (h("div", { key: '45fa0b913dba2838ea119e9060ac78f891039fe4', class: "seki-table-container" }, h("table", { key: 'f9034c6199b01b9fb6f5d7c15ccf50dfc52f3ad1', class: "seki-table", role: "table", "aria-label": this.ariaLabel }, h("slot", { key: '11501fea0c29f18ff23f6e93f39d21815fcf4806' }))));
+    }
+    static get is() { return "seki-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label for the table"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
+            }
+        };
+    }
+}