@shibui-ui/ui 1.25.1 → 1.26.1

package/dist/index251.js

@@ -1,12 +1,5 @@
-import { html } from "lit";
-function parallaxTemplate(_ctx) {
-  return html`
-    <div class="parallax-wrapper" part="wrapper">
-      <slot></slot>
-    </div>
-  `;
-}
+const modalCss = "@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{display:contents}.mo-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal, 500);background:#120e0aa6;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:var(--lib-space-lg);overflow-y:auto;opacity:0;pointer-events:none;transition:opacity var(--duration-slow) var(--ease-out)}:host([open]) .mo-backdrop{opacity:1;pointer-events:auto}.mo-panel-wrap{position:relative;width:100%;max-width:560px;max-height:calc(100vh - var(--lib-space-lg) * 2);display:flex;flex-direction:column;transform:scale(.95) translateY(8px);transition:transform var(--duration-slow) var(--ease-out)}:host([open]) .mo-panel-wrap{transform:scale(1) translateY(0)}.mo-panel-wrap.mo-slide-up{transform:translateY(40px)}:host([open]) .mo-panel-wrap.mo-slide-up{transform:translateY(0)}.mo-panel-wrap.mo-slide-down{transform:translateY(-40px)}:host([open]) .mo-panel-wrap.mo-slide-down{transform:translateY(0)}.mo-panel-wrap.mo-xs{max-width:280px}.mo-panel-wrap.mo-sm{max-width:420px}.mo-panel-wrap.mo-lg{max-width:720px}.mo-panel-wrap.mo-xl{max-width:920px}.mo-panel-wrap.mo-full{max-width:100vw;max-height:100vh;height:100vh;margin:0}.mo-panel-wrap.mo-full .mo-panel{max-height:100vh;height:100vh;border:none}.mo-panel{background:var(--bg-elevated);border:1px solid var(--border-default);box-shadow:0 20px 60px #1a140e2e,0 4px 16px #1a140e1a;display:flex;flex-direction:column;max-height:calc(100vh - var(--lib-space-lg) * 2);overflow:hidden}.mo-panel.is-editorial .mo-header{border-bottom:none;padding-bottom:0}.mo-panel.is-editorial .mo-title{font-size:2.5rem;letter-spacing:var(--tracking-tight)}.mo-panel.is-editorial .mo-body{padding-top:var(--lib-space-sm)}.mo-panel.is-danger .mo-header{border-bottom-color:#f5ddd9;background:#f5ddd9}.mo-panel.is-danger .mo-title{color:var(--color-error)}.mo-panel.is-danger .mo-footer{border-top-color:#f5ddd9;background:#fef5f3}.mo-header{display:flex;align-items:flex-start;gap:var(--lib-space-md);padding:var(--lib-space-lg) var(--lib-space-lg) var(--lib-space-md);border-bottom:1px solid var(--border-subtle);flex-shrink:0;background:var(--bg-elevated)}.mo-header-icon{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-muted)}.mo-header-icon.is-kaki{background:var(--color-kaki-50);border-color:var(--color-kaki-100);color:var(--color-kaki-500)}.mo-header-icon.is-celadon{background:var(--color-celadon-50);border-color:var(--color-celadon-100);color:var(--color-celadon-500)}.mo-header-icon.is-error{background:#f5ddd9;border-color:#f5ddd9;color:var(--color-error)}.mo-header-icon.is-info{background:#d6e8f5;border-color:#d6e8f5;color:#1a4a6e}.mo-header-text{flex:1;min-width:0}.mo-title{font-family:var(--lib-font-display);font-size:var(--text-2xl);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:var(--text-primary)}.mo-subtitle{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted);margin-top:var(--lib-space-xs)}.mo-close{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text-muted);background:transparent;border:none;cursor:pointer;line-height:1;transition:background var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default);margin-top:-2px;margin-right:-4px}.mo-close:hover{background:var(--bg-surface);color:var(--text-primary)}.mo-body{flex:1;overflow-y:auto;padding:var(--lib-space-lg);scrollbar-width:thin;scrollbar-color:var(--color-washi-300) transparent}.mo-body::-webkit-scrollbar{width:4px}.mo-body::-webkit-scrollbar-track{background:transparent}.mo-body::-webkit-scrollbar-thumb{background:var(--color-washi-300)}.mo-footer{display:flex;align-items:center;gap:var(--lib-space-md);padding:var(--lib-space-md) var(--lib-space-lg);border-top:1px solid var(--border-subtle);flex-shrink:0;background:var(--bg-surface)}.mo-footer-info{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);margin-right:auto}.mo-panel-wrap.mo-dark .mo-panel{background:#0c0604;border-color:#1e130e;box-shadow:0 20px 60px #0000008c,0 4px 16px #0000004d}.mo-panel-wrap.mo-dark .mo-header{background:#0c0604;border-color:#190f0a}.mo-panel-wrap.mo-dark .mo-title{color:#c8bbb2}.mo-panel-wrap.mo-dark .mo-subtitle{color:#312620}.mo-panel-wrap.mo-dark .mo-close{color:#362b25}.mo-panel-wrap.mo-dark .mo-close:hover{background:#190f0a;color:#998c84}.mo-panel-wrap.mo-dark .mo-footer{background:#060201;border-color:#190f0a}.mo-panel-wrap.mo-dark .mo-footer-info{color:#312620}.mo-panel-wrap.mo-dark .mo-header-icon{background:#190f0a;border-color:#231813;color:#433831}@media(max-width:768px){.mo-backdrop{padding:var(--lib-space-md)}.mo-panel-wrap{max-height:calc(100vh - var(--lib-space-md) * 2)}}}";
 export {
-  parallaxTemplate
+  modalCss as default
 };
 //# sourceMappingURL=index251.js.map

package/dist/index251.js.map

