sp-component 0.0.1 → 0.0.3

package/dist/components/stepper/sp-stepper.css.js

@@ -1,4 +1,4 @@
-const e = ':host{display:block}.sp-stepper{display:flex;align-items:flex-start}:host([orientation="vertical"]) .sp-stepper{flex-direction:column}.sp-step{display:flex;align-items:center;flex:1;position:relative}:host([orientation="vertical"]) .sp-step{flex-direction:column;align-items:flex-start;flex:none;width:100%;padding-bottom:24px}.sp-step-indicator{width:32px;height:32px;border-radius:50%;border:2px solid var(--sp-border, #d1d5db);background:var(--sp-bg, white);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--sp-text-muted, #6b7280);flex-shrink:0;z-index:1;transition:all .2s}.sp-step--complete .sp-step-indicator{background:var(--sp-primary, #3b82f6);border-color:var(--sp-primary, #3b82f6);color:var(--sp-bg, white)}.sp-step--current .sp-step-indicator{border-color:var(--sp-primary, #3b82f6);color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 3px var(--sp-primary-focus, rgba(59, 130, 246, .2))}.sp-step--error .sp-step-indicator{border-color:var(--sp-error, #FF4D4F);color:var(--sp-error, #FF4D4F)}.sp-step-connector{flex:1;height:2px;background:var(--sp-border-subtle, #e5e7eb);margin:0 8px}:host([orientation="vertical"]) .sp-step-connector{width:2px;height:24px;margin:4px 0;position:absolute;left:15px;top:32px}.sp-step--complete+.sp-step .sp-step-connector,.sp-step--complete .sp-step-connector{background:var(--sp-primary, #3b82f6)}.sp-step-content{display:flex;flex-direction:column;gap:2px;padding:0 8px}:host([orientation="vertical"]) .sp-step-content{position:absolute;left:44px;top:4px}.sp-step-label{font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);white-space:nowrap}.sp-step--current .sp-step-label{color:var(--sp-primary, #3b82f6)}.sp-step--upcoming .sp-step-label{color:var(--sp-text-placeholder, #9ca3af)}.sp-step--error .sp-step-label{color:var(--sp-error, #FF4D4F)}.sp-step-description{font-size:12px;color:var(--sp-text-placeholder, #9ca3af);white-space:nowrap}.sp-step-indicator:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host{transition:none!important}button,a,[role=button],.sp-step-indicator{transition:none!important}}';
+const e = '*,*:before,*:after{box-sizing:border-box}:host{display:block}.sp-stepper{display:flex;align-items:flex-start}:host([orientation="vertical"]) .sp-stepper{flex-direction:column}.sp-step{display:flex;align-items:center;flex:1;position:relative}:host([orientation="vertical"]) .sp-step{flex-direction:column;align-items:flex-start;flex:none;width:100%;padding-bottom:24px}.sp-step-indicator{width:32px;height:32px;border-radius:50%;border:2px solid var(--sp-border, #d1d5db);background:var(--sp-bg, white);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--sp-text-muted, #6b7280);flex-shrink:0;z-index:1;transition:all .2s}.sp-step--complete .sp-step-indicator{background:var(--sp-primary, #3b82f6);border-color:var(--sp-primary, #3b82f6);color:var(--sp-bg, white)}.sp-step--current .sp-step-indicator{border-color:var(--sp-primary, #3b82f6);color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 3px var(--sp-primary-focus, rgba(59, 130, 246, .2))}.sp-step--error .sp-step-indicator{border-color:var(--sp-error, #FF4D4F);color:var(--sp-error, #FF4D4F)}.sp-step-connector{flex:1;height:2px;background:var(--sp-border-subtle, #e5e7eb);margin:0 8px}:host([orientation="vertical"]) .sp-step-connector{width:2px;height:24px;margin:4px 0;position:absolute;left:15px;top:32px}.sp-step--complete+.sp-step .sp-step-connector,.sp-step--complete .sp-step-connector{background:var(--sp-primary, #3b82f6)}.sp-step-content{display:flex;flex-direction:column;gap:2px;padding:0 8px}:host([orientation="vertical"]) .sp-step-content{position:absolute;left:44px;top:4px}.sp-step-label{font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);white-space:nowrap}.sp-step--current .sp-step-label{color:var(--sp-primary, #3b82f6)}.sp-step--upcoming .sp-step-label{color:var(--sp-text-placeholder, #9ca3af)}.sp-step--error .sp-step-label{color:var(--sp-error, #FF4D4F)}.sp-step-description{font-size:12px;color:var(--sp-text-placeholder, #9ca3af);white-space:nowrap}.sp-step-indicator:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host{transition:none!important}button,a,[role=button],.sp-step-indicator{transition:none!important}}';
 export {
   e as default
 };

package/dist/components/switch/sp-switch.css.js

