@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index36.js

@@ -1,7 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { bentoItemTemplate } from "./index256.js";
-import itemCss from "./index257.js";
+import { property, state, customElement } from "lit/decorators.js";
+import { readingProgressTemplate } from "./index328.js";
+import componentCss from "./index329.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,48 +13,130 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibBentoItem = class extends LitElement {
+let LibReadingProgress = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.cols = 1;
-    this.rows = 1;
-    this.interactive = false;
-    this.flush = false;
-  }
-  /**
-   * FIX: grid-column/row deben aplicarse sobre :host (el elemento
-   * que participa en el grid del padre), NO sobre un div interno.
-   * Las CSS custom properties no suben al padre, solo bajan.
-   * La solución correcta es escribir directamente en this.style.
-   */
-  updated() {
-    this.style.gridColumn = `span ${this.cols}`;
-    this.style.gridRow = `span ${this.rows}`;
+    this.variant = "bar";
+    this.tone = "kaki";
+    this.target = "";
+    this.dotsCount = 5;
+    this.ringSize = 28;
+    this._progress = 0;
+    this._scrollEl = null;
+    this._onScroll = () => {
+      if (this._scrollEl) this._calculate(this._scrollEl);
+    };
   }
+  /* ── Lifecycle ───────────────────────────────────────── */
+  connectedCallback() {
+    super.connectedCallback();
+    this._bindScroll();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unbindScroll();
+  }
+  updated(changed) {
+    if (changed.has("target")) {
+      this._unbindScroll();
+      this._bindScroll();
+    }
+  }
+  /* ── Scroll binding ──────────────────────────────────── */
+  _bindScroll() {
+    if (this.target) {
+      this.updateComplete.then(() => {
+        const el = document.querySelector(this.target);
+        if (el) {
+          this._scrollEl = el;
+          el.addEventListener("scroll", this._onScroll, { passive: true });
+          this._calculate(el);
+        }
+      });
+    } else {
+      this._scrollEl = window;
+      window.addEventListener("scroll", this._onScroll, { passive: true });
+      this._calculate(window);
+    }
+  }
+  _unbindScroll() {
+    if (!this._scrollEl) return;
+    this._scrollEl.removeEventListener("scroll", this._onScroll);
+    this._scrollEl = null;
+  }
+  _calculate(source) {
+    let p;
+    if (source instanceof Window) {
+      const scrolled = window.scrollY;
+      const total = document.documentElement.scrollHeight - window.innerHeight;
+      p = total > 0 ? Math.min(1, Math.max(0, scrolled / total)) : 0;
+    } else {
+      const { scrollTop, scrollHeight, clientHeight } = source;
+      const total = scrollHeight - clientHeight;
+      p = total > 0 ? Math.min(1, Math.max(0, scrollTop / total)) : 0;
+    }
+    const pct = Math.round(p * 100);
+    if (pct === this._progress) return;
+    this._progress = pct;
+    this._applyHostStyle();
+  }
+  /* Aplica width / height al host en lugar de forzar un re-render
+     para las variantes cuyo elemento visual ES el host */
+  _applyHostStyle() {
+    const v = this.variant;
+    if (v === "bar" || v === "line") {
+      this.style.width = `${this._progress}%`;
+      const active = this._progress > 1 && this._progress < 100;
+      this.toggleAttribute("active", active);
+    } else if (v === "vertical") {
+      this.style.height = `${this._progress}%`;
+    }
+  }
+  /* ── Render ──────────────────────────────────────────── */
   render() {
-    return bentoItemTemplate();
+    return readingProgressTemplate({
+      variant: this.variant,
+      progress: this._progress,
+      dotsCount: this.dotsCount,
+      ringSize: this.ringSize
+    });
+  }
+  /* ── Public API ──────────────────────────────────────── */
+  /** Devuelve el progreso actual (0-100) */
+  get progress() {
+    return this._progress;
+  }
+  /** Fuerza un recálculo inmediato del progreso */
+  recalculate() {
+    if (this._scrollEl) this._calculate(this._scrollEl);
   }
 };
