@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index328.js

@@ -1,5 +1,81 @@
-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%}}';
+import { html, nothing, svg } from "lit";
+function renderDots(p) {
+  const current = Math.round(p.progress / 100 * p.dotsCount);
+  return html`
+    ${Array.from({ length: p.dotsCount }, (_, i) => {
+    const done = i < current - 1;
+    const active = i === current - 1;
+    return html`
+        <span
+          class="rp-dot ${done ? "is-done" : ""} ${active ? "is-current" : ""}"
+          aria-hidden="true"
+        ></span>
+      `;
+  })}
+  `;
+}
+function renderRing(p) {
+  const r = p.ringSize / 2 - 3;
+  const circumference = 2 * Math.PI * r;
+  const offset = circumference * (1 - p.progress / 100);
+  return html`
+    ${svg`
+      <svg
+        class="rp-ring-svg"
+        width="${p.ringSize}"
+        height="${p.ringSize}"
+        viewBox="0 0 ${p.ringSize} ${p.ringSize}"
+        role="img"
+        aria-label="Progreso de lectura: ${p.progress}%"
+      >
+        <circle
+          class="rp-ring-track"
+          cx="${p.ringSize / 2}"
+          cy="${p.ringSize / 2}"
+          r="${r}"
+        />
+        <circle
+          class="rp-ring-fill"
+          cx="${p.ringSize / 2}"
+          cy="${p.ringSize / 2}"
+          r="${r}"
+          stroke-dasharray="${circumference}"
+          stroke-dashoffset="${offset}"
+        />
+      </svg>
+    `}
+  `;
+}
+function readingProgressTemplate(p) {
+  if (p.variant === "bar" || p.variant === "line" || p.variant === "vertical") {
+    return html`
+      <span
+        role="progressbar"
+        aria-label="Progreso de lectura"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow="${p.progress}"
+        style="display:none"
+      ></span>
+    `;
+  }
+  if (p.variant === "dots") {
+    return html`
+      <span role="progressbar" aria-label="Progreso de lectura" aria-valuenow="${p.progress}" aria-valuemin="0" aria-valuemax="100" style="display:contents">
+        ${renderDots(p)}
+      </span>
+    `;
+  }
+  if (p.variant === "ring") {
+    return html`
+      <span role="progressbar" aria-label="Progreso de lectura" aria-valuenow="${p.progress}" aria-valuemin="0" aria-valuemax="100" style="display:contents">
+        ${renderRing(p)}
+      </span>
+    `;
+  }
+  return nothing;
+}
 export {
-  tableCss as default
+  readingProgressTemplate
 };
 //# sourceMappingURL=index328.js.map

package/dist/index328.js.map