@@ -1,4 +1,4 @@
-const t = ':host{display:inline-block}.sp-switch-label{display:inline-flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.sp-switch-label--disabled{opacity:.5;cursor:not-allowed}.sp-switch-track{position:relative;display:inline-flex;align-items:center;width:44px;height:24px;border-radius:12px;background:var(--sp-border, #d1d5db);transition:background .2s;flex-shrink:0}.sp-switch-track input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:inherit;border-radius:inherit}.sp-switch-track--checked{background:var(--sp-primary, #3b82f6)}.sp-switch-thumb{position:absolute;left:2px;width:20px;height:20px;border-radius:50%;background:var(--sp-bg, white);box-shadow:0 1px 3px #0003;transition:transform .2s;pointer-events:none}.sp-switch-track--checked .sp-switch-thumb{transform:translate(20px)}.sp-switch-track:has(input:focus-visible){outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}:host([size="sm"]) .sp-switch-track{width:34px;height:18px;border-radius:9px}:host([size="sm"]) .sp-switch-thumb{width:14px;height:14px}:host([size="sm"]) .sp-switch-track--checked .sp-switch-thumb{transform:translate(16px)}:host([size="lg"]) .sp-switch-track{width:54px;height:30px;border-radius:15px}:host([size="lg"]) .sp-switch-thumb{width:26px;height:26px}:host([size="lg"]) .sp-switch-track--checked .sp-switch-thumb{transform:translate(24px)}.sp-switch-text{font-size:14px;color:var(--sp-text-secondary, #374151)}.sp-switch-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}@media(prefers-reduced-motion:reduce){.sp-switch-track,.sp-switch-thumb{transition:none}}';
+const t = '*,*:before,*:after{box-sizing:border-box}:host{display:inline-block}.sp-switch-label{display:inline-flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.sp-switch-label--disabled{opacity:.5;cursor:not-allowed}.sp-switch-track{position:relative;display:inline-flex;align-items:center;width:44px;height:24px;border-radius:12px;background:var(--sp-border, #d1d5db);transition:background .2s;flex-shrink:0}.sp-switch-track input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:inherit;border-radius:inherit}.sp-switch-track--checked{background:var(--sp-primary, #3b82f6)}.sp-switch-thumb{position:absolute;left:2px;width:20px;height:20px;border-radius:50%;background:var(--sp-bg, white);box-shadow:0 1px 3px #0003;transition:transform .2s;pointer-events:none}.sp-switch-track--checked .sp-switch-thumb{transform:translate(20px)}.sp-switch-track:has(input:focus-visible){outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}:host([size="sm"]) .sp-switch-track{width:34px;height:18px;border-radius:9px}:host([size="sm"]) .sp-switch-thumb{width:14px;height:14px}:host([size="sm"]) .sp-switch-track--checked .sp-switch-thumb{transform:translate(16px)}:host([size="lg"]) .sp-switch-track{width:54px;height:30px;border-radius:15px}:host([size="lg"]) .sp-switch-thumb{width:26px;height:26px}:host([size="lg"]) .sp-switch-track--checked .sp-switch-thumb{transform:translate(24px)}.sp-switch-text{font-size:14px;color:var(--sp-text-secondary, #374151)}.sp-switch-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}@media(prefers-reduced-motion:reduce){.sp-switch-track,.sp-switch-thumb{transition:none}}';
 export {
   t as default
 };

package/dist/components/table/sp-table.css.js