@@ -1 +1 @@
-{"version":3,"file":"index251.js","sources":["../src/components/organisms/parallax-container/lib-parallax.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibParallaxContainer } from './lib-parallax.component';\n\n// _ctx disponible para futuras extensiones del template (slot named, etc.)\nexport function parallaxTemplate(_ctx: LibParallaxContainer): TemplateResult {\n  return html`\n    <div class=\"parallax-wrapper\" part=\"wrapper\">\n      <slot></slot>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAIO,SAAS,iBAAiB,MAA4C;AAC3E,SAAO;AAAA;AAAA;AAAA;AAAA;AAKT;"}
+{"version":3,"file":"index251.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index252.js

@@ -1,5 +1,84 @@
-const parallaxCss = "@layer tokens,reset,components;@layer reset{:host{display:block;position:relative;overflow:hidden;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.parallax-wrapper{position:relative;width:100%;height:100%}:host([visible]) ::slotted(*){will-change:transform}@media(prefers-reduced-motion:reduce){::slotted(*){will-change:auto!important;transform:none!important}}}";
+import { nothing, html } from "lit";
+function panelWrapClass(p) {
+  const classes = ["mo-panel-wrap"];
+  if (p.size !== "md") classes.push(`mo-${p.size}`);
+  if (p._animate === "slide-up") classes.push("mo-slide-up");
+  if (p._animate === "slide-down") classes.push("mo-slide-down");
+  if (p.dark) classes.push("mo-dark");
+  return classes.join(" ");
+}
+function panelClass(variant) {
+  const classes = ["mo-panel"];
+  if (variant === "editorial") classes.push("is-editorial");
+  if (variant === "danger") classes.push("is-danger");
+  return classes.join(" ");
+}
+function iconClass(tone) {
+  const classes = ["mo-header-icon"];
+  if (tone !== "default") classes.push(`is-${tone}`);
+  return classes.join(" ");
+}
+function modalTemplate(p) {
+  return html`
+    <div
+      class="mo-backdrop"
+      part="backdrop"
+      @click="${p.onBackdropClick}"
+    >
+      <div
+        class="${panelWrapClass(p)}"
+        part="panel-wrap"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="mo-title"
+        @click="${(e) => e.stopPropagation()}"
+      >
+        <div class="${panelClass(p.variant)}" part="panel">
+
+          <!-- ── HEADER ── -->
+          <div class="mo-header" part="header">
+
+            <!-- Ícono opcional — tone prop activa el wrapper -->
+            ${p.iconTone !== null ? html`
+              <div class="${iconClass(p.iconTone)}" part="icon">
+                <slot name="icon"></slot>
+              </div>
+            ` : nothing}
+
+            <!-- Título y subtítulo -->
+            <div class="mo-header-text">
+              <h2 id="mo-title" class="mo-title">${p.heading}</h2>
+              ${p.subtitle ? html`<p class="mo-subtitle">${p.subtitle}</p>` : nothing}
+            </div>
+
+            <!-- Botón de cierre -->
+            <button
+              class="mo-close"
+              part="close-btn"
+              aria-label="Cerrar"
+              @click="${p.onClose}"
+            >×</button>
+          </div>
+
+          <!-- ── BODY — slot default ── -->
+          <div class="mo-body" part="body">
+            <slot></slot>
+          </div>
+
+          <!-- ── FOOTER ── -->
+          <div class="mo-footer" part="footer">
+            ${p.footerInfo ? html`
+              <span class="mo-footer-info">${p.footerInfo}</span>
+            ` : nothing}
+            <slot name="footer"></slot>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  `;
+}
 export {
-  parallaxCss as default
+  modalTemplate
 };
 //# sourceMappingURL=index252.js.map

package/dist/index252.js.map

@@ -1 +1 @@
-{"version":3,"file":"index252.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index252.js","sources":["../src/components/molecules/modal/lib-modal.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { ModalAnimate, ModalIconTone, ModalSize, ModalVariant } from './lib-modal.types';\n\nexport interface ModalTemplateProps {\n  /* Estado */\n  open:             boolean;\n  /* Panel */\n  size:             ModalSize;\n  variant:          ModalVariant;\n  _animate:          ModalAnimate;\n  dark:             boolean;\n  /* Header */\n  heading:          string;\n  subtitle:         string;\n  iconTone:         ModalIconTone | null;\n  /* Footer */\n  footerInfo:       string;\n  /* Handlers */\n  onClose:          () => void;\n  onBackdropClick:  (e: MouseEvent) => void;\n}\n\n/** Clases del contenedor del panel (.mo-panel-wrap). */\nfunction panelWrapClass(p: ModalTemplateProps): string {\n  const classes = ['mo-panel-wrap'];\n  if (p.size !== 'md')         classes.push(`mo-${p.size}`);\n  if (p._animate === 'slide-up')   classes.push('mo-slide-up');\n  if (p._animate === 'slide-down') classes.push('mo-slide-down');\n  if (p.dark)                  classes.push('mo-dark');\n  return classes.join(' ');\n}\n\n/** Clases del panel (.mo-panel). */\nfunction panelClass(variant: ModalVariant): string {\n  const classes = ['mo-panel'];\n  if (variant === 'editorial') classes.push('is-editorial');\n  if (variant === 'danger')    classes.push('is-danger');\n  return classes.join(' ');\n}\n\n/** Clases del ícono de header. */\nfunction iconClass(tone: ModalIconTone): string {\n  const classes = ['mo-header-icon'];\n  if (tone !== 'default') classes.push(`is-${tone}`);\n  return classes.join(' ');\n}\n\nexport function modalTemplate(p: ModalTemplateProps): TemplateResult {\n  return html`\n    <div\n      class=\"mo-backdrop\"\n      part=\"backdrop\"\n      @click=\"${p.onBackdropClick}\"\n    >\n      <div\n        class=\"${panelWrapClass(p)}\"\n        part=\"panel-wrap\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"mo-title\"\n        @click=\"${(e: MouseEvent):void => e.stopPropagation()}\"\n      >\n        <div class=\"${panelClass(p.variant)}\" part=\"panel\">\n\n          <!-- ── HEADER ── -->\n          <div class=\"mo-header\" part=\"header\">\n\n            <!-- Ícono opcional — tone prop activa el wrapper -->\n            ${p.iconTone !== null ? html`\n              <div class=\"${iconClass(p.iconTone)}\" part=\"icon\">\n                <slot name=\"icon\"></slot>\n              </div>\n            ` : nothing}\n\n            <!-- Título y subtítulo -->\n            <div class=\"mo-header-text\">\n              <h2 id=\"mo-title\" class=\"mo-title\">${p.heading}</h2>\n              ${p.subtitle ? html`<p class=\"mo-subtitle\">${p.subtitle}</p>` : nothing}\n            </div>\n\n            <!-- Botón de cierre -->\n            <button\n              class=\"mo-close\"\n              part=\"close-btn\"\n              aria-label=\"Cerrar\"\n              @click=\"${p.onClose}\"\n            >×</button>\n          </div>\n\n          <!-- ── BODY — slot default ── -->\n          <div class=\"mo-body\" part=\"body\">\n            <slot></slot>\n          </div>\n\n          <!-- ── FOOTER ── -->\n          <div class=\"mo-footer\" part=\"footer\">\n            ${p.footerInfo ? html`\n              <span class=\"mo-footer-info\">${p.footerInfo}</span>\n            ` : nothing}\n            <slot name=\"footer\"></slot>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAuBA,SAAS,eAAe,GAA+B;AACrD,QAAM,UAAU,CAAC,eAAe;AAChC,MAAI,EAAE,SAAS,KAAc,SAAQ,KAAK,MAAM,EAAE,IAAI,EAAE;AACxD,MAAI,EAAE,aAAa,WAAc,SAAQ,KAAK,aAAa;AAC3D,MAAI,EAAE,aAAa,aAAc,SAAQ,KAAK,eAAe;AAC7D,MAAI,EAAE,KAAuB,SAAQ,KAAK,SAAS;AACnD,SAAO,QAAQ,KAAK,GAAG;AACzB;AAGA,SAAS,WAAW,SAA+B;AACjD,QAAM,UAAU,CAAC,UAAU;AAC3B,MAAI,YAAY,YAAa,SAAQ,KAAK,cAAc;AACxD,MAAI,YAAY,SAAa,SAAQ,KAAK,WAAW;AACrD,SAAO,QAAQ,KAAK,GAAG;AACzB;AAGA,SAAS,UAAU,MAA6B;AAC9C,QAAM,UAAU,CAAC,gBAAgB;AACjC,MAAI,SAAS,UAAW,SAAQ,KAAK,MAAM,IAAI,EAAE;AACjD,SAAO,QAAQ,KAAK,GAAG;AACzB;AAEO,SAAS,cAAc,GAAuC;AACnE,SAAO;AAAA;AAAA;AAAA;AAAA,gBAIO,EAAE,eAAe;AAAA;AAAA;AAAA,iBAGhB,eAAe,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKhB,CAAC,MAAuB,EAAE,iBAAiB;AAAA;AAAA,sBAEvC,WAAW,EAAE,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAM7B,EAAE,aAAa,OAAO;AAAA,4BACR,UAAU,EAAE,QAAQ,CAAC;AAAA;AAAA;AAAA,gBAGjC,OAAO;AAAA;AAAA;AAAA;AAAA,mDAI4B,EAAE,OAAO;AAAA,gBAC5C,EAAE,WAAW,8BAA8B,EAAE,QAAQ,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ7D,EAAE,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAWnB,EAAE,aAAa;AAAA,6CACgB,EAAE,UAAU;AAAA,gBACzC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB;"}

package/dist/index253.js

@@ -1,18 +1,84 @@
-import { html } from "lit";
-function parallaxTextStackTemplate(ctx) {
+import { html, nothing } from "lit";
+const chevronLeft = html`
+  <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+    <path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/>
+  </svg>`;
+const chevronRight = html`
+  <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+    <path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/>
+  </svg>`;
+function buildPageSequence(current, total, siblings) {
+  if (total <= 1) return [1];
+  const left = Math.max(2, current - siblings);
+  const right = Math.min(total - 1, current + siblings);
+  const pages = [1];
+  if (left > 2) pages.push(null);
+  for (let i = left; i <= right; i++) pages.push(i);
+  if (right < total - 1) pages.push(null);
+  if (total > 1) pages.push(total);
+  return pages;
+}
+function paginationTemplate(ctx) {
+  const total = ctx.totalPages;
+  const current = ctx.currentPage;
+  const sequence = buildPageSequence(current, total, ctx.siblings);
+  const infoText = ctx.showInfo ? (() => {
+    const from = (current - 1) * ctx.itemsPerPage + 1;
+    const to = Math.min(current * ctx.itemsPerPage, ctx.totalItems);
+    return html`
+          <span class="pg-info" part="info">
+            ${from}–${to} de ${ctx.totalItems}
+          </span>`;
+  })() : nothing;
   return html`
-    <div class="pts-container" part="container">
-      ${ctx.lines.map((line, i) => html`
-        <span
-          class="pts-layer ${i % 2 === 0 ? "pts-layer--outline" : "pts-layer--italic"}"
-          part="layer layer-${i % 2 === 0 ? "outline" : "italic"}"
-          aria-hidden="${i > 0}"
-        >${line}</span>
-      `)}
-    </div>
+    <nav class="pg" part="root" aria-label="${ctx.ariaLabel}">
+
+      ${ctx.showInfo ? infoText : nothing}
+
+      <!-- ← Anterior -->
+      <button
+        class="pg-btn pg-btn--nav"
+        part="btn-prev"
+        ?disabled="${current === 1}"
+        aria-label="Página anterior"
+        @click="${() => ctx._changePage(current - 1)}"
+      >
+        ${chevronLeft}
+        ${ctx.size !== "sm" ? html`<span>Ant</span>` : nothing}
+      </button>
+
+      <!-- Números -->
+      <div class="pg-numbers" part="numbers" role="list">
+        ${sequence.map(
+    (page) => page === null ? html`<span class="pg-ellipsis" role="listitem" aria-hidden="true">…</span>` : html`
+              <button
+                class="pg-btn ${page === current ? "pg-btn--active" : ""}"
+                part="btn-page${page === current ? " btn-page-active" : ""}"
+                role="listitem"
+                aria-label="Página ${page}"
+                aria-current="${page === current ? "page" : nothing}"
+                ?disabled="${page === current}"
+                @click="${() => ctx._changePage(page)}"
+              >${page}</button>`
+  )}
+      </div>
+
+      <!-- → Siguiente -->
+      <button
+        class="pg-btn pg-btn--nav"
+        part="btn-next"
+        ?disabled="${current === total}"
+        aria-label="Página siguiente"
+        @click="${() => ctx._changePage(current + 1)}"
+      >
+        ${ctx.size !== "sm" ? html`<span>Sig</span>` : nothing}
+        ${chevronRight}
+      </button>
+
+    </nav>
   `;
 }
 export {
-  parallaxTextStackTemplate
+  paginationTemplate
 };
 //# sourceMappingURL=index253.js.map

package/dist/index253.js.map

@@ -1 +1 @@
-{"version":3,"file":"index253.js","sources":["../src/components/organisms/parallax-text/lib-parallax-text-stack.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibParallaxTextStack } from './lib-parallax-text-stack.component';\n\nexport function parallaxTextStackTemplate(ctx: LibParallaxTextStack): TemplateResult {\n  return html`\n    <div class=\"pts-container\" part=\"container\">\n      ${ctx.lines.map((line, i) => html`\n        <span\n          class=\"pts-layer ${i % 2 === 0 ? 'pts-layer--outline' : 'pts-layer--italic'}\"\n          part=\"layer layer-${i % 2 === 0 ? 'outline' : 'italic'}\"\n          aria-hidden=\"${i > 0}\"\n        >${line}</span>\n      `)}\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,0BAA0B,KAA2C;AACnF,SAAO;AAAA;AAAA,QAED,IAAI,MAAM,IAAI,CAAC,MAAM,MAAM;AAAA;AAAA,6BAEN,IAAI,MAAM,IAAI,uBAAuB,mBAAmB;AAAA,8BACvD,IAAI,MAAM,IAAI,YAAY,QAAQ;AAAA,yBACvC,IAAI,CAAC;AAAA,WACnB,IAAI;AAAA,OACR,CAAC;AAAA;AAAA;AAGR;"}
+{"version":3,"file":"index253.js","sources":["../src/components/molecules/pagination/lib-pagination.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibPagination } from './lib-pagination.component';\n\n/* ── Chevrons inline — sin dependencia de lib-icon ── */\nconst chevronLeft: TemplateResult = html`\n  <svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z\"/>\n  </svg>`;\n\nconst chevronRight: TemplateResult = html`\n  <svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z\"/>\n  </svg>`;\n\n/**\n * Genera la secuencia de páginas con ellipsis.\n *\n * Ejemplo (current=5, total=10, siblings=1):\n *   [1] … [4][5][6] … [10]\n *\n * Retorna un array de números o null (null = ellipsis).\n */\nfunction buildPageSequence(current: number, total: number, siblings: number): (number | null)[] {\n  if (total <= 1) return [1];\n\n  const left  = Math.max(2, current - siblings);\n  const right = Math.min(total - 1, current + siblings);\n\n  const pages: (number | null)[] = [1];\n\n  if (left > 2)        pages.push(null);           // ellipsis izquierdo\n  for (let i = left; i <= right; i++) pages.push(i);\n  if (right < total - 1) pages.push(null);         // ellipsis derecho\n  if (total > 1) pages.push(total);\n\n  return pages;\n}\n\nexport function paginationTemplate(ctx: LibPagination): TemplateResult {\n  const total   = ctx.totalPages;\n  const current = ctx.currentPage;\n  const sequence = buildPageSequence(current, total, ctx.siblings);\n\n  /* Info de resultados */\n  const infoText = ctx.showInfo\n    ? (():TemplateResult => {\n        const from = (current - 1) * ctx.itemsPerPage + 1;\n        const to   = Math.min(current * ctx.itemsPerPage, ctx.totalItems);\n        return html`\n          <span class=\"pg-info\" part=\"info\">\n            ${from}–${to} de ${ctx.totalItems}\n          </span>`;\n      })()\n    : nothing;\n\n  return html`\n    <nav class=\"pg\" part=\"root\" aria-label=\"${ctx.ariaLabel}\">\n\n      ${ctx.showInfo ? infoText : nothing}\n\n      <!-- ← Anterior -->\n      <button\n        class=\"pg-btn pg-btn--nav\"\n        part=\"btn-prev\"\n        ?disabled=\"${current === 1}\"\n        aria-label=\"Página anterior\"\n        @click=\"${(): void => ctx._changePage(current - 1)}\"\n      >\n        ${chevronLeft}\n        ${ctx.size !== 'sm' ? html`<span>Ant</span>` : nothing}\n      </button>\n\n      <!-- Números -->\n      <div class=\"pg-numbers\" part=\"numbers\" role=\"list\">\n        ${sequence.map((page, /*idx*/) =>\n          page === null\n            ? html`<span class=\"pg-ellipsis\" role=\"listitem\" aria-hidden=\"true\">…</span>`\n            : html`\n              <button\n                class=\"pg-btn ${page === current ? 'pg-btn--active' : ''}\"\n                part=\"btn-page${page === current ? ' btn-page-active' : ''}\"\n                role=\"listitem\"\n                aria-label=\"Página ${page}\"\n                aria-current=\"${page === current ? 'page' : nothing}\"\n                ?disabled=\"${page === current}\"\n                @click=\"${(): void => ctx._changePage(page as number)}\"\n              >${page}</button>`\n        )}\n      </div>\n\n      <!-- → Siguiente -->\n      <button\n        class=\"pg-btn pg-btn--nav\"\n        part=\"btn-next\"\n        ?disabled=\"${current === total}\"\n        aria-label=\"Página siguiente\"\n        @click=\"${(): void => ctx._changePage(current + 1)}\"\n      >\n        ${ctx.size !== 'sm' ? html`<span>Sig</span>` : nothing}\n        ${chevronRight}\n      </button>\n\n    </nav>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,cAA8B;AAAA;AAAA;AAAA;AAKpC,MAAM,eAA+B;AAAA;AAAA;AAAA;AAarC,SAAS,kBAAkB,SAAiB,OAAe,UAAqC;AAC9F,MAAI,SAAS,EAAG,QAAO,CAAC,CAAC;AAEzB,QAAM,OAAQ,KAAK,IAAI,GAAG,UAAU,QAAQ;AAC5C,QAAM,QAAQ,KAAK,IAAI,QAAQ,GAAG,UAAU,QAAQ;AAEpD,QAAM,QAA2B,CAAC,CAAC;AAEnC,MAAI,OAAO,EAAU,OAAM,KAAK,IAAI;AACpC,WAAS,IAAI,MAAM,KAAK,OAAO,IAAK,OAAM,KAAK,CAAC;AAChD,MAAI,QAAQ,QAAQ,EAAG,OAAM,KAAK,IAAI;AACtC,MAAI,QAAQ,EAAG,OAAM,KAAK,KAAK;AAE/B,SAAO;AACT;AAEO,SAAS,mBAAmB,KAAoC;AACrE,QAAM,QAAU,IAAI;AACpB,QAAM,UAAU,IAAI;AACpB,QAAM,WAAW,kBAAkB,SAAS,OAAO,IAAI,QAAQ;AAG/D,QAAM,WAAW,IAAI,YAChB,MAAqB;AACpB,UAAM,QAAQ,UAAU,KAAK,IAAI,eAAe;AAChD,UAAM,KAAO,KAAK,IAAI,UAAU,IAAI,cAAc,IAAI,UAAU;AAChE,WAAO;AAAA;AAAA,cAED,IAAI,IAAI,EAAE,OAAO,IAAI,UAAU;AAAA;AAAA,EAEvC,OACA;AAEJ,SAAO;AAAA,8CACqC,IAAI,SAAS;AAAA;AAAA,QAEnD,IAAI,WAAW,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMpB,YAAY,CAAC;AAAA;AAAA,kBAEhB,MAAY,IAAI,YAAY,UAAU,CAAC,CAAC;AAAA;AAAA,UAEhD,WAAW;AAAA,UACX,IAAI,SAAS,OAAO,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,UAKpD,SAAS;AAAA,IAAI,CAAC,SACd,SAAS,OACL,8EACA;AAAA;AAAA,gCAEkB,SAAS,UAAU,mBAAmB,EAAE;AAAA,gCACxC,SAAS,UAAU,qBAAqB,EAAE;AAAA;AAAA,qCAErC,IAAI;AAAA,gCACT,SAAS,UAAU,SAAS,OAAO;AAAA,6BACtC,SAAS,OAAO;AAAA,0BACnB,MAAY,IAAI,YAAY,IAAc,CAAC;AAAA,iBACpD,IAAI;AAAA,EAAA,CACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOY,YAAY,KAAK;AAAA;AAAA,kBAEpB,MAAY,IAAI,YAAY,UAAU,CAAC,CAAC;AAAA;AAAA,UAEhD,IAAI,SAAS,OAAO,yBAAyB,OAAO;AAAA,UACpD,YAAY;AAAA;AAAA;AAAA;AAAA;AAKtB;"}

package/dist/index254.js

@@ -1,5 +1,5 @@
-const stackCss = '@layer tokens,reset,components;@layer reset{:host{display:block;padding:10vh 0}*,*:before,*:after{box-sizing:border-box}}@layer components{.pts-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--lib-space-md)}.pts-layer{display:block;will-change:transform;transition:transform var(--duration-fast) var(--ease-out);white-space:nowrap;line-height:.9;text-transform:uppercase;-webkit-user-select:none;user-select:none}:host([size="sm"]) .pts-layer{font-size:clamp(2rem,6vw,4rem)}:host([size="md"]) .pts-layer{font-size:clamp(3rem,8vw,6rem)}:host([size="lg"]) .pts-layer,:host(:not([size])) .pts-layer{font-size:clamp(4rem,10vw,8rem)}:host([size="xl"]) .pts-layer{font-size:clamp(5rem,13vw,10rem)}:host([size="2xl"]) .pts-layer{font-size:clamp(6rem,16vw,14rem)}.pts-layer--outline{font-family:var(--lib-font-display);font-weight:300;letter-spacing:var(--tracking-tight);-webkit-text-stroke:1px var(--text-primary);color:transparent}.pts-layer--italic{font-family:var(--lib-font-body);font-style:italic;font-weight:400;letter-spacing:var(--tracking-tight);color:var(--text-primary)}:host([color="muted"]) .pts-layer--outline{-webkit-text-stroke-color:var(--text-muted)}:host([color="muted"]) .pts-layer--italic{color:var(--text-muted)}:host([color="kaki"]) .pts-layer--outline{-webkit-text-stroke-color:var(--color-kaki-500)}:host([color="kaki"]) .pts-layer--italic{color:var(--color-kaki-500)}:host([color="celadon"]) .pts-layer--outline{-webkit-text-stroke-color:var(--color-celadon-500)}:host([color="celadon"]) .pts-layer--italic{color:var(--color-celadon-500)}@media(prefers-reduced-motion:reduce){.pts-layer{transition:none;transform:none!important}}}';
+const paginationCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}}@layer components{.pg{display:flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);flex-wrap:wrap}.pg-numbers{display:flex;align-items:center;gap:var(--lib-space-xs)}.pg-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border-default);min-width:var(--_pg-size, 32px);height:var(--_pg-size, 32px);padding:0 var(--lib-space-sm);white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out)}.pg-btn:hover:not(:disabled,.pg-btn--active){background:var(--bg-surface);border-color:var(--border-strong);color:var(--text-primary)}.pg-btn:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:2px}.pg-btn:active:not(:disabled){transform:scale(.96)}.pg-btn--active{background:var(--color-washi-900);border-color:var(--color-washi-900);color:var(--color-washi-50);cursor:default}.pg-btn:disabled{opacity:.35;cursor:not-allowed}.pg-btn--nav{padding:0 var(--lib-space-md)}.pg-btn--nav svg{width:10px;height:10px;flex-shrink:0}.pg-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--_pg-size, 32px);height:var(--_pg-size, 32px);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);-webkit-user-select:none;user-select:none}:host([size="sm"]){--_pg-size: 26px}:host([size="sm"]) .pg-btn{font-size:10px;padding:0 var(--lib-space-xs)}:host([size="sm"]) .pg-btn--nav{padding:0 var(--lib-space-sm)}:host([size="sm"]) .pg-ellipsis{font-size:10px}:host([size="md"]){--_pg-size: 32px}:host([size="lg"]){--_pg-size: 40px}:host([size="lg"]) .pg-btn{font-size:var(--text-sm);letter-spacing:var(--tracking-wider);padding:0 var(--lib-space-md)}:host([size="lg"]) .pg-btn--nav{padding:0 calc(var(--lib-space-md) + var(--lib-space-xs))}:host([variant="outline"]) .pg-btn{background:transparent}:host([variant="outline"]) .pg-btn:hover:not(:disabled,.pg-btn--active){background:var(--bg-surface)}:host([variant="outline"]) .pg-btn--active{background:transparent;border-color:var(--color-washi-900);color:var(--color-washi-900)}:host([variant="ghost"]) .pg-btn{background:transparent;border-color:transparent}:host([variant="ghost"]) .pg-btn:hover:not(:disabled,.pg-btn--active){background:var(--bg-surface);border-color:transparent}:host([variant="ghost"]) .pg-btn--active{background:var(--bg-surface);border-color:transparent;color:var(--text-primary);font-weight:500}.pg-info{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);white-space:nowrap}:host([dark]) .pg-btn{background:var(--color-washi-800);border-color:var(--color-washi-700);color:var(--color-washi-400)}:host([dark]) .pg-btn:hover:not(:disabled,.pg-btn--active){background:var(--color-washi-700);border-color:var(--color-washi-600);color:var(--color-washi-100)}:host([dark]) .pg-btn--active{background:var(--color-washi-50);border-color:var(--color-washi-50);color:var(--color-washi-950)}:host([dark]) .pg-ellipsis{color:var(--color-washi-600)}:host([dark]) .pg-info{color:var(--color-washi-600)}}';
 export {
-  stackCss as default
+  paginationCss as default
 };
 //# sourceMappingURL=index254.js.map

