@sekiui/elements 0.0.61 → 0.0.64

package/dist/cdn/seki-data-table.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SekiDataTable extends Components.SekiDataTable, HTMLElement {}
+export const SekiDataTable: {
+    prototype: SekiDataTable;
+    new (): SekiDataTable;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/cdn/seki-data-table.js

@@ -0,0 +1,596 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BF5nneSK.js';
+
+/**
+ * Virtual scroll utility for data table
+ * Calculates which rows should be rendered based on scroll position
+ */
+/**
+ * Calculate virtual scroll parameters
+ */
+function calculateVirtualScroll(config) {
+    const { totalRows, rowHeight, viewportHeight, scrollTop, bufferSize } = config;
+    // Calculate total height
+    const totalHeight = totalRows * rowHeight;
+    // Calculate visible range
+    const visibleCount = Math.ceil(viewportHeight / rowHeight);
+    // Calculate start index (which row is at the top of viewport)
+    const rawStartIndex = Math.floor(scrollTop / rowHeight);
+    // Apply buffer (render extra rows above viewport)
+    const startIndex = Math.max(0, rawStartIndex - bufferSize);
+    // Calculate end index with buffer below viewport
+    const rawEndIndex = rawStartIndex + visibleCount;
+    const endIndex = Math.min(totalRows, rawEndIndex + bufferSize);
+    // Calculate offset for positioning
+    const offsetTop = startIndex * rowHeight;
+    return {
+        startIndex,
+        endIndex,
+        offsetTop,
+        totalHeight,
+        visibleCount,
+    };
+}
+
+const sekiDataTableCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%);--seki-chart-1:hsl(12, 76%, 61%);--seki-chart-2:hsl(173, 58%, 39%);--seki-chart-3:hsl(197, 37%, 24%);--seki-chart-4:hsl(43, 74%, 66%);--seki-chart-5:hsl(27, 87%, 67%)}:host{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md);--seki-input-ring-offset:2px;--seki-select-trigger-bg:var(--seki-background);--seki-select-trigger-border:1px solid var(--seki-border);--seki-select-trigger-bg-hover:var(--seki-muted);--seki-select-trigger-radius:var(--seki-radius-md);--seki-select-trigger-min-height:2.5rem;--seki-select-trigger-padding:0.5rem 0.75rem;--seki-select-trigger-gap:0.5rem;--seki-select-content-bg:var(--seki-popover);--seki-select-content-border:1px solid var(--seki-border);--seki-select-content-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1);--seki-select-content-radius:var(--seki-radius-md);--seki-select-content-padding:0.5rem 0;--seki-select-option-padding:0.5rem 0.75rem;--seki-select-option-gap:0.5rem;--seki-select-option-radius:var(--seki-radius-sm);--seki-select-option-bg-hover:var(--seki-muted);--seki-select-option-bg-selected:var(--seki-muted);--seki-select-group-label-padding:0.5rem 0.75rem;--seki-select-group-label-font-size:var(--seki-font-size-xs);--seki-select-group-label-font-weight:var(--seki-font-semibold);--seki-select-group-label-color:var(--seki-muted-foreground);--seki-select-group-separator:1px solid var(--seki-border)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;}:host{--seki-sidebar-width:16rem;--seki-sidebar-width-icon:3rem;--seki-sidebar-width-mobile:18rem;--seki-sidebar-background:hsl(0, 0%, 98%);--seki-sidebar-foreground:hsl(240, 5.3%, 26.1%);--seki-sidebar-primary:hsl(240, 5.9%, 10%);--seki-sidebar-primary-foreground:hsl(0, 0%, 98%);--seki-sidebar-accent:hsl(240, 4.8%, 95.9%);--seki-sidebar-accent-foreground:hsl(240, 5.9%, 10%);--seki-sidebar-border:hsl(220, 13%, 91%);--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:hsl(240, 3.8%, 46.1%);--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);--seki-sidebar-menu-sub-padding-left:1.75rem;--seki-sidebar-menu-sub-border-width:1px;--seki-sidebar-group-padding:0.5rem;--seki-sidebar-group-label-height:2rem;--seki-sidebar-group-label-padding:0.5rem;--seki-sidebar-header-height:auto;--seki-sidebar-footer-height:auto;--seki-sidebar-header-padding:0.5rem;--seki-sidebar-footer-padding:0.5rem;--seki-sidebar-content-padding:0.5rem;--seki-sidebar-rail-width:1rem;--seki-sidebar-transition-duration:200ms;--seki-sidebar-transition-timing:ease-in-out;--seki-sidebar-mobile-breakpoint:768px;--seki-sidebar-overlay-bg:hsla(0, 0%, 0%, 0.8)}:host([data-theme='dark']){--seki-sidebar-background:hsl(240, 5.9%, 10%);--seki-sidebar-foreground:hsl(240, 4.8%, 95.9%);--seki-sidebar-primary:hsl(0, 0%, 98%);--seki-sidebar-primary-foreground:hsl(240, 5.9%, 10%);--seki-sidebar-accent:hsl(240, 3.7%, 15.9%);--seki-sidebar-accent-foreground:hsl(240, 4.8%, 95.9%);--seki-sidebar-border:hsl(240, 3.7%, 15.9%);--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:hsl(240, 5%, 64.9%)}:host{--seki-animation-fast:150ms;--seki-animation-normal:200ms;--seki-animation-slow:300ms;--seki-ease-in:cubic-bezier(0.4, 0, 1, 1);--seki-ease-out:cubic-bezier(0, 0, 0.2, 1);--seki-ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);--seki-accordion-content-height:auto}@keyframes seki-fade-in{from{opacity:0}to{opacity:1}}@keyframes seki-fade-out{from{opacity:1}to{opacity:0}}@keyframes seki-scale-in{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes seki-scale-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}@keyframes seki-slide-in-from-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes seki-slide-out-to-top{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes seki-slide-in-from-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes seki-slide-out-to-bottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes seki-slide-in-from-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes seki-slide-out-to-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes seki-slide-in-from-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes seki-slide-out-to-right{from{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes seki-accordion-down{from{height:0;opacity:0}to{height:var(--seki-accordion-content-height);opacity:1}}@keyframes seki-accordion-up{from{height:var(--seki-accordion-content-height);opacity:1}to{height:0;opacity:0}}@keyframes seki-zoom-in{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}@keyframes seki-zoom-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.96)}}@keyframes seki-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes seki-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@keyframes seki-bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}}@keyframes seki-collapsible-open{from{height:0;overflow:hidden}to{height:var(--seki-collapsible-content-height, auto)}}@keyframes seki-collapsible-close{from{height:var(--seki-collapsible-content-height, auto)}to{height:0;overflow:hidden}}@keyframes seki-toast-slide-in-right{from{transform:translateX(calc(100% + 1rem))}to{transform:translateX(0)}}@keyframes seki-toast-slide-out-right{from{transform:translateX(0)}to{transform:translateX(calc(100% + 1rem))}}@keyframes seki-toast-swipe-out{from{transform:translateX(var(--seki-toast-swipe-end-x, 0))}to{transform:translateX(calc(100% + 1rem))}}.seki-animate-fade-in{animation:seki-fade-in var(--seki-animation-normal) var(--seki-ease-out)}.seki-animate-fade-out{animation:seki-fade-out var(--seki-animation-normal) var(--seki-ease-in)}.seki-animate-scale-in{animation:seki-scale-in var(--seki-animation-normal) var(--seki-ease-out)}.seki-animate-scale-out{animation:seki-scale-out var(--seki-animation-normal) var(--seki-ease-in)}.seki-animate-spin{animation:seki-spin 1s linear infinite}.seki-animate-pulse{animation:seki-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.seki-animate-bounce{animation:seki-bounce 1s infinite}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}:host{display:block;--seki-table-border:var(--seki-border);--seki-table-radius:var(--seki-radius-md, 0.375rem);--seki-table-header-bg:var(--seki-muted);--seki-table-header-text:var(--seki-foreground);--seki-table-header-height:44px;--seki-table-row-bg:var(--seki-background);--seki-table-row-bg-hover:var(--seki-muted);--seki-table-row-bg-selected:hsl(210, 100%, 96%);--seki-table-row-height:48px;--seki-table-cell-padding:0 12px;--seki-table-pagination-height:52px}.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}.data-table{display:flex;flex-direction:column;border:1px solid var(--seki-table-border);border-radius:var(--seki-table-radius);background:var(--seki-table-row-bg);overflow:hidden}.data-table__toolbar{display:flex;align-items:center;gap:var(--seki-spacing-3, 0.75rem);padding:var(--seki-spacing-3, 0.75rem);border-bottom:1px solid var(--seki-table-border);background:var(--seki-table-row-bg)}.data-table__search{position:relative;display:flex;align-items:center}.data-table__search-input{width:250px;height:36px;padding:0 var(--seki-spacing-3, 0.75rem);padding-right:32px;font-family:var(--seki-font-sans);font-size:var(--seki-text-sm, 0.875rem);border:1px solid var(--seki-table-border);border-radius:var(--seki-radius-md, 0.375rem);background:var(--seki-background);color:var(--seki-foreground);outline:none;transition:border-color 150ms ease, box-shadow 150ms ease}.data-table__search-input:focus{border-color:var(--seki-ring);box-shadow:0 0 0 2px hsl(0, 0%, 3.9%, 0.1)}.data-table__search-input::placeholder{color:var(--seki-muted-foreground)}.data-table__search-clear{position:absolute;right:8px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;font-size:16px;line-height:1;color:var(--seki-muted-foreground);background:none;border:none;border-radius:50%;cursor:pointer;transition:color 150ms ease, background 150ms ease}.data-table__search-clear:hover{color:var(--seki-foreground);background:var(--seki-muted)}.data-table__toolbar-spacer{flex:1}.data-table__column-picker-btn{display:flex;align-items:center;gap:var(--seki-spacing-1, 0.25rem);height:36px;padding:0 var(--seki-spacing-3, 0.75rem);font-family:var(--seki-font-sans);font-size:var(--seki-text-sm, 0.875rem);font-weight:var(--seki-font-medium, 500);color:var(--seki-foreground);background:var(--seki-background);border:1px solid var(--seki-table-border);border-radius:var(--seki-radius-md, 0.375rem);cursor:pointer;transition:background 150ms ease}.data-table__column-picker-btn:hover{background:var(--seki-muted)}.data-table__container{position:relative;flex:1;overflow:auto}.data-table__table{width:100%;border-collapse:collapse;table-layout:fixed}.data-table__head{position:sticky;top:0;z-index:10}.data-table__header-row{background:var(--seki-table-header-bg)}.data-table__th{position:relative;height:var(--seki-table-header-height);padding:var(--seki-table-cell-padding);font-family:var(--seki-font-sans);font-size:var(--seki-text-sm, 0.875rem);font-weight:var(--seki-font-semibold, 600);color:var(--seki-table-header-text);text-align:left;white-space:nowrap;border-bottom:1px solid var(--seki-table-border);user-select:none}.data-table__th--checkbox,.data-table__th--expand{width:48px;min-width:48px;max-width:48px;text-align:center}.data-table__th--sortable{cursor:pointer;transition:background 150ms ease}.data-table__th--sortable:hover{background:var(--seki-neutral-200, hsl(0, 0%, 89.8%))}.data-table__th--sorted{background:var(--seki-neutral-200, hsl(0, 0%, 89.8%))}.data-table__th--align-left{text-align:left}.data-table__th--align-center{text-align:center}.data-table__th--align-right{text-align:right}.data-table__th-content{display:flex;align-items:center;gap:var(--seki-spacing-1, 0.25rem)}.data-table__th--align-center .data-table__th-content{justify-content:center}.data-table__th--align-right .data-table__th-content{justify-content:flex-end}.data-table__th-label{overflow:hidden;text-overflow:ellipsis}.data-table__sort-icon{flex-shrink:0;font-size:12px;color:var(--seki-muted-foreground)}.data-table__th--sorted .data-table__sort-icon{color:var(--seki-foreground)}.data-table__resize-handle{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;transition:background 150ms ease}.data-table__resize-handle:hover,.data-table__resize-handle:active{background:var(--seki-primary)}.data-table__body{background:var(--seki-table-row-bg)}.data-table__row{transition:background 150ms ease}.data-table__row:hover{background:var(--seki-table-row-bg-hover)}.data-table__row--selected{background:var(--seki-table-row-bg-selected)}.data-table__row--selected:hover{background:hsl(210, 100%, 94%)}.data-table__row--expanded{background:var(--seki-muted)}.data-table__row--expanded-content{background:var(--seki-muted)}.data-table__row--loading,.data-table__row--empty{background:transparent}.data-table__row--loading:hover,.data-table__row--empty:hover{background:transparent}.data-table__td{height:var(--seki-table-row-height);padding:var(--seki-table-cell-padding);font-family:var(--seki-font-sans);font-size:var(--seki-text-sm, 0.875rem);color:var(--seki-foreground);vertical-align:middle;border-bottom:1px solid var(--seki-table-border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-table__td--checkbox,.data-table__td--expand{width:48px;min-width:48px;max-width:48px;text-align:center}.data-table__td--align-left{text-align:left}.data-table__td--align-center{text-align:center}.data-table__td--align-right{text-align:right}.data-table__td--loading,.data-table__td--empty{height:200px;text-align:center;vertical-align:middle}.data-table__td--expanded-content{padding:var(--seki-spacing-4, 1rem);white-space:normal}.data-table__checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--seki-primary)}.data-table__expand-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;font-size:10px;color:var(--seki-muted-foreground);background:none;border:none;border-radius:var(--seki-radius-sm, 0.25rem);cursor:pointer;transition:color 150ms ease, background 150ms ease}.data-table__expand-btn:hover{color:var(--seki-foreground);background:var(--seki-muted)}.data-table__expanded-content{padding:var(--seki-spacing-2, 0.5rem) 0}.data-table__loading,.data-table__empty{display:flex;align-items:center;justify-content:center;color:var(--seki-muted-foreground);font-size:var(--seki-text-sm, 0.875rem)}.data-table__loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:hsla(0, 0%, 100%, 0.7);z-index:5}.data-table__pagination{display:flex;align-items:center;justify-content:space-between;height:var(--seki-table-pagination-height);padding:0 var(--seki-spacing-3, 0.75rem);border-top:1px solid var(--seki-table-border);background:var(--seki-table-row-bg)}.data-table__pagination-info{font-family:var(--seki-font-sans);font-size:var(--seki-text-sm, 0.875rem);color:var(--seki-muted-foreground)}.data-table__pagination-controls{display:flex;align-items:center;gap:var(--seki-spacing-2, 0.5rem)}.data-table__page-size{height:32px;padding:0 var(--seki-spacing-2, 0.5rem);font-family:var(--seki-font-sans);font-size:var(--seki-text-sm, 0.875rem);color:var(--seki-foreground);background:var(--seki-background);border:1px solid var(--seki-table-border);border-radius:var(--seki-radius-sm, 0.25rem);cursor:pointer}.data-table__page-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;font-family:var(--seki-font-sans);font-size:var(--seki-text-sm, 0.875rem);font-weight:var(--seki-font-medium, 500);color:var(--seki-foreground);background:var(--seki-background);border:1px solid var(--seki-table-border);border-radius:var(--seki-radius-sm, 0.25rem);cursor:pointer;transition:background 150ms ease}.data-table__page-btn:hover:not(:disabled){background:var(--seki-muted)}.data-table__page-btn:disabled{opacity:0.5;cursor:not-allowed}.data-table__page-indicator{padding:0 var(--seki-spacing-2, 0.5rem);font-family:var(--seki-font-sans);font-size:var(--seki-text-sm, 0.875rem);color:var(--seki-muted-foreground)}.data-table__container--virtual{max-height:400px;overflow-y:auto}.data-table__row--virtual{display:table-row;width:100%}.data-table__row--virtual .data-table__td{box-sizing:border-box}:host([data-theme='dark']){--seki-table-row-bg-selected:hsl(210, 50%, 20%)}:host([data-theme='dark']) .data-table__row--selected:hover{background:hsl(210, 50%, 25%)}:host([data-theme='dark']) .data-table__th--sortable:hover,:host([data-theme='dark']) .data-table__th--sorted{background:var(--seki-neutral-700, hsl(0, 0%, 25.1%))}:host([data-theme='dark']) .data-table__loading-overlay{background:hsla(0, 0%, 0%, 0.5)}@media (prefers-reduced-motion: reduce){.data-table__row,.data-table__th--sortable,.data-table__search-input,.data-table__page-btn,.data-table__expand-btn,.data-table__resize-handle{transition:none}}";
+
+const SekiDataTable$1 = /*@__PURE__*/ proxyCustomElement(class SekiDataTable extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.selectionChange = createEvent(this, "seki-selection-change");
+        this.rowExpand = createEvent(this, "seki-row-expand");
+        this.rowClick = createEvent(this, "seki-row-click");
+        this.columnResize = createEvent(this, "seki-column-resize");
+        this.columnReorder = createEvent(this, "seki-column-reorder");
+        this.columnsChange = createEvent(this, "seki-columns-change");
+        this.sortChange = createEvent(this, "seki-sort-change");
+        this.filterChange = createEvent(this, "seki-filter-change");
+        this.pageChange = createEvent(this, "seki-page-change");
+        // =========================================================================
+        // Props
+        // =========================================================================
+        /** Column definitions (JSON array) */
+        this.columns = '[]';
+        /** Field that uniquely identifies each row */
+        this.rowKey = 'id';
+        /** Enable row selection with checkboxes */
+        this.selectable = false;
+        /** Enable expandable row details */
+        this.expandable = false;
+        /** Allow multiple rows expanded at once */
+        this.multiExpand = false;
+        /** Show global search input */
+        this.searchable = false;
+        /** Search input placeholder */
+        this.searchPlaceholder = 'Search...';
+        /** Search debounce delay in ms */
+        this.searchDebounce = 300;
+        /** Fields to include in global search */
+        this.searchFields = '[]';
+        /** Show column visibility picker */
+        this.columnPicker = false;
+        /** Rows per page */
+        this.pageSize = 50;
+        /** Page size dropdown options */
+        this.pageSizeOptions = '[25, 50, 100]';
+        /** Enable virtualized rendering */
+        this.virtualScroll = false;
+        /** Fixed row height for virtualization */
+        this.rowHeight = 48;
+        /** Buffer rows above/below viewport */
+        this.bufferSize = 5;
+        /** Show loading state */
+        this.loading = false;
+        /** Message when no data */
+        this.emptyMessage = 'No data';
+        // =========================================================================
+        // State
+        // =========================================================================
+        this.state = {
+            page: 0,
+            pageSize: 50,
+            sort: undefined,
+            filters: {},
+            search: '',
+            selectedKeys: new Set(),
+            expandedKeys: new Set(),
+            columns: [],
+            rows: [],
+            totalRows: 0,
+            loading: false,
+        };
+        this.searchInputValue = '';
+        /** Virtual scroll state */
+        this.virtualScrollState = {
+            startIndex: 0,
+            endIndex: 0,
+            offsetTop: 0,
+            totalHeight: 0,
+            visibleCount: 0,
+        };
+        /** Viewport height for virtual scroll */
+        this.viewportHeight = 400;
+        this.handleScroll = (event) => {
+            if (!this.virtualScroll)
+                return;
+            const target = event.target;
+            this.updateVirtualScrollState(target.scrollTop);
+        };
+        // =========================================================================
+        // Event Handlers
+        // =========================================================================
+        this.handleSort = (field) => {
+            var _a;
+            const column = this.state.columns.find(c => c.field === field);
+            if (!(column === null || column === void 0 ? void 0 : column.sortable))
+                return;
+            let direction = 'asc';
+            if (((_a = this.state.sort) === null || _a === void 0 ? void 0 : _a.field) === field) {
+                direction = this.state.sort.direction === 'asc' ? 'desc' : 'asc';
+            }
+            const newSort = { field, direction };
+            this.updateState({ sort: newSort, page: 0 });
+            this.sortChange.emit({ field, direction });
+            this.loadData();
+        };
+        this.handlePageChange = (page) => {
+            this.updateState({ page });
+            this.pageChange.emit({ page, pageSize: this.state.pageSize });
+            this.loadData();
+        };
+        this.handlePageSizeChange = (pageSize) => {
+            this.updateState({ pageSize, page: 0 });
+            this.pageChange.emit({ page: 0, pageSize });
+            this.loadData();
+        };
+        this.handleSearchInput = (event) => {
+            const value = event.target.value;
+            this.searchInputValue = value;
+            if (this.searchTimeout) {
+                clearTimeout(this.searchTimeout);
+            }
+            this.searchTimeout = setTimeout(() => {
+                this.updateState({ search: value, page: 0 });
+                this.loadData();
+            }, this.searchDebounce);
+        };
+        this.handleClearSearch = () => {
+            this.searchInputValue = '';
+            this.updateState({ search: '', page: 0 });
+            this.loadData();
+        };
+        this.handleRowSelect = (rowKey, selected) => {
+            const newSelected = new Set(this.state.selectedKeys);
+            if (selected) {
+                newSelected.add(rowKey);
+            }
+            else {
+                newSelected.delete(rowKey);
+            }
+            this.updateSelection(newSelected);
+        };
+        this.handleSelectAll = (selected) => {
+            if (selected) {
+                this.selectAll();
+            }
+            else {
+                // Deselect only current page rows
+                const newSelected = new Set(this.state.selectedKeys);
+                this.state.rows.forEach(row => {
+                    newSelected.delete(String(row[this.rowKey]));
+                });
+                this.updateSelection(newSelected);
+            }
+        };
+        this.handleRowExpand = (rowKey) => {
+            const row = this.state.rows.find(r => String(r[this.rowKey]) === rowKey);
+            if (!row)
+                return;
+            const newExpanded = new Set(this.state.expandedKeys);
+            const isExpanded = newExpanded.has(rowKey);
+            if (isExpanded) {
+                newExpanded.delete(rowKey);
+            }
+            else {
+                if (!this.multiExpand) {
+                    newExpanded.clear();
+                }
+                newExpanded.add(rowKey);
+            }
+            this.updateState({ expandedKeys: newExpanded });
+            this.rowExpand.emit({ rowId: rowKey, expanded: !isExpanded, row });
+        };
+        this.handleRowClick = (row) => {
+            this.rowClick.emit({ rowId: String(row[this.rowKey]), row });
+        };
+        this.handleColumnResize = (field, width) => {
+            const columns = this.state.columns.map(col => col.field === field ? Object.assign(Object.assign({}, col), { currentWidth: width }) : col);
+            this.updateState({ columns });
+            this.columnResize.emit({ field, width });
+        };
+        // =========================================================================
+        // Resize Logic
+        // =========================================================================
+        this.resizeState = null;
+        this.startResize = (event, column) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.resizeState = {
+                column,
+                startX: event.clientX,
+                startWidth: column.currentWidth,
+            };
+            document.addEventListener('mousemove', this.onResize);
+            document.addEventListener('mouseup', this.stopResize);
+        };
+        this.onResize = (event) => {
+            if (!this.resizeState)
+                return;
+            const diff = event.clientX - this.resizeState.startX;
+            const newWidth = Math.max(this.resizeState.column.minWidth || 50, this.resizeState.startWidth + diff);
+            this.handleColumnResize(this.resizeState.column.field, newWidth);
+        };
+        this.stopResize = () => {
+            this.resizeState = null;
+            document.removeEventListener('mousemove', this.onResize);
+            document.removeEventListener('mouseup', this.stopResize);
+        };
+    }
+    // =========================================================================
+    // Lifecycle
+    // =========================================================================
+    componentWillLoad() {
+        this.initializeColumns();
+        this.state = Object.assign(Object.assign({}, this.state), { pageSize: this.pageSize });
+    }
+    componentDidLoad() {
+        this.loadData();
+        this.setupVirtualScroll();
+    }
+    disconnectedCallback() {
+        this.cleanupVirtualScroll();
+    }
+    // =========================================================================
+    // Watchers
+    // =========================================================================
+    columnsChanged() {
+        this.initializeColumns();
+    }
+    pageSizeChanged(newValue) {
+        this.updateState({ pageSize: newValue, page: 0 });
+        this.loadData();
+    }
+    // =========================================================================
+    // Public Methods
+    // =========================================================================
+    /** Get currently selected row objects */
+    async getSelectedRows() {
+        return this.state.rows.filter(row => this.state.selectedKeys.has(String(row[this.rowKey])));
+    }
+    /** Get currently selected row keys */
+    async getSelectedKeys() {
+        return Array.from(this.state.selectedKeys);
+    }
+    /** Select rows by keys */
+    async selectRows(keys) {
+        const newSelected = new Set(this.state.selectedKeys);
+        keys.forEach(key => newSelected.add(key));
+        this.updateSelection(newSelected);
+    }
+    /** Select all rows on current page */
+    async selectAll() {
+        const newSelected = new Set(this.state.selectedKeys);
+        this.state.rows.forEach(row => {
+            newSelected.add(String(row[this.rowKey]));
+        });
+        this.updateSelection(newSelected);
+    }
+    /** Clear all selections */
+    async clearSelection() {
+        this.updateSelection(new Set());
+    }
+    /** Set a filter value */
+    async setFilter(field, value) {
+        const newFilters = Object.assign(Object.assign({}, this.state.filters), { [field]: value });
+        this.updateState({ filters: newFilters, page: 0 });
+        this.filterChange.emit({ filters: newFilters });
+        this.loadData();
+    }
+    /** Clear a specific filter */
+    async clearFilter(field) {
+        const newFilters = Object.assign({}, this.state.filters);
+        delete newFilters[field];
+        this.updateState({ filters: newFilters, page: 0 });
+        this.filterChange.emit({ filters: newFilters });
+        this.loadData();
+    }
+    /** Clear all filters */
+    async clearAllFilters() {
+        this.updateState({ filters: {}, page: 0 });
+        this.filterChange.emit({ filters: {} });
+        this.loadData();
+    }
+    /** Get current filter state */
+    async getFilters() {
+        return Object.assign({}, this.state.filters);
+    }
+    /** Refresh data */
+    async refresh() {
+        await this.loadData();
+    }
+    // =========================================================================
+    // Private Methods
+    // =========================================================================
+    parseColumns() {
+        if (typeof this.columns === 'string') {
+            try {
+                return JSON.parse(this.columns);
+            }
+            catch (_a) {
+                console.warn('[seki-data-table] Invalid columns JSON');
+                return [];
+            }
+        }
+        return this.columns;
+    }
+    parsePageSizeOptions() {
+        if (typeof this.pageSizeOptions === 'string') {
+            try {
+                return JSON.parse(this.pageSizeOptions);
+            }
+            catch (_a) {
+                return [25, 50, 100];
+            }
+        }
+        return this.pageSizeOptions;
+    }
+    initializeColumns() {
+        const defs = this.parseColumns();
+        const columns = defs.map((def, index) => (Object.assign(Object.assign({}, def), { currentWidth: def.width || 150, visible: !def.hidden, orderIndex: index })));
+        this.updateState({ columns });
+    }
+    updateState(partial) {
+        this.state = Object.assign(Object.assign({}, this.state), partial);
+    }
+    updateSelection(newSelected) {
+        this.updateState({ selectedKeys: newSelected });
+        const selectedRows = this.state.rows.filter(row => newSelected.has(String(row[this.rowKey])));
+        this.selectionChange.emit({
+            selected: Array.from(newSelected),
+            rows: selectedRows,
+        });
+    }
+    // =========================================================================
+    // Virtual Scroll Methods
+    // =========================================================================
+    setupVirtualScroll() {
+        if (!this.virtualScroll)
+            return;
+        // Set up resize observer to track viewport height
+        if (typeof ResizeObserver !== 'undefined' && this.scrollContainerRef) {
+            this.resizeObserver = new ResizeObserver(entries => {
+                var _a;
+                for (const entry of entries) {
+                    this.viewportHeight = entry.contentRect.height;
+                    this.updateVirtualScrollState(((_a = this.scrollContainerRef) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0);
+                }
+            });
+            this.resizeObserver.observe(this.scrollContainerRef);
+        }
+        // Initial calculation
+        this.updateVirtualScrollState(0);
+    }
+    cleanupVirtualScroll() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = undefined;
+        }
+    }
+    updateVirtualScrollState(scrollTop) {
+        const result = calculateVirtualScroll({
+            totalRows: this.state.rows.length,
+            rowHeight: this.rowHeight,
+            viewportHeight: this.viewportHeight,
+            scrollTop,
+            bufferSize: this.bufferSize,
+        });
+        this.virtualScrollState = result;
+    }
+    getVirtualizedRows() {
+        if (!this.virtualScroll) {
+            return this.state.rows;
+        }
+        return this.state.rows.slice(this.virtualScrollState.startIndex, this.virtualScrollState.endIndex);
+    }
+    async loadData() {
+        var _a;
+        if (!this.fetchData) {
+            return;
+        }
+        this.updateState({ loading: true });
+        const request = {
+            page: this.state.page,
+            pageSize: this.state.pageSize,
+            sort: this.state.sort,
+            filters: this.state.filters,
+            search: this.state.search || undefined,
+        };
+        try {
+            const response = await this.fetchData(request);
+            this.updateState({
+                rows: response.rows,
+                totalRows: response.totalRows,
+                loading: false,
+            });
+            // Recalculate virtual scroll after data loads
+            if (this.virtualScroll) {
+                this.updateVirtualScrollState(((_a = this.scrollContainerRef) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0);
+            }
+        }
+        catch (error) {
+            console.error('[seki-data-table] Error fetching data:', error);
+            this.updateState({ loading: false });
+        }
+    }
+    // =========================================================================
+    // Render Helpers
+    // =========================================================================
+    getVisibleColumns() {
+        return this.state.columns
+            .filter(col => col.visible)
+            .sort((a, b) => a.orderIndex - b.orderIndex);
+    }
+    getTotalPages() {
+        return Math.ceil(this.state.totalRows / this.state.pageSize);
+    }
+    isAllSelected() {
+        if (this.state.rows.length === 0)
+            return false;
+        return this.state.rows.every(row => this.state.selectedKeys.has(String(row[this.rowKey])));
+    }
+    isSomeSelected() {
+        if (this.state.rows.length === 0)
+            return false;
+        const selectedCount = this.state.rows.filter(row => this.state.selectedKeys.has(String(row[this.rowKey]))).length;
+        return selectedCount > 0 && selectedCount < this.state.rows.length;
+    }
+    // =========================================================================
+    // Render
+    // =========================================================================
+    render() {
+        const visibleColumns = this.getVisibleColumns();
+        const totalPages = this.getTotalPages();
+        const isLoading = this.state.loading || this.loading;
+        return (h(Host, { key: 'a69680cac7f699629a80ab0b1da7a81c347b7ed0' }, h("div", { key: '14e355e8fdf5ce6b01dbd5767e454d8da94bc551', class: "data-table" }, (this.searchable || this.columnPicker) && (h("div", { key: '0c4b576cc77dc3d1c5eca6b6bbb8f318cc36ffa7', class: "data-table__toolbar" }, this.searchable && (h("div", { key: 'f126e3c54c9602522cb43664f013f2f9b086630f', class: "data-table__search" }, h("input", { key: 'ea10b08598bdc3edbe363f3acd454d2698a72d04', type: "text", class: "data-table__search-input", placeholder: this.searchPlaceholder, value: this.searchInputValue, onInput: this.handleSearchInput }), this.searchInputValue && (h("button", { key: 'eb87f580071bf96dd46a079676dbb00809bcd9cd', type: "button", class: "data-table__search-clear", onClick: this.handleClearSearch, "aria-label": "Clear search" }, "\u00D7")))), h("div", { key: '89ddc790e51f837bcedc3a51d061867d58356a6e', class: "data-table__toolbar-spacer" }), this.columnPicker && (h("button", { key: '6a2b72a55939f75fac6725fcfb79d960328f5953', type: "button", class: "data-table__column-picker-btn" }, "Columns")))), h("div", { key: '279928a0bd930a8b22869050034afe6e42e284ef', class: {
+                'data-table__container': true,
+                'data-table__container--virtual': this.virtualScroll,
+            }, ref: el => (this.scrollContainerRef = el), onScroll: this.handleScroll }, h("table", { key: '08ba0d430fb3da37e81cbb5e4772bb31e78080da', class: "data-table__table", role: "grid" }, h("thead", { key: '2117a01f12a6218649f872bad9135b1b5f387679', class: "data-table__head" }, h("tr", { key: '5f666c21098904c6658cb87b4eac45add757d37d', class: "data-table__header-row", role: "row" }, this.selectable && (h("th", { key: '25ef99004b4c62e50360cb776bab725752a926b8', class: "data-table__th data-table__th--checkbox", role: "columnheader" }, h("input", { key: 'dbc92148c5fee598a6236c86ca396e2923f15168', type: "checkbox", class: "data-table__checkbox", checked: this.isAllSelected(), indeterminate: this.isSomeSelected(), onChange: (e) => this.handleSelectAll(e.target.checked), "aria-label": "Select all rows" }))), this.expandable && (h("th", { key: 'f9e869cf26a31ae5a213c85b55afd0d6ba0e25b0', class: "data-table__th data-table__th--expand", role: "columnheader" }, h("span", { key: 'b57056877e9844b99e04f12306931530c09f07c1', class: "sr-only" }, "Expand"))), visibleColumns.map(column => {
+            var _a, _b, _c;
+            return (h("th", { key: column.field, class: {
+                    'data-table__th': true,
+                    'data-table__th--sortable': !!column.sortable,
+                    'data-table__th--sorted': ((_a = this.state.sort) === null || _a === void 0 ? void 0 : _a.field) === column.field,
+                    [`data-table__th--align-${column.align || 'left'}`]: true,
+                }, style: { width: `${column.currentWidth}px` }, role: "columnheader", "aria-sort": ((_b = this.state.sort) === null || _b === void 0 ? void 0 : _b.field) === column.field
+                    ? this.state.sort.direction === 'asc'
+                        ? 'ascending'
+                        : 'descending'
+                    : undefined, onClick: () => column.sortable && this.handleSort(column.field) }, h("div", { class: "data-table__th-content" }, h("span", { class: "data-table__th-label" }, column.header), column.sortable && (h("span", { class: "data-table__sort-icon" }, ((_c = this.state.sort) === null || _c === void 0 ? void 0 : _c.field) === column.field
+                ? this.state.sort.direction === 'asc'
+                    ? '↑'
+                    : '↓'
+                : '↕'))), column.resizable && (h("div", { class: "data-table__resize-handle", onMouseDown: (e) => this.startResize(e, column) }))));
+        }))), h("tbody", { key: '7778cf9f92a090a1a589611563332255740bb679', class: "data-table__body", style: this.virtualScroll
+                ? {
+                    height: `${this.virtualScrollState.totalHeight}px`,
+                    position: 'relative',
+                }
+                : undefined }, isLoading && this.state.rows.length === 0 ? (h("tr", { class: "data-table__row data-table__row--loading" }, h("td", { class: "data-table__td data-table__td--loading", colSpan: visibleColumns.length + (this.selectable ? 1 : 0) + (this.expandable ? 1 : 0) }, h("div", { class: "data-table__loading" }, "Loading...")))) : this.state.rows.length === 0 ? (h("tr", { class: "data-table__row data-table__row--empty" }, h("td", { class: "data-table__td data-table__td--empty", colSpan: visibleColumns.length + (this.selectable ? 1 : 0) + (this.expandable ? 1 : 0) }, h("div", { class: "data-table__empty" }, this.emptyMessage)))) : (this.getVirtualizedRows().map((row, virtualIndex) => {
+            const rowKey = String(row[this.rowKey]);
+            const isSelected = this.state.selectedKeys.has(rowKey);
+            const isExpanded = this.state.expandedKeys.has(rowKey);
+            // Calculate row position for virtualization
+            const rowTop = this.virtualScroll
+                ? (this.virtualScrollState.startIndex + virtualIndex) * this.rowHeight
+                : undefined;
+            return [
+                h("tr", { key: rowKey, class: {
+                        'data-table__row': true,
+                        'data-table__row--selected': isSelected,
+                        'data-table__row--expanded': isExpanded,
+                        'data-table__row--virtual': this.virtualScroll,
+                    }, style: this.virtualScroll
+                        ? {
+                            position: 'absolute',
+                            top: `${rowTop}px`,
+                            left: '0',
+                            right: '0',
+                            height: `${this.rowHeight}px`,
+                        }
+                        : undefined, role: "row", "aria-selected": this.selectable ? isSelected : undefined, onClick: () => this.handleRowClick(row) }, this.selectable && (h("td", { class: "data-table__td data-table__td--checkbox", role: "gridcell" }, h("input", { type: "checkbox", class: "data-table__checkbox", checked: isSelected, onChange: (e) => {
+                        e.stopPropagation();
+                        this.handleRowSelect(rowKey, e.target.checked);
+                    }, onClick: (e) => e.stopPropagation(), "aria-label": `Select row ${rowKey}` }))), this.expandable && (h("td", { class: "data-table__td data-table__td--expand", role: "gridcell" }, h("button", { type: "button", class: "data-table__expand-btn", "aria-expanded": isExpanded, "aria-label": isExpanded ? 'Collapse row' : 'Expand row', onClick: (e) => {
+                        e.stopPropagation();
+                        this.handleRowExpand(rowKey);
+                    } }, isExpanded ? '▼' : '▶'))), visibleColumns.map(column => {
+                    var _a;
+                    return (h("td", { key: column.field, class: {
+                            'data-table__td': true,
+                            [`data-table__td--align-${column.align || 'left'}`]: true,
+                        }, role: "gridcell" }, String((_a = row[column.field]) !== null && _a !== void 0 ? _a : '')));
+                })),
+                /* Expanded content row */
+                isExpanded && this.renderExpandedRow && (h("tr", { key: `${rowKey}-expanded`, class: "data-table__row data-table__row--expanded-content" }, h("td", { class: "data-table__td data-table__td--expanded-content", colSpan: visibleColumns.length + (this.selectable ? 1 : 0) + (this.expandable ? 1 : 0) }, h("div", { class: "data-table__expanded-content", innerHTML: this.renderExpandedRow(row) })))),
+            ];
+        })))), isLoading && this.state.rows.length > 0 && (h("div", { key: '817d6b7af916808bb6c20d94cc04a7bfc360c75a', class: "data-table__loading-overlay" }, h("div", { key: '3463dec1699102af62d670e72b70ea53fe3dccf0', class: "data-table__loading" }, "Loading...")))), h("div", { key: 'd6d7bd9f4fdf31e6c49875860774e2c64114f5eb', class: "data-table__pagination" }, h("div", { key: '7ca4d9c5921ac8406ff94a0d28fdaab8c3827bc8', class: "data-table__pagination-info" }, this.state.totalRows > 0
+            ? `${this.state.page * this.state.pageSize + 1}-${Math.min((this.state.page + 1) * this.state.pageSize, this.state.totalRows)} of ${this.state.totalRows}`
+            : '0 results'), h("div", { key: '5b57ae1848649777f418d205d2636f09f6c9c939', class: "data-table__pagination-controls" }, h("select", { key: 'dd1f916e439c39a53a0d00583803bd0787e3658f', class: "data-table__page-size", onChange: (e) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.handlePageSizeChange(Number(e.target.value));
+            } }, this.parsePageSizeOptions().map(size => (h("option", { key: size, value: size, selected: size === this.state.pageSize }, size, " / page")))), h("button", { key: 'acea1fdcbc2e9f38e42e3ab2d49c78289341250e', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(0), "aria-label": "First page" }, "\u00AB\u00AB"), h("button", { key: '458c29eda3718a376ec9d3064d8efb0035282d48', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(this.state.page - 1), "aria-label": "Previous page" }, "\u00AB"), h("span", { key: '48d59e538c0a7e26142500c71dd0bbd36b41c19e', class: "data-table__page-indicator" }, "Page ", this.state.page + 1, " of ", totalPages || 1), h("button", { key: '1018c98a98c7d87521d18c6b3336c786054bec43', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(this.state.page + 1), "aria-label": "Next page" }, "\u00BB"), h("button", { key: '6940966e1e8bd02c0bafe1f078b91514ccdb1f4a', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(totalPages - 1), "aria-label": "Last page" }, "\u00BB\u00BB"))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "columns": ["columnsChanged"],
+        "pageSize": ["pageSizeChanged"]
+    }; }
+    static get style() { return sekiDataTableCss; }
+}, [257, "seki-data-table", {
+        "columns": [1],
+        "rowKey": [1, "row-key"],
+        "selectable": [4],
+        "expandable": [4],
+        "multiExpand": [4, "multi-expand"],
+        "searchable": [4],
+        "searchPlaceholder": [1, "search-placeholder"],
+        "searchDebounce": [2, "search-debounce"],
+        "searchFields": [1, "search-fields"],
+        "columnPicker": [4, "column-picker"],
+        "pageSize": [2, "page-size"],
+        "pageSizeOptions": [1, "page-size-options"],
+        "virtualScroll": [4, "virtual-scroll"],
+        "rowHeight": [2, "row-height"],
+        "bufferSize": [2, "buffer-size"],
+        "loading": [4],
+        "emptyMessage": [1, "empty-message"],
+        "state": [32],
+        "searchInputValue": [32],
+        "virtualScrollState": [32],
+        "viewportHeight": [32],
+        "getSelectedRows": [64],
+        "getSelectedKeys": [64],
+        "selectRows": [64],
+        "selectAll": [64],
+        "clearSelection": [64],
+        "setFilter": [64],
+        "clearFilter": [64],
+        "clearAllFilters": [64],
+        "getFilters": [64],
+        "refresh": [64]
+    }, undefined, {
+        "columns": ["columnsChanged"],
+        "pageSize": ["pageSizeChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["seki-data-table"];
+    components.forEach(tagName => { switch (tagName) {
+        case "seki-data-table":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SekiDataTable$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SekiDataTable = SekiDataTable$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SekiDataTable, defineCustomElement };