@shibui-ui/ui 1.25.1 → 1.26.0

package/dist/index238.js

@@ -1,5 +1,54 @@
-const carouselCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}button{font:inherit}}@layer components{.cr{position:relative;width:100%;overflow:hidden;-webkit-user-select:none;user-select:none;outline:none}.cr:focus-visible{outline:2px solid var(--color-washi-700);outline-offset:2px}.cr-track{display:flex;transition:transform var(--duration-slow) var(--ease-out);will-change:transform}::slotted(*){flex:0 0 100%;min-width:0}:host([peek="2"]) .cr-track{gap:var(--lib-space-md)}:host([peek="2"]) ::slotted(*){flex:0 0 calc(50% - 8px)}:host([peek="3"]) .cr-track{gap:var(--lib-space-md)}:host([peek="3"]) ::slotted(*){flex:0 0 calc(33.333% - 11px)}:host([peek="4"]) .cr-track{gap:var(--lib-space-sm)}:host([peek="4"]) ::slotted(*){flex:0 0 calc(25% - 6px)}.cr-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:var(--z-raised);width:40px;height:40px;border:1px solid var(--border-default);background:#faf7f4e0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary);transition:background var(--duration-base) var(--ease-default),border-color var(--duration-base) var(--ease-default),opacity var(--duration-base) var(--ease-default),transform var(--duration-base) var(--ease-bounce);border-radius:var(--radius-none)}.cr-arrow svg{width:16px;height:16px;flex-shrink:0}.cr-arrow:hover:not(.is-disabled){background:var(--bg-elevated);border-color:var(--border-strong, var(--color-washi-500));transform:translateY(-50%) scale(1.05)}.cr-arrow.is-disabled{opacity:.3;pointer-events:none}.cr-arrow-prev{left:var(--lib-space-md)}.cr-arrow-next{right:var(--lib-space-md)}.cr-dots{display:flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);padding-top:var(--lib-space-md)}.cr-dot{width:6px;height:6px;border-radius:var(--radius-full);background:var(--color-washi-300);border:none;cursor:pointer;padding:0;transition:width var(--duration-slow) var(--ease-bounce),background var(--duration-base) var(--ease-default);flex-shrink:0}.cr-dot.is-active{width:20px;background:var(--color-washi-900)}.cr-counter{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);color:var(--text-muted);text-align:center;padding-top:var(--lib-space-sm)}.cr-counter span{color:var(--text-primary)}:host([mode="fade"]) .cr-track{transition:none;position:relative}:host([mode="fade"]) ::slotted(*){position:absolute;top:0;left:0;width:100%;opacity:0;transition:opacity var(--duration-slow) var(--ease-out);pointer-events:none}:host([mode="fade"]) ::slotted(.is-active){position:relative;opacity:1;pointer-events:auto}slot[name=thumbnail]{display:flex;gap:var(--lib-space-xs);padding-top:var(--lib-space-sm);overflow-x:auto;scrollbar-width:none}slot[name=thumbnail]::-webkit-scrollbar{display:none}::slotted([slot="thumbnail"]){width:64px;height:48px;flex-shrink:0;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color var(--duration-base) var(--ease-default),opacity var(--duration-base) var(--ease-default);opacity:.5}::slotted([slot="thumbnail"].is-active){border-color:var(--color-washi-900);opacity:1}@media(max-width:640px){:host([peek="2"]) ::slotted(*),:host([peek="3"]) ::slotted(*),:host([peek="4"]) ::slotted(*){flex:0 0 calc(80% - 8px)}}@media(prefers-reduced-motion:reduce){.cr-track{transition:none}.cr-dot{transition:background var(--duration-base)}:host([mode="fade"]) ::slotted(*){transition:none}}}';
+import { html } from "lit";
+const chevronSvg = html`
+  <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+    <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/>
+  </svg>`;
+function dropdownTemplate(ctx) {
+  return html`
+    <div class="dd" part="root">
+
+      <!-- ── Trigger ── -->
+      <button
+        class="dd-trigger"
+        part="trigger"
+        aria-haspopup="true"
+        aria-expanded="${ctx.open}"
+        aria-label="${ctx.ariaLabel || ctx.label}"
+        @click="${() => ctx._toggle()}"
+        @keydown="${(e) => ctx._handleTriggerKey(e)}"
+      >
+        <slot name="trigger">${ctx.label}</slot>
+        <span class="dd-chevron" part="chevron">${chevronSvg}</span>
+      </button>
+
+      <!-- ── Panel ── -->
+      <div
+        class="dd-menu"
+        part="menu"
+        role="menu"
+        style="${ctx.minWidth ? `--dd-min-width:${ctx.minWidth}` : ""}"
+        @keydown="${(e) => ctx._handleMenuKey(e)}"
+      >
+        <!-- Header opcional (búsqueda, título) -->
+        <div class="dd-header-wrap" part="header-wrap"
+          style="${ctx._hasSlot("header") ? "" : "display:none"}">
+          <slot name="header"></slot>
+        </div>
+
+        <!-- Contenido: items, separadores, grupos -->
+        <slot></slot>
+
+        <!-- Footer opcional (acciones, confirmación) -->
+        <div class="dd-footer-wrap" part="footer-wrap"
+          style="${ctx._hasSlot("footer") ? "" : "display:none"}">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+
+    </div>
+  `;
+}
 export {
-  carouselCss as default
+  dropdownTemplate
 };
 //# sourceMappingURL=index238.js.map

package/dist/index238.js.map

@@ -1 +1 @@
-{"version":3,"file":"index238.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index238.js","sources":["../src/components/molecules/dropdown/lib-dropdown.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibDropdown } from './lib-dropdown.component';\n\n/* Chevron SVG inline — no depende de Phosphor ni ninguna lib */\nconst chevronSvg: TemplateResult = html`\n  <svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z\"/>\n  </svg>`;\n\nexport function dropdownTemplate(ctx: LibDropdown): TemplateResult {\n  return html`\n    <div class=\"dd\" part=\"root\">\n\n      <!-- ── Trigger ── -->\n      <button\n        class=\"dd-trigger\"\n        part=\"trigger\"\n        aria-haspopup=\"true\"\n        aria-expanded=\"${ctx.open}\"\n        aria-label=\"${ctx.ariaLabel || ctx.label}\"\n        @click=\"${(): void => ctx._toggle()}\"\n        @keydown=\"${(e: KeyboardEvent): void => ctx._handleTriggerKey(e)}\"\n      >\n        <slot name=\"trigger\">${ctx.label}</slot>\n        <span class=\"dd-chevron\" part=\"chevron\">${chevronSvg}</span>\n      </button>\n\n      <!-- ── Panel ── -->\n      <div\n        class=\"dd-menu\"\n        part=\"menu\"\n        role=\"menu\"\n        style=\"${ctx.minWidth ? `--dd-min-width:${ctx.minWidth}` : ''}\"\n        @keydown=\"${(e: KeyboardEvent): void => ctx._handleMenuKey(e)}\"\n      >\n        <!-- Header opcional (búsqueda, título) -->\n        <div class=\"dd-header-wrap\" part=\"header-wrap\"\n          style=\"${ctx._hasSlot('header') ? '' : 'display:none'}\">\n          <slot name=\"header\"></slot>\n        </div>\n\n        <!-- Contenido: items, separadores, grupos -->\n        <slot></slot>\n\n        <!-- Footer opcional (acciones, confirmación) -->\n        <div class=\"dd-footer-wrap\" part=\"footer-wrap\"\n          style=\"${ctx._hasSlot('footer') ? '' : 'display:none'}\">\n          <slot name=\"footer\"></slot>\n        </div>\n      </div>\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,aAA6B;AAAA;AAAA;AAAA;AAK5B,SAAS,iBAAiB,KAAkC;AACjE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQgB,IAAI,IAAI;AAAA,sBACX,IAAI,aAAa,IAAI,KAAK;AAAA,kBAC9B,MAAY,IAAI,SAAS;AAAA,oBACvB,CAAC,MAA2B,IAAI,kBAAkB,CAAC,CAAC;AAAA;AAAA,+BAEzC,IAAI,KAAK;AAAA,kDACU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQ3C,IAAI,WAAW,kBAAkB,IAAI,QAAQ,KAAK,EAAE;AAAA,oBACjD,CAAC,MAA2B,IAAI,eAAe,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,mBAIlD,IAAI,SAAS,QAAQ,IAAI,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAS5C,IAAI,SAAS,QAAQ,IAAI,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/D;"}

package/dist/index239.js

@@ -1,5 +1,5 @@
-const cursorCss = '@layer tokens,reset,components;@layer reset{:host{display:contents;pointer-events:none}*,*:before,*:after{box-sizing:border-box}}@layer components{.cur-dot{position:fixed;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);will-change:transform;transition:width .2s var(--ease-out),height .2s var(--ease-out),background .25s,border-radius .2s,opacity .3s}.cur-ring{position:fixed;border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);will-change:transform;transition:width .3s var(--ease-out),height .3s var(--ease-out),border-color .3s,border-width .2s,background .3s,opacity .3s}.cur-label{position:fixed;pointer-events:none;z-index:9999;font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-washi-50);background:var(--color-washi-900);padding:4px 8px;white-space:nowrap;opacity:0;transform:translate(14px,-50%);transition:opacity .2s;will-change:transform}.cur-label.is-visible{opacity:1}:host([curstate="hover"]) .cur-dot{width:10px;height:10px;background:var(--color-kaki-500)}:host([curstate="hover"]) .cur-ring{width:52px;height:52px;border-color:var(--color-kaki-400)!important;border-width:1.5px!important}:host([curstate="text"]) .cur-dot{width:2px;height:22px;border-radius:1px;background:var(--color-washi-700)}:host([curstate="text"]) .cur-ring{opacity:0}:host([curstate="press"]) .cur-dot{width:4px;height:4px;background:var(--color-kaki-600)}:host([curstate="press"]) .cur-ring{width:22px;height:22px;border-color:var(--color-kaki-500)!important;background:#b85a1e0f!important}:host([curstate="hidden"]) .cur-dot,:host([curstate="hidden"]) .cur-ring{opacity:0}:host([dark-zone]) .cur-ring{border-color:#faf7f440!important}@media(pointer:coarse),(max-width:768px){.cur-dot,.cur-ring,.cur-label{display:none}}}';
+const dropdownCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block;position:relative}*,*:before,*:after{box-sizing:border-box}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer}}@layer components{.dd{position:relative;display:inline-block;-webkit-user-select:none;user-select:none}.dd-trigger{display:inline-flex;align-items:center;gap:var(--lib-space-sm);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;cursor:pointer;background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-default);padding:calc(var(--lib-space-sm) + var(--lib-space-xs)) var(--lib-space-md);white-space:nowrap;transition:background var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out)}.dd-trigger:hover{background:var(--bg-surface);border-color:var(--border-strong)}:host([open]) .dd-trigger{background:var(--bg-surface);border-color:var(--color-washi-700)}.dd-trigger:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:2px}.dd-chevron{display:flex;align-items:center;flex-shrink:0;color:var(--text-muted);transition:transform var(--duration-slow) var(--ease-out);line-height:1}.dd-chevron svg{width:12px;height:12px}:host([open]) .dd-chevron{transform:rotate(180deg)}:host([variant="ghost"]) .dd-trigger{background:transparent;border-color:transparent;color:var(--text-secondary)}:host([variant="ghost"]) .dd-trigger:hover{background:var(--bg-surface);border-color:transparent}:host([variant="ghost"][open]) .dd-trigger{background:var(--bg-surface);border-color:transparent}:host([variant="filled"]) .dd-trigger{background:var(--color-washi-900);border-color:var(--color-washi-900);color:var(--color-washi-50)}:host([variant="filled"]) .dd-trigger:hover{background:var(--color-washi-800);border-color:var(--color-washi-800)}:host([variant="filled"]) .dd-chevron{color:var(--color-washi-400)}:host([variant="kaki"]) .dd-trigger{background:var(--color-kaki-500);border-color:var(--color-kaki-500);color:#fff}:host([variant="kaki"]) .dd-trigger:hover{background:var(--color-kaki-600);border-color:var(--color-kaki-600)}:host([variant="kaki"]) .dd-chevron{color:#fff9}.dd-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:300;min-width:var(--dd-min-width, 200px);background:var(--bg-elevated);border:1px solid var(--border-default);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(-6px) scaleY(.97);transform-origin:top center;pointer-events:none;transition:opacity .16s var(--ease-out),transform .2s var(--ease-out)}:host([open]) .dd-menu{opacity:1;transform:translateY(0) scaleY(1);pointer-events:auto}:host([align="right"]) .dd-menu{left:auto;right:0}::slotted(.dd-item){display:flex!important;align-items:center;gap:.75rem;width:100%;padding:.75rem var(--lib-space-md);font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-secondary);background:transparent;border:none;cursor:pointer;text-align:left;text-decoration:none;white-space:nowrap;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}::slotted(.dd-item:hover){background:var(--bg-surface);color:var(--text-primary)}::slotted(.dd-item.is-active){color:var(--text-primary);background:var(--color-washi-100)}::slotted(.dd-item.is-disabled){opacity:.38;cursor:not-allowed;pointer-events:none}::slotted(.dd-item.is-danger){color:var(--color-error)}::slotted(.dd-item.is-danger:hover){background:var(--color-error-light);color:var(--color-error)}::slotted(.dd-sep){display:block!important;height:1px;background:var(--border-subtle);margin:var(--lib-space-xs) 0;border:none}::slotted(.dd-group-label){display:block!important;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);padding:.75rem var(--lib-space-md) var(--lib-space-xs)}.dd-header-wrap{border-bottom:1px solid var(--border-subtle)}.dd-footer-wrap{border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:flex-end;gap:var(--lib-space-sm);padding:var(--lib-space-sm) var(--lib-space-md)}.dd-scroll-wrap{max-height:220px;overflow-y:auto;overscroll-behavior:contain}.dd-scroll-wrap::-webkit-scrollbar{width:4px}.dd-scroll-wrap::-webkit-scrollbar-track{background:transparent}.dd-scroll-wrap::-webkit-scrollbar-thumb{background:var(--color-washi-300);border-radius:2px}:host([dark]) .dd-menu{background:var(--color-washi-900);border-color:var(--color-washi-800)}:host([dark]) .dd-header-wrap{border-color:var(--color-washi-800)}:host([dark]) .dd-footer-wrap{border-color:var(--color-washi-800)}:host([dark]) ::slotted(.dd-item){color:var(--color-washi-400)}:host([dark]) ::slotted(.dd-item:hover){background:var(--color-washi-800);color:var(--color-washi-100)}:host([dark]) ::slotted(.dd-item.is-active){background:var(--color-washi-800);color:var(--color-washi-100)}:host([dark]) ::slotted(.dd-item.is-danger){color:#e87a6a}:host([dark]) ::slotted(.dd-item.is-danger:hover){background:#8c2a1a4d;color:#e87a6a}:host([dark]) ::slotted(.dd-sep){background:var(--color-washi-800)}:host([dark]) ::slotted(.dd-group-label){color:var(--color-washi-600)}}';
 export {
-  cursorCss as default
+  dropdownCss as default
 };
 //# sourceMappingURL=index239.js.map

package/dist/index240.js

@@ -1,42 +1,36 @@
-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
-  }
-};
+import { html, nothing } from "lit";
+function emptyStateTemplate(props) {
+  const illustrationZone = props.kanji ? html`
+        <div class="es-illustration">
+          <span class="es-kanji">${props.kanji}</span>
+        </div>
+      ` : html`
+        <div class="es-illustration">
+          <div class="es-icon-wrap">
+            <slot name="illustration"></slot>
+          </div>
+        </div>
+      `;
+  return html`
+    <div class="es
+      ${props.layout === "inline" ? "es-inline" : ""}
+      ${props.size === "sm" ? "es-sm" : ""}
+      ${props.tone !== "neutral" ? `es-${props.tone}` : ""}
+      ${props.bordered ? "es-bordered" : ""}
+      ${props.ghost ? "es-ghost" : ""}
+    ">
+      ${illustrationZone}
+      <div class="es-body">
+        ${props.heading ? html`<h3 class="es-title">${props.heading}</h3>` : nothing}
+        ${props.description ? html`<p class="es-desc">${props.description}</p>` : nothing}
+        <div class="es-actions">
+          <slot name="actions"></slot>
+        </div>
+      </div>
+    </div>
+  `;
+}
 export {
-  CURSOR_MODES
+  emptyStateTemplate
 };
 //# sourceMappingURL=index240.js.map