@@ -1 +1 @@
-{"version":3,"file":"index328.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index328.js","sources":["../src/components/atoms/reading-progress/lib-reading-progress.html.ts"],"sourcesContent":["import { html, nothing, svg, TemplateResult } from 'lit';\nimport { ReadingProgressVariant } from './lib-reading-progress.component';\n\nexport interface ReadingProgressTemplateProps {\n  variant:    ReadingProgressVariant;\n  progress:   number;   /* 0 – 100 */\n  dotsCount:  number;\n  ringSize:   number;\n}\n\n/* ── DOTS ──────────────────────────────────────────────── */\nfunction renderDots(p: ReadingProgressTemplateProps): TemplateResult {\n  const current = Math.round((p.progress / 100) * p.dotsCount);\n  return html`\n    ${Array.from({ length: p.dotsCount }, (_, i) => {\n      const done = i < current - 1;\n      const active = i === current - 1;\n      return html`\n        <span\n          class=\"rp-dot ${done ? 'is-done' : ''} ${active ? 'is-current' : ''}\"\n          aria-hidden=\"true\"\n        ></span>\n      `;\n    })}\n  `;\n}\n\n/* ── RING ──────────────────────────────────────────────── */\nfunction renderRing(p: ReadingProgressTemplateProps): TemplateResult {\n  const r            = (p.ringSize / 2) - 3;   /* margen para stroke-width:2 */\n  const circumference = 2 * Math.PI * r;\n  const offset        = circumference * (1 - p.progress / 100);\n\n  return html`\n    ${svg`\n      <svg\n        class=\"rp-ring-svg\"\n        width=\"${p.ringSize}\"\n        height=\"${p.ringSize}\"\n        viewBox=\"0 0 ${p.ringSize} ${p.ringSize}\"\n        role=\"img\"\n        aria-label=\"Progreso de lectura: ${p.progress}%\"\n      >\n        <circle\n          class=\"rp-ring-track\"\n          cx=\"${p.ringSize / 2}\"\n          cy=\"${p.ringSize / 2}\"\n          r=\"${r}\"\n        />\n        <circle\n          class=\"rp-ring-fill\"\n          cx=\"${p.ringSize / 2}\"\n          cy=\"${p.ringSize / 2}\"\n          r=\"${r}\"\n          stroke-dasharray=\"${circumference}\"\n          stroke-dashoffset=\"${offset}\"\n        />\n      </svg>\n    `}\n  `;\n}\n\n/* ── Template principal ─────────────────────────────────── */\nexport function readingProgressTemplate(\n  p: ReadingProgressTemplateProps,\n): TemplateResult {\n  /* bar + line + vertical → el host ES el elemento visual (CSS en :host)\n     Solo necesitamos el aria progressbar */\n  if (p.variant === 'bar' || p.variant === 'line' || p.variant === 'vertical') {\n    return html`\n      <span\n        role=\"progressbar\"\n        aria-label=\"Progreso de lectura\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow=\"${p.progress}\"\n        style=\"display:none\"\n      ></span>\n    `;\n  }\n\n  if (p.variant === 'dots') {\n    return html`\n      <span role=\"progressbar\" aria-label=\"Progreso de lectura\" aria-valuenow=\"${p.progress}\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"display:contents\">\n        ${renderDots(p)}\n      </span>\n    `;\n  }\n\n  if (p.variant === 'ring') {\n    return html`\n      <span role=\"progressbar\" aria-label=\"Progreso de lectura\" aria-valuenow=\"${p.progress}\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"display:contents\">\n        ${renderRing(p)}\n      </span>\n    `;\n  }\n\n  return nothing as unknown as TemplateResult;\n}"],"names":[],"mappings":";AAWA,SAAS,WAAW,GAAiD;AACnE,QAAM,UAAU,KAAK,MAAO,EAAE,WAAW,MAAO,EAAE,SAAS;AAC3D,SAAO;AAAA,MACH,MAAM,KAAK,EAAE,QAAQ,EAAE,UAAA,GAAa,CAAC,GAAG,MAAM;AAC9C,UAAM,OAAO,IAAI,UAAU;AAC3B,UAAM,SAAS,MAAM,UAAU;AAC/B,WAAO;AAAA;AAAA,0BAEa,OAAO,YAAY,EAAE,IAAI,SAAS,eAAe,EAAE;AAAA;AAAA;AAAA;AAAA,EAIzE,CAAC,CAAC;AAAA;AAEN;AAGA,SAAS,WAAW,GAAiD;AACnE,QAAM,IAAgB,EAAE,WAAW,IAAK;AACxC,QAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,QAAM,SAAgB,iBAAiB,IAAI,EAAE,WAAW;AAExD,SAAO;AAAA,MACH;AAAA;AAAA;AAAA,iBAGW,EAAE,QAAQ;AAAA,kBACT,EAAE,QAAQ;AAAA,uBACL,EAAE,QAAQ,IAAI,EAAE,QAAQ;AAAA;AAAA,2CAEJ,EAAE,QAAQ;AAAA;AAAA;AAAA;AAAA,gBAIrC,EAAE,WAAW,CAAC;AAAA,gBACd,EAAE,WAAW,CAAC;AAAA,eACf,CAAC;AAAA;AAAA;AAAA;AAAA,gBAIA,EAAE,WAAW,CAAC;AAAA,gBACd,EAAE,WAAW,CAAC;AAAA,eACf,CAAC;AAAA,8BACc,aAAa;AAAA,+BACZ,MAAM;AAAA;AAAA;AAAA,KAGhC;AAAA;AAEL;AAGO,SAAS,wBACd,GACgB;AAGhB,MAAI,EAAE,YAAY,SAAS,EAAE,YAAY,UAAU,EAAE,YAAY,YAAY;AAC3E,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMc,EAAE,QAAQ;AAAA;AAAA;AAAA;AAAA,EAIjC;AAEA,MAAI,EAAE,YAAY,QAAQ;AACxB,WAAO;AAAA,iFACsE,EAAE,QAAQ;AAAA,UACjF,WAAW,CAAC,CAAC;AAAA;AAAA;AAAA,EAGrB;AAEA,MAAI,EAAE,YAAY,QAAQ;AACxB,WAAO;AAAA,iFACsE,EAAE,QAAQ;AAAA,UACjF,WAAW,CAAC,CAAC;AAAA;AAAA;AAAA,EAGrB;AAEA,SAAO;AACT;"}

