@shibui-ui/ui 1.25.1 → 1.26.0

package/dist/index202.js

@@ -1,5 +1,42 @@
-const chipCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer}}@layer components{.chip,.chip-toggle,.chip-input{display:inline-flex;align-items:center;gap:var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none;border-radius:9999px;transition:background var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),transform var(--duration-fast)}.chip{padding:4px var(--lib-space-sm);background:var(--color-washi-100);color:var(--text-secondary);border:1px solid var(--border-subtle);cursor:default}.chip-toggle{padding:5px var(--lib-space-md);background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-default);cursor:pointer;position:relative;overflow:hidden}.chip-toggle:hover{border-color:var(--border-strong);color:var(--text-primary);background:var(--bg-surface)}.chip-toggle:active{transform:scale(.96)}.chip-toggle:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:2px}:host([selected]) .chip-toggle{background:var(--color-washi-900);border-color:var(--color-washi-900);color:var(--color-washi-50);box-shadow:var(--shadow-sm)}.chip-input{padding:4px 4px 4px var(--lib-space-sm);background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-default);gap:var(--lib-space-sm)}.chip-remove{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:9999px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-size:12px;padding:0;flex-shrink:0;transition:background var(--duration-fast),color var(--duration-fast)}.chip-remove:hover{background:var(--color-washi-200);color:var(--text-primary)}.chip-remove svg{width:10px;height:10px}.chip-input.is-entering{animation:chip-enter .25s var(--ease-bounce)}@keyframes chip-enter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.chip-input.is-removing{animation:chip-remove-anim .2s var(--ease-out) forwards}@keyframes chip-remove-anim{to{opacity:0;transform:scale(.8);max-width:0;padding:0;margin:0;border-width:0}}:host([size="xs"]) .chip{font-size:9px;padding:2px var(--lib-space-sm);letter-spacing:.04em}:host([size="xs"]) .chip-toggle{font-size:9px;padding:3px var(--lib-space-sm);letter-spacing:.04em}:host([size="xs"]) .chip-input{font-size:9px;padding:2px 2px 2px var(--lib-space-sm)}:host([size="xs"]) .chip-remove{width:14px;height:14px;font-size:10px}:host([size="xs"]) .chip-avatar{width:14px;height:14px;font-size:7px}:host([size="sm"]) .chip{font-size:10px;padding:3px var(--lib-space-sm)}:host([size="sm"]) .chip-toggle{font-size:10px;padding:4px var(--lib-space-sm)}:host([size="sm"]) .chip-input{font-size:10px;padding:3px 3px 3px var(--lib-space-sm)}:host([size="lg"]) .chip{font-size:var(--text-sm);padding:var(--lib-space-sm) var(--lib-space-md);letter-spacing:var(--tracking-wider)}:host([size="lg"]) .chip-toggle{font-size:var(--text-sm);padding:var(--lib-space-sm) var(--lib-space-md);letter-spacing:var(--tracking-wider)}:host([size="lg"]) .chip-input{font-size:var(--text-sm);padding:var(--lib-space-sm) var(--lib-space-sm) var(--lib-space-sm) var(--lib-space-md)}:host([size="lg"]) .chip-remove{width:22px;height:22px;font-size:14px}:host([size="lg"]) .chip-avatar{width:22px;height:22px;font-size:9px}:host([color="kaki"]) .chip{background:var(--color-kaki-50);color:var(--color-kaki-600);border-color:var(--color-kaki-100)}:host([color="kaki"]) .chip-toggle:not(.chip-toggle-selected){background:var(--color-kaki-50);color:var(--color-kaki-600);border-color:var(--color-kaki-100)}:host([color="kaki"]) .chip-toggle:hover:not([selected]){border-color:var(--color-kaki-400)}:host([color="kaki"][selected]) .chip-toggle{background:var(--color-kaki-500);border-color:var(--color-kaki-500);color:#fff}:host([color="kaki"]) .chip-input{background:var(--color-kaki-50);color:var(--color-kaki-600);border-color:var(--color-kaki-100)}:host([color="kaki"]) .chip-remove:hover{background:var(--color-kaki-100);color:var(--color-kaki-600)}:host([color="celadon"]) .chip{background:var(--color-celadon-100);color:var(--color-celadon-600);border-color:var(--color-celadon-100)}:host([color="celadon"]) .chip-toggle{background:var(--color-celadon-50);color:var(--color-celadon-600);border-color:var(--color-celadon-100)}:host([color="celadon"][selected]) .chip-toggle{background:var(--color-celadon-500);border-color:var(--color-celadon-500);color:#fff}:host([color="celadon"]) .chip-input{background:var(--color-celadon-50);color:var(--color-celadon-600);border-color:var(--color-celadon-100)}:host([color="celadon"]) .chip-remove:hover{background:var(--color-celadon-100);color:var(--color-celadon-600)}:host([color="error"]) .chip,:host([color="error"]) .chip-input{background:var(--color-error-light);color:var(--color-error);border-color:var(--color-error-light)}:host([color="error"]) .chip-remove:hover{background:#ebc5bf;color:var(--color-error)}:host([color="info"]) .chip{background:var(--color-info-light, #D6E8F5);color:var(--color-info, #1A4A6E);border-color:var(--color-info-light, #D6E8F5)}:host([color="dark"]) .chip{background:var(--color-washi-900);color:var(--color-washi-300);border-color:var(--color-washi-800)}:host([color="dark"]) .chip-toggle{background:var(--color-washi-800);color:var(--color-washi-300);border-color:var(--color-washi-700)}:host([color="dark"]) .chip-toggle:hover{border-color:var(--color-washi-500);color:var(--color-washi-100)}:host([color="dark"][selected]) .chip-toggle{background:var(--color-washi-50);border-color:var(--color-washi-50);color:var(--color-washi-950)}:host([color="dark"]) .chip-input{background:var(--color-washi-800);color:var(--color-washi-300);border-color:var(--color-washi-700)}:host([color="dark"]) .chip-remove:hover{background:var(--color-washi-700);color:var(--color-washi-100)}:host([dot]) .chip:before,:host([dot]) .chip-toggle:before,:host([dot]) .chip-input:before{content:"";width:6px;height:6px;border-radius:9999px;background:currentcolor;flex-shrink:0;opacity:.7}.chip-avatar{width:18px;height:18px;border-radius:9999px;object-fit:cover;flex-shrink:0;background:var(--color-washi-200);display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-family:var(--lib-font-mono);color:var(--text-secondary);overflow:hidden}.chip-icon{font-size:13px;display:inline-flex;align-items:center;flex-shrink:0;opacity:.7}.chip-icon svg{width:1em;height:1em}}';
+const CURSOR_MODES = {
+  ink: {
+    dotBg: "var(--color-washi-900)",
+    dotSize: "6px",
+    ringBorder: "1px solid var(--color-washi-400)",
+    ringBg: "transparent",
+    ringSize: "36px",
+    ringMix: "multiply",
+    lerpFactor: 0.12
+  },
+  minimal: {
+    dotBg: "var(--color-washi-600)",
+    dotSize: "4px",
+    ringBorder: "none",
+    ringBg: "transparent",
+    ringSize: "0px",
+    ringMix: "normal",
+    lerpFactor: 0.2
+  },
+  kaki: {
+    dotBg: "var(--color-kaki-500)",
+    dotSize: "8px",
+    ringBorder: "1.5px solid var(--color-kaki-200, #F4C099)",
+    ringBg: "rgba(217,114,52,0.04)",
+    ringSize: "40px",
+    ringMix: "normal",
+    lerpFactor: 0.09
+  },
+  ghost: {
+    dotBg: "transparent",
+    dotSize: "0px",
+    ringBorder: "1px solid rgba(250,247,244,0.25)",
+    ringBg: "rgba(250,247,244,0.03)",
+    ringSize: "28px",
+    ringMix: "normal",
+    lerpFactor: 0.1
+  }
+};
 export {
-  chipCss as default
+  CURSOR_MODES
 };
 //# sourceMappingURL=index202.js.map

package/dist/index202.js.map

@@ -1 +1 @@
-{"version":3,"file":"index202.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index202.js","sources":["../src/components/organisms/cursor-follower/lib-cursor-follower.types.ts"],"sourcesContent":["/** Cuatro modos visuales del cursor */\nexport type CursorMode = 'ink' | 'minimal' | 'kaki' | 'ghost';\n\n/** Estados contextuales detectados automáticamente */\nexport type CursorState = 'default' | 'hover' | 'text' | 'press' | 'hidden';\n\n/** Configuración interna por modo */\nexport interface CursorModeConfig {\n  dotBg:      string;\n  dotSize:    string;\n  ringBorder: string;\n  ringBg:     string;\n  ringSize:   string;\n  ringMix:    string;\n  lerpFactor: number;\n}\n\nexport const CURSOR_MODES: Record<CursorMode, CursorModeConfig> = {\n  ink: {\n    dotBg:      'var(--color-washi-900)',\n    dotSize:    '6px',\n    ringBorder: '1px solid var(--color-washi-400)',\n    ringBg:     'transparent',\n    ringSize:   '36px',\n    ringMix:    'multiply',\n    lerpFactor: 0.12,\n  },\n  minimal: {\n    dotBg:      'var(--color-washi-600)',\n    dotSize:    '4px',\n    ringBorder: 'none',\n    ringBg:     'transparent',\n    ringSize:   '0px',\n    ringMix:    'normal',\n    lerpFactor: 0.2,\n  },\n  kaki: {\n    dotBg:      'var(--color-kaki-500)',\n    dotSize:    '8px',\n    ringBorder: '1.5px solid var(--color-kaki-200, #F4C099)',\n    ringBg:     'rgba(217,114,52,0.04)',\n    ringSize:   '40px',\n    ringMix:    'normal',\n    lerpFactor: 0.09,\n  },\n  ghost: {\n    dotBg:      'transparent',\n    dotSize:    '0px',\n    ringBorder: '1px solid rgba(250,247,244,0.25)',\n    ringBg:     'rgba(250,247,244,0.03)',\n    ringSize:   '28px',\n    ringMix:    'normal',\n    lerpFactor: 0.1,\n  },\n};"],"names":[],"mappings":"AAiBO,MAAM,eAAqD;AAAA,EAChE,KAAK;AAAA,IACH,OAAY;AAAA,IACZ,SAAY;AAAA,IACZ,YAAY;AAAA,IACZ,QAAY;AAAA,IACZ,UAAY;AAAA,IACZ,SAAY;AAAA,IACZ,YAAY;AAAA,EAAA;AAAA,EAEd,SAAS;AAAA,IACP,OAAY;AAAA,IACZ,SAAY;AAAA,IACZ,YAAY;AAAA,IACZ,QAAY;AAAA,IACZ,UAAY;AAAA,IACZ,SAAY;AAAA,IACZ,YAAY;AAAA,EAAA;AAAA,EAEd,MAAM;AAAA,IACJ,OAAY;AAAA,IACZ,SAAY;AAAA,IACZ,YAAY;AAAA,IACZ,QAAY;AAAA,IACZ,UAAY;AAAA,IACZ,SAAY;AAAA,IACZ,YAAY;AAAA,EAAA;AAAA,EAEd,OAAO;AAAA,IACL,OAAY;AAAA,IACZ,SAAY;AAAA,IACZ,YAAY;AAAA,IACZ,QAAY;AAAA,IACZ,UAAY;AAAA,IACZ,SAAY;AAAA,IACZ,YAAY;AAAA,EAAA;AAEhB;"}

package/dist/index203.js

@@ -1,5 +1,5 @@
-const pickerCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{.cp{width:260px;background:var(--bg-elevated);border:1px solid var(--border-default);box-shadow:var(--shadow-md);-webkit-user-select:none;user-select:none;flex-shrink:0}.cp-canvas{width:100%;height:160px;position:relative;cursor:crosshair;overflow:hidden}.cp-canvas:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to right,#fff 0%,transparent 100%);pointer-events:none}.cp-canvas:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,transparent 0%,#000 100%);pointer-events:none}.cp-thumb{position:absolute;width:14px;height:14px;border-radius:var(--radius-full);border:2px solid #fff;box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003;transform:translate(-50%,-50%);z-index:2;pointer-events:none;transition:transform var(--duration-fast)}.cp-canvas:active .cp-thumb{transform:translate(-50%,-50%) scale(1.15)}.cp-sliders{display:flex;gap:var(--lib-space-sm);align-items:center;padding:var(--lib-space-sm) var(--lib-space-md) 0}.cp-preview-dot{width:28px;height:28px;border-radius:var(--radius-full);flex-shrink:0;border:1px solid rgb(0,0,0,.1);position:relative;overflow:hidden}.cp-preview-dot:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0}.cp-preview-color{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-full)}.cp-sliders-stack{display:flex;flex-direction:column;gap:var(--lib-space-xs);flex:1}.cp-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:10px;border-radius:var(--radius-full);border:1px solid rgb(0,0,0,.08);outline:none;cursor:pointer}.cp-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:var(--radius-full);background:#fff;border:1px solid rgb(0,0,0,.25);box-shadow:0 1px 3px #0003;cursor:grab;transition:transform var(--duration-fast),box-shadow var(--duration-fast)}.cp-range::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15);box-shadow:0 2px 6px #00000040}.cp-range::-moz-range-thumb{width:14px;height:14px;border-radius:var(--radius-full);background:#fff;border:1px solid rgb(0,0,0,.25);box-shadow:0 1px 3px #0003;cursor:grab}.cp-range-hue{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.cp-alpha-wrap{position:relative;border-radius:var(--radius-full);overflow:hidden}.cp-alpha-checker{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,#aaa 25%,transparent 25%),linear-gradient(-45deg,#aaa 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#aaa 75%),linear-gradient(-45deg,transparent 75%,#aaa 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;background-color:#eee;border-radius:var(--radius-full);border:1px solid rgb(0,0,0,.08)}.cp-alpha-checker .cp-range-alpha{position:relative;z-index:1;background:transparent;border:none}.cp-inputs-wrap{padding:var(--lib-space-sm) var(--lib-space-md);display:flex;gap:var(--lib-space-xs);align-items:flex-start;border-top:1px solid var(--border-subtle)}.cp-mode-btn{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-muted);background:transparent;border:none;cursor:pointer;transition:color var(--duration-fast);margin-top:4px;padding:0}.cp-mode-btn:hover{color:var(--text-primary)}.cp-input-group{display:flex;flex-direction:column;gap:0;min-width:0}.cp-input{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-primary);background:var(--bg-base);border:1px solid var(--border-default);padding:var(--lib-space-xs) var(--lib-space-sm);outline:none;width:100%;transition:border-color var(--duration-base),box-shadow var(--duration-base);text-transform:uppercase}.cp-input:focus{border-color:var(--color-washi-700);box-shadow:0 0 0 3px #1a140e17}.cp-input[type=number]{text-transform:none}.cp-input-label{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);display:block;text-align:center;margin-top:3px}.cp-saved{padding:var(--lib-space-xs) var(--lib-space-md) var(--lib-space-sm);border-top:1px solid var(--border-subtle);display:flex;align-items:center;gap:var(--lib-space-xs);flex-wrap:wrap}.cp-saved-label{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);width:100%}.cp-saved-add{width:20px;height:20px;border:1px dashed var(--border-default);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-muted);cursor:pointer;background:transparent;transition:border-color var(--duration-fast),color var(--duration-fast),background var(--duration-fast);flex-shrink:0;line-height:1}.cp-saved-add:hover{border-color:var(--color-washi-700);color:var(--text-primary);background:var(--bg-surface)}.cp-actions{display:flex;gap:var(--lib-space-xs);padding:var(--lib-space-sm) var(--lib-space-md);border-top:1px solid var(--border-subtle);background:var(--bg-surface)}.cp-btn{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);text-transform:uppercase;border:none;padding:var(--lib-space-xs) var(--lib-space-md);cursor:pointer;transition:background var(--duration-base),color var(--duration-base);flex:1}.cp-btn-cancel{background:transparent;border:1px solid var(--border-default);color:var(--text-muted)}.cp-btn-cancel:hover{background:var(--color-washi-200);color:var(--text-primary)}.cp-btn-ok{background:var(--color-washi-900);color:var(--color-washi-50)}.cp-btn-ok:hover{background:var(--color-washi-800)}.cp-trigger-wrap{position:relative;display:inline-block}.cp-trigger{display:flex;align-items:center;gap:var(--lib-space-sm);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border-default);padding:var(--lib-space-xs) var(--lib-space-sm);cursor:pointer;transition:border-color var(--duration-base),box-shadow var(--duration-base);outline:none}.cp-trigger:focus,.cp-trigger.is-open{border-color:var(--color-washi-700);box-shadow:0 0 0 3px #1a140e17}.cp-trigger-dot{width:18px;height:18px;border:1px solid rgb(0,0,0,.1);flex-shrink:0;position:relative;overflow:hidden}.cp-trigger-dot:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0}.cp-trigger-color{position:absolute;top:0;right:0;bottom:0;left:0}.cp-trigger-wrap .cp{position:absolute;top:calc(100% + 6px);left:0;z-index:400;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}.cp-trigger-wrap .cp.is-open{opacity:1;transform:translateY(0);pointer-events:auto}.cp-swatches{display:flex;flex-direction:column;gap:var(--lib-space-sm)}.cp-swatches-row{display:flex;gap:var(--lib-space-xs);align-items:center}.cp-swatches-label{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);width:52px;flex-shrink:0}.cp-swatch{width:24px;height:24px;border:1px solid rgb(0,0,0,.08);cursor:pointer;position:relative;flex-shrink:0;transition:transform var(--duration-fast),box-shadow var(--duration-fast)}.cp-swatch:hover{transform:scale(1.18);box-shadow:0 2px 8px #0000002e;z-index:1}.cp-swatch.is-selected:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border:2px solid var(--color-washi-900)}.cp-swatch[data-name]:before{content:attr(data-name);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wide);white-space:nowrap;background:var(--color-washi-900);color:var(--color-washi-100);padding:2px var(--lib-space-xs);pointer-events:none;opacity:0;transition:opacity var(--duration-base);z-index:10}.cp-swatch[data-name]:hover:before{opacity:1}.cp-swatch-sm{width:18px;height:18px}.cp-swatch-lg{width:32px;height:32px}.cp-swatch-xl{width:48px;height:48px}:host([dark]) .cp{background:#0a0403;border-color:#1e130e;box-shadow:0 8px 32px #00000080}:host([dark]) .cp-input{background:#060201;border-color:#231813;color:#998c84}:host([dark]) .cp-input:focus{border-color:#6d6059}:host([dark]) .cp-input-label{color:#2a1f19}:host([dark]) .cp-saved{border-color:#190f0a}:host([dark]) .cp-saved-label{color:#2a1f19}:host([dark]) .cp-saved-add{border-color:#231813;color:#362b25}:host([dark]) .cp-saved-add:hover{background:#150a06;border-color:#51453e;color:#998c84}:host([dark]) .cp-actions{background:#060201;border-color:#190f0a}:host([dark]) .cp-btn-cancel{border-color:#231813;color:#433831}:host([dark]) .cp-btn-cancel:hover{background:#190f0a;color:#998c84}:host([dark]) .cp-mode-btn{color:#362b25}:host([dark]) .cp-mode-btn:hover{color:#998c84}:host([dark]) .cp-inputs-wrap{border-color:#190f0a}:host([dark]) .cp-trigger{background:#100704;border-color:#1e130e;color:#5f524c}:host([dark]) .cp-trigger:focus,:host([dark]) .cp-trigger.is-open{border-color:#6d6059}:host([dark]) .cp-swatch.is-selected:after{border-color:#998c84}:host([dark]) .cp-swatches-label{color:#312620}:host([disabled]){pointer-events:none;opacity:.5}}';
+const tableCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.tbl-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border-subtle)}.tbl-wrap table{border:none}.tbl-wrap.tbl-sticky-head{max-height:380px;overflow-y:auto}.tbl-sticky-head thead th{position:sticky;top:0;z-index:3}table{width:100%;border-collapse:collapse;font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-secondary);background:var(--bg-elevated)}caption{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);text-align:left;padding:var(--lib-space-sm) var(--lib-space-md);background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);caption-side:top}thead th{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);font-weight:400;padding:var(--lib-space-sm) var(--lib-space-md);text-align:left;background:var(--bg-surface);border-bottom:1px solid var(--border-default);white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative}thead th.is-sortable{cursor:pointer;padding-right:var(--lib-space-lg);transition:color var(--duration-fast),background var(--duration-fast)}thead th.is-sortable:hover{color:var(--text-primary);background:var(--color-washi-200)}thead th.is-sortable:after{content:"";position:absolute;right:var(--lib-space-sm);top:50%;transform:translateY(-50%);width:0;height:0;opacity:.3;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentcolor;transition:opacity var(--duration-fast),transform var(--duration-base)}thead th.is-sortable:hover:after{opacity:.6}thead th.sort-asc:after{opacity:1;transform:translateY(-50%) rotate(180deg)}thead th.sort-desc:after{opacity:1;transform:translateY(-50%) rotate(0)}thead th.sort-asc,thead th.sort-desc{color:var(--text-primary);background:var(--color-washi-200)}thead th.is-num{text-align:right}tbody tr{transition:background var(--duration-fast);border-bottom:1px solid var(--border-subtle)}tbody tr:last-child{border-bottom:none}tbody td{padding:var(--lib-space-md) var(--lib-space-md);color:var(--text-secondary);font-size:var(--text-sm);vertical-align:middle;line-height:var(--leading-snug)}tfoot td{padding:var(--lib-space-sm) var(--lib-space-md);font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);background:var(--bg-surface);border-top:1px solid var(--border-default)}:host([size="sm"]) thead th{padding:var(--lib-space-xs) var(--lib-space-sm);font-size:9px}:host([size="sm"]) tbody td{padding:var(--lib-space-xs) var(--lib-space-sm);font-size:var(--text-xs)}:host([size="sm"]) tfoot td{padding:var(--lib-space-xs) var(--lib-space-sm)}:host([size="lg"]) thead th{padding:var(--lib-space-md) var(--lib-space-lg);font-size:11px}:host([size="lg"]) tbody td{padding:calc(var(--lib-space-md) + var(--lib-space-xs)) var(--lib-space-lg);font-size:var(--text-base)}:host([size="lg"]) tfoot td{padding:var(--lib-space-md) var(--lib-space-lg)}:host([variant="lines"]) tbody tr:hover,:host(:not([variant])) tbody tr:hover{background:var(--color-washi-50)}:host([variant="grid"]) thead th,:host([variant="grid"]) tbody td{border-right:1px solid var(--border-subtle)}:host([variant="grid"]) thead th:last-child,:host([variant="grid"]) tbody td:last-child{border-right:none}:host([variant="grid"]) tbody tr:hover{background:var(--color-washi-50)}:host([variant="striped"]) tbody tr:nth-child(2n){background:var(--bg-surface)}:host([variant="striped"]) tbody tr:hover{background:var(--color-washi-50)}:host([variant="striped"]) tbody tr:nth-child(2n):hover{background:var(--color-washi-200)}:host([variant="borderless"]) thead th{border-bottom:1px solid var(--border-default)}:host([variant="borderless"]) tbody tr{border-bottom:none}:host([variant="borderless"]) tbody td{border:none}:host([variant="borderless"]) tbody tr:hover{background:var(--bg-surface)}tbody tr.is-selected,tbody tr.is-selected:hover{background:var(--color-kaki-50);border-bottom-color:var(--color-kaki-100)}tbody tr.is-selected td{color:var(--text-primary)}tbody tr.is-error,tbody tr.is-error:hover{background:#f5ddd9;border-bottom-color:#ebc9c4}tbody tr.is-error td{color:var(--color-error)}tbody tr.is-warning,tbody tr.is-warning:hover{background:#fef9ec;border-bottom-color:#f5e6a8}tbody tr.is-warning td{color:#7a5c0a}tbody tr.is-success,tbody tr.is-success:hover{background:var(--color-celadon-50);border-bottom-color:var(--color-celadon-100)}tbody tr.is-success td{color:var(--color-celadon-600)}tbody tr.is-disabled,tbody tr.is-disabled:hover{background:transparent;opacity:.38;cursor:not-allowed}.col-sticky{position:sticky;left:0;z-index:1;background:inherit}thead .col-sticky{background:var(--bg-surface);z-index:2}.col-sticky:after{content:"";position:absolute;top:0;right:-1px;bottom:0;width:1px;background:var(--border-subtle);box-shadow:2px 0 6px #1a140e0d}.cell-num{text-align:right;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-primary)}thead th.cell-num{color:var(--text-muted)}.cell-mono{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted)}.cell-truncate{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell-check{width:40px;padding:var(--lib-space-md) var(--lib-space-sm) var(--lib-space-md) var(--lib-space-md)!important}.cell-check input[type=checkbox]{width:14px;height:14px;accent-color:var(--color-washi-900);cursor:pointer;display:block}.cell-avatar{display:flex;align-items:center;gap:var(--lib-space-sm)}.avatar-circle{width:28px;height:28px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:9px;flex-shrink:0;background:var(--color-washi-200);color:var(--text-secondary)}.avatar-text{display:flex;flex-direction:column;gap:1px}.avatar-name{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-tight)}.avatar-hint{font-family:var(--lib-font-mono);font-size:10px;color:var(--text-muted);letter-spacing:var(--tracking-wide)}.cell-badge{display:inline-flex;align-items:center;gap:var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wider);text-transform:uppercase;padding:2px var(--lib-space-sm);white-space:nowrap}.cell-badge:before{content:"";width:5px;height:5px;border-radius:var(--radius-full);background:currentcolor;flex-shrink:0;opacity:.7}.cell-badge.tone-estable{color:var(--color-celadon-600);background:var(--color-celadon-50)}.cell-badge.tone-beta{color:var(--color-kaki-500);background:var(--color-kaki-50)}.cell-badge.tone-error{color:var(--color-error);background:#f5ddd9}.cell-badge.tone-warning{color:#7a5c0a;background:#fef9ec}.cell-badge.tone-inactive{color:var(--text-muted);background:var(--bg-surface)}.cell-badge.tone-info{color:#1a4a6e;background:#d6e8f5}.cell-progress{display:flex;align-items:center;gap:var(--lib-space-sm)}.progress-bar{flex:1;height:3px;background:var(--color-washi-200);position:relative;min-width:60px}.progress-fill{position:absolute;left:0;top:0;bottom:0;background:var(--color-washi-700);transition:width var(--duration-slow) var(--ease-out)}.progress-fill.tone-kaki{background:var(--color-kaki-500)}.progress-fill.tone-celadon{background:var(--color-celadon-500)}.progress-val{font-family:var(--lib-font-mono);font-size:10px;color:var(--text-muted);letter-spacing:var(--tracking-wide);flex-shrink:0;width:28px;text-align:right}.cell-actions{width:44px;text-align:right!important;padding-right:var(--lib-space-md)!important}.actions-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;font-size:18px;line-height:1;color:var(--text-muted);background:transparent;border:none;cursor:pointer;border-radius:var(--radius-full);transition:background var(--duration-fast),color var(--duration-fast);opacity:0}tbody tr:hover .actions-btn{opacity:1}.actions-btn:hover{background:var(--bg-surface);color:var(--text-primary)}@keyframes dt-shimmer{0%{background-position:-600px 0}to{background-position:600px 0}}.skel-line{height:10px;background:linear-gradient(90deg,var(--color-washi-200) 25%,var(--color-washi-100) 50%,var(--color-washi-200) 75%);background-size:600px 100%;animation:dt-shimmer 1.4s infinite linear;border-radius:2px}.skel-line.w-80{width:80%}.skel-line.w-60{width:60%}.skel-line.w-40{width:40%}.skel-line.w-30{width:30%}.skel-avatar{width:28px;height:28px;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--color-washi-200) 25%,var(--color-washi-100) 50%,var(--color-washi-200) 75%);background-size:600px 100%;animation:dt-shimmer 1.4s infinite linear;flex-shrink:0}.skel-cell{display:flex;align-items:center;gap:var(--lib-space-sm)}.skel-badge{height:16px;width:48px;border-radius:2px;background:linear-gradient(90deg,var(--color-washi-200) 25%,var(--color-washi-100) 50%,var(--color-washi-200) 75%);background-size:600px 100%;animation:dt-shimmer 1.4s infinite linear}.empty-row td{text-align:center;padding:var(--lib-space-xl) var(--lib-space-lg)!important;border-bottom:none!important}.empty-icon{font-size:32px;color:var(--color-washi-300);display:block;margin:0 auto var(--lib-space-md)}.empty-title{font-family:var(--lib-font-display);font-size:var(--text-xl);font-weight:var(--weight-light);color:var(--text-muted);letter-spacing:var(--tracking-tight);display:block;margin-bottom:var(--lib-space-xs)}.empty-desc{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--color-washi-300);text-transform:uppercase;display:block}.tbl-toolbar{display:flex;align-items:center;gap:var(--lib-space-sm);padding:var(--lib-space-sm) var(--lib-space-md);background:var(--bg-surface);border:1px solid var(--border-subtle);border-bottom:none}.tbl-toolbar-title{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-secondary)}.tbl-toolbar-count{font-family:var(--lib-font-mono);font-size:10px;color:var(--text-muted);letter-spacing:var(--tracking-wide);margin-right:auto}.tbl-toolbar-search{font-family:var(--lib-font-mono);font-size:var(--text-xs);color:var(--text-primary);background:var(--bg-elevated);border:1px solid var(--border-default);padding:var(--lib-space-xs) var(--lib-space-sm);outline:none;width:180px;transition:border-color var(--duration-base),box-shadow var(--duration-base)}.tbl-toolbar-search::placeholder{color:var(--text-muted)}.tbl-toolbar-search:focus{border-color:var(--color-washi-700);box-shadow:0 0 0 3px #1a140e14}.tbl-pagination{display:flex;align-items:center;gap:var(--lib-space-xs);padding:var(--lib-space-sm) var(--lib-space-md);border:1px solid var(--border-subtle);border-top:none;background:var(--bg-surface)}.pag-info{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);margin-right:auto}.pag-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);background:transparent;border:1px solid transparent;cursor:pointer;transition:background var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast)}.pag-btn:hover{background:var(--bg-elevated);border-color:var(--border-default);color:var(--text-primary)}.pag-btn.is-active{background:var(--color-washi-900);color:var(--color-washi-50);border-color:var(--color-washi-900)}.pag-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.pag-sep{font-family:var(--lib-font-mono);font-size:10px;color:var(--text-muted);padding:0 2px}:host([dark]) table{background:#0a0403;color:#7b6f67}:host([dark]) thead th{background:#060201;color:#312620;border-bottom-color:#190f0a}:host([dark]) thead th.is-sortable:hover{background:#150a06;color:#998c84}:host([dark]) thead th.sort-asc,:host([dark]) thead th.sort-desc{background:#150a06;color:#a99b93}:host([dark]) tbody tr{border-bottom-color:#150a06}:host([dark]) tbody td{color:#7b6f67}:host([dark]) tbody td.cell-num{color:#afa299}:host([dark]) tbody tr:hover{background:#150a06}:host([dark]) .tbl-wrap{border-color:#150a06}:host([dark]) tfoot td{background:#060201;border-top-color:#190f0a;color:#362b25}:host([dark]) caption{background:#060201;color:#312620;border-color:#150a06}:host([dark]) .tbl-toolbar{background:#060201;border-color:#150a06}:host([dark]) .tbl-toolbar-title{color:#51453e}:host([dark]) .tbl-toolbar-count{color:#2a1f19}:host([dark]) .tbl-toolbar-search{background:#060201;border-color:#231813;color:#998c84}:host([dark]) .tbl-toolbar-search::placeholder{color:#312620}:host([dark]) .tbl-pagination{background:#060201;border-color:#150a06}:host([dark]) .pag-btn:hover{background:#150a06;border-color:#231813;color:#998c84}:host([dark]) .avatar-circle{background:#1e130e;color:#5f524c}:host([dark]) .avatar-name{color:#8a7d75}:host([dark]) .avatar-hint{color:#362b25}:host([dark]) .progress-bar{background:#1e130e}:host([dark]) .col-sticky{background:#0a0403}:host([dark]) thead .col-sticky{background:#060201}:host([dark]) .cell-mono{color:#362b25}:host([dark]) .actions-btn:hover{background:#1e130e;color:#998c84}:host([dark]) tbody tr.is-selected,:host([dark]) tbody tr.is-selected:hover{background:#190f0a}:host([dark]) .skel-line,:host([dark]) .skel-avatar,:host([dark]) .skel-badge{background:linear-gradient(90deg,#17100c 25%,#211815,#17100c 75%);background-size:600px 100%}}';
 export {
-  pickerCss as default
+  tableCss as default
 };
 //# sourceMappingURL=index203.js.map

package/dist/index204.js

@@ -1,165 +1,240 @@
-import { html, nothing } from "lit";
-const ROTATE_SVG = html`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor"
-  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M10 2.5A4.5 4.5 0 1 0 11 6"/>
-  <path d="M10 .5v2h2"/>
-</svg>`;
-const CARET_SVG = html`<svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor"
-  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M2 4l3 3 3-3"/>
-</svg>`;
-function swatchGridTemplate(props) {
-  const { rows, selected, onSelect } = props;
+import { nothing, html } from "lit";
+function renderBadge(value, tone) {
+  const label = String(value ?? "");
+  return html`<span class="cell-badge tone-${tone}">${label}</span>`;
+}
+function renderProgress(value, tone) {
+  const pct = Math.min(100, Math.max(0, Number(value) || 0));
+  const toneClass = tone ? `tone-${tone}` : "";
   return html`
-    <div class="cp-swatches">
-      ${rows.map((row) => html`
-        <div class="cp-swatches-row">
-          <span class="cp-swatches-label">${row.label}</span>
-          ${row.colors.map((c) => html`
-            <div
-              class="cp-swatch ${c.value.toLowerCase() === selected.toLowerCase() ? "is-selected" : ""}"
-              style="background:${c.value};"
-              data-name="${c.name ?? ""}"
-              @click="${() => onSelect(c)}"
-              role="button"
-              aria-label="${c.name ?? c.value}"
-            ></div>
-          `)}
-        </div>
-      `)}
+    <div class="cell-progress">
+      <div class="progress-bar">
+        <div class="progress-fill ${toneClass}" style="width:${pct}%"></div>
+      </div>
+      <span class="progress-val">${pct}%</span>
     </div>
   `;
 }
-function pickerPanelTemplate(p) {
-  const { hex, r, g, b, h, s, l, alpha, inputMode, savedColors, showAlpha } = p;
-  const thumbX = s;
-  const thumbY = 100 - l;
-  const cssColor = alpha < 100 ? `rgba(${r},${g},${b},${(alpha / 100).toFixed(2)})` : hex;
-  const alphaGradient = `linear-gradient(to right, transparent, hsl(${h},${s}%,${l}%))`;
-  const inputsBlock = inputMode === "hex" ? html`
-        <div class="cp-input-group" style="flex:3">
-          <input class="cp-input" type="text" .value="${hex}" maxlength="7"
-            @input="${p.onHexInput}">
-          <span class="cp-input-label">HEX</span>
-        </div>
-        ${showAlpha ? html`
-          <div class="cp-input-group" style="flex:1">
-            <input class="cp-input" type="number" .value="${String(Math.round(alpha))}" min="0" max="100"
-              @input="${p.onAlphaNumInput}">
-            <span class="cp-input-label">A%</span>
-          </div>` : nothing}
-      ` : inputMode === "rgb" ? html`
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(r)}" min="0" max="255" @input="${(e) => p.onRgbInput(0, e)}"><span class="cp-input-label">R</span></div>
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(g)}" min="0" max="255" @input="${(e) => p.onRgbInput(1, e)}"><span class="cp-input-label">G</span></div>
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(b)}" min="0" max="255" @input="${(e) => p.onRgbInput(2, e)}"><span class="cp-input-label">B</span></div>
-        ${showAlpha ? html`<div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(Math.round(alpha))}" min="0" max="100" @input="${p.onAlphaNumInput}"><span class="cp-input-label">A%</span></div>` : nothing}
-      ` : html`
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(h)}" min="0" max="360" @input="${(e) => p.onHslInput(0, e)}"><span class="cp-input-label">H</span></div>
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(s)}" min="0" max="100" @input="${(e) => p.onHslInput(1, e)}"><span class="cp-input-label">S%</span></div>
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(l)}" min="0" max="100" @input="${(e) => p.onHslInput(2, e)}"><span class="cp-input-label">L%</span></div>
-        ${showAlpha ? html`<div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(Math.round(alpha))}" min="0" max="100" @input="${p.onAlphaNumInput}"><span class="cp-input-label">A%</span></div>` : nothing}
-      `;
+function renderAvatar(row, col) {
+  const name = String(row[col.key] ?? "");
+  const initials = col.initialsKey ? String(row[col.initialsKey] ?? "").slice(0, 2).toUpperCase() : name.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();
+  const hint = col.hintKey ? String(row[col.hintKey] ?? "") : "";
   return html`