@@ -1,4 +1,4 @@
-const e = ":host{display:block}.sp-table-wrapper{width:100%;overflow-x:auto;border-radius:8px}.sp-table{width:100%;border-collapse:collapse;font-size:14px}:host([bordered]) .sp-table-wrapper{border:1px solid var(--sp-border-subtle, #e5e7eb)}.sp-table-th{padding:12px 16px;text-align:left;font-size:12px;font-weight:600;color:var(--sp-text-muted, #6b7280);text-transform:uppercase;letter-spacing:.05em;background:var(--sp-bg-subtle, #f9fafb);border-bottom:1px solid var(--sp-border-subtle, #e5e7eb);white-space:nowrap}:host([compact]) .sp-table-th{padding:8px 12px}.sp-table-th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sp-table-th--sortable:hover{background:var(--sp-bg-muted, #f3f4f6)}.sp-table-th-content{display:flex;align-items:center;gap:6px}.sp-table-sort-icon{color:var(--sp-text-placeholder, #9ca3af);font-size:12px}.sp-table-th--sorted .sp-table-sort-icon{color:var(--sp-primary, #3b82f6)}.sp-table-td{padding:12px 16px;color:var(--sp-text-secondary, #374151);border-bottom:1px solid var(--sp-bg-muted, #f3f4f6)}:host([compact]) .sp-table-td{padding:8px 12px}:host([bordered]) .sp-table-th,:host([bordered]) .sp-table-td{border:1px solid var(--sp-border-subtle, #e5e7eb)}.sp-table-row--striped{background:var(--sp-bg-subtle, #f9fafb)}:host([hoverable]) .sp-table-row:hover{background:var(--sp-bg-muted, #f3f4f6)}.sp-table-empty{text-align:center;padding:32px;color:var(--sp-text-placeholder, #9ca3af);font-size:14px}.sp-table-loading{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--sp-text-muted, #6b7280)}.sp-table-th--sortable:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:-2px}.sp-table-th--sticky{position:sticky;top:0;z-index:1;background:var(--sp-table-header-bg, var(--sp-bg-subtle, #f9fafb))}.sp-table-caption{caption-side:top;padding:8px 16px;text-align:left;font-size:14px;font-weight:600;color:var(--sp-text-secondary, #374151)}.sp-table-th--checkbox,.sp-table-td--checkbox{width:40px;padding:12px 8px;text-align:center}.sp-table-row--selected{background:var(--sp-primary-bg, #eff6ff)}:host([hoverable]) .sp-table-row--selected:hover{background:var(--sp-primary-bg-hover, #dbeafe)}@media(prefers-reduced-motion:reduce){:host{transition:none!important}button,a,[role=button]{transition:none!important}}";
+const e = `*,*:before,*:after{box-sizing:border-box}:host{display:block}.sp-table-toolbar{display:flex;align-items:center;gap:10px;padding:10px 0 12px;flex-wrap:wrap}.sp-table-search{position:relative;display:flex;align-items:center;flex:1;min-width:180px;max-width:360px}.sp-table-search-icon{position:absolute;left:10px;color:var(--sp-text-muted, #9ca3af);display:flex;align-items:center;pointer-events:none}.sp-table-search-input{width:100%;padding:7px 32px;font-size:13px;font-family:inherit;background:var(--sp-bg, #fff);color:var(--sp-text, #111827);border:1px solid var(--sp-border, #d1d5db);border-radius:8px;outline:none;transition:border-color .15s,box-shadow .15s}.sp-table-search-input::placeholder{color:var(--sp-text-muted, #9ca3af)}.sp-table-search-input:focus{border-color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 3px var(--sp-primary-focus, rgba(59,130,246,.2))}.sp-table-search-clear{position:absolute;right:8px;background:none;border:none;cursor:pointer;color:var(--sp-text-muted, #9ca3af);font-size:12px;padding:2px;border-radius:3px;line-height:1}.sp-table-search-clear:hover{color:var(--sp-text, #111827)}.sp-table-toolbar-end{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}.sp-table-count{font-size:12px;color:var(--sp-text-muted, #6b7280);white-space:nowrap}.sp-table-chip-clear{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;font-size:12px;font-family:inherit;background:var(--sp-error-bg, #fff2f0);color:var(--sp-error, #ef4444);border:1px solid var(--sp-error, #ef4444);border-radius:99px;cursor:pointer;white-space:nowrap;transition:background .15s}.sp-table-chip-clear:hover{background:var(--sp-error-bg-hover, #ffccc7)}.sp-table-icon-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;font-size:12px;font-family:inherit;background:var(--sp-bg, #fff);color:var(--sp-text-secondary, #374151);border:1px solid var(--sp-border, #d1d5db);border-radius:7px;cursor:pointer;white-space:nowrap;transition:background .15s}.sp-table-icon-btn:hover{background:var(--sp-bg-muted, #f3f4f6)}.sp-table-col-picker-wrap{position:relative}.sp-table-col-picker{position:absolute;right:0;top:calc(100% + 6px);background:var(--sp-bg, #fff);border:1px solid var(--sp-border, #d1d5db);border-radius:10px;box-shadow:var(--sp-shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1));padding:8px 4px;min-width:180px;z-index:100}.sp-table-col-picker-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--sp-text-muted, #6b7280);padding:4px 12px 8px;border-bottom:1px solid var(--sp-border-subtle, #e5e7eb);margin-bottom:4px}.sp-table-col-picker-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:13px;color:var(--sp-text-secondary, #374151);cursor:pointer;border-radius:6px;margin:0 4px;transition:background .1s}.sp-table-col-picker-item:hover{background:var(--sp-bg-muted, #f3f4f6)}.sp-table-col-picker-item input{cursor:pointer;accent-color:var(--sp-primary, #3b82f6)}.sp-table-page-size{display:flex;align-items:center;gap:6px;white-space:nowrap}.sp-table-page-size-label{font-size:12px;color:var(--sp-text-muted, #6b7280)}.sp-table-page-size-select{padding:4px 24px 4px 8px;font-size:12px;font-family:inherit;background:var(--sp-bg, #fff);color:var(--sp-text-secondary, #374151);border:1px solid var(--sp-border, #d1d5db);border-radius:6px;cursor:pointer;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;transition:border-color .15s}.sp-table-page-size-select:focus{border-color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 3px var(--sp-primary-focus, rgba(59,130,246,.2))}.sp-table-wrapper{width:100%;overflow-x:auto;border-radius:10px;border:1px solid var(--sp-border-subtle, #e5e7eb)}:host([bordered]) .sp-table-wrapper{border:1px solid var(--sp-border, #d1d5db)}.sp-table{width:100%;border-collapse:collapse;font-size:14px}.sp-table-th{padding:11px 16px;text-align:left;font-size:12px;font-weight:600;color:var(--sp-text-muted, #6b7280);text-transform:uppercase;letter-spacing:.05em;background:var(--sp-bg-subtle, #f9fafb);border-bottom:1px solid var(--sp-border-subtle, #e5e7eb);white-space:nowrap;position:relative;transition:background .12s}:host([compact]) .sp-table-th{padding:7px 12px}.sp-table-th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sp-table-th--sortable:hover{background:var(--sp-bg-muted, #f3f4f6)}.sp-table-th--sortable:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:-2px}.sp-table-th--reorderable,.sp-table-th--reorderable.sp-table-th--sortable{cursor:grab}.sp-table-th--dragging{opacity:.5}.sp-table-th--dragover{background:var(--sp-primary-bg, #eff6ff)!important;border-left:2px solid var(--sp-primary, #3b82f6)}.sp-table-th--sticky{position:sticky;top:0;z-index:2;background:var(--sp-bg-subtle, #f9fafb)}.sp-table-th-content{display:flex;align-items:center;gap:6px}.sp-table-drag-handle{color:var(--sp-border-strong, #9ca3af);font-size:12px;cursor:grab;line-height:1;flex-shrink:0;letter-spacing:-2px}.sp-table-sort-icon{color:var(--sp-text-placeholder, #9ca3af);font-size:12px;flex-shrink:0}.sp-table-th--sorted .sp-table-sort-icon{color:var(--sp-primary, #3b82f6)}.sp-table-filter-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;background:none;border:none;border-radius:4px;cursor:pointer;color:var(--sp-text-placeholder, #9ca3af);padding:0;transition:color .12s,background .12s}.sp-table-filter-icon-btn:hover{color:var(--sp-text-secondary, #374151);background:var(--sp-bg-muted, #f3f4f6)}.sp-table-filter-icon-btn--active{color:var(--sp-primary, #3b82f6)}.sp-table-filter-icon-btn--active:hover{background:var(--sp-primary-bg, #eff6ff)}.sp-table-col-filter-pop{position:absolute;top:calc(100% + 4px);left:0;min-width:200px;background:var(--sp-bg, #fff);border:1px solid var(--sp-border, #d1d5db);border-radius:10px;box-shadow:var(--sp-shadow-lg, 0 10px 15px -3px rgba(0,0,0,.12), 0 4px 6px -2px rgba(0,0,0,.06));padding:10px;z-index:60}.sp-table-col-filter-pop-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--sp-text-muted, #6b7280);margin-bottom:8px}.sp-table-col-filter-pop-row{display:flex;align-items:center;gap:6px}.sp-table-col-filter-pop-input{flex:1;padding:6px 10px;font-size:13px;font-family:inherit;background:var(--sp-bg-subtle, #f9fafb);color:var(--sp-text, #111827);border:1px solid var(--sp-border, #d1d5db);border-radius:7px;outline:none;transition:border-color .15s,box-shadow .15s}.sp-table-col-filter-pop-input::placeholder{color:var(--sp-text-muted, #9ca3af)}.sp-table-col-filter-pop-input:focus{border-color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 3px var(--sp-primary-focus, rgba(59,130,246,.2));background:var(--sp-bg, #fff)}.sp-table-col-filter-pop-clear{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;background:none;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;cursor:pointer;color:var(--sp-text-muted, #9ca3af);font-size:11px;transition:color .12s,background .12s,border-color .12s}.sp-table-col-filter-pop-clear:hover{color:var(--sp-error, #ef4444);border-color:var(--sp-error, #ef4444);background:var(--sp-error-bg, #fff2f0)}.sp-table-td{padding:12px 16px;color:var(--sp-text-secondary, #374151);border-bottom:1px solid var(--sp-bg-muted, #f3f4f6);vertical-align:middle}:host([compact]) .sp-table-td{padding:8px 12px}:host([bordered]) .sp-table-th,:host([bordered]) .sp-table-td{border:1px solid var(--sp-border-subtle, #e5e7eb)}.sp-table-row--striped{background:var(--sp-bg-subtle, #f9fafb)}:host([hoverable]) .sp-table-row:hover{background:var(--sp-bg-muted, #f3f4f6)}.sp-table-row--selected{background:var(--sp-primary-bg, #eff6ff)!important}:host([hoverable]) .sp-table-row--selected:hover{background:var(--sp-primary-bg-hover, #dbeafe)!important}.sp-table-th--checkbox,.sp-table-td--checkbox{width:40px;padding:12px 8px;text-align:center}.sp-table-th--actions{width:1%;white-space:nowrap}.sp-table-td--actions{white-space:nowrap}.sp-table-actions{display:flex;align-items:center;gap:4px}.sp-table-action-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;font-size:12px;font-family:inherit;border-radius:6px;border:none;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s;font-weight:500}.sp-table-action-btn--ghost{background:transparent;color:var(--sp-text-secondary, #374151)}.sp-table-action-btn--ghost:hover{background:var(--sp-bg-muted, #f3f4f6)}.sp-table-action-btn--primary{background:var(--sp-primary-bg, #eff6ff);color:var(--sp-primary, #3b82f6)}.sp-table-action-btn--primary:hover{background:var(--sp-primary-bg-hover, #dbeafe)}.sp-table-action-btn--secondary{background:var(--sp-bg-muted, #f3f4f6);color:var(--sp-text-secondary, #374151);border:1px solid var(--sp-border, #d1d5db)}.sp-table-action-btn--secondary:hover{background:var(--sp-bg, #fff)}.sp-table-action-btn--destructive{background:var(--sp-error-bg, #fff2f0);color:var(--sp-error, #ef4444)}.sp-table-action-btn--destructive:hover{background:var(--sp-error-bg-hover, #ffccc7)}.sp-table-empty{text-align:center;padding:40px 20px;color:var(--sp-text-placeholder, #9ca3af);font-size:14px}.sp-table-empty-inner{display:flex;flex-direction:column;align-items:center;gap:10px}.sp-table-empty-inner .sp-table-chip-clear{margin-top:4px}.sp-table-loading{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--sp-text-muted, #6b7280)}.sp-table-caption{caption-side:top;padding:8px 16px;text-align:left;font-size:14px;font-weight:600;color:var(--sp-text-secondary, #374151)}.sp-table-pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 2px 2px;flex-wrap:wrap;gap:10px}.sp-table-page-info{font-size:13px;color:var(--sp-text-muted, #6b7280)}.sp-table-page-btns{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sp-table-page-btn{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;font-size:13px;font-family:inherit;background:var(--sp-bg, #fff);color:var(--sp-text-secondary, #374151);border:1px solid var(--sp-border, #d1d5db);border-radius:7px;cursor:pointer;transition:background .12s,border-color .12s,color .12s}.sp-table-page-btn:hover:not(:disabled){background:var(--sp-bg-muted, #f3f4f6);border-color:var(--sp-border-strong, #9ca3af)}.sp-table-page-btn:disabled{opacity:.4;cursor:not-allowed}.sp-table-page-btn--active{background:var(--sp-primary, #3b82f6)!important;color:#fff!important;border-color:var(--sp-primary, #3b82f6)!important;font-weight:700}.sp-table-page-ellipsis{padding:0 4px;font-size:13px;color:var(--sp-text-muted, #6b7280)}@keyframes sp-table-spin{to{transform:rotate(360deg)}}.sp-table-spin{animation:sp-table-spin .8s linear infinite;transform-origin:center}@media(prefers-reduced-motion:reduce){.sp-table-spin{animation:none}*{transition:none!important}}@media(max-width:600px){.sp-table-toolbar{gap:6px}.sp-table-search{max-width:100%}.sp-table-toolbar-end{margin-left:0}}`;
 export {
   e as default
 };