-LibBentoItem.styles = [
+LibReadingProgress.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(itemCss)}`
+  css`${unsafeCSS(componentCss)}`
 ];
 __decorateClass([
-  property({ type: Number })
-], LibBentoItem.prototype, "cols", 2);
+  property({ type: String, reflect: true })
+], LibReadingProgress.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibReadingProgress.prototype, "tone", 2);
+__decorateClass([
+  property({ type: String })
+], LibReadingProgress.prototype, "target", 2);
 __decorateClass([
-  property({ type: Number })
-], LibBentoItem.prototype, "rows", 2);
+  property({ type: Number, attribute: "dots-count" })
+], LibReadingProgress.prototype, "dotsCount", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibBentoItem.prototype, "interactive", 2);
+  property({ type: Number, attribute: "ring-size" })
+], LibReadingProgress.prototype, "ringSize", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibBentoItem.prototype, "flush", 2);
-LibBentoItem = __decorateClass([
-  customElement("lib-bento-item")
-], LibBentoItem);
+  state()
+], LibReadingProgress.prototype, "_progress", 2);
+LibReadingProgress = __decorateClass([
+  customElement("lib-reading-progress")
+], LibReadingProgress);
 export {
-  LibBentoItem
+  LibReadingProgress
 };
 //# sourceMappingURL=index36.js.map

package/dist/index36.js.map

@@ -1 +1 @@
-{"version":3,"file":"index36.js","sources":["../src/components/atoms/bento-item/lib-bento-item.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { bentoItemTemplate } from './lib-bento-item.html';\nimport itemCss from './lib-bento-item.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * lib-bento-item — Celda de la rejilla bento\n *\n * Úsalo como hijo directo de lib-bento-grid.\n *\n * @prop cols        — Columnas que ocupa (default 1)\n * @prop rows        — Filas que ocupa (default 1)\n * @prop interactive — Añade hover y cursor pointer\n * @prop flush       — Elimina el padding interno (para imágenes a sangre)\n *\n * @slot — Contenido de la celda\n */\n@customElement('lib-bento-item')\nexport class LibBentoItem extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(itemCss)}`,\n  ];\n\n  @property({ type: Number })\n  cols = 1;\n\n  @property({ type: Number })\n  rows = 1;\n\n  @property({ type: Boolean, reflect: true })\n  interactive = false;\n\n  @property({ type: Boolean, reflect: true })\n  flush = false;\n\n  /**\n   * FIX: grid-column/row deben aplicarse sobre :host (el elemento\n   * que participa en el grid del padre), NO sobre un div interno.\n   * Las CSS custom properties no suben al padre, solo bajan.\n   * La solución correcta es escribir directamente en this.style.\n   */\n  override updated(): void {\n    this.style.gridColumn = `span ${this.cols}`;\n    this.style.gridRow    = `span ${this.rows}`;\n  }\n\n  protected override render(): TemplateResult {\n    return bentoItemTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-bento-item': LibBentoItem;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAmBO,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,OAAO;AAGP,SAAA,OAAO;AAGP,SAAA,cAAc;AAGd,SAAA,QAAQ;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQC,UAAgB;AACvB,SAAK,MAAM,aAAa,QAAQ,KAAK,IAAI;AACzC,SAAK,MAAM,UAAa,QAAQ,KAAK,IAAI;AAAA,EAC3C;AAAA,EAEmB,SAAyB;AAC1C,WAAO,kBAAsB;AAAA,EAC/B;AACF;AAhCa,aACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,OAAO,CAAC;AAC1B;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANf,aAOX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATf,aAUX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAZ/B,aAaX,WAAA,eAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAf/B,aAgBX,WAAA,SAAA,CAAA;AAhBW,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;"}
+{"version":3,"file":"index36.js","sources":["../src/components/atoms/reading-progress/lib-reading-progress.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state }              from 'lit/decorators.js';\nimport { readingProgressTemplate }                          from './lib-reading-progress.html';\nimport componentCss                                         from './lib-reading-progress.css?inline';\nimport sharedTokens                                         from '../../../styles/shared/tokens.css?inline';\n\nexport type ReadingProgressVariant = 'bar' | 'line' | 'dots' | 'ring' | 'vertical';\nexport type ReadingProgressTone    = 'kaki' | 'celadon' | 'ink' | 'kintsugi';\n\n\n/**\n * @element lib-reading-progress\n *\n * Cinco variantes de progreso de lectura — todas se alimentan del mismo\n * valor interno `_progress` (0-100) calculado con scroll.\n *\n * Variantes\n * ─────────\n * bar      → 2px debajo del nav. El HOST es el elemento visual.\n *            Coloca el componente DENTRO de un contenedor con\n *            position:relative; overflow:hidden.\n *\n * line     → 1px, más sutil. Mismos requisitos de posicionamiento.\n *\n * dots     → fila de N puntos. Display inline-flex. Va dentro del nav.\n *\n * ring     → anillo SVG. Display inline-flex. Va junto al brand.\n *\n * vertical → barra fija en el margen izquierdo de la ventana.\n *            Se posiciona sola con position:fixed.\n *\n * @attr {ReadingProgressVariant} variant    — bar · line · dots · ring · vertical\n * @attr {ReadingProgressTone}    tone       — kaki · celadon · ink\n * @attr {string}                 target     — selector CSS del contenedor scrollable.\n *                                             Si se omite, trackea window.\n * @attr {number}                 dots-count — número de puntos (variant=dots, default: 5)\n * @attr {number}                 ring-size  — diámetro del anillo en px (variant=ring, default: 28)\n */\n@customElement('lib-reading-progress')\nexport class LibReadingProgress extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(componentCss)}`,\n  ];\n\n  /* ── Props ───────────────────────────────────────────── */\n\n  @property({ type: String, reflect: true })\n  variant: ReadingProgressVariant = 'bar';\n\n  @property({ type: String, reflect: true })\n  tone: ReadingProgressTone = 'kaki';\n\n  /** Selector CSS del elemento scrollable que se quiere observar.\n   *  Si está vacío, escucha el scroll de window. */\n  @property({ type: String })\n  target = '';\n\n  @property({ type: Number, attribute: 'dots-count' })\n  dotsCount = 5;\n\n  @property({ type: Number, attribute: 'ring-size' })\n  ringSize = 28;\n\n  /* ── Estado interno ──────────────────────────────────── */\n\n  @state()\n  private _progress = 0;\n\n  /* ── Elemento scrollable resuelto ───────────────────── */\n\n  private _scrollEl: Element | Window | null = null;\n\n  /* ── Lifecycle ───────────────────────────────────────── */\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._bindScroll();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._unbindScroll();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    /* Si cambia el target, revinculamos el listener */\n    if (changed.has('target')) {\n      this._unbindScroll();\n      this._bindScroll();\n    }\n  }\n\n  /* ── Scroll binding ──────────────────────────────────── */\n\n  private _bindScroll(): void {\n    if (this.target) {\n      /* Esperamos al primer update para que el DOM esté disponible */\n      this.updateComplete.then(() => {\n        const el = document.querySelector(this.target);\n        if (el) {\n          this._scrollEl = el;\n          el.addEventListener('scroll', this._onScroll, { passive: true });\n          this._calculate(el);\n        }\n      });\n    } else {\n      this._scrollEl = window;\n      window.addEventListener('scroll', this._onScroll, { passive: true });\n      this._calculate(window);\n    }\n  }\n\n  private _unbindScroll(): void {\n    if (!this._scrollEl) return;\n    this._scrollEl.removeEventListener('scroll', this._onScroll);\n    this._scrollEl = null;\n  }\n\n  /* ── Cálculo de progreso ─────────────────────────────── */\n\n  private _onScroll = (): void => {\n    if (this._scrollEl) this._calculate(this._scrollEl);\n  };\n\n  private _calculate(source: Element | Window): void {\n    let p: number;\n\n    if (source instanceof Window) {\n      const scrolled = window.scrollY;\n      const total    = document.documentElement.scrollHeight - window.innerHeight;\n      p = total > 0 ? Math.min(1, Math.max(0, scrolled / total)) : 0;\n    } else {\n      const { scrollTop, scrollHeight, clientHeight } = source as Element;\n      const total = scrollHeight - clientHeight;\n      p = total > 0 ? Math.min(1, Math.max(0, scrollTop / total)) : 0;\n    }\n\n    const pct = Math.round(p * 100);\n    if (pct === this._progress) return;\n    this._progress = pct;\n\n    /* Actualiza el host directamente para bar / line / vertical\n       para evitar un re-render completo en cada frame de scroll */\n    this._applyHostStyle();\n  }\n\n  /* Aplica width / height al host en lugar de forzar un re-render\n     para las variantes cuyo elemento visual ES el host */\n  private _applyHostStyle(): void {\n    const v = this.variant;\n    if (v === 'bar' || v === 'line') {\n      this.style.width = `${this._progress}%`;\n      /* Activa el destello solo cuando hay progreso real y no está al 100% */\n      const active = this._progress > 1 && this._progress < 100;\n      this.toggleAttribute('active', active);\n    } else if (v === 'vertical') {\n      this.style.height = `${this._progress}%`;\n    }\n  }\n\n  /* ── Render ──────────────────────────────────────────── */\n\n  override render(): TemplateResult {\n    return readingProgressTemplate({\n      variant:   this.variant,\n      progress:  this._progress,\n      dotsCount: this.dotsCount,\n      ringSize:  this.ringSize,\n    });\n  }\n\n  /* ── Public API ──────────────────────────────────────── */\n\n  /** Devuelve el progreso actual (0-100) */\n  get progress(): number {\n    return this._progress;\n  }\n\n  /** Fuerza un recálculo inmediato del progreso */\n  recalculate(): void {\n    if (this._scrollEl) this._calculate(this._scrollEl);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-reading-progress': LibReadingProgress;\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index37.js

@@ -1,8 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
-import { readingProgressTemplate } from "./index258.js";
-import componentCss from "./index259.js";
-import sharedTokens from "./index196.js";
+import { state, customElement } from "lit/decorators.js";
+import { rippleTemplate } from "./index330.js";
+import styles from "./index331.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,130 +12,57 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibReadingProgress = class extends LitElement {
+let LibRipple = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.variant = "bar";
-    this.tone = "kaki";
-    this.target = "";
-    this.dotsCount = 5;
-    this.ringSize = 28;
-    this._progress = 0;
-    this._scrollEl = null;
-    this._onScroll = () => {
-      if (this._scrollEl) this._calculate(this._scrollEl);
+    this.ripples = [];
+    this.count = 0;
+    this.createRipple = (event) => {
+      console.log("LibRipple: Click detectado en coordenadas:", event.clientX, event.clientY);
+      if (!this.parentElement) return;
+      const rect = this.parentElement.getBoundingClientRect();
+      const size = Math.sqrt(rect.width ** 2 + rect.height ** 2) * 2;
+      const x = event.clientX - rect.left - size / 2;
+      const y = event.clientY - rect.top - size / 2;
+      const id = this.count++;
+      const newRipple = { id, x, y, size };
+      this.ripples = [...this.ripples, newRipple];
+      setTimeout(() => {
+        this.ripples = this.ripples.filter((r) => r.id !== id);
+      }, 600);
     };
   }
-  /* ── Lifecycle ───────────────────────────────────────── */
-  connectedCallback() {
-    super.connectedCallback();
-    this._bindScroll();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._unbindScroll();
-  }
-  updated(changed) {
-    if (changed.has("target")) {
-      this._unbindScroll();
-      this._bindScroll();
-    }
-  }
-  /* ── Scroll binding ──────────────────────────────────── */
-  _bindScroll() {
-    if (this.target) {
-      this.updateComplete.then(() => {
-        const el = document.querySelector(this.target);
-        if (el) {
-          this._scrollEl = el;
-          el.addEventListener("scroll", this._onScroll, { passive: true });
-          this._calculate(el);
-        }
-      });
-    } else {
-      this._scrollEl = window;
-      window.addEventListener("scroll", this._onScroll, { passive: true });
-      this._calculate(window);
-    }
-  }
-  _unbindScroll() {
-    if (!this._scrollEl) return;
-    this._scrollEl.removeEventListener("scroll", this._onScroll);
-    this._scrollEl = null;
-  }
-  _calculate(source) {
-    let p;
-    if (source instanceof Window) {
-      const scrolled = window.scrollY;
-      const total = document.documentElement.scrollHeight - window.innerHeight;
-      p = total > 0 ? Math.min(1, Math.max(0, scrolled / total)) : 0;
+  // 1. Aseguramos la conexión al padre cuando el componente entra al DOM
+  firstUpdated() {
+    console.log("LibRipple: ¡Estoy vivo y montado!");
+    if (this.parentElement) {
+      console.log("LibRipple: Padre detectado ->", this.parentElement.tagName);
+      const parentStyle = window.getComputedStyle(this.parentElement);
+      if (parentStyle.position === "static") {
+        this.parentElement.style.position = "relative";
+      }
+      this.parentElement.addEventListener("mousedown", this.createRipple);
     } else {
-      const { scrollTop, scrollHeight, clientHeight } = source;
-      const total = scrollHeight - clientHeight;
-      p = total > 0 ? Math.min(1, Math.max(0, scrollTop / total)) : 0;
+      console.error("LibRipple: No se encontró parentElement. ¿Está el componente dentro de un contenedor?");
     }
-    const pct = Math.round(p * 100);
-    if (pct === this._progress) return;
-    this._progress = pct;
-    this._applyHostStyle();
   }
-  /* Aplica width / height al host en lugar de forzar un re-render
-     para las variantes cuyo elemento visual ES el host */
-  _applyHostStyle() {
-    const v = this.variant;
-    if (v === "bar" || v === "line") {
-      this.style.width = `${this._progress}%`;
-      const active = this._progress > 1 && this._progress < 100;
-      this.toggleAttribute("active", active);
-    } else if (v === "vertical") {
-      this.style.height = `${this._progress}%`;
-    }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.parentElement) == null ? void 0 : _a.removeEventListener("mousedown", this.createRipple);
+    super.disconnectedCallback();
   }
-  /* ── Render ──────────────────────────────────────────── */
   render() {
-    return readingProgressTemplate({
-      variant: this.variant,
-      progress: this._progress,
-      dotsCount: this.dotsCount,
-      ringSize: this.ringSize
-    });
-  }
-  /* ── Public API ──────────────────────────────────────── */
-  /** Devuelve el progreso actual (0-100) */
-  get progress() {
-    return this._progress;
-  }
-  /** Fuerza un recálculo inmediato del progreso */
-  recalculate() {
-    if (this._scrollEl) this._calculate(this._scrollEl);
+    return rippleTemplate(this.ripples);
   }
 };
-LibReadingProgress.styles = [
-  css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(componentCss)}`
-];
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibReadingProgress.prototype, "variant", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibReadingProgress.prototype, "tone", 2);
-__decorateClass([
-  property({ type: String })
-], LibReadingProgress.prototype, "target", 2);
-__decorateClass([
-  property({ type: Number, attribute: "dots-count" })
-], LibReadingProgress.prototype, "dotsCount", 2);
-__decorateClass([
-  property({ type: Number, attribute: "ring-size" })
-], LibReadingProgress.prototype, "ringSize", 2);
+LibRipple.styles = [css`${unsafeCSS(styles)}`];
 __decorateClass([
   state()
-], LibReadingProgress.prototype, "_progress", 2);
-LibReadingProgress = __decorateClass([
-  customElement("lib-reading-progress")
-], LibReadingProgress);
+], LibRipple.prototype, "ripples", 2);
+LibRipple = __decorateClass([
+  customElement("lib-ripple")
+], LibRipple);
 export {
-  LibReadingProgress
+  LibRipple
 };
 //# sourceMappingURL=index37.js.map

package/dist/index37.js.map

@@ -1 +1 @@
-{"version":3,"file":"index37.js","sources":["../src/components/atoms/reading-progress/lib-reading-progress.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state }              from 'lit/decorators.js';\nimport { readingProgressTemplate }                          from './lib-reading-progress.html';\nimport componentCss                                         from './lib-reading-progress.css?inline';\nimport sharedTokens                                         from '../../../styles/shared/tokens.css?inline';\n\nexport type ReadingProgressVariant = 'bar' | 'line' | 'dots' | 'ring' | 'vertical';\nexport type ReadingProgressTone    = 'kaki' | 'celadon' | 'ink' | 'kintsugi';\n\n\n/**\n * @element lib-reading-progress\n *\n * Cinco variantes de progreso de lectura — todas se alimentan del mismo\n * valor interno `_progress` (0-100) calculado con scroll.\n *\n * Variantes\n * ─────────\n * bar      → 2px debajo del nav. El HOST es el elemento visual.\n *            Coloca el componente DENTRO de un contenedor con\n *            position:relative; overflow:hidden.\n *\n * line     → 1px, más sutil. Mismos requisitos de posicionamiento.\n *\n * dots     → fila de N puntos. Display inline-flex. Va dentro del nav.\n *\n * ring     → anillo SVG. Display inline-flex. Va junto al brand.\n *\n * vertical → barra fija en el margen izquierdo de la ventana.\n *            Se posiciona sola con position:fixed.\n *\n * @attr {ReadingProgressVariant} variant    — bar · line · dots · ring · vertical\n * @attr {ReadingProgressTone}    tone       — kaki · celadon · ink\n * @attr {string}                 target     — selector CSS del contenedor scrollable.\n *                                             Si se omite, trackea window.\n * @attr {number}                 dots-count — número de puntos (variant=dots, default: 5)\n * @attr {number}                 ring-size  — diámetro del anillo en px (variant=ring, default: 28)\n */\n@customElement('lib-reading-progress')\nexport class LibReadingProgress extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(componentCss)}`,\n  ];\n\n  /* ── Props ───────────────────────────────────────────── */\n\n  @property({ type: String, reflect: true })\n  variant: ReadingProgressVariant = 'bar';\n\n  @property({ type: String, reflect: true })\n  tone: ReadingProgressTone = 'kaki';\n\n  /** Selector CSS del elemento scrollable que se quiere observar.\n   *  Si está vacío, escucha el scroll de window. */\n  @property({ type: String })\n  target = '';\n\n  @property({ type: Number, attribute: 'dots-count' })\n  dotsCount = 5;\n\n  @property({ type: Number, attribute: 'ring-size' })\n  ringSize = 28;\n\n  /* ── Estado interno ──────────────────────────────────── */\n\n  @state()\n  private _progress = 0;\n\n  /* ── Elemento scrollable resuelto ───────────────────── */\n\n  private _scrollEl: Element | Window | null = null;\n\n  /* ── Lifecycle ───────────────────────────────────────── */\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._bindScroll();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._unbindScroll();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    /* Si cambia el target, revinculamos el listener */\n    if (changed.has('target')) {\n      this._unbindScroll();\n      this._bindScroll();\n    }\n  }\n\n  /* ── Scroll binding ──────────────────────────────────── */\n\n  private _bindScroll(): void {\n    if (this.target) {\n      /* Esperamos al primer update para que el DOM esté disponible */\n      this.updateComplete.then(() => {\n        const el = document.querySelector(this.target);\n        if (el) {\n          this._scrollEl = el;\n          el.addEventListener('scroll', this._onScroll, { passive: true });\n          this._calculate(el);\n        }\n      });\n    } else {\n      this._scrollEl = window;\n      window.addEventListener('scroll', this._onScroll, { passive: true });\n      this._calculate(window);\n    }\n  }\n\n  private _unbindScroll(): void {\n    if (!this._scrollEl) return;\n    this._scrollEl.removeEventListener('scroll', this._onScroll);\n    this._scrollEl = null;\n  }\n\n  /* ── Cálculo de progreso ─────────────────────────────── */\n\n  private _onScroll = (): void => {\n    if (this._scrollEl) this._calculate(this._scrollEl);\n  };\n\n  private _calculate(source: Element | Window): void {\n    let p: number;\n\n    if (source instanceof Window) {\n      const scrolled = window.scrollY;\n      const total    = document.documentElement.scrollHeight - window.innerHeight;\n      p = total > 0 ? Math.min(1, Math.max(0, scrolled / total)) : 0;\n    } else {\n      const { scrollTop, scrollHeight, clientHeight } = source as Element;\n      const total = scrollHeight - clientHeight;\n      p = total > 0 ? Math.min(1, Math.max(0, scrollTop / total)) : 0;\n    }\n\n    const pct = Math.round(p * 100);\n    if (pct === this._progress) return;\n    this._progress = pct;\n\n    /* Actualiza el host directamente para bar / line / vertical\n       para evitar un re-render completo en cada frame de scroll */\n    this._applyHostStyle();\n  }\n\n  /* Aplica width / height al host en lugar de forzar un re-render\n     para las variantes cuyo elemento visual ES el host */\n  private _applyHostStyle(): void {\n    const v = this.variant;\n    if (v === 'bar' || v === 'line') {\n      this.style.width = `${this._progress}%`;\n      /* Activa el destello solo cuando hay progreso real y no está al 100% */\n      const active = this._progress > 1 && this._progress < 100;\n      this.toggleAttribute('active', active);\n    } else if (v === 'vertical') {\n      this.style.height = `${this._progress}%`;\n    }\n  }\n\n  /* ── Render ──────────────────────────────────────────── */\n\n  override render(): TemplateResult {\n    return readingProgressTemplate({\n      variant:   this.variant,\n      progress:  this._progress,\n      dotsCount: this.dotsCount,\n      ringSize:  this.ringSize,\n    });\n  }\n\n  /* ── Public API ──────────────────────────────────────── */\n\n  /** Devuelve el progreso actual (0-100) */\n  get progress(): number {\n    return this._progress;\n  }\n\n  /** Fuerza un recálculo inmediato del progreso */\n  recalculate(): void {\n    if (this._scrollEl) this._calculate(this._scrollEl);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-reading-progress': LibReadingProgress;\n  }\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"index37.js","sources":["../src/components/atoms/ripple/lib-ripple.component.ts"],"sourcesContent":["import { LitElement, TemplateResult, css, unsafeCSS } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport { rippleTemplate } from './lib-ripple.html';\nimport styles from './lib-ripple.css?inline';\n\nexport interface RippleEffect {\n  id: number;\n  x: number;\n  y: number;\n  size: number;\n}\n\n@customElement('lib-ripple')\nexport class LibRipple extends LitElement {\n  // Importante: usamos unsafeCSS para el string del CSS inyectado\n  static override styles = [css`${unsafeCSS(styles)}`];\n\n  @state() private ripples: RippleEffect[] = [];\n  private count: number = 0;\n\n  // 1. Aseguramos la conexión al padre cuando el componente entra al DOM\n  override firstUpdated(): void {\n    console.log('LibRipple: ¡Estoy vivo y montado!');\n    \n    if (this.parentElement) {\n      console.log('LibRipple: Padre detectado ->', this.parentElement.tagName);\n      \n      // Forzamos que el padre sea relativo si no lo es\n      const parentStyle = window.getComputedStyle(this.parentElement);\n      if (parentStyle.position === 'static') {\n        this.parentElement.style.position = 'relative';\n      }\n\n      this.parentElement.addEventListener('mousedown', this.createRipple);\n    } else {\n      console.error('LibRipple: No se encontró parentElement. ¿Está el componente dentro de un contenedor?');\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.parentElement?.removeEventListener('mousedown', this.createRipple);\n    super.disconnectedCallback();\n  }\n\n  private createRipple = (event: MouseEvent): void => {\n    console.log('LibRipple: Click detectado en coordenadas:', event.clientX, event.clientY);\n    \n    if (!this.parentElement) return;\n\n    const rect: DOMRect = this.parentElement.getBoundingClientRect();\n    \n    // Calculamos el tamaño para cubrir todo el contenedor (Pitágoras pro)\n    const size: number = Math.sqrt(rect.width ** 2 + rect.height ** 2) * 2;\n    \n    const x: number = event.clientX - rect.left - size / 2;\n    const y: number = event.clientY - rect.top - size / 2;\n\n    const id: number = this.count++;\n    const newRipple: RippleEffect = { id, x, y, size };\n    \n    this.ripples = [...this.ripples, newRipple];\n\n    // Limpiamos después de la animación (600ms según tus tokens)\n    setTimeout(() => {\n      this.ripples = this.ripples.filter(r => r.id !== id);\n    }, 600);\n  };\n\n  protected override render(): TemplateResult {\n    return rippleTemplate(this.ripples);\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;AAaO,IAAM,YAAN,cAAwB,WAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA;AAII,SAAQ,UAA0B,CAAA;AAC3C,SAAQ,QAAgB;AA0BxB,SAAQ,eAAe,CAAC,UAA4B;AAClD,cAAQ,IAAI,8CAA8C,MAAM,SAAS,MAAM,OAAO;AAEtF,UAAI,CAAC,KAAK,cAAe;AAEzB,YAAM,OAAgB,KAAK,cAAc,sBAAA;AAGzC,YAAM,OAAe,KAAK,KAAK,KAAK,SAAS,IAAI,KAAK,UAAU,CAAC,IAAI;AAErE,YAAM,IAAY,MAAM,UAAU,KAAK,OAAO,OAAO;AACrD,YAAM,IAAY,MAAM,UAAU,KAAK,MAAM,OAAO;AAEpD,YAAM,KAAa,KAAK;AACxB,YAAM,YAA0B,EAAE,IAAI,GAAG,GAAG,KAAA;AAE5C,WAAK,UAAU,CAAC,GAAG,KAAK,SAAS,SAAS;AAG1C,iBAAW,MAAM;AACf,aAAK,UAAU,KAAK,QAAQ,OAAO,CAAA,MAAK,EAAE,OAAO,EAAE;AAAA,MACrD,GAAG,GAAG;AAAA,IACR;AAAA,EAAA;AAAA;AAAA,EA7CS,eAAqB;AAC5B,YAAQ,IAAI,mCAAmC;AAE/C,QAAI,KAAK,eAAe;AACtB,cAAQ,IAAI,iCAAiC,KAAK,cAAc,OAAO;AAGvE,YAAM,cAAc,OAAO,iBAAiB,KAAK,aAAa;AAC9D,UAAI,YAAY,aAAa,UAAU;AACrC,aAAK,cAAc,MAAM,WAAW;AAAA,MACtC;AAEA,WAAK,cAAc,iBAAiB,aAAa,KAAK,YAAY;AAAA,IACpE,OAAO;AACL,cAAQ,MAAM,uFAAuF;AAAA,IACvG;AAAA,EACF;AAAA,EAES,uBAA6B;;AACpC,eAAK,kBAAL,mBAAoB,oBAAoB,aAAa,KAAK;AAC1D,UAAM,qBAAA;AAAA,EACR;AAAA,EA0BmB,SAAyB;AAC1C,WAAO,eAAe,KAAK,OAAO;AAAA,EACpC;AACF;AA1Da,UAEK,SAAS,CAAC,MAAM,UAAU,MAAM,CAAC,EAAE;AAElC,gBAAA;AAAA,EAAhB,MAAA;AAAM,GAJI,UAIM,WAAA,WAAA,CAAA;AAJN,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}