-    <!-- Canvas 2D -->
-    <div class="cp-canvas"
-      style="background: hsl(${h},100%,50%);"
-      @mousedown="${p.onCanvasMousedown}"
-    >
-      <div class="cp-thumb"
-        style="left:${thumbX}%;top:${thumbY}%;background:${cssColor};"
-      ></div>
-    </div>
-
-    <!-- Sliders -->
-    <div class="cp-sliders">
-      <div class="cp-preview-dot">
-        <div class="cp-preview-color" style="background:${cssColor};"></div>
-      </div>
-      <div class="cp-sliders-stack">
-        <input type="range" class="cp-range cp-range-hue"
-          min="0" max="360" .value="${String(h)}"
-          @input="${p.onHueInput}">
-        ${showAlpha ? html`
-          <div class="cp-alpha-wrap" style="height:10px;">
-            <div class="cp-alpha-checker">
-              <input type="range" class="cp-range cp-range-alpha"
-                min="0" max="100" .value="${String(Math.round(alpha))}"
-                style="background:${alphaGradient};"
-                @input="${p.onAlphaInput}">
-            </div>
-          </div>` : nothing}
+    <div class="cell-avatar">
+      <div class="avatar-circle">${initials}</div>
+      <div class="avatar-text">
+        <span class="avatar-name">${name}</span>
+        ${hint ? html`<span class="avatar-hint">${hint}</span>` : nothing}
       </div>
     </div>