package/dist/index329.js

@@ -1,240 +1,5 @@
-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="cell-progress">
-      <div class="progress-bar">
-        <div class="progress-fill ${toneClass}" style="width:${pct}%"></div>
-      </div>
-      <span class="progress-val">${pct}%</span>
-    </div>
-  `;
-}
-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`
-    <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>
-  `;
-}
-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>`;
-  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>
-      `)}
-    </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 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>
-  `;
-}
-function dataTableTemplate(p) {
-  const colSpan = p.columns.length + (p.selectable ? 1 : 0);
-  const wrapCls = `tbl-wrap${p.stickyHead ? " tbl-sticky-head" : ""}`;
-  return html`
-    ${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>
-  `;
-}
+const componentCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host([variant="bar"]),:host(:not([variant])){display:block;position:absolute;bottom:-1px;left:0;width:0%;height:2px;pointer-events:none;z-index:var(--z-raised);transition:width 80ms linear;background:var(--rp-color)}:host([variant="bar"]):after,:host(:not([variant])):after{content:"";position:absolute;right:-8px;top:50%;transform:translateY(-50%);width:16px;height:5px;border-radius:var(--radius-full);background:var(--rp-glow);filter:blur(3px);opacity:0;transition:opacity var(--duration-slow)}:host([variant="bar"][active]):after,:host(:not([variant])[active]):after{opacity:1}:host([variant="line"]){display:block;position:absolute;bottom:0;left:0;width:0%;height:1px;pointer-events:none;z-index:var(--z-raised);transition:width 80ms linear;background:var(--rp-color);opacity:.6}:host([variant="dots"]){display:inline-flex;align-items:center;gap:5px}.rp-dot{width:5px;height:5px;border-radius:var(--radius-full);background:var(--border-default);transition:background var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out),opacity var(--duration-slow);flex-shrink:0}.rp-dot.is-done{background:var(--rp-color);transform:scale(1.2)}.rp-dot.is-current{background:var(--rp-color-light);transform:scale(1.4);box-shadow:0 0 0 2px var(--rp-glow)}:host([variant="ring"]){display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.rp-ring-svg{display:block;transform:rotate(-90deg);overflow:visible}.rp-ring-track{fill:none;stroke:var(--border-subtle);stroke-width:2}.rp-ring-fill{fill:none;stroke:var(--rp-color);stroke-width:2;stroke-linecap:round;transition:stroke-dashoffset 80ms linear}:host([variant="vertical"]){display:block;position:fixed;left:0;top:0;width:2px;height:0%;background:linear-gradient(to bottom,var(--rp-color),var(--rp-color-light));z-index:var(--z-modal);pointer-events:none;transition:height 80ms linear}:host([variant="vertical"]):after{content:"";position:absolute;bottom:-6px;left:-3px;width:8px;height:8px;border-radius:var(--radius-full);background:var(--rp-color-light);box-shadow:0 0 6px var(--rp-glow)}:host,:host([tone="kaki"]){--rp-color: var(--color-kaki-500);--rp-color-light: var(--color-kaki-400);--rp-glow: rgb(217, 114, 52, .25)}:host([tone="celadon"]){--rp-color: var(--color-celadon-500);--rp-color-light: var(--color-celadon-400);--rp-glow: rgb(53, 113, 100, .25)}:host([tone="ink"]){--rp-color: var(--color-washi-800);--rp-color-light: var(--color-washi-700);--rp-glow: rgb(61, 51, 42, .2)}:host([tone="kintsugi"]){--rp-color: var(--color-kaki-500);--rp-color-light: var(--color-kaki-300);--rp-glow: oklch(65% .1 50deg / .55)}:host([tone="kintsugi"][variant="bar"]),:host([tone="kintsugi"]:not([variant])){background:linear-gradient(90deg,var(--color-kaki-600) 0%,var(--color-kaki-500) 30%,var(--color-kaki-300) 65%,var(--color-kaki-400) 100%);height:3px}:host([tone="kintsugi"][variant="bar"]):before,:host([tone="kintsugi"]:not([variant])):before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 0%,oklch(92% .04 60deg / .75) 45%,oklch(98% .01 60deg / .9) 50%,oklch(92% .04 60deg / .75) 55%,transparent 100%);animation:rp-kintsugi-shimmer 3s cubic-bezier(.4,0,.6,1) infinite;pointer-events:none}:host([tone="kintsugi"][variant="bar"][active]):after,:host([tone="kintsugi"]:not([variant])[active]):after{width:24px;height:8px;background:#c07c56a6;filter:blur(5px)}:host([tone="kintsugi"][variant="line"]){background:linear-gradient(90deg,var(--color-kaki-600) 0%,var(--color-kaki-300) 60%,var(--color-kaki-500) 100%);opacity:.85;height:1.5px}:host([tone="kintsugi"][variant="vertical"]){background:linear-gradient(to bottom,var(--color-kaki-600) 0%,var(--color-kaki-400) 45%,var(--color-kaki-300) 75%,var(--color-kaki-500) 100%);width:3px}:host([tone="kintsugi"][variant="vertical"]):after{width:10px;height:10px;background:var(--color-kaki-300);box-shadow:0 0 8px #c07c56b3,0 0 16px #c07c5659}@keyframes rp-kintsugi-shimmer{0%{transform:translate(-120%);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translate(120%);opacity:0}}}';
 export {
-  dataTableTemplate
+  componentCss as default
 };
 //# sourceMappingURL=index329.js.map

package/dist/index329.js.map

@@ -1 +1 @@
-{"version":3,"file":"index329.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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"}
+{"version":3,"file":"index329.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index33.js

@@ -1,8 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { generateUniqueId } from "./index213.js";
-import { radioTemplate } from "./index250.js";
-import radioCss from "./index251.js";
+import { renderQuote } from "./index322.js";
+import componentCss from "./index323.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -14,77 +13,42 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibRadio = class extends LitElement {
+let LibQuote = class extends LitElement {
   constructor() {
-    super();
-    this.checked = false;
-    this.disabled = false;
-    this.name = "";
-    this.value = "";
-    this.label = "";
-    this.sublabel = "";
+    super(...arguments);
+    this.text = "";
+    this.accent = "";
+    this.cite = "";
+    this.surface = "dark";
     this.size = "md";
-    this.variant = "default";
-    this._radioId = generateUniqueId("lib-radio-");
-  }
-  _handleChange(e) {
-    const input = e.target;
-    this.checked = input.checked;
-    this.dispatchEvent(
-      new CustomEvent("change", {
-        detail: { checked: this.checked, value: this.value },
-        bubbles: true,
-        composed: true
-      })
-    );
   }
   render() {
-    return radioTemplate({
-      radioId: this._radioId,
-      name: this.name,
-      value: this.value,
-      checked: this.checked,
-      disabled: this.disabled,
-      label: this.label,
-      sublabel: this.sublabel,
-      size: this.size,
-      variant: this.variant,
-      onChange: this._handleChange.bind(this)
-    });
+    return renderQuote(this);
   }
 };
-LibRadio.styles = [
+LibQuote.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(radioCss)}`
+  css`${unsafeCSS(componentCss)}`
 ];
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibRadio.prototype, "checked", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibRadio.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: String })
-], LibRadio.prototype, "name", 2);
 __decorateClass([
   property({ type: String })
-], LibRadio.prototype, "value", 2);
+], LibQuote.prototype, "text", 2);
 __decorateClass([
   property({ type: String })
-], LibRadio.prototype, "label", 2);
+], LibQuote.prototype, "accent", 2);
 __decorateClass([
   property({ type: String })
-], LibRadio.prototype, "sublabel", 2);
+], LibQuote.prototype, "cite", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibRadio.prototype, "size", 2);
+], LibQuote.prototype, "surface", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibRadio.prototype, "variant", 2);
-LibRadio = __decorateClass([
-  customElement("lib-radio")
-], LibRadio);
+], LibQuote.prototype, "size", 2);
+LibQuote = __decorateClass([
+  customElement("lib-quote")
+], LibQuote);
 export {
-  LibRadio
+  LibQuote
 };
 //# sourceMappingURL=index33.js.map

package/dist/index33.js.map

@@ -1 +1 @@
-{"version":3,"file":"index33.js","sources":["../src/components/atoms/radio/lib-radio.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { generateUniqueId } from '../../../core/a11y';\nimport type { LibRadioSize, LibRadioVariant } from './lib-radio.html';\nimport { radioTemplate } from './lib-radio.html';\nimport radioCss from './lib-radio.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport interface RadioChangeDetail {\n  checked: boolean;\n  value: string;\n}\n\n/**\n * @element lib-radio\n *\n * Control de seleccion unica. Debe usarse dentro de un grupo\n * con el mismo atributo `name` para que el navegador gestione\n * la exclusividad de forma nativa.\n *\n * @slot - Contenido de label alternativo (cuando no se usan props label/sublabel)\n *\n * @fires change - Emitido al seleccionar el radio.\n *   detail: { checked: boolean, value: string }\n *\n * @example\n * <lib-radio name=\"plan\" value=\"starter\" label=\"Starter\"></lib-radio>\n * <lib-radio name=\"plan\" value=\"pro\"     label=\"Pro\" checked></lib-radio>\n * <lib-radio name=\"plan\" value=\"ent\"     label=\"Enterprise\" disabled></lib-radio>\n */\n@customElement('lib-radio')\nexport class LibRadio extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(radioCss)}`,\n  ];\n\n  private _radioId: string;\n\n  constructor() {\n    super();\n    this._radioId = generateUniqueId('lib-radio-');\n  }\n\n  /** Estado seleccionado */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /** Estado deshabilitado */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Nombre del grupo. Radios con el mismo name forman un grupo\n   * de seleccion unica gestionado por el navegador.\n   */\n  @property({ type: String })\n  name = '';\n\n  /** Valor enviado en el evento change */\n  @property({ type: String })\n  value = '';\n\n  /** Texto principal del label */\n  @property({ type: String })\n  label = '';\n\n  /** Texto secundario bajo el label */\n  @property({ type: String })\n  sublabel = '';\n\n  /** Tamano del radio */\n  @property({ type: String, reflect: true })\n  size: LibRadioSize = 'md';\n\n  /** Variante de color */\n  @property({ type: String, reflect: true })\n  variant: LibRadioVariant = 'default';\n\n  private _handleChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n\n    this.dispatchEvent(\n      new CustomEvent<RadioChangeDetail>('change', {\n        detail: { checked: this.checked, value: this.value },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  override render(): TemplateResult {\n    return radioTemplate({\n      radioId: this._radioId,\n      name: this.name,\n      value: this.value,\n      checked: this.checked,\n      disabled: this.disabled,\n      label: this.label,\n      sublabel: this.sublabel,\n      size: this.size,\n      variant: this.variant,\n      onChange: this._handleChange.bind(this),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-radio': LibRadio;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA+BO,IAAM,WAAN,cAAuB,WAAW;AAAA,EAQvC,cAAc;AACZ,UAAA;AAMF,SAAA,UAAU;AAIV,SAAA,WAAW;AAOX,SAAA,OAAO;AAIP,SAAA,QAAQ;AAIR,SAAA,QAAQ;AAIR,SAAA,WAAW;AAIX,SAAA,OAAqB;AAIrB,SAAA,UAA2B;AApCzB,SAAK,WAAW,iBAAiB,YAAY;AAAA,EAC/C;AAAA,EAqCQ,cAAc,GAAgB;AACpC,UAAM,QAAQ,EAAE;AAChB,SAAK,UAAU,MAAM;AAErB,SAAK;AAAA,MACH,IAAI,YAA+B,UAAU;AAAA,QAC3C,QAAQ,EAAE,SAAS,KAAK,SAAS,OAAO,KAAK,MAAA;AAAA,QAC7C,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAES,SAAyB;AAChC,WAAO,cAAc;AAAA,MACnB,SAAS,KAAK;AAAA,MACd,MAAM,KAAK;AAAA,MACX,OAAO,KAAK;AAAA,MACZ,SAAS,KAAK;AAAA,MACd,UAAU,KAAK;AAAA,MACf,OAAO,KAAK;AAAA,MACZ,UAAU,KAAK;AAAA,MACf,MAAM,KAAK;AAAA,MACX,SAAS,KAAK;AAAA,MACd,UAAU,KAAK,cAAc,KAAK,IAAI;AAAA,IAAA,CACvC;AAAA,EACH;AACF;AA3Ea,SACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,QAAQ,CAAC;AAC3B;AAWA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAd/B,SAeX,WAAA,WAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAlB/B,SAmBX,WAAA,YAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzBf,SA0BX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7Bf,SA8BX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjCf,SAkCX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArCf,SAsCX,WAAA,YAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAzC9B,SA0CX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA7C9B,SA8CX,WAAA,WAAA,CAAA;AA9CW,WAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,QAAA;"}
+{"version":3,"file":"index33.js","sources":["../src/components/atoms/quote/lib-quote.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, type TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { renderQuote } from './lib-quote.html';\nimport componentCss from './lib-quote.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * `<lib-quote>` — Cita display editorial.\n *\n * Blockquote en Cormorant Garamond con acento itálico en kaki y\n * atribución en DM Mono. Patrón recurrente en hero sections, CTAs\n * y secciones de filosofía del sistema Shibui.\n *\n * @tag lib-quote\n *\n * @attr {string}                  text    - Primera línea de la cita (alternativa al slot).\n * @attr {string}                  accent  - Segunda línea en itálica kaki.\n * @attr {string}                  cite    - Atribución (ej: \"— Principio Shibui · 渋い\").\n * @attr {'dark'|'light'|'washi'}  surface - Superficie de fondo. Default: `dark`.\n * @attr {'sm'|'md'|'lg'}          size    - Tamaño tipográfico fluido. Default: `md`.\n *\n * @slot - Primera línea de la cita como rich content (alternativa al atributo `text`).\n *\n * @csspart blockquote - El elemento blockquote raíz.\n * @csspart text       - El párrafo de la cita.\n * @csspart accent     - El em de la segunda línea.\n * @csspart cite       - El elemento cite de atribución.\n *\n * @cssprop --q-text-color   - Color del texto principal.\n * @cssprop --q-accent-color - Color del acento itálico.\n * @cssprop --q-cite-color   - Color de la atribución.\n * @cssprop --q-size         - Tamaño de fuente (sobreescribe el atributo `size`).\n *\n * @example\n * <lib-quote\n *   text=\"Lo bello no se anuncia.\"\n *   accent=\"Se descubre con pausa.\"\n *   cite=\"— Principio Shibui · 渋い\"\n *   surface=\"dark\"\n * ></lib-quote>\n *\n * <!-- Con slot -->\n * <lib-quote accent=\"Se descubre con pausa.\" cite=\"— Principio Shibui\">\n *   Lo bello no se anuncia.\n * </lib-quote>\n */\n@customElement('lib-quote')\nexport class LibQuote extends LitElement {\n\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(componentCss)}`,\n  ];\n\n  /** Primera línea de la cita */\n  @property({ type: String })\n  text = '';\n\n  /** Segunda línea en itálica kaki */\n  @property({ type: String })\n  accent = '';\n\n  /** Atribución */\n  @property({ type: String })\n  cite = '';\n\n  /** Superficie de fondo */\n  @property({ type: String, reflect: true })\n  surface: 'dark' | 'light' | 'washi' = 'dark';\n\n  /** Tamaño tipográfico fluido */\n  @property({ type: String, reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  protected override render(): TemplateResult {\n    return renderQuote(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-quote': LibQuote;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA+CO,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA;AASL,SAAA,OAAO;AAIP,SAAA,SAAS;AAIT,SAAA,OAAO;AAIP,SAAA,UAAsC;AAItC,SAAA,OAA2B;AAAA,EAAA;AAAA,EAER,SAAyB;AAC1C,WAAO,YAAY,IAAI;AAAA,EACzB;AACF;AA9Ba,SAEK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,YAAY,CAAC;AAC/B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARf,SASX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAZf,SAaX,WAAA,UAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBf,SAiBX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GApB9B,SAqBX,WAAA,WAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAxB9B,SAyBX,WAAA,QAAA,CAAA;AAzBW,WAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,QAAA;"}

package/dist/index330.js

@@ -1,12 +1,17 @@
 import { html } from "lit";
-function accordionTemplate(props) {
+const rippleTemplate = (ripples) => {
   return html`
-    <div class="accordion__root" @accordion-toggle=${props.onToggle}>
-      <slot></slot>
-    </div>
+    ${ripples.map((r) => html`
+      <span class="ripple" style="
+        width: ${r.size}px;
+        height: ${r.size}px;
+        left: ${r.x}px;
+        top: ${r.y}px;
+      "></span>
+    `)}
   `;
-}
+};
 export {
-  accordionTemplate
+  rippleTemplate
 };
 //# sourceMappingURL=index330.js.map

package/dist/index330.js.map

@@ -1 +1 @@
-{"version":3,"file":"index330.js","sources":["../src/components/organisms/accordion/lib-accordion.component.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport interface AccordionTemplateProps {\n  onToggle: (e: Event) => void;\n}\n\n/**\n * Plantilla para lib-accordion.\n *\n * El organismo es un contenedor de slot: no renderiza items propios,\n * solo orquesta el comportamiento exclusive y aplica variantes via CSS.\n */\nexport function accordionTemplate(props: AccordionTemplateProps): TemplateResult {\n  return html`\n    <div class=\"accordion__root\" @accordion-toggle=${props.onToggle}>\n      <slot></slot>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAYO,SAAS,kBAAkB,OAA+C;AAC/E,SAAO;AAAA,qDAC4C,MAAM,QAAQ;AAAA;AAAA;AAAA;AAInE;"}
+{"version":3,"file":"index330.js","sources":["../src/components/atoms/ripple/lib-ripple.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { RippleEffect } from './lib-ripple.component';\n\nexport const rippleTemplate = (ripples: RippleEffect[]): TemplateResult => {\n  return html`\n    ${ripples.map(r => html`\n      <span class=\"ripple\" style=\"\n        width: ${r.size}px;\n        height: ${r.size}px;\n        left: ${r.x}px;\n        top: ${r.y}px;\n      \"></span>\n    `)}\n  `;\n};"],"names":[],"mappings":";AAGO,MAAM,iBAAiB,CAAC,YAA4C;AACzE,SAAO;AAAA,MACH,QAAQ,IAAI,CAAA,MAAK;AAAA;AAAA,iBAEN,EAAE,IAAI;AAAA,kBACL,EAAE,IAAI;AAAA,gBACR,EAAE,CAAC;AAAA,eACJ,EAAE,CAAC;AAAA;AAAA,KAEb,CAAC;AAAA;AAEN;"}

package/dist/index331.js

@@ -1,5 +1,5 @@
-const accordionCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{:host{border:1px solid var(--border-subtle);background:var(--bg-elevated);display:block}.accordion__root{display:flex;flex-direction:column}::slotted(lib-accordion-item:last-of-type){border-bottom:none!important}:host([variant="flush"]){border:none;background:transparent;box-shadow:none}:host([variant="flush"]) ::slotted(lib-accordion-item){--accordion-item-trigger-px: 0px;--accordion-item-content-px: 0px;--accordion-item-trigger-hover-bg: transparent;--accordion-item-trigger-bg: transparent;--accordion-item-body-bg: transparent}:host([variant="separated"]){border:none;background:transparent;box-shadow:none}:host([variant="separated"]) .accordion__root{gap:var(--lib-space-sm)}:host([variant="separated"]) ::slotted(lib-accordion-item){border:1px solid var(--border-subtle)!important;transition:box-shadow var(--duration-slow) var(--ease-out),border-color var(--duration-slow) var(--ease-out)}:host([variant="separated"]) ::slotted(lib-accordion-item[open]){box-shadow:var(--shadow-md);border-color:var(--border-default)!important}:host([variant="accent"]){border:1px solid var(--border-subtle);background:var(--bg-elevated)}:host([variant="accent"]) ::slotted(lib-accordion-item[open]){--accordion-item-accent-border: 2px solid var(--color-kaki-400);--accordion-item-trigger-bg: var(--color-kaki-50);--accordion-item-trigger-hover-bg: var(--color-kaki-100);--accordion-item-body-bg: var(--color-kaki-50);--accordion-item-label-color: var(--color-kaki-600);--accordion-item-icon-color: var(--color-kaki-400);--accordion-item-content-border: var(--color-kaki-200);--accordion-item-content-color: var(--color-kaki-600)}@media(prefers-reduced-motion:reduce){::slotted(lib-accordion-item){transition:none}}}';
+const styles = "@layer components{:host{display:block;position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:10}.ripple{position:absolute;border-radius:50%;background-color:var(--lib-ripple-color, orange);opacity:.2;transform:scale(0);animation:ripple-animation var(--duration-slower, .6s) var(--ease-out) forwards;pointer-events:none}@keyframes ripple-animation{to{transform:scale(1);opacity:0}}}";
 export {
-  accordionCss as default
+  styles as default
 };
 //# sourceMappingURL=index331.js.map