package/dist/index240.js.map

@@ -1 +1 @@
-{"version":3,"file":"index240.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;"}
+{"version":3,"file":"index240.js","sources":["../src/components/molecules/empty-state/lib-empty-state.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibEmptyStateTone   = 'neutral' | 'kaki' | 'celadon' | 'error';\nexport type LibEmptyStateLayout = 'default' | 'inline';\nexport type LibEmptyStateSize   = 'sm' | 'md';\n\nexport interface EmptyStateTemplateProps {\n  heading:     string;\n  description: string;\n  kanji:       string;\n  tone:        LibEmptyStateTone;\n  layout:      LibEmptyStateLayout;\n  size:        LibEmptyStateSize;\n  bordered:    boolean;\n  ghost:       boolean;\n}\n\n/**\n * Template para lib-empty-state.\n *\n * Estructura (ambos layouts):\n *   div.es\n *     div.es-illustration     ← kanji | icon-wrap[slot=illustration]\n *     div.es-body\n *       h3.es-title\n *       p.es-desc\n *       div.es-actions\n *         slot[name=actions]\n *\n * La zona de ilustración se omite si no hay kanji ni slot.\n * El CSS diferencia .es-inline (row) de .es (column).\n */\nexport function emptyStateTemplate(props: EmptyStateTemplateProps): TemplateResult {\n  const illustrationZone = props.kanji\n    ? html`\n        <div class=\"es-illustration\">\n          <span class=\"es-kanji\">${props.kanji}</span>\n        </div>\n      `\n    : html`\n        <div class=\"es-illustration\">\n          <div class=\"es-icon-wrap\">\n            <slot name=\"illustration\"></slot>\n          </div>\n        </div>\n      `;\n\n  return html`\n    <div class=\"es\n      ${props.layout  === 'inline'  ? 'es-inline'  : ''}\n      ${props.size    === 'sm'      ? 'es-sm'      : ''}\n      ${props.tone    !== 'neutral' ? `es-${props.tone}` : ''}\n      ${props.bordered              ? 'es-bordered' : ''}\n      ${props.ghost                 ? 'es-ghost'   : ''}\n    \">\n      ${illustrationZone}\n      <div class=\"es-body\">\n        ${props.heading\n          ? html`<h3 class=\"es-title\">${props.heading}</h3>`\n          : nothing}\n        ${props.description\n          ? html`<p class=\"es-desc\">${props.description}</p>`\n          : nothing}\n        <div class=\"es-actions\">\n          <slot name=\"actions\"></slot>\n        </div>\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAgCO,SAAS,mBAAmB,OAAgD;AACjF,QAAM,mBAAmB,MAAM,QAC3B;AAAA;AAAA,mCAE6B,MAAM,KAAK;AAAA;AAAA,UAGxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQJ,SAAO;AAAA;AAAA,QAED,MAAM,WAAY,WAAY,cAAe,EAAE;AAAA,QAC/C,MAAM,SAAY,OAAY,UAAe,EAAE;AAAA,QAC/C,MAAM,SAAY,YAAY,MAAM,MAAM,IAAI,KAAK,EAAE;AAAA,QACrD,MAAM,WAAwB,gBAAgB,EAAE;AAAA,QAChD,MAAM,QAAwB,aAAe,EAAE;AAAA;AAAA,QAE/C,gBAAgB;AAAA;AAAA,UAEd,MAAM,UACJ,4BAA4B,MAAM,OAAO,UACzC,OAAO;AAAA,UACT,MAAM,cACJ,0BAA0B,MAAM,WAAW,SAC3C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnB;"}

package/dist/index241.js

@@ -1,5 +1,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%}}';
+const emptyStateCss = '@layer tokens,reset,components;@layer reset{:host{display:flex;width:100%;justify-content:center;align-items:center}*,*:before,*:after{box-sizing:border-box}}@layer components{.es{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--lib-space-xl) var(--lib-space-lg);gap:0;width:100%}.es-illustration{margin-bottom:var(--lib-space-lg);display:flex;align-items:center;justify-content:center;position:relative}.es-icon-wrap{width:72px;height:72px;border-radius:var(--radius-full);background:var(--color-washi-100);border:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;color:var(--color-washi-400);font-size:28px;flex-shrink:0}.es-kanji{font-family:var(--lib-font-display);font-size:6rem;line-height:1;color:var(--color-washi-200);-webkit-user-select:none;user-select:none;letter-spacing:var(--tracking-tight)}.es-body{display:flex;flex-direction:column;align-items:center;gap:0}.es-title{font-family:var(--lib-font-display);font-size:var(--text-2xl);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);color:var(--text-primary);margin-bottom:var(--lib-space-sm);line-height:var(--leading-snug)}.es-title em{font-style:italic;color:var(--text-muted)}.es-desc{font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-muted);line-height:var(--leading-relaxed);max-width:320px;margin:0 auto var(--lib-space-lg)}.es-actions{display:flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);flex-wrap:wrap}::slotted([slot="actions"]){flex-shrink:0}:host([size="sm"]) .es{padding:var(--lib-space-lg) var(--lib-space-md)}:host([size="sm"]) .es-icon-wrap{width:48px;height:48px;font-size:20px}:host([size="sm"]) .es-illustration{margin-bottom:var(--lib-space-md)}:host([size="sm"]) .es-title{font-size:var(--text-xl);margin-bottom:var(--lib-space-xs)}:host([size="sm"]) .es-desc{font-size:var(--text-xs);margin-bottom:var(--lib-space-md)}:host([layout="inline"]) .es{flex-direction:row;text-align:left;padding:var(--lib-space-md) var(--lib-space-lg);gap:var(--lib-space-lg);align-items:center;justify-content:flex-start}:host([layout="inline"]) .es-illustration{margin-bottom:0;flex-shrink:0}:host([layout="inline"]) .es-body{align-items:flex-start;gap:var(--lib-space-xs)}:host([layout="inline"]) .es-title{font-size:var(--text-xl);margin-bottom:0}:host([layout="inline"]) .es-desc{margin:0;max-width:400px}:host([layout="inline"]) .es-actions{justify-content:flex-start;margin-top:var(--lib-space-sm)}:host([bordered]) .es{border:1px dashed var(--border-default);background:var(--bg-surface)}:host([ghost]) .es-icon-wrap{background:transparent;border:none;color:var(--color-washi-300);font-size:40px}:host([tone="kaki"]) .es-icon-wrap{background:var(--color-kaki-50);color:var(--color-kaki-500);border-color:var(--color-kaki-100)}:host([tone="celadon"]) .es-icon-wrap{background:var(--color-celadon-100);color:var(--color-celadon-500);border-color:var(--color-celadon-100)}:host([tone="error"]) .es-icon-wrap{background:#f5ddd9;color:var(--color-error);border-color:#f5ddd9}@media(max-width:640px){:host([layout="inline"]) .es{flex-direction:column;text-align:center}:host([layout="inline"]) .es-body{align-items:center}:host([layout="inline"]) .es-actions{justify-content:center}}}';
 export {
-  tableCss as default
+  emptyStateCss as default
 };
 //# sourceMappingURL=index241.js.map