-
-    <!-- Inputs -->
-    <div class="cp-inputs-wrap">
-      <button class="cp-mode-btn" title="Cambiar modo" @click="${p.onModeToggle}">
-        ${ROTATE_SVG}
-      </button>
-      <div style="display:flex;gap:var(--lib-space-xs);flex:1;">
-        ${inputsBlock}
+  `;
+}
+function renderActionsBtn(row, idx, onRowAction) {
+  return html`
+    <button class="actions-btn"
+      aria-label="Acciones"
+      @click="${(e) => {
+    e.stopPropagation();
+    onRowAction(row, idx);
+  }}"
+    >⋯</button>
+  `;
+}
+function renderCell(col, row, idx, onRowAction) {
+  const value = row[col.key];
+  switch (col.type) {
+    case "badge": {
+      const tone = col.toneKey ? String(row[col.toneKey] ?? "inactive") : col.badgeTone ?? "inactive";
+      return renderBadge(value, tone);
+    }
+    case "progress":
+      return renderProgress(value, col.progressTone ?? "");
+    case "avatar":
+      return renderAvatar(row, col);
+    case "actions":
+      return renderActionsBtn(row, idx, onRowAction);
+    case "mono":
+      return html`<span class="cell-mono">${value ?? "—"}</span>`;
+    default:
+      return html`${value ?? "—"}`;
+  }
+}
+function thClasses(col, sortKey, sortDir) {
+  const parts = [];
+  if (col.type === "num") parts.push("cell-num", "is-num");
+  if (col.sticky) parts.push("col-sticky");
+  if (col.sortable) {
+    parts.push("is-sortable");
+    if (sortKey === col.key) parts.push(sortDir === "asc" ? "sort-asc" : "sort-desc");
+  }
+  return parts.join(" ");
+}
+function tdClasses(col) {
+  const parts = [];
+  if (col.type === "num") parts.push("cell-num");
+  if (col.type === "actions") parts.push("cell-actions");
+  if (col.sticky) parts.push("col-sticky");
+  if (col.truncate) parts.push("cell-truncate");
+  return parts.join(" ");
+}
+function rowClass(row, idx, selected) {
+  const state = row._state;
+  const isSelected = selected.has(idx) || state === "selected";
+  const parts = [];
+  if (isSelected) parts.push("is-selected");
+  else if (state) parts.push(`is-${state}`);
+  return parts.join(" ");
+}
+const WIDTHS = ["w-80", "w-60", "w-40", "w-60", "w-80"];
+function renderSkeletonCell(col, idx) {
+  const w = WIDTHS[idx % WIDTHS.length] ?? "w-60";
+  if (col.type === "avatar") return html`
+    <div class="skel-cell">
+      <div class="skel-avatar"></div>
+      <div style="flex:1;display:flex;flex-direction:column;gap:4px;">
+        <div class="skel-line ${w}"></div>
+        <div class="skel-line w-40" style="height:7px;"></div>
       </div>