package/dist/index255.js

@@ -1,157 +1,136 @@
-import { html, nothing } from "lit";
-const svgSearch = html`
-  <svg width="11" height="11" viewBox="0 0 16 16" fill="none"
-    stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
-    <circle cx="7" cy="7" r="5"/><line x1="11" y1="11" x2="14" y2="14"/>
-  </svg>`;
-const svgLogout = html`
-  <svg width="11" height="11" viewBox="0 0 14 14" fill="none"
-    stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
-    <path d="M6 2H3a1 1 0 00-1 1v8a1 1 0 001 1h3"/>
-    <polyline points="10,4 12,7 10,10"/>
-    <line x1="4" y1="7" x2="12" y2="7"/>
-  </svg>`;
-const svgMenu = html`
-  <svg width="18" height="18" viewBox="0 0 16 16" fill="none"
-    stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
-    <line x1="2" y1="4" x2="14" y2="4"/>
-    <line x1="2" y1="8" x2="14" y2="8"/>
-    <line x1="2" y1="12" x2="14" y2="12"/>
-  </svg>`;
-const svgClose = html`
-  <svg width="18" height="18" viewBox="0 0 14 14" fill="none"
-    stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
-    <line x1="2" y1="2" x2="12" y2="12"/>
-    <line x1="12" y1="2" x2="2" y2="12"/>
-  </svg>`;
-function renderBadge(badge) {
-  if (badge === void 0 || badge === null || badge === "") return nothing;
-  if (badge === "dot") {
-    return html`<span class="sb-badge sb-badge--dot" aria-hidden="true"></span>`;
-  }
-  const n = typeof badge === "number" ? badge : parseInt(String(badge), 10);
-  const cls = !isNaN(n) && n > 9 || isNaN(n) ? "sb-badge--kaki" : "sb-badge--muted";
-  return html`<span class="sb-badge ${cls}">${badge}</span>`;
+import { nothing, html } from "lit";
+function renderValue(v, unit) {
+  return html`${v}${unit ? html`<span class="rs-value-unit">${unit}</span>` : nothing}`;
 }
-function renderHeader(p) {
-  const isGlitch = p.variant === "glitch";
-  const isKintsugi = p.variant === "kintsugi";
+function renderMarks(marks, pct) {
+  if (!marks.length) return html``;
   return html`
-    <div class="sb-header" part="header">
-      <div class="sb-logo-mark" part="logo-mark">
-        ${isKintsugi ? html`<span>${p.logoMark}</span>` : p.logoMark}
-      </div>
-      ${isGlitch ? html`<span class="sb-brand">⌗ ${p.brandName.toUpperCase()}</span>
-                <span class="sb-version">v0.1</span>` : html`<span class="sb-brand">${p.brandName}</span>`}
+    <div class="rs-marks">
+      ${marks.map((m) => html`
+        <div
+          class="rs-mark ${m.pct <= pct ? "is-filled" : ""}"
+          style="left: ${m.pct}%"
+        >
+          ${m.label ? html`<span class="rs-mark-label">${m.label}</span>` : nothing}
+        </div>
+      `)}
     </div>
   `;
 }
-function renderSearch(p) {
-  if (!p.showSearch) return nothing;
+function renderLimits(show, low, high) {
+  if (!show) return html``;
   return html`
-    <div class="sb-search" part="search">
-      <div class="sb-search-inner">
-        ${svgSearch}
-        <input
-          class="sb-search-input"
-          type="search"
-          placeholder="${p.searchPlaceholder}"
-          aria-label="Buscar"
-          @input="${(e) => p.onSearchInput(e.target.value)}"
-        />
-        <span class="sb-search-kbd">⌘K</span>
-      </div>
+    <div class="rs-limits">
+      <span class="rs-limit">${low}</span>
+      <span class="rs-limit">${high}</span>
     </div>
   `;
 }
-function renderNav(p) {
-  const isGlitch = p.variant === "glitch";
+function renderTooltip(show, pct, value, unit) {
+  if (!show) return html``;
   return html`
-    <nav class="sb-nav" part="nav" aria-label="Navegación principal">
-      <div class="sb-indicator" part="indicator"></div>
-
-      ${p.links.map((link) => html`
-        ${link.group ? html`
-          <div class="sb-group" part="group">
-            ${isGlitch ? `// ${link.group}` : link.group}
-          </div>
-        ` : nothing}
-
-        <button
-          class="sb-link ${link.id === p.active ? "is-active" : ""}"
-          part="link${link.id === p.active ? " link-active" : ""}"
-          data-id="${link.id}"
-          ?disabled="${link.disabled}"
-          aria-current="${link.id === p.active ? "page" : nothing}"
-          @click="${() => {
-    if (!link.disabled) p.onLinkClick(link.id);
-  }}"
-        >
-          <span class="sb-link-icon">
-            <lib-icon name="${link.icon}" size="sm"></lib-icon>
-          </span>
-
-          ${isGlitch ? html`<span class="sb-link-prefix">›</span>` : nothing}
-
-          <span class="sb-link-label">${link.label}</span>
-
-          ${renderBadge(link.badge)}
-        </button>
-      `)}
-    </nav>
+    <div class="rs-tooltip-wrap" style="left: ${pct}%">
+      <span class="rs-tooltip-bubble">${value}${unit}</span>
+    </div>
   `;
 }
-function renderUser(p) {
-  const isDark = p.variant === "dark" || !p.variant;
-  return html`
-    <div class="sb-user" part="user">
-      <div class="sb-user-avatar" part="user-avatar">
-        ${p.userAvatar ? html`<img src="${p.userAvatar}" alt="${p.userName}">` : p.userInitials || p.userName.slice(0, 1)}
+function renderTrack(p) {
+  if (p.dual) {
+    return html`
+      <div class="rs-track-wrap">
+        <div class="rs-track">
+          <div
+            class="rs-fill-dual"
+            style="left: ${p.minPct}%; right: ${100 - p.maxPct}%"
+          ></div>
+        </div>
+        <input
+          type="range"
+          class="rs-input-min"
+          min=${p.min} max=${p.max} step=${p.step}
+          .value=${String(p.valueMin)}
+          ?disabled=${p.disabled}
+          aria-label="Mínimo"
+          @input=${p.onInputMin}
+        >
+        <input
+          type="range"
+          class="rs-input-max"
+          min=${p.min} max=${p.max} step=${p.step}
+          .value=${String(p.valueMax)}
+          ?disabled=${p.disabled}
+          aria-label="Máximo"
+          @input=${p.onInputMax}
+        >
       </div>
-
-      <div class="sb-user-info">
-        <div class="sb-user-name">${p.userName}</div>
-        ${p.userRole ? html`<div class="sb-user-role">${p.userRole}</div>` : nothing}
+    `;
+  }
+  if (p.vertical) {
+    return html`
+      <div class="rs-vert-wrap">
+        <div class="rs-track-wrap">
+          <div class="rs-track">
+            <div class="rs-fill" style="width: ${p.pct}%"></div>
+          </div>
+          <input
+            type="range"
+            min=${p.min} max=${p.max} step=${p.step}
+            .value=${String(p.value)}
+            ?disabled=${p.disabled}
+            @input=${p.onInput}
+          >
+        </div>
       </div>
-
-      ${isDark ? html`<span class="sb-user-dot" aria-hidden="true"></span>` : p.showUserAction ? html`
-              <button
-                class="sb-user-action"
-                aria-label="Acción de usuario"
-                @click="${p.onUserAction}"
-              >${svgLogout}</button>` : nothing}
+    `;
+  }
+  return html`
+    <div class="rs-track-wrap">
+      <div class="rs-track">
+        <div class="rs-fill" style="width: ${p.pct}%"></div>
+      </div>
+      <input
+        type="range"
+        min=${p.min} max=${p.max} step=${p.step}
+        .value=${String(p.value)}
+        ?disabled=${p.disabled}
+        @input=${p.onInput}
+      >
+      ${renderTooltip(p.tooltip, p.pct, p.value, p.unit)}
     </div>
   `;
 }
-function sidebarTemplate(p) {
+function rangeSliderTemplate(p) {
+  const valueDisplay = p.dual ? html`<span class="rs-value">
+        ${p.valueMin} — ${p.valueMax}
+        ${p.unit ? html`<span class="rs-value-unit">${p.unit}</span>` : nothing}
+      </span>` : html`<span class="rs-value">${renderValue(p.value, p.unit)}</span>`;
   return html`
-    <div
-      class="sb-overlay ${p.mobileOpen ? "is-open" : ""}"
-      @click="${p.onOverlayClick}"
-      aria-hidden="true"
-    ></div>
+    <div class="rs">
+
+      ${!p.vertical && (p.label || p.dual) ? html`
+        <div class="rs-label-row">
+          ${p.label ? html`<span class="rs-label">${p.label}</span>` : nothing}
+          ${valueDisplay}
+        </div>
+      ` : nothing}
 
-    <aside
-      class="sidebar
-        ${p.mobileOpen ? "is-open" : ""}
-        ${p.collapsed ? "is-collapsed" : ""}"
-      part="sidebar"
-    >
-      ${renderHeader(p)}
-      ${renderSearch(p)}
-      ${renderNav(p)}
-      ${renderUser(p)}
-    </aside>
+      ${renderTrack(p)}
 
-    <button
-      class="sb-toggle"
-      aria-label="${p.mobileOpen ? "Cerrar menú" : "Abrir menú"}"
-      aria-expanded="${p.mobileOpen}"
-      @click="${p.onToggleClick}"
-    >${p.mobileOpen ? svgClose : svgMenu}</button>
+      ${p.vertical ? html`
+        <div class="rs-label-row">
+          ${p.label ? html`<span class="rs-label">${p.label}</span>` : nothing}
+          ${valueDisplay}
+        </div>
+      ` : nothing}
+
+      ${renderMarks(p.marks, p.pct)}
+
+      ${renderLimits(p.showLimits, p.limitMinText, p.limitMaxText)}
+
+    </div>
   `;
 }
 export {
-  sidebarTemplate
+  rangeSliderTemplate
 };
 //# sourceMappingURL=index255.js.map

package/dist/index255.js.map

@@ -1 +1 @@
-{"version":3,"file":"index255.js","sources":["../src/components/organisms/sidebar/lib-sidebar.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { SidebarLink } from '../../../types';\n\nexport interface SidebarTemplateProps {\n  /* Header */\n  logoMark:   string;\n  brandName:  string;\n  /* Search */\n  showSearch:          boolean;\n  searchPlaceholder:   string;\n  /* Nav */\n  links:  SidebarLink[];\n  active: string;\n  /* User footer */\n  userName:    string;\n  userRole:    string;\n  userAvatar:  string;\n  userInitials:string;\n  showUserAction: boolean;\n  /* State */\n  variant:    string;\n  collapsed:  boolean;\n  mobileOpen: boolean;\n  /* Handlers */\n  onLinkClick:   (id: string) => void;\n  onUserAction:  () => void;\n  onSearchInput: (q: string) => void;\n  onOverlayClick: () => void;\n  onToggleClick:  () => void;\n}\n\n/* ── SVG icons inline — no lib-icon dependency for shell elements ── */\nconst svgSearch = html`\n  <svg width=\"11\" height=\"11\" viewBox=\"0 0 16 16\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n    <circle cx=\"7\" cy=\"7\" r=\"5\"/><line x1=\"11\" y1=\"11\" x2=\"14\" y2=\"14\"/>\n  </svg>`;\n\nconst svgLogout = html`\n  <svg width=\"11\" height=\"11\" viewBox=\"0 0 14 14\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n    <path d=\"M6 2H3a1 1 0 00-1 1v8a1 1 0 001 1h3\"/>\n    <polyline points=\"10,4 12,7 10,10\"/>\n    <line x1=\"4\" y1=\"7\" x2=\"12\" y2=\"7\"/>\n  </svg>`;\n\nconst svgMenu = html`\n  <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n    <line x1=\"2\" y1=\"4\" x2=\"14\" y2=\"4\"/>\n    <line x1=\"2\" y1=\"8\" x2=\"14\" y2=\"8\"/>\n    <line x1=\"2\" y1=\"12\" x2=\"14\" y2=\"12\"/>\n  </svg>`;\n\nconst svgClose = html`\n  <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n    <line x1=\"2\" y1=\"2\" x2=\"12\" y2=\"12\"/>\n    <line x1=\"12\" y1=\"2\" x2=\"2\" y2=\"12\"/>\n  </svg>`;\n\n/* ── Badge ── */\nfunction renderBadge(badge: string | number | undefined): TemplateResult | typeof nothing {\n  if (badge === undefined || badge === null || badge === '') return nothing;\n  if (badge === 'dot') {\n    return html`<span class=\"sb-badge sb-badge--dot\" aria-hidden=\"true\"></span>`;\n  }\n  const n = typeof badge === 'number' ? badge : parseInt(String(badge), 10);\n  const cls = (!isNaN(n) && n > 9) || isNaN(n) ? 'sb-badge--kaki' : 'sb-badge--muted';\n  return html`<span class=\"sb-badge ${cls}\">${badge}</span>`;\n}\n\n/* ── Header ── */\nfunction renderHeader(p: SidebarTemplateProps): TemplateResult {\n  const isGlitch = p.variant === 'glitch';\n  const isKintsugi = p.variant === 'kintsugi';\n\n  return html`\n    <div class=\"sb-header\" part=\"header\">\n      <div class=\"sb-logo-mark\" part=\"logo-mark\">\n        ${isKintsugi\n          ? html`<span>${p.logoMark}</span>`\n          : p.logoMark}\n      </div>\n      ${isGlitch\n        ? html`<span class=\"sb-brand\">⌗ ${p.brandName.toUpperCase()}</span>\n                <span class=\"sb-version\">v0.1</span>`\n        : html`<span class=\"sb-brand\">${p.brandName}</span>`}\n    </div>\n  `;\n}\n\n/* ── Search ── */\nfunction renderSearch(p: SidebarTemplateProps): TemplateResult | typeof nothing {\n  if (!p.showSearch) return nothing;\n  return html`\n    <div class=\"sb-search\" part=\"search\">\n      <div class=\"sb-search-inner\">\n        ${svgSearch}\n        <input\n          class=\"sb-search-input\"\n          type=\"search\"\n          placeholder=\"${p.searchPlaceholder}\"\n          aria-label=\"Buscar\"\n          @input=\"${(e: Event): void =>\n            p.onSearchInput((e.target as HTMLInputElement).value)}\"\n        />\n        <span class=\"sb-search-kbd\">⌘K</span>\n      </div>\n    </div>\n  `;\n}\n\n/* ── Nav ── */\nfunction renderNav(p: SidebarTemplateProps): TemplateResult {\n  const isGlitch = p.variant === 'glitch';\n\n  return html`\n    <nav class=\"sb-nav\" part=\"nav\" aria-label=\"Navegación principal\">\n      <div class=\"sb-indicator\" part=\"indicator\"></div>\n\n      ${p.links.map(link => html`\n        ${link.group ? html`\n          <div class=\"sb-group\" part=\"group\">\n            ${isGlitch ? `// ${link.group}` : link.group}\n          </div>\n        ` : nothing}\n\n        <button\n          class=\"sb-link ${link.id === p.active ? 'is-active' : ''}\"\n          part=\"link${link.id === p.active ? ' link-active' : ''}\"\n          data-id=\"${link.id}\"\n          ?disabled=\"${link.disabled}\"\n          aria-current=\"${link.id === p.active ? 'page' : nothing}\"\n          @click=\"${(): void => { if (!link.disabled) p.onLinkClick(link.id); }}\"\n        >\n          <span class=\"sb-link-icon\">\n            <lib-icon name=\"${link.icon}\" size=\"sm\"></lib-icon>\n          </span>\n\n          ${isGlitch\n            ? html`<span class=\"sb-link-prefix\">›</span>`\n            : nothing}\n\n          <span class=\"sb-link-label\">${link.label}</span>\n\n          ${renderBadge(link.badge)}\n        </button>\n      `)}\n    </nav>\n  `;\n}\n\n/* ── User footer ── */\nfunction renderUser(p: SidebarTemplateProps): TemplateResult {\n  const isDark = p.variant === 'dark' || !p.variant;\n\n  return html`\n    <div class=\"sb-user\" part=\"user\">\n      <div class=\"sb-user-avatar\" part=\"user-avatar\">\n        ${p.userAvatar\n          ? html`<img src=\"${p.userAvatar}\" alt=\"${p.userName}\">`\n          : p.userInitials || p.userName.slice(0, 1)}\n      </div>\n\n      <div class=\"sb-user-info\">\n        <div class=\"sb-user-name\">${p.userName}</div>\n        ${p.userRole ? html`<div class=\"sb-user-role\">${p.userRole}</div>` : nothing}\n      </div>\n\n      ${isDark\n        ? html`<span class=\"sb-user-dot\" aria-hidden=\"true\"></span>`\n        : p.showUserAction\n          ? html`\n              <button\n                class=\"sb-user-action\"\n                aria-label=\"Acción de usuario\"\n                @click=\"${p.onUserAction}\"\n              >${svgLogout}</button>`\n          : nothing}\n    </div>\n  `;\n}\n\n/* ── Template principal ── */\nexport function sidebarTemplate(p: SidebarTemplateProps): TemplateResult {\n  return html`\n    <div\n      class=\"sb-overlay ${p.mobileOpen ? 'is-open' : ''}\"\n      @click=\"${p.onOverlayClick}\"\n      aria-hidden=\"true\"\n    ></div>\n\n    <aside\n      class=\"sidebar\n        ${p.mobileOpen ? 'is-open' : ''}\n        ${p.collapsed  ? 'is-collapsed' : ''}\"\n      part=\"sidebar\"\n    >\n      ${renderHeader(p)}\n      ${renderSearch(p)}\n      ${renderNav(p)}\n      ${renderUser(p)}\n    </aside>\n\n    <button\n      class=\"sb-toggle\"\n      aria-label=\"${p.mobileOpen ? 'Cerrar menú' : 'Abrir menú'}\"\n      aria-expanded=\"${p.mobileOpen}\"\n      @click=\"${p.onToggleClick}\"\n    >${p.mobileOpen ? svgClose : svgMenu}</button>\n  `;\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"index255.js","sources":["../src/components/molecules/range-slider/lib-range-slider.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { RsSize, RsTone, RsMark } from './lib-range-slider.component';\n\nexport interface RangeSliderTemplateProps {\n  /* sizing / modes */\n  size:     RsSize;\n  tone:     RsTone;\n  dual:     boolean;\n  vertical: boolean;\n  disabled: boolean;\n  tooltip:  boolean;\n\n  /* range attrs */\n  min:  number;\n  max:  number;\n  step: number;\n\n  /* values */\n  value:    number;   // single mode\n  valueMin: number;   // dual low\n  valueMax: number;   // dual high\n\n  /* computed pcts (0–100) */\n  pct:    number;     // single fill\n  minPct: number;     // dual fill left\n  maxPct: number;     // dual fill right\n\n  /* display */\n  label:        string;\n  unit:         string;\n  showLimits:   boolean;\n  limitMinText: string;\n  limitMaxText: string;\n  marks:        RsMark[];\n\n  /* handlers */\n  onInput:    (e: Event) => void;\n  onInputMin: (e: Event) => void;\n  onInputMax: (e: Event) => void;\n}\n\n/* ── Value display ───────────────────────────────────────── */\nfunction renderValue(v: number | string, unit: string): TemplateResult {\n  return html`${v}${unit ? html`<span class=\"rs-value-unit\">${unit}</span>` : nothing}`;\n}\n\n/* ── Marks ───────────────────────────────────────────────── */\nfunction renderMarks(marks: RsMark[], pct: number): TemplateResult {\n  if (!marks.length) return html``;\n  return html`\n    <div class=\"rs-marks\">\n      ${marks.map(m => html`\n        <div\n          class=\"rs-mark ${m.pct <= pct ? 'is-filled' : ''}\"\n          style=\"left: ${m.pct}%\"\n        >\n          ${m.label ? html`<span class=\"rs-mark-label\">${m.label}</span>` : nothing}\n        </div>\n      `)}\n    </div>\n  `;\n}\n\n/* ── Limits ──────────────────────────────────────────────── */\nfunction renderLimits(show: boolean, low: string, high: string): TemplateResult {\n  if (!show) return html``;\n  return html`\n    <div class=\"rs-limits\">\n      <span class=\"rs-limit\">${low}</span>\n      <span class=\"rs-limit\">${high}</span>\n    </div>\n  `;\n}\n\n/* ── Tooltip ─────────────────────────────────────────────── */\nfunction renderTooltip(show: boolean, pct: number, value: number, unit: string): TemplateResult {\n  if (!show) return html``;\n  return html`\n    <div class=\"rs-tooltip-wrap\" style=\"left: ${pct}%\">\n      <span class=\"rs-tooltip-bubble\">${value}${unit}</span>\n    </div>\n  `;\n}\n\n/* ── Track content ───────────────────────────────────────── */\nfunction renderTrack(p: RangeSliderTemplateProps): TemplateResult {\n  if (p.dual) {\n    return html`\n      <div class=\"rs-track-wrap\">\n        <div class=\"rs-track\">\n          <div\n            class=\"rs-fill-dual\"\n            style=\"left: ${p.minPct}%; right: ${100 - p.maxPct}%\"\n          ></div>\n        </div>\n        <input\n          type=\"range\"\n          class=\"rs-input-min\"\n          min=${p.min} max=${p.max} step=${p.step}\n          .value=${String(p.valueMin)}\n          ?disabled=${p.disabled}\n          aria-label=\"Mínimo\"\n          @input=${p.onInputMin}\n        >\n        <input\n          type=\"range\"\n          class=\"rs-input-max\"\n          min=${p.min} max=${p.max} step=${p.step}\n          .value=${String(p.valueMax)}\n          ?disabled=${p.disabled}\n          aria-label=\"Máximo\"\n          @input=${p.onInputMax}\n        >\n      </div>\n    `;\n  }\n\n  if (p.vertical) {\n    return html`\n      <div class=\"rs-vert-wrap\">\n        <div class=\"rs-track-wrap\">\n          <div class=\"rs-track\">\n            <div class=\"rs-fill\" style=\"width: ${p.pct}%\"></div>\n          </div>\n          <input\n            type=\"range\"\n            min=${p.min} max=${p.max} step=${p.step}\n            .value=${String(p.value)}\n            ?disabled=${p.disabled}\n            @input=${p.onInput}\n          >\n        </div>\n      </div>\n    `;\n  }\n\n  /* single horizontal */\n  return html`\n    <div class=\"rs-track-wrap\">\n      <div class=\"rs-track\">\n        <div class=\"rs-fill\" style=\"width: ${p.pct}%\"></div>\n      </div>\n      <input\n        type=\"range\"\n        min=${p.min} max=${p.max} step=${p.step}\n        .value=${String(p.value)}\n        ?disabled=${p.disabled}\n        @input=${p.onInput}\n      >\n      ${renderTooltip(p.tooltip, p.pct, p.value, p.unit)}\n    </div>\n  `;\n}\n\n/**\n * Template principal de lib-range-slider.\n */\nexport function rangeSliderTemplate(p: RangeSliderTemplateProps): TemplateResult {\n  /* Dual value display: \"120 — 480 €\" */\n  const valueDisplay = p.dual\n    ? html`<span class=\"rs-value\">\n        ${p.valueMin} — ${p.valueMax}\n        ${p.unit ? html`<span class=\"rs-value-unit\">${p.unit}</span>` : nothing}\n      </span>`\n    : html`<span class=\"rs-value\">${renderValue(p.value, p.unit)}</span>`;\n\n  return html`\n    <div class=\"rs\">\n\n      ${!p.vertical && (p.label || p.dual) ? html`\n        <div class=\"rs-label-row\">\n          ${p.label ? html`<span class=\"rs-label\">${p.label}</span>` : nothing}\n          ${valueDisplay}\n        </div>\n      ` : nothing}\n\n      ${renderTrack(p)}\n\n      ${p.vertical ? html`\n        <div class=\"rs-label-row\">\n          ${p.label ? html`<span class=\"rs-label\">${p.label}</span>` : nothing}\n          ${valueDisplay}\n        </div>\n      ` : nothing}\n\n      ${renderMarks(p.marks, p.pct)}\n\n      ${renderLimits(p.showLimits, p.limitMinText, p.limitMaxText)}\n\n    </div>\n  `;\n}"],"names":[],"mappings":"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"}