package/dist/index242.js

@@ -1,240 +1,9 @@
-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>
-  `;
+let uniqueIdCounter = 0;
+function generateUniqueId(prefix = "lib-id-") {
+  uniqueIdCounter++;
+  return `${prefix}${uniqueIdCounter}`;
 }
 export {
-  dataTableTemplate
+  generateUniqueId
 };
 //# sourceMappingURL=index242.js.map

package/dist/index242.js.map

@@ -1 +1 @@
-{"version":3,"file":"index242.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":"index242.js","sources":["../src/core/a11y.ts"],"sourcesContent":["/**\n * Accessibility (a11y) Utilities - Pillar 5\n *\n * This module provides utility functions to help ensure accessibility\n * for UI components. It includes helpers for generating unique IDs\n * and retrieving ARIA attributes.\n *\n * All functions here are pure TypeScript logic, with no direct DOM manipulation\n * beyond reading attributes, and are framework-agnostic.\n */\n\nlet uniqueIdCounter = 0;\n\n/**\n * Generates a unique ID for a component or element.\n * Useful for associating elements via ARIA attributes (e.g., `aria-labelledby`, `aria-describedby`).\n * @param prefix An optional prefix for the ID. Defaults to 'lib-id-'.\n * @returns A unique ID string.\n */\nexport function generateUniqueId(prefix: string = 'lib-id-'): string {\n  uniqueIdCounter++;\n  return `${prefix}${uniqueIdCounter}`;\n}\n\n/**\n * Retrieves the `aria-label` attribute from an HTMLElement.\n * Provides a default fallback if `aria-label` is not explicitly set.\n * This function is meant to be used in conjunction with components that may not always have a visual label.\n * @param element The HTMLElement to check for `aria-label`.\n * @param defaultValue A fallback value to use if `aria-label` is not found.\n * @returns The value of `aria-label` or the `defaultValue`.\n */\nexport function getAriaLabel(element: HTMLElement, defaultValue: string = ''): string {\n  return element.getAttribute('aria-label') || defaultValue;\n}\n"],"names":[],"mappings":"AAWA,IAAI,kBAAkB;AAQf,SAAS,iBAAiB,SAAiB,WAAmB;AACnE;AACA,SAAO,GAAG,MAAM,GAAG,eAAe;AACpC;"}