package/dist/components/table/sp-table.d.ts

@@ -1,26 +1,38 @@
 import { LitElement } from 'lit';
-import { SpTableColumn, SpTableSortDirection } from './sp-table.types.js';
+import { SpTableAction, SpTableColumn, SpTableSortDirection } from './sp-table.types.js';
 /**
- * Data table component with column definitions and row data array.
+ * Data table component with sorting, filtering, column reordering,
+ * column visibility, pagination, and row actions.
  *
  * @element sp-table
  *
- * @prop {SpTableColumn[]}              columns       - Column definitions
- * @prop {Record<string, unknown>[]}    data          - Row data
- * @prop {boolean}                      loading       - Shows loading state
- * @prop {boolean}                      bordered      - Adds borders to cells
- * @prop {boolean}                      striped       - Alternates row background
- * @prop {boolean}                      hoverable     - Highlights rows on hover
- * @prop {boolean}                      compact       - Reduces cell padding
- * @prop {string}                       emptyText     - Text shown when no data
- * @prop {string}                       sortKey       - Currently sorted column key
- * @prop {SpTableSortDirection}         sortDirection - Current sort direction
- * @prop {boolean}                      stickyHeader  - Makes the header sticky
- * @prop {boolean}                      selectable    - Enables row selection with checkboxes
- * @prop {string}                       caption       - Table caption text
+ * @prop {SpTableColumn[]}              columns          - Column definitions
+ * @prop {Record<string, unknown>[]}    data             - Row data
+ * @prop {boolean}                      loading          - Shows loading state
+ * @prop {boolean}                      bordered         - Adds borders to cells
+ * @prop {boolean}                      striped          - Alternates row background
+ * @prop {boolean}                      hoverable        - Highlights rows on hover
+ * @prop {boolean}                      compact          - Reduces cell padding
+ * @prop {string}                       emptyText        - Text shown when no data
+ * @prop {string}                       sortKey          - Currently sorted column key
+ * @prop {SpTableSortDirection}         sortDirection    - Current sort direction
+ * @prop {boolean}                      stickyHeader     - Makes the header sticky
+ * @prop {boolean}                      selectable       - Enables row selection with checkboxes
+ * @prop {string}                       caption          - Table caption text
+ * @prop {boolean}                      reorderable      - Allows drag-and-drop column reordering
+ * @prop {boolean}                      searchable       - Shows a global search toolbar
+ * @prop {number}                       pageSize         - Rows per page (0 = no pagination)
+ * @prop {number[]}                     pageSizeOptions  - Page size options for the selector
+ * @prop {SpTableAction[]}              actions          - Per-row action buttons
+ * @prop {boolean}                      virtual          - Enables virtual scrolling (replaces pagination)
+ * @prop {number}                       rowHeight        - Row height in px for virtual scroll calculations
+ * @prop {string}                       maxHeight        - Container height for virtual scroll
  *
- * @fires {CustomEvent<{ key: string, direction: SpTableSortDirection }>} sp-sort - Emitted when a sortable column header is clicked
- * @fires {CustomEvent<{ indices: number[] }>} sp-selection-change - Emitted when row selection changes
+ * @fires {CustomEvent<{ key, direction }>}  sp-sort             - Sort column clicked
+ * @fires {CustomEvent<{ indices }>}         sp-selection-change - Row selection changed
+ * @fires {CustomEvent<{ order }>}           sp-column-reorder   - Columns were reordered
+ * @fires {CustomEvent<{ row, index }>}      sp-row-action       - Row action clicked
+ * @fires {CustomEvent<{ pageSize }>}        sp-page-size-change - Fires when page size selector changes
  */
 export declare class SpTableComponent extends LitElement {
     static styles: import('lit').CSSResult;
@@ -37,10 +49,61 @@ export declare class SpTableComponent extends LitElement {
     stickyHeader: boolean;
     selectable: boolean;
     caption: string;
+    reorderable: boolean;
+    searchable: boolean;
+    pageSize: number;
+    pageSizeOptions: number[];
+    actions: SpTableAction[];
+    virtual: boolean;
+    rowHeight: number;
+    maxHeight: string;
     selectedRows: Set<number>;
+    _columnOrder: string[];
+    _hiddenCols: Set<string>;
+    _filters: Record<string, string>;
+    _globalSearch: string;
+    _page: number;
+    _showColPicker: boolean;
+    _dragOverIndex: number;
+    _dragFromIndex: number;
+    _openFilterCol: string | null;
+    _scrollTop: number;
+    _containerH: number;
+    private _resizeObs?;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private _setupVirtualScroll;
+    get _orderedColumns(): SpTableColumn[];
+    get _visibleColumns(): SpTableColumn[];
+    get _filteredData(): Record<string, unknown>[];
+    get _pagedData(): Record<string, unknown>[];
+    get _totalPages(): number;
+    get _virtualSlice(): {
+        rows: Record<string, unknown>[];
+        startIndex: number;
+        topPad: number;
+        bottomPad: number;
+    };
+    readonly _onVirtualScroll: (e: Event) => void;
+    readonly _handlePageSizeChange: (size: number) => void;
     readonly _handleRowSelect: (rowIndex: number, checked: boolean) => void;
     readonly _handleSelectAll: (checked: boolean) => void;
     readonly _handleSort: (column: SpTableColumn) => void;
+    readonly _handleDragStart: (e: DragEvent, index: number) => void;
+    readonly _handleDragOver: (e: DragEvent, index: number) => void;
+    readonly _handleDragLeave: () => void;
+    readonly _handleDrop: (e: DragEvent, toIndex: number) => void;
+    readonly _handleDragEnd: () => void;
+    readonly _toggleFilterCol: (key: string) => void;
+    readonly _handleFilter: (key: string, value: string) => void;
+    readonly _handleGlobalSearch: (value: string) => void;
+    readonly _clearFilters: () => void;
+    get _hasActiveFilters(): boolean;
+    readonly _toggleColumn: (key: string) => void;
+    readonly _goToPage: (page: number) => void;
+    readonly _handleAction: (action: SpTableAction, row: Record<string, unknown>, index: number) => void;
+    private _emit;
     render(): import('lit-html').TemplateResult;
 }
 declare global {

package/dist/components/table/sp-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sp-table.d.ts","sourceRoot":"","sources":["../../../src/components/table/sp-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAE/E;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,OAAO,EAAE,aAAa,EAAE,CAAM;IAG9B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAM;IAGrC,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,SAAS,UAAQ;IAGjB,OAAO,UAAS;IAGhB,SAAS,SAAuB;IAGhC,OAAO,SAAM;IAGb,aAAa,EAAE,oBAAoB,CAAU;IAG7C,YAAY,UAAS;IAGrB,UAAU,UAAS;IAGnB,OAAO,SAAM;IAGb,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAa;IAEtC,QAAQ,CAAC,gBAAgB,GAAI,UAAU,MAAM,EAAE,SAAS,OAAO,UAe7D;IAEF,QAAQ,CAAC,gBAAgB,GAAI,SAAS,OAAO,UAY3C;IAEF,QAAQ,CAAC,WAAW,GAAI,QAAQ,aAAa,UAiB3C;IAEO,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,gBAAgB,CAAC;KAC9B;CACF"}
+{"version":3,"file":"sp-table.d.ts","sourceRoot":"","sources":["../../../src/components/table/sp-table.ts"],"names":[],"mappings":"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"}

package/dist/components/table/sp-table.js

@@ -1,92 +1,247 @@
-import { unsafeCSS as c, LitElement as y } from "lit";
-import { property as s, state as h, customElement as d } from "lit/decorators.js";
-import u from "./sp-table.css.js";
-import { tableTemplate as f } from "./sp-table.template.js";
-var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, t = (o, r, i, a) => {
-  for (var p = a > 1 ? void 0 : a ? b(r, i) : r, l = o.length - 1, n; l >= 0; l--)
-    (n = o[l]) && (p = (a ? n(r, i, p) : n(p)) || p);
-  return a && p && m(r, i, p), p;
+import { unsafeCSS as u, LitElement as g } from "lit";
+import { property as l, state as p, customElement as f } from "lit/decorators.js";
+import y from "./sp-table.css.js";
+import { tableTemplate as m } from "./sp-table.template.js";
+var S = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (t, e, s, o) => {
+  for (var a = o > 1 ? void 0 : o ? b(e, s) : e, h = t.length - 1, n; h >= 0; h--)
+    (n = t[h]) && (a = (o ? n(e, s, a) : n(a)) || a);
+  return o && a && S(e, s, a), a;
 };
-let e = class extends y {
+let r = class extends g {
   constructor() {
-    super(...arguments), this.columns = [], this.data = [], this.loading = !1, this.bordered = !1, this.striped = !1, this.hoverable = !0, this.compact = !1, this.emptyText = "No data available", this.sortKey = "", this.sortDirection = "none", this.stickyHeader = !1, this.selectable = !1, this.caption = "", this.selectedRows = /* @__PURE__ */ new Set(), this._handleRowSelect = (o, r) => {
-      const i = new Set(this.selectedRows);
-      r ? i.add(o) : i.delete(o), this.selectedRows = i, this.dispatchEvent(
-        new CustomEvent("sp-selection-change", {
-          detail: { indices: Array.from(i) },
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }, this._handleSelectAll = (o) => {
-      const r = o ? new Set(this.data.map((i, a) => a)) : /* @__PURE__ */ new Set();
-      this.selectedRows = r, this.dispatchEvent(
-        new CustomEvent("sp-selection-change", {
-          detail: { indices: Array.from(r) },
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }, this._handleSort = (o) => {
-      o.sortable && (this.sortKey === o.key ? (this.sortDirection = this.sortDirection === "asc" ? "desc" : this.sortDirection === "desc" ? "none" : "asc", this.sortDirection === "none" && (this.sortKey = "")) : (this.sortKey = o.key, this.sortDirection = "asc"), this.dispatchEvent(
-        new CustomEvent("sp-sort", {
-          detail: { key: this.sortKey, direction: this.sortDirection },
-          bubbles: !0,
-          composed: !0
-        })
+    super(...arguments), this.columns = [], this.data = [], this.loading = !1, this.bordered = !1, this.striped = !1, this.hoverable = !0, this.compact = !1, this.emptyText = "No data available", this.sortKey = "", this.sortDirection = "none", this.stickyHeader = !1, this.selectable = !1, this.caption = "", this.reorderable = !1, this.searchable = !1, this.pageSize = 0, this.pageSizeOptions = [10, 25, 50, 100], this.actions = [], this.virtual = !1, this.rowHeight = 48, this.maxHeight = "400px", this.selectedRows = /* @__PURE__ */ new Set(), this._columnOrder = [], this._hiddenCols = /* @__PURE__ */ new Set(), this._filters = {}, this._globalSearch = "", this._page = 1, this._showColPicker = !1, this._dragOverIndex = -1, this._dragFromIndex = -1, this._openFilterCol = null, this._scrollTop = 0, this._containerH = 400, this._onVirtualScroll = (t) => {
+      this._scrollTop = t.target.scrollTop;
+    }, this._handlePageSizeChange = (t) => {
+      this.pageSize = t, this._page = 1, this.selectedRows = /* @__PURE__ */ new Set(), this._emit("sp-page-size-change", { pageSize: t });
+    }, this._handleRowSelect = (t, e) => {
+      const s = new Set(this.selectedRows);
+      e ? s.add(t) : s.delete(t), this.selectedRows = s, this._emit("sp-selection-change", { indices: Array.from(s) });
+    }, this._handleSelectAll = (t) => {
+      const e = t ? this._pagedData.map((s, o) => o) : [];
+      this.selectedRows = new Set(e), this._emit("sp-selection-change", { indices: e });
+    }, this._handleSort = (t) => {
+      t.sortable && (this.sortKey === t.key ? (this.sortDirection = this.sortDirection === "asc" ? "desc" : this.sortDirection === "desc" ? "none" : "asc", this.sortDirection === "none" && (this.sortKey = "")) : (this.sortKey = t.key, this.sortDirection = "asc"), this._page = 1, this._emit("sp-sort", { key: this.sortKey, direction: this.sortDirection }));
+    }, this._handleDragStart = (t, e) => {
+      this._dragFromIndex = e, t.dataTransfer && (t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/plain", String(e)));
+    }, this._handleDragOver = (t, e) => {
+      t.preventDefault(), t.dataTransfer && (t.dataTransfer.dropEffect = "move"), this._dragOverIndex = e;
+    }, this._handleDragLeave = () => {
+      this._dragOverIndex = -1;
+    }, this._handleDrop = (t, e) => {
+      var d, _;
+      if (t.preventDefault(), this._dragOverIndex = -1, this._dragFromIndex === -1 || this._dragFromIndex === e) return;
+      const s = [...this._columnOrder], o = this._orderedColumns, a = (d = o[this._dragFromIndex]) == null ? void 0 : d.key, h = (_ = o[e]) == null ? void 0 : _.key;
+      if (!a || !h) return;
+      const n = s.indexOf(a), c = s.indexOf(h);
+      n === -1 || c === -1 || (s.splice(n, 1), s.splice(c, 0, a), this._columnOrder = s, this._dragFromIndex = -1, this._emit("sp-column-reorder", { order: s }));
+    }, this._handleDragEnd = () => {
+      this._dragFromIndex = -1, this._dragOverIndex = -1;
+    }, this._toggleFilterCol = (t) => {
+      this._openFilterCol = this._openFilterCol === t ? null : t;
+    }, this._handleFilter = (t, e) => {
+      this._filters = { ...this._filters, [t]: e }, this._page = 1, this.selectedRows = /* @__PURE__ */ new Set();
+    }, this._handleGlobalSearch = (t) => {
+      this._globalSearch = t, this._page = 1, this.selectedRows = /* @__PURE__ */ new Set();
+    }, this._clearFilters = () => {
+      this._filters = {}, this._globalSearch = "", this._page = 1, this.selectedRows = /* @__PURE__ */ new Set();
+    }, this._toggleColumn = (t) => {
+      const e = new Set(this._hiddenCols);
+      e.has(t) ? e.delete(t) : e.add(t), this._hiddenCols = e;
+    }, this._goToPage = (t) => {
+      this._page = Math.max(1, Math.min(t, this._totalPages)), this.selectedRows = /* @__PURE__ */ new Set();
+    }, this._handleAction = (t, e, s) => {
+      t.onClick(e, s), this._emit("sp-row-action", { action: t.label, row: e, index: s });
+    };
+  }
+  // ── Lifecycle ─────────────────────────────────────────────
+  firstUpdated() {
+    this.virtual && this._setupVirtualScroll();
+  }
+  updated(t) {
+    if (t.has("columns")) {
+      const e = this._columnOrder, s = this.columns.map((n) => n.key), o = e.filter((n) => s.includes(n)), a = s.filter((n) => !o.includes(n));
+      this._columnOrder = [...o, ...a];
+      const h = new Set(this._hiddenCols);
+      this.columns.forEach((n) => {
+        n.hidden && h.add(n.key);
+      }), this._hiddenCols = h, this._page = 1;
+    }
+    t.has("data") && (this._page = 1, this.selectedRows = /* @__PURE__ */ new Set()), t.has("virtual") && this.virtual && this._setupVirtualScroll();
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this._resizeObs) == null || t.disconnect();
+  }
+  _setupVirtualScroll() {
+    const t = this.renderRoot.querySelector(".sp-table-wrapper");
+    t && (this._containerH = t.clientHeight || 400, this._resizeObs = new ResizeObserver((e) => {
+      var o;
+      const s = (o = e[0]) == null ? void 0 : o.contentRect.height;
+      s && s > 0 && (this._containerH = s);
+    }), this._resizeObs.observe(t));
+  }
+  // ── Derived getters ───────────────────────────────────────
+  get _orderedColumns() {
+    if (!this._columnOrder.length) return this.columns;
+    const t = new Map(this.columns.map((e) => [e.key, e]));
+    return this._columnOrder.map((e) => t.get(e)).filter(Boolean);
+  }
+  get _visibleColumns() {
+    return this._orderedColumns.filter((t) => !this._hiddenCols.has(t.key));
+  }
+  get _filteredData() {
+    let t = this.data;
+    const e = this._globalSearch.trim().toLowerCase();
+    e && (t = t.filter(
+      (s) => Object.values(s).some((o) => String(o ?? "").toLowerCase().includes(e))
+    ));
+    for (const [s, o] of Object.entries(this._filters)) {
+      const a = o.trim().toLowerCase();
+      a && (t = t.filter(
+        (h) => String(h[s] ?? "").toLowerCase().includes(a)
       ));
+    }
+    if (this.sortKey && this.sortDirection !== "none") {
+      const s = this.sortDirection === "asc" ? 1 : -1;
+      t = [...t].sort((o, a) => {
+        const h = String(o[this.sortKey] ?? ""), n = String(a[this.sortKey] ?? "");
+        return h.localeCompare(n, void 0, { numeric: !0, sensitivity: "base" }) * s;
+      });
+    }
+    return t;
+  }
+  get _pagedData() {
+    if (this.virtual) return this._filteredData;
+    if (!this.pageSize) return this._filteredData;
+    const t = (this._page - 1) * this.pageSize;
+    return this._filteredData.slice(t, t + this.pageSize);
+  }
+  get _totalPages() {
+    return this.pageSize ? Math.max(1, Math.ceil(this._filteredData.length / this.pageSize)) : 1;
+  }
+  get _virtualSlice() {
+    const t = this._filteredData, e = t.length, s = this.rowHeight, o = 3, a = Math.max(0, Math.floor(this._scrollTop / s) - o), h = Math.ceil((this._containerH || 400) / s) + o * 2, n = Math.min(e, a + h);
+    return {
+      rows: t.slice(a, n),
+      startIndex: a,
+      topPad: a * s,
+      bottomPad: Math.max(0, (e - n) * s)
     };
   }
+  get _hasActiveFilters() {
+    return !!this._globalSearch.trim() || Object.values(this._filters).some((t) => !!t.trim());
+  }
+  // ── Helpers ───────────────────────────────────────────────
+  _emit(t, e) {
+    this.dispatchEvent(new CustomEvent(t, { detail: e, bubbles: !0, composed: !0 }));
+  }
   render() {
-    return f.call(this);
+    return m.call(this);
   }
 };
-e.styles = c(u);
-t([
-  s({ type: Array })
-], e.prototype, "columns", 2);
-t([
-  s({ type: Array })
-], e.prototype, "data", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "loading", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "bordered", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "striped", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "hoverable", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "compact", 2);
-t([
-  s({ type: String })
-], e.prototype, "emptyText", 2);
-t([
-  s({ type: String })
-], e.prototype, "sortKey", 2);
-t([
-  s({ type: String })
-], e.prototype, "sortDirection", 2);
-t([
-  s({ type: Boolean, reflect: !0, attribute: "sticky-header" })
-], e.prototype, "stickyHeader", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "selectable", 2);
-t([
-  s({ type: String })
-], e.prototype, "caption", 2);
-t([
-  h()
-], e.prototype, "selectedRows", 2);
-e = t([
-  d("sp-table")
-], e);
+r.styles = u(y);
+i([
+  l({ type: Array })
+], r.prototype, "columns", 2);
+i([
+  l({ type: Array })
+], r.prototype, "data", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "loading", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "bordered", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "striped", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "hoverable", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "compact", 2);
+i([
+  l({ type: String })
+], r.prototype, "emptyText", 2);
+i([
+  l({ type: String })
+], r.prototype, "sortKey", 2);
+i([
+  l({ type: String })
+], r.prototype, "sortDirection", 2);
+i([
+  l({ type: Boolean, reflect: !0, attribute: "sticky-header" })
+], r.prototype, "stickyHeader", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "selectable", 2);
+i([
+  l({ type: String })
+], r.prototype, "caption", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "reorderable", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "searchable", 2);
+i([
+  l({ type: Number, attribute: "page-size" })
+], r.prototype, "pageSize", 2);
+i([
+  l({ type: Array, attribute: "page-size-options" })
+], r.prototype, "pageSizeOptions", 2);
+i([
+  l({ type: Array })
+], r.prototype, "actions", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "virtual", 2);
+i([
+  l({ type: Number, attribute: "row-height" })
+], r.prototype, "rowHeight", 2);
+i([
+  l({ type: String, attribute: "max-height" })
+], r.prototype, "maxHeight", 2);
+i([
+  p()
+], r.prototype, "selectedRows", 2);
+i([
+  p()
+], r.prototype, "_columnOrder", 2);
+i([
+  p()
+], r.prototype, "_hiddenCols", 2);
+i([
+  p()
+], r.prototype, "_filters", 2);
+i([
+  p()
+], r.prototype, "_globalSearch", 2);
+i([
+  p()
+], r.prototype, "_page", 2);
+i([
+  p()
+], r.prototype, "_showColPicker", 2);
+i([
+  p()
+], r.prototype, "_dragOverIndex", 2);
+i([
+  p()
+], r.prototype, "_dragFromIndex", 2);
+i([
+  p()
+], r.prototype, "_openFilterCol", 2);
+i([
+  p()
+], r.prototype, "_scrollTop", 2);
+i([
+  p()
+], r.prototype, "_containerH", 2);
+r = i([
+  f("sp-table")
+], r);
 export {
-  e as SpTableComponent
+  r as SpTableComponent
 };

package/dist/components/table/sp-table.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sp-table.template.d.ts","sourceRoot":"","sources":["../../../src/components/table/sp-table.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,wBAAgB,aAAa,CAAC,IAAI,EAAE,gBAAgB,GAAG,cAAc,CA4HpE"}
+{"version":3,"file":"sp-table.template.d.ts","sourceRoot":"","sources":["../../../src/components/table/sp-table.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,wBAAgB,aAAa,CAAC,IAAI,EAAE,gBAAgB,GAAG,cAAc,CA8apE"}