-    </div>
-
-    <!-- Saved colors -->
-    <div class="cp-saved">
-      <span class="cp-saved-label">Guardados</span>
-      ${savedColors.map((sc) => html`
-        <div class="cp-swatch cp-swatch-sm"
-          style="background:${sc};"
-          data-name="${sc}"
-          @click="${() => p.onSavedClick(sc)}"
-        ></div>
+    </div>`;
+  if (col.type === "badge") return html`<div class="skel-badge"></div>`;
+  if (col.type === "num") return html`<div class="skel-line ${w}" style="margin-left:auto;"></div>`;
+  return html`<div class="skel-line ${w}"></div>`;
+}
+function renderSkeleton(count, cols, selectable) {
+  return html`${Array.from({ length: count }, (_, r) => html`
+    <tr class="tbl-tr">
+      ${selectable ? html`<td class="cell-check"></td>` : nothing}
+      ${cols.map((col, c) => html`
+        <td class="${tdClasses(col)}" style="${col.type === "actions" ? "" : ""}">
+          ${renderSkeletonCell(col, r + c)}
+        </td>
       `)}
-      <button class="cp-saved-add" title="Guardar color actual" @click="${p.onSaveColor}">+</button>
-    </div>
-
-    <!-- Actions -->
-    <div class="cp-actions">
-      <button class="cp-btn cp-btn-cancel" @click="${p.onCancel}">Cancelar</button>
-      <button class="cp-btn cp-btn-ok" @click="${p.onApply}">Aplicar</button>
+    </tr>
+  `)}`;
+}
+function renderEmpty(title, desc, colSpan) {
+  return html`
+    <tr class="empty-row">
+      <td colspan="${colSpan}">
+        <span class="empty-icon">◯</span>
+        <span class="empty-title">${title}</span>
+        <span class="empty-desc">${desc}</span>
+      </td>
+    </tr>
+  `;
+}
+function renderToolbar(p) {
+  const countLabel = p.query ? `${p.filteredTotal} de ${p.totalRows}` : `${p.totalRows} registros`;
+  return html`
+    <div class="tbl-toolbar">
+      ${p.toolbarTitle ? html`<span class="tbl-toolbar-title">${p.toolbarTitle}</span>` : nothing}
+      <span class="tbl-toolbar-count">${countLabel}</span>
+      <input
+        class="tbl-toolbar-search"
+        type="search"
+        placeholder="Buscar…"
+        .value="${p.query}"
+        @input="${(e) => p.onSearch(e.target.value)}"
+      >
+      <slot name="toolbar-actions"></slot>
     </div>
   `;
 }
-function colorPickerTemplate(props) {
-  const {
-    variant,
-    /*label,*/
-    hex,
-    alpha,
-    panelOpen,
-    onTriggerClick
-  } = props;
-  const panel = html`
-    <div class="cp ${variant === "trigger" && panelOpen ? "is-open" : ""}">
-      ${pickerPanelTemplate(props)}
+function buildPageNumbers(current, total) {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages = [1];
+  if (current > 3) pages.push("…");
+  const lo = Math.max(2, current - 1);
+  const hi = Math.min(total - 1, current + 1);
+  for (let i = lo; i <= hi; i++) pages.push(i);
+  if (current < total - 2) pages.push("…");
+  pages.push(total);
+  return pages;
+}
+function renderPagination(p) {
+  if (p.pageSize <= 0 || p.totalPages <= 1) return html``;
+  const start = (p.page - 1) * p.pageSize + 1;
+  const end = Math.min(p.page * p.pageSize, p.filteredTotal);
+  const pages = buildPageNumbers(p.page, p.totalPages);
+  return html`
+    <div class="tbl-pagination">
+      <span class="pag-info">${start}–${end} de ${p.filteredTotal}</span>
+
+      <button class="pag-btn" ?disabled="${p.page <= 1}"
+        @click="${() => p.onPageChange(p.page - 1)}">‹</button>
+
+      ${pages.map((pg) => pg === "…" ? html`<span class="pag-sep">…</span>` : html`
+          <button class="pag-btn ${p.page === pg ? "is-active" : ""}"
+            @click="${() => p.onPageChange(pg)}">${pg}</button>
+        `)}
+
+      <button class="pag-btn" ?disabled="${p.page >= p.totalPages}"
+        @click="${() => p.onPageChange(p.page + 1)}">›</button>
     </div>
   `;
-  if (variant === "inline") {
-    return panel;
-  }
-  const cssColor = alpha < 100 ? `rgba(${props.r},${props.g},${props.b},${(alpha / 100).toFixed(2)})` : hex;
+}
+function dataTableTemplate(p) {
+  const colSpan = p.columns.length + (p.selectable ? 1 : 0);
+  const wrapCls = `tbl-wrap${p.stickyHead ? " tbl-sticky-head" : ""}`;
   return html`
-    <div class="cp-trigger-wrap">
-      <button
-        class="cp-trigger ${panelOpen ? "is-open" : ""}"
-        @click="${onTriggerClick}"
-        aria-expanded="${panelOpen}"
-        aria-haspopup="true"
-      >
-        <div class="cp-trigger-dot">
-          <div class="cp-trigger-color" style="background:${cssColor};"></div>
-        </div>
-        <span>${hex.toUpperCase()}</span>
-        ${CARET_SVG}
-      </button>
-      ${panel}
+    ${p.toolbar ? renderToolbar(p) : nothing}
+
+    <div class="${wrapCls}">
+      <table>
+        ${p.caption ? html`<caption>${p.caption}</caption>` : nothing}
+
+        <!-- THEAD -->
+        <thead>
+          <tr>
+            ${p.selectable ? html`
+              <th class="cell-check">
+                <input type="checkbox"
+                  .indeterminate="${p.someSelected}"
+                  .checked="${p.allSelected}"
+                  @change="${(e) => p.onSelectAll(e.target.checked, p.data.length)}">
+              </th>
+            ` : nothing}
+
+            ${p.columns.map((col) => html`
+              <th class="${thClasses(col, p.sortKey, p.sortDir)}"
+                @click="${col.sortable ? () => p.onSort(col.key) : nothing}">
+                ${col.header}
+              </th>
+            `)}
+          </tr>
+        </thead>
+
+        <!-- TBODY -->
+        <tbody>
+          ${p.loading ? renderSkeleton(p.skeletonRows, p.columns, p.selectable) : p.data.length === 0 ? renderEmpty(p.emptyTitle, p.emptyDesc, colSpan) : p.data.map((row, idx) => {
+    const globalIdx = (p.page - 1) * (p.pageSize || 0) + idx;
+    return html`
+                    <tr class="${rowClass(row, globalIdx, p.selected)}">
+                      ${p.selectable ? html`
+                        <td class="cell-check">
+                          <input type="checkbox"
+                            .checked="${p.selected.has(globalIdx)}"
+                            @change="${(e) => p.onSelectRow(globalIdx, e.target.checked)}">
+                        </td>
+                      ` : nothing}
+
+                      ${p.columns.map((col) => html`
+                        <td class="${tdClasses(col)}">
+                          ${renderCell(col, row, globalIdx, p.onRowAction)}
+                        </td>
+                      `)}
+                    </tr>
+                  `;
+  })}
+        </tbody>
+      </table>
     </div>
+
+    ${renderPagination(p)}
+    <slot name="pagination"></slot>
   `;
 }
 export {
-  colorPickerTemplate,
-  pickerPanelTemplate,
-  swatchGridTemplate
+  dataTableTemplate
 };
 //# sourceMappingURL=index204.js.map

package/dist/index204.js.map

@@ -1 +1 @@
-{"version":3,"file":"index204.js","sources":["../src/components/molecules/color-picker/lib-color-picker.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { ColorPickerVariant, ColorInputMode, SwatchRow, SwatchColor } from './lib-color-picker.types';\n\n/* ── Icono ↺ inline para el mode button ── */\nconst ROTATE_SVG = html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\"\n  stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M10 2.5A4.5 4.5 0 1 0 11 6\"/>\n  <path d=\"M10 .5v2h2\"/>\n</svg>`;\n\n/* ── Caret-down para trigger ── */\nconst CARET_SVG = html`<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" stroke=\"currentColor\"\n  stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M2 4l3 3 3-3\"/>\n</svg>`;\n\n/* ────────────────────────────────────────────\n   Interfaces de props para cada sub-sección\n   ──────────────────────────────────────────── */\n\nexport interface PickerPanelProps {\n  hex:          string;\n  r: number; g: number; b: number;\n  h: number; s: number; l: number;\n  alpha:        number;   // 0–100\n  inputMode:    ColorInputMode;\n  savedColors:  string[];\n  showAlpha:    boolean;\n  /** Callbacks */\n  onCanvasMousedown: (e: MouseEvent) => void;\n  onHueInput:        (e: Event) => void;\n  onAlphaInput:      (e: Event) => void;\n  onModeToggle:      () => void;\n  onHexInput:        (e: Event) => void;\n  onRgbInput:        (rIdx: 0|1|2, e: Event) => void;\n  onHslInput:        (cIdx: 0|1|2, e: Event) => void;\n  onAlphaNumInput:   (e: Event) => void;\n  onSaveColor:       () => void;\n  onSavedClick:      (hex: string) => void;\n  onCancel:          () => void;\n  onApply:           () => void;\n}\n\nexport interface SwatchGridProps {\n  rows:     SwatchRow[];\n  selected: string;\n  onSelect: (color: SwatchColor) => void;\n}\n\n/* ────────────────────────────────────────────\n   Swatch grid template\n   ──────────────────────────────────────────── */\nexport function swatchGridTemplate(props: SwatchGridProps): TemplateResult {\n  const { rows, selected, onSelect } = props;\n  return html`\n    <div class=\"cp-swatches\">\n      ${rows.map(row => html`\n        <div class=\"cp-swatches-row\">\n          <span class=\"cp-swatches-label\">${row.label}</span>\n          ${row.colors.map(c => html`\n            <div\n              class=\"cp-swatch ${c.value.toLowerCase() === selected.toLowerCase() ? 'is-selected' : ''}\"\n              style=\"background:${c.value};\"\n              data-name=\"${c.name ?? ''}\"\n              @click=\"${(): void => onSelect(c)}\"\n              role=\"button\"\n              aria-label=\"${c.name ?? c.value}\"\n            ></div>\n          `)}\n        </div>\n      `)}\n    </div>\n  `;\n}\n\n/* ────────────────────────────────────────────\n   Picker panel template (canvas + sliders + inputs + saved + actions)\n   ──────────────────────────────────────────── */\nexport function pickerPanelTemplate(p: PickerPanelProps): TemplateResult {\n  const { hex, r, g, b, h, s, l, alpha, inputMode, savedColors, showAlpha } = p;\n\n  /* Thumb position: x = saturation %, y = inverted lightness % */\n  const thumbX = s;\n  const thumbY = 100 - l;\n\n  const cssColor = alpha < 100\n    ? `rgba(${r},${g},${b},${(alpha / 100).toFixed(2)})`\n    : hex;\n\n  const alphaGradient =\n    `linear-gradient(to right, transparent, hsl(${h},${s}%,${l}%))`;\n\n  /* Inputs según el modo */\n  const inputsBlock: TemplateResult = inputMode === 'hex'\n    ? html`\n        <div class=\"cp-input-group\" style=\"flex:3\">\n          <input class=\"cp-input\" type=\"text\" .value=\"${hex}\" maxlength=\"7\"\n            @input=\"${p.onHexInput}\">\n          <span class=\"cp-input-label\">HEX</span>\n        </div>\n        ${showAlpha ? html`\n          <div class=\"cp-input-group\" style=\"flex:1\">\n            <input class=\"cp-input\" type=\"number\" .value=\"${String(Math.round(alpha))}\" min=\"0\" max=\"100\"\n              @input=\"${p.onAlphaNumInput}\">\n            <span class=\"cp-input-label\">A%</span>\n          </div>` : nothing}\n      `\n    : inputMode === 'rgb'\n    ? html`\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(r)}\" min=\"0\" max=\"255\" @input=\"${(e: Event): void => p.onRgbInput(0, e)}\"><span class=\"cp-input-label\">R</span></div>\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(g)}\" min=\"0\" max=\"255\" @input=\"${(e: Event): void => p.onRgbInput(1, e)}\"><span class=\"cp-input-label\">G</span></div>\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(b)}\" min=\"0\" max=\"255\" @input=\"${(e: Event): void => p.onRgbInput(2, e)}\"><span class=\"cp-input-label\">B</span></div>\n        ${showAlpha ? html`<div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(Math.round(alpha))}\" min=\"0\" max=\"100\" @input=\"${p.onAlphaNumInput}\"><span class=\"cp-input-label\">A%</span></div>` : nothing}\n      `\n    : html`\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(h)}\" min=\"0\" max=\"360\" @input=\"${(e: Event): void => p.onHslInput(0, e)}\"><span class=\"cp-input-label\">H</span></div>\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(s)}\" min=\"0\" max=\"100\" @input=\"${(e: Event): void => p.onHslInput(1, e)}\"><span class=\"cp-input-label\">S%</span></div>\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(l)}\" min=\"0\" max=\"100\" @input=\"${(e: Event): void => p.onHslInput(2, e)}\"><span class=\"cp-input-label\">L%</span></div>\n        ${showAlpha ? html`<div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(Math.round(alpha))}\" min=\"0\" max=\"100\" @input=\"${p.onAlphaNumInput}\"><span class=\"cp-input-label\">A%</span></div>` : nothing}\n      `;\n\n  return html`\n    <!-- Canvas 2D -->\n    <div class=\"cp-canvas\"\n      style=\"background: hsl(${h},100%,50%);\"\n      @mousedown=\"${p.onCanvasMousedown}\"\n    >\n      <div class=\"cp-thumb\"\n        style=\"left:${thumbX}%;top:${thumbY}%;background:${cssColor};\"\n      ></div>\n    </div>\n\n    <!-- Sliders -->\n    <div class=\"cp-sliders\">\n      <div class=\"cp-preview-dot\">\n        <div class=\"cp-preview-color\" style=\"background:${cssColor};\"></div>\n      </div>\n      <div class=\"cp-sliders-stack\">\n        <input type=\"range\" class=\"cp-range cp-range-hue\"\n          min=\"0\" max=\"360\" .value=\"${String(h)}\"\n          @input=\"${p.onHueInput}\">\n        ${showAlpha ? html`\n          <div class=\"cp-alpha-wrap\" style=\"height:10px;\">\n            <div class=\"cp-alpha-checker\">\n              <input type=\"range\" class=\"cp-range cp-range-alpha\"\n                min=\"0\" max=\"100\" .value=\"${String(Math.round(alpha))}\"\n                style=\"background:${alphaGradient};\"\n                @input=\"${p.onAlphaInput}\">\n            </div>\n          </div>` : nothing}\n      </div>\n    </div>\n\n    <!-- Inputs -->\n    <div class=\"cp-inputs-wrap\">\n      <button class=\"cp-mode-btn\" title=\"Cambiar modo\" @click=\"${p.onModeToggle}\">\n        ${ROTATE_SVG}\n      </button>\n      <div style=\"display:flex;gap:var(--lib-space-xs);flex:1;\">\n        ${inputsBlock}\n      </div>\n    </div>\n\n    <!-- Saved colors -->\n    <div class=\"cp-saved\">\n      <span class=\"cp-saved-label\">Guardados</span>\n      ${savedColors.map(sc => html`\n        <div class=\"cp-swatch cp-swatch-sm\"\n          style=\"background:${sc};\"\n          data-name=\"${sc}\"\n          @click=\"${(): void => p.onSavedClick(sc)}\"\n        ></div>\n      `)}\n      <button class=\"cp-saved-add\" title=\"Guardar color actual\" @click=\"${p.onSaveColor}\">+</button>\n    </div>\n\n    <!-- Actions -->\n    <div class=\"cp-actions\">\n      <button class=\"cp-btn cp-btn-cancel\" @click=\"${p.onCancel}\">Cancelar</button>\n      <button class=\"cp-btn cp-btn-ok\" @click=\"${p.onApply}\">Aplicar</button>\n    </div>\n  `;\n}\n\n/* ────────────────────────────────────────────\n   Root template — inline vs trigger\n   ──────────────────────────────────────────── */\n\nexport interface ColorPickerRootProps extends PickerPanelProps {\n  variant:    ColorPickerVariant;\n  label:      string;\n  panelOpen:  boolean;\n  onTriggerClick: () => void;\n}\n\nexport function colorPickerTemplate(props: ColorPickerRootProps): TemplateResult {\n  const { variant, /*label,*/ hex, alpha, panelOpen, onTriggerClick } = props;\n\n  const panel = html`\n    <div class=\"cp ${variant === 'trigger' && panelOpen ? 'is-open' : ''}\">\n      ${pickerPanelTemplate(props)}\n    </div>\n  `;\n\n  if (variant === 'inline') {\n    return panel;\n  }\n\n  /* Trigger variant — botón + panel flotante */\n  const cssColor = alpha < 100\n    ? `rgba(${props.r},${props.g},${props.b},${(alpha / 100).toFixed(2)})`\n    : hex;\n\n  return html`\n    <div class=\"cp-trigger-wrap\">\n      <button\n        class=\"cp-trigger ${panelOpen ? 'is-open' : ''}\"\n        @click=\"${onTriggerClick}\"\n        aria-expanded=\"${panelOpen}\"\n        aria-haspopup=\"true\"\n      >\n        <div class=\"cp-trigger-dot\">\n          <div class=\"cp-trigger-color\" style=\"background:${cssColor};\"></div>\n        </div>\n        <span>${hex.toUpperCase()}</span>\n        ${CARET_SVG}\n      </button>\n      ${panel}\n    </div>\n  `;\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"index204.js","sources":["../src/components/organisms/data-table/lib-data-table.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type {\n  TableColumn,\n  TableRowData,\n  TableVariant,\n  TableSize,\n  TableBadgeTone,\n} from './lib-data-table.types';\n\n/* ── Template Props ─────────────────────────────────────── */\nexport interface DataTableTemplateProps {\n  columns:       TableColumn[];\n  data:          TableRowData[];\n  filteredTotal: number;\n  totalRows:     number;\n  variant:       TableVariant;\n  size:          TableSize;\n  dark:          boolean;\n  loading:       boolean;\n  selectable:    boolean;\n  stickyHead:    boolean;\n  caption:       string;\n  emptyTitle:    string;\n  emptyDesc:     string;\n  toolbar:       boolean;\n  toolbarTitle:  string;\n  skeletonRows:  number;\n  sortKey:       string;\n  sortDir:       'asc' | 'desc';\n  query:         string;\n  selected:      Set<number>;\n  allSelected:   boolean;\n  someSelected:  boolean;\n  page:          number;\n  pageSize:      number;\n  totalPages:    number;\n  onSort:        (key: string) => void;\n  onSearch:      (q: string) => void;\n  onSelectAll:   (checked: boolean, total: number) => void;\n  onSelectRow:   (idx: number, checked: boolean) => void;\n  onRowAction:   (row: TableRowData, idx: number) => void;\n  onPageChange:  (p: number) => void;\n}\n\n/* ── Helpers: Cell renderers ───────────────────────────── */\n\nfunction renderBadge(value: unknown, tone: string): TemplateResult {\n  const label = String(value ?? '');\n  return html`<span class=\"cell-badge tone-${tone}\">${label}</span>`;\n}\n\nfunction renderProgress(value: unknown, tone: 'kaki' | 'celadon' | ''): TemplateResult {\n  const pct = Math.min(100, Math.max(0, Number(value) || 0));\n  const toneClass = tone ? `tone-${tone}` : '';\n  return html`\n    <div class=\"cell-progress\">\n      <div class=\"progress-bar\">\n        <div class=\"progress-fill ${toneClass}\" style=\"width:${pct}%\"></div>\n      </div>\n      <span class=\"progress-val\">${pct}%</span>\n    </div>\n  `;\n}\n\nfunction renderAvatar(row: TableRowData, col: TableColumn): TemplateResult {\n  const name     = String(row[col.key] ?? '');\n  const initials = col.initialsKey\n    ? String(row[col.initialsKey] ?? '').slice(0, 2).toUpperCase()\n    : name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();\n  const hint = col.hintKey ? String(row[col.hintKey] ?? '') : '';\n\n  return html`\n    <div class=\"cell-avatar\">\n      <div class=\"avatar-circle\">${initials}</div>\n      <div class=\"avatar-text\">\n        <span class=\"avatar-name\">${name}</span>\n        ${hint ? html`<span class=\"avatar-hint\">${hint}</span>` : nothing}\n      </div>\n    </div>\n  `;\n}\n\nfunction renderActionsBtn(row: TableRowData, idx: number, onRowAction: (r: TableRowData, i: number) => void): TemplateResult {\n  return html`\n    <button class=\"actions-btn\"\n      aria-label=\"Acciones\"\n      @click=\"${(e: Event):void => { e.stopPropagation(); onRowAction(row, idx); }}\"\n    >⋯</button>\n  `;\n}\n\nfunction renderCell(col: TableColumn, row: TableRowData, idx: number, onRowAction: (r: TableRowData, i: number) => void): TemplateResult {\n  const value = row[col.key];\n\n  switch (col.type) {\n    case 'badge': {\n      const tone = col.toneKey\n        ? String(row[col.toneKey] ?? 'inactive')\n        : (col.badgeTone ?? 'inactive');\n      return renderBadge(value, tone as TableBadgeTone);\n    }\n    case 'progress':\n      return renderProgress(value, col.progressTone ?? '');\n    case 'avatar':\n      return renderAvatar(row, col);\n    case 'actions':\n      return renderActionsBtn(row, idx, onRowAction);\n    case 'mono':\n      return html`<span class=\"cell-mono\">${value ?? '—'}</span>`;\n    default:\n      return html`${value ?? '—'}`;\n  }\n}\n\n/* ── Helpers: Structural ───────────────────────────────── */\n\nfunction thClasses(col: TableColumn, sortKey: string, sortDir: 'asc' | 'desc'): string {\n  const parts: string[] = [];\n  if (col.type === 'num')     parts.push('cell-num', 'is-num');\n  if (col.sticky)             parts.push('col-sticky');\n  if (col.sortable) {\n    parts.push('is-sortable');\n    if (sortKey === col.key)  parts.push(sortDir === 'asc' ? 'sort-asc' : 'sort-desc');\n  }\n  return parts.join(' ');\n}\n\nfunction tdClasses(col: TableColumn): string {\n  const parts: string[] = [];\n  if (col.type === 'num')      parts.push('cell-num');\n  if (col.type === 'actions')  parts.push('cell-actions');\n  if (col.sticky)              parts.push('col-sticky');\n  if (col.truncate)            parts.push('cell-truncate');\n  return parts.join(' ');\n}\n\nfunction rowClass(row: TableRowData, idx: number, selected: Set<number>): string {\n  const state = row._state;\n  const isSelected = selected.has(idx) || state === 'selected';\n  const parts: string[] = [];\n  if (isSelected)           parts.push('is-selected');\n  else if (state)           parts.push(`is-${state}`);\n  return parts.join(' ');\n}\n\n/* ── Skeleton rows ───────────────────────────────────────── */\nconst WIDTHS = ['w-80', 'w-60', 'w-40', 'w-60', 'w-80'] as const;\n\nfunction renderSkeletonCell(col: TableColumn, idx: number): TemplateResult {\n  const w = WIDTHS[idx % WIDTHS.length] ?? 'w-60';\n  if (col.type === 'avatar') return html`\n    <div class=\"skel-cell\">\n      <div class=\"skel-avatar\"></div>\n      <div style=\"flex:1;display:flex;flex-direction:column;gap:4px;\">\n        <div class=\"skel-line ${w}\"></div>\n        <div class=\"skel-line w-40\" style=\"height:7px;\"></div>\n      </div>\n    </div>`;\n  if (col.type === 'badge')  return html`<div class=\"skel-badge\"></div>`;\n  if (col.type === 'num')    return html`<div class=\"skel-line ${w}\" style=\"margin-left:auto;\"></div>`;\n  return html`<div class=\"skel-line ${w}\"></div>`;\n}\n\nfunction renderSkeleton(count: number, cols: TableColumn[], selectable: boolean): TemplateResult {\n  return html`${Array.from({ length: count }, (_, r) => html`\n    <tr class=\"tbl-tr\">\n      ${selectable ? html`<td class=\"cell-check\"></td>` : nothing}\n      ${cols.map((col, c) => html`\n        <td class=\"${tdClasses(col)}\" style=\"${col.type === 'actions' ? '' : ''}\">\n          ${renderSkeletonCell(col, r + c)}\n        </td>\n      `)}\n    </tr>\n  `)}`;\n}\n\n/* ── Empty state ─────────────────────────────────────────── */\nfunction renderEmpty(title: string, desc: string, colSpan: number): TemplateResult {\n  return html`\n    <tr class=\"empty-row\">\n      <td colspan=\"${colSpan}\">\n        <span class=\"empty-icon\">◯</span>\n        <span class=\"empty-title\">${title}</span>\n        <span class=\"empty-desc\">${desc}</span>\n      </td>\n    </tr>\n  `;\n}\n\n/* ── Toolbar ─────────────────────────────────────────────── */\nfunction renderToolbar(p: DataTableTemplateProps): TemplateResult {\n  const countLabel = p.query\n    ? `${p.filteredTotal} de ${p.totalRows}`\n    : `${p.totalRows} registros`;\n\n  return html`\n    <div class=\"tbl-toolbar\">\n      ${p.toolbarTitle ? html`<span class=\"tbl-toolbar-title\">${p.toolbarTitle}</span>` : nothing}\n      <span class=\"tbl-toolbar-count\">${countLabel}</span>\n      <input\n        class=\"tbl-toolbar-search\"\n        type=\"search\"\n        placeholder=\"Buscar…\"\n        .value=\"${p.query}\"\n        @input=\"${(e: Event):void => p.onSearch((e.target as HTMLInputElement).value)}\"\n      >\n      <slot name=\"toolbar-actions\"></slot>\n    </div>\n  `;\n}\n\n/* ── Built-in pagination bar ─────────────────────────────── */\nfunction buildPageNumbers(current: number, total: number): (number | '…')[] {\n  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);\n  const pages: (number | '…')[] = [1];\n  if (current > 3) pages.push('…');\n  const lo = Math.max(2, current - 1);\n  const hi = Math.min(total - 1, current + 1);\n  for (let i = lo; i <= hi; i++) pages.push(i);\n  if (current < total - 2) pages.push('…');\n  pages.push(total);\n  return pages;\n}\n\nfunction renderPagination(p: DataTableTemplateProps): TemplateResult {\n  if (p.pageSize <= 0 || p.totalPages <= 1) return html``;\n  const start  = (p.page - 1) * p.pageSize + 1;\n  const end    = Math.min(p.page * p.pageSize, p.filteredTotal);\n  const pages  = buildPageNumbers(p.page, p.totalPages);\n\n  return html`\n    <div class=\"tbl-pagination\">\n      <span class=\"pag-info\">${start}–${end} de ${p.filteredTotal}</span>\n\n      <button class=\"pag-btn\" ?disabled=\"${p.page <= 1}\"\n        @click=\"${():void => p.onPageChange(p.page - 1)}\">‹</button>\n\n      ${pages.map(pg => pg === '…'\n        ? html`<span class=\"pag-sep\">…</span>`\n        : html`\n          <button class=\"pag-btn ${p.page === pg ? 'is-active' : ''}\"\n            @click=\"${():void => p.onPageChange(pg as number)}\">${pg}</button>\n        `)}\n\n      <button class=\"pag-btn\" ?disabled=\"${p.page >= p.totalPages}\"\n        @click=\"${():void => p.onPageChange(p.page + 1)}\">›</button>\n    </div>\n  `;\n}\n\n/* ── Main template ────────────────────────────────────────── */\nexport function dataTableTemplate(p: DataTableTemplateProps): TemplateResult {\n  const colSpan  = p.columns.length + (p.selectable ? 1 : 0);\n  const wrapCls  = `tbl-wrap${p.stickyHead ? ' tbl-sticky-head' : ''}`;\n\n  return html`\n    ${p.toolbar ? renderToolbar(p) : nothing}\n\n    <div class=\"${wrapCls}\">\n      <table>\n        ${p.caption ? html`<caption>${p.caption}</caption>` : nothing}\n\n        <!-- THEAD -->\n        <thead>\n          <tr>\n            ${p.selectable ? html`\n              <th class=\"cell-check\">\n                <input type=\"checkbox\"\n                  .indeterminate=\"${p.someSelected}\"\n                  .checked=\"${p.allSelected}\"\n                  @change=\"${(e: Event):void =>\n                    p.onSelectAll((e.target as HTMLInputElement).checked, p.data.length)}\">\n              </th>\n            ` : nothing}\n\n            ${p.columns.map(col => html`\n              <th class=\"${thClasses(col, p.sortKey, p.sortDir)}\"\n                @click=\"${col.sortable ? ():void => p.onSort(col.key) : nothing}\">\n                ${col.header}\n              </th>\n            `)}\n          </tr>\n        </thead>\n\n        <!-- TBODY -->\n        <tbody>\n          ${p.loading\n            ? renderSkeleton(p.skeletonRows, p.columns, p.selectable)\n            : p.data.length === 0\n              ? renderEmpty(p.emptyTitle, p.emptyDesc, colSpan)\n              : p.data.map((row, idx) => {\n                  const globalIdx = (p.page - 1) * (p.pageSize || 0) + idx;\n                  return html`\n                    <tr class=\"${rowClass(row, globalIdx, p.selected)}\">\n                      ${p.selectable ? html`\n                        <td class=\"cell-check\">\n                          <input type=\"checkbox\"\n                            .checked=\"${p.selected.has(globalIdx)}\"\n                            @change=\"${(e: Event):void =>\n                              p.onSelectRow(globalIdx, (e.target as HTMLInputElement).checked)}\">\n                        </td>\n                      ` : nothing}\n\n                      ${p.columns.map(col => html`\n                        <td class=\"${tdClasses(col)}\">\n                          ${renderCell(col, row, globalIdx, p.onRowAction)}\n                        </td>\n                      `)}\n                    </tr>\n                  `;\n                })\n          }\n        </tbody>\n      </table>\n    </div>\n\n    ${renderPagination(p)}\n    <slot name=\"pagination\"></slot>\n  `;\n}"],"names":[],"mappings":"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"}