@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index76.js

@@ -1,7 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { parallaxTextStackTemplate } from "./index336.js";
-import stackCss from "./index337.js";
+import { property, query, customElement } from "lit/decorators.js";
+import { horizontalScrollTemplate } from "./index249.js";
+import sectionCss from "./index250.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,100 +13,103 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibParallaxTextStack = class extends LitElement {
+let LibHorizontalScrollSection = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.lines = [];
-    this.speed = 0.15;
-    this.size = "lg";
-    this.color = "default";
+    this.scrollDuration = 3;
+    this.paddingInline = 10;
+    this.showProgress = true;
     this._ticking = false;
-    this._reducedMotion = false;
-    this._onMotionChange = (e) => {
-      this._reducedMotion = e.matches;
-      if (this._reducedMotion) this._resetLayers();
-    };
+    this._ro = null;
     this._onScroll = () => {
       if (this._ticking) return;
       this._ticking = true;
       requestAnimationFrame(() => {
-        this._applyParallax();
+        this._calculate();
         this._ticking = false;
       });
     };
   }
-  /* ════════════════════════════════════════
-     Ciclo de vida
-     ════════════════════════════════════════ */
+  /* ── Lifecycle ── */
   connectedCallback() {
     super.connectedCallback();
-    this._motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    this._reducedMotion = this._motionQuery.matches;
-    this._motionQuery.addEventListener("change", this._onMotionChange);
     window.addEventListener("scroll", this._onScroll, { passive: true });
   }
   disconnectedCallback() {
     var _a;
     super.disconnectedCallback();
     window.removeEventListener("scroll", this._onScroll);
-    (_a = this._motionQuery) == null ? void 0 : _a.removeEventListener("change", this._onMotionChange);
+    (_a = this._ro) == null ? void 0 : _a.disconnect();
   }
-  /**
-   * firstUpdated: primer render completado → shadow DOM listo.
-   * connectedCallback se dispara ANTES de que Lit renderice,
-   * por lo que querySelectorAll('.pts-layer') devuelve vacío ahí.
-   */
   firstUpdated() {
-    this._applyParallax();
-  }
-  /* ════════════════════════════════════════
-     Lógica del efecto
-     ════════════════════════════════════════ */
-  _applyParallax() {
-    var _a;
-    if (this._reducedMotion) return;
-    const layers = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(".pts-layer");
-    if (!(layers == null ? void 0 : layers.length)) return;
-    const rect = this.getBoundingClientRect();
-    const centerEl = rect.top + rect.height / 2;
-    const centerVp = window.innerHeight / 2;
-    const offset = centerVp - centerEl;
-    layers.forEach((layer, i) => {
-      const direction = i % 2 === 0 ? 1 : -1;
-      const factor = (i + 1) * this.speed;
-      layer.style.transform = `translateX(${offset * factor * direction}px)`;
+    this._ro = new ResizeObserver(() => {
+      if (!this._ticking) {
+        requestAnimationFrame(() => {
+          this._calculate();
+          this._ticking = false;
+        });
+        this._ticking = true;
+      }
     });
+    this._ro.observe(this);
   }
-  _resetLayers() {
-    var _a;
-    (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(".pts-layer").forEach((l) => {
-      l.style.transform = "";
-    });
+  /* ── Props → CSS custom properties ── */
+  updated() {
+    this.style.setProperty("--_scroll-height", `${this.scrollDuration * 100}vh`);
+    this.style.setProperty("--_padding-inline", String(this.paddingInline));
+  }
+  /* ── Cálculo core ── */
+  _calculate() {
+    if (!this._content || !this._progressFill || !this._counter) return;
+    const rect = this.getBoundingClientRect();
+    const scrollable = rect.height - window.innerHeight;
+    if (rect.top > 0 || rect.bottom < window.innerHeight) return;
+    const scrolled = -rect.top;
+    const progress = Math.min(Math.max(scrolled / scrollable, 0), 1);
+    const paddingRight = window.innerWidth * (this.paddingInline / 100);
+    const maxMove = this._content.scrollWidth - window.innerWidth + paddingRight;
+    this._content.style.transform = `translateX(-${progress * maxMove}px)`;
+    this._progressFill.style.width = `${progress * 100}%`;
+    this._counter.textContent = `${Math.round(progress * 100)}%`;
+    this.dispatchEvent(new CustomEvent(
+      "ui-lib-scroll-progress",
+      {
+        detail: { progress, percent: Math.round(progress * 100) },
+        bubbles: true,
+        composed: true
+      }
+    ));
   }
   render() {
-    return parallaxTextStackTemplate(this);
+    return horizontalScrollTemplate(this);
   }
 };
-LibParallaxTextStack.styles = [
+LibHorizontalScrollSection.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(stackCss)}`
+  css`${unsafeCSS(sectionCss)}`
 ];
 __decorateClass([
-  property({ type: Array })
-], LibParallaxTextStack.prototype, "lines", 2);
+  property({ type: Number, attribute: "scroll-duration" })
+], LibHorizontalScrollSection.prototype, "scrollDuration", 2);
+__decorateClass([
+  property({ type: Number, attribute: "padding-inline" })
+], LibHorizontalScrollSection.prototype, "paddingInline", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-progress" })
+], LibHorizontalScrollSection.prototype, "showProgress", 2);
 __decorateClass([
-  property({ type: Number })
-], LibParallaxTextStack.prototype, "speed", 2);
+  query(".horizontal-content")
+], LibHorizontalScrollSection.prototype, "_content", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibParallaxTextStack.prototype, "size", 2);
+  query(".progress-fill")
+], LibHorizontalScrollSection.prototype, "_progressFill", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibParallaxTextStack.prototype, "color", 2);
-LibParallaxTextStack = __decorateClass([
-  customElement("lib-parallax-text-stack")
-], LibParallaxTextStack);
+  query(".counter")
+], LibHorizontalScrollSection.prototype, "_counter", 2);
+LibHorizontalScrollSection = __decorateClass([
+  customElement("lib-horizontal-scroll-section")
+], LibHorizontalScrollSection);
 export {
-  LibParallaxTextStack
+  LibHorizontalScrollSection
 };
 //# sourceMappingURL=index76.js.map

package/dist/index76.js.map

@@ -1 +1 @@
-{"version":3,"file":"index76.js","sources":["../src/components/organisms/parallax-text/lib-parallax-text-stack.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { parallaxTextStackTemplate } from './lib-parallax-text-stack.html';\nimport stackCss from './lib-parallax-text-stack.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { ParallaxTextSize, ParallaxTextColor } from './lib-parallax-text-stack.types';\n\n/**\n * lib-parallax-text-stack — Shibui UI\n *\n * Apila líneas tipográficas con parallax horizontal al hacer scroll.\n * Capas pares  → outline (trazo, sin relleno).\n * Capas impares → italic serif (relleno).\n *\n * @prop lines  — Array de strings, una por capa\n * @prop speed  — Factor de velocidad (default 0.15)\n * @prop size   — 'sm' | 'md' | 'lg'(default) | 'xl' | '2xl'\n * @prop color  — 'default' | 'muted' | 'kaki' | 'celadon'\n *\n * IMPORTANTE: el padre debe llevar overflow-x:hidden.\n * El componente NO lo aplica en :host — si lo hiciera, el\n * translateX quedaría clipado y el efecto sería invisible.\n */\n@customElement('lib-parallax-text-stack')\nexport class LibParallaxTextStack extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(stackCss)}`,\n  ];\n\n  @property({ type: Array })\n  lines: string[] = [];\n\n  @property({ type: Number })\n  speed = 0.15;\n\n  @property({ type: String, reflect: true })\n  size: ParallaxTextSize = 'lg';\n\n  @property({ type: String, reflect: true })\n  color: ParallaxTextColor = 'default';\n\n  /* ── Estado interno ── */\n  private _ticking = false;\n  private _reducedMotion = false;\n  private _motionQuery!: MediaQueryList;\n\n  /* ════════════════════════════════════════\n     Ciclo de vida\n     ════════════════════════════════════════ */\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this._motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n    this._reducedMotion = this._motionQuery.matches;\n    this._motionQuery.addEventListener('change', this._onMotionChange);\n\n    // { passive: true } — no bloquea el hilo principal\n    window.addEventListener('scroll', this._onScroll, { passive: true });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('scroll', this._onScroll);\n    this._motionQuery?.removeEventListener('change', this._onMotionChange);\n  }\n\n  /**\n   * firstUpdated: primer render completado → shadow DOM listo.\n   * connectedCallback se dispara ANTES de que Lit renderice,\n   * por lo que querySelectorAll('.pts-layer') devuelve vacío ahí.\n   */\n  override firstUpdated(): void {\n    this._applyParallax();\n  }\n\n  /* ════════════════════════════════════════\n     Manejadores\n     ════════════════════════════════════════ */\n\n  private _onMotionChange = (e: MediaQueryListEvent): void => {\n    this._reducedMotion = e.matches;\n    if (this._reducedMotion) this._resetLayers();\n  };\n\n  private _onScroll = (): void => {\n    if (this._ticking) return;\n    this._ticking = true;\n    requestAnimationFrame(() => {\n      this._applyParallax();\n      this._ticking = false;\n    });\n  };\n\n  /* ════════════════════════════════════════\n     Lógica del efecto\n     ════════════════════════════════════════ */\n\n  private _applyParallax(): void {\n    if (this._reducedMotion) return;\n\n    // Clase correcta: pts-layer (no parallax-layer del original)\n    const layers = this.shadowRoot?.querySelectorAll<HTMLElement>('.pts-layer');\n    if (!layers?.length) return;\n\n    const rect     = this.getBoundingClientRect();\n    const centerEl = rect.top + rect.height / 2;\n    const centerVp = window.innerHeight / 2;\n    // offset > 0: componente bajo el centro → capas se separan\n    // offset < 0: componente sobre el centro → capas se contraen\n    const offset   = centerVp - centerEl;\n\n    layers.forEach((layer, i) => {\n      // Capas alternas en direcciones opuestas — efecto acordeón\n      const direction = i % 2 === 0 ? 1 : -1;\n      const factor    = (i + 1) * this.speed;\n      layer.style.transform = `translateX(${offset * factor * direction}px)`;\n    });\n  }\n\n  private _resetLayers(): void {\n    this.shadowRoot\n      ?.querySelectorAll<HTMLElement>('.pts-layer')\n      .forEach(l => { l.style.transform = ''; });\n  }\n\n  protected override render(): TemplateResult {\n    return parallaxTextStackTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-parallax-text-stack': LibParallaxTextStack;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBO,IAAM,uBAAN,cAAmC,WAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,QAAkB,CAAA;AAGlB,SAAA,QAAQ;AAGR,SAAA,OAAyB;AAGzB,SAAA,QAA2B;AAG3B,SAAQ,WAAW;AACnB,SAAQ,iBAAiB;AAqCzB,SAAQ,kBAAkB,CAAC,MAAiC;AAC1D,WAAK,iBAAiB,EAAE;AACxB,UAAI,KAAK,eAAgB,MAAK,aAAA;AAAA,IAChC;AAEA,SAAQ,YAAY,MAAY;AAC9B,UAAI,KAAK,SAAU;AACnB,WAAK,WAAW;AAChB,4BAAsB,MAAM;AAC1B,aAAK,eAAA;AACL,aAAK,WAAW;AAAA,MAClB,CAAC;AAAA,IACH;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EA1CS,oBAA0B;AACjC,UAAM,kBAAA;AAEN,SAAK,eAAe,OAAO,WAAW,kCAAkC;AACxE,SAAK,iBAAiB,KAAK,aAAa;AACxC,SAAK,aAAa,iBAAiB,UAAU,KAAK,eAAe;AAGjE,WAAO,iBAAiB,UAAU,KAAK,WAAW,EAAE,SAAS,MAAM;AAAA,EACrE;AAAA,EAES,uBAA6B;;AACpC,UAAM,qBAAA;AACN,WAAO,oBAAoB,UAAU,KAAK,SAAS;AACnD,eAAK,iBAAL,mBAAmB,oBAAoB,UAAU,KAAK;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOS,eAAqB;AAC5B,SAAK,eAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA,EAwBQ,iBAAuB;;AAC7B,QAAI,KAAK,eAAgB;AAGzB,UAAM,UAAS,UAAK,eAAL,mBAAiB,iBAA8B;AAC9D,QAAI,EAAC,iCAAQ,QAAQ;AAErB,UAAM,OAAW,KAAK,sBAAA;AACtB,UAAM,WAAW,KAAK,MAAM,KAAK,SAAS;AAC1C,UAAM,WAAW,OAAO,cAAc;AAGtC,UAAM,SAAW,WAAW;AAE5B,WAAO,QAAQ,CAAC,OAAO,MAAM;AAE3B,YAAM,YAAY,IAAI,MAAM,IAAI,IAAI;AACpC,YAAM,UAAa,IAAI,KAAK,KAAK;AACjC,YAAM,MAAM,YAAY,cAAc,SAAS,SAAS,SAAS;AAAA,IACnE,CAAC;AAAA,EACH;AAAA,EAEQ,eAAqB;;AAC3B,eAAK,eAAL,mBACI,iBAA8B,cAC/B,QAAQ,CAAA,MAAK;AAAE,QAAE,MAAM,YAAY;AAAA,IAAI;AAAA,EAC5C;AAAA,EAEmB,SAAyB;AAC1C,WAAO,0BAA0B,IAAI;AAAA,EACvC;AACF;AA1Ga,qBACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,QAAQ,CAAC;AAC3B;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GANd,qBAOX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATf,qBAUX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAZ9B,qBAaX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAf9B,qBAgBX,WAAA,SAAA,CAAA;AAhBW,uBAAN,gBAAA;AAAA,EADN,cAAc,yBAAyB;AAAA,GAC3B,oBAAA;"}
+{"version":3,"file":"index76.js","sources":["../src/components/organisms/horizontal-scroll-section/lib-horizontal-scroll-section.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { horizontalScrollTemplate } from './lib-horizontal-scroll-section.html';\nimport sectionCss from './lib-horizontal-scroll-section.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { HorizontalScrollProgressEvent } from './lib-horizontal-scroll-section.types';\n\n/**\n * lib-horizontal-scroll-section\n *\n * Convierte scroll vertical en desplazamiento horizontal sticky.\n * El bloque ocupa `scrollDuration` vh de altura — esa \"duración\"\n * determina cuánto debe bajar el usuario para ver todo el contenido.\n *\n * @prop scroll-duration  — Multiplicador de vh (default 3 → 300vh)\n * @prop padding-inline   — Padding lateral en vw (default 10 → 10vw)\n * @prop show-progress    — Muestra barra de progreso y contador (default true)\n *\n * @fires ui-lib-scroll-progress — { detail: HorizontalScrollProgressEvent }\n *\n * @slot — Items del carrusel horizontal (flex-shrink: 0 automático)\n *\n * @cssvar --_scroll-height   — Sobreescribe la altura total del bloque\n * @cssvar --_gap             — Gap entre items (default: calc(--lib-space-xl * 2))\n * @cssvar --_padding-inline  — Padding lateral en vw (sincronizado con el prop)\n */\n@customElement('lib-horizontal-scroll-section')\nexport class LibHorizontalScrollSection extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(sectionCss)}`,\n  ];\n\n  /** Cuántas veces la altura del viewport dura el efecto (default: 3 → 300vh) */\n  @property({ type: Number, attribute: 'scroll-duration' })\n  scrollDuration = 3;\n\n  /** Padding lateral en vw aplicado a ambos lados del track (default: 10) */\n  @property({ type: Number, attribute: 'padding-inline' })\n  paddingInline = 10;\n\n  /** Muestra la barra de progreso y el contador de porcentaje */\n  @property({ type: Boolean, attribute: 'show-progress' })\n  showProgress = true;\n\n  @query('.horizontal-content') declare private _content: HTMLElement;\n  @query('.progress-fill')      declare private _progressFill: HTMLElement;\n  @query('.counter')            declare private _counter: HTMLElement;\n\n  private _ticking = false;\n  private _ro: ResizeObserver | null = null;\n\n  /* ── Lifecycle ── */\n  override connectedCallback(): void {\n    super.connectedCallback();\n    window.addEventListener('scroll', this._onScroll, { passive: true });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('scroll', this._onScroll);\n    this._ro?.disconnect();\n  }\n\n  override firstUpdated(): void {\n    // ResizeObserver: recalcula si cambia el viewport o el contenido\n    this._ro = new ResizeObserver((): void => {\n      // Forzar recálculo en el siguiente frame\n      if (!this._ticking) {\n        requestAnimationFrame((): void => {\n          this._calculate();\n          this._ticking = false;\n        });\n        this._ticking = true;\n      }\n    });\n    this._ro.observe(this);\n  }\n\n  /* ── Props → CSS custom properties ── */\n  override updated(): void {\n    this.style.setProperty('--_scroll-height', `${this.scrollDuration * 100}vh`);\n    this.style.setProperty('--_padding-inline', String(this.paddingInline));\n  }\n\n  /* ── Scroll handler — con rAF throttle ── */\n  private _onScroll = (): void => {\n    if (this._ticking) return;\n    this._ticking = true;\n    requestAnimationFrame((): void => {\n      this._calculate();\n      this._ticking = false;\n    });\n  };\n\n  /* ── Cálculo core ── */\n  private _calculate(): void {\n    if (!this._content || !this._progressFill || !this._counter) return;\n\n    const rect          = this.getBoundingClientRect();\n    const scrollable    = rect.height - window.innerHeight;\n\n    // Solo actualiza mientras el bloque está sticky en pantalla\n    if (rect.top > 0 || rect.bottom < window.innerHeight) return;\n\n    const scrolled  = -rect.top;\n    const progress  = Math.min(Math.max(scrolled / scrollable, 0), 1);\n\n    // maxMove: cuántos px debe desplazarse el track.\n    // scrollWidth incluye el padding-left; el padding-right se añade manualmente\n    // porque CSS no lo suma al scrollWidth del flex container.\n    const paddingRight = window.innerWidth * (this.paddingInline / 100);\n    const maxMove = this._content.scrollWidth - window.innerWidth + paddingRight;\n\n    // Mutar el DOM directamente — sin Lit reactivity para mantener 60fps\n    this._content.style.transform      = `translateX(-${progress * maxMove}px)`;\n    this._progressFill.style.width     = `${progress * 100}%`;\n    this._counter.textContent          = `${Math.round(progress * 100)}%`;\n\n    // Emitir evento solo cuando hay cambio real (evita flooding)\n    this.dispatchEvent(new CustomEvent<HorizontalScrollProgressEvent>(\n      'ui-lib-scroll-progress',\n      {\n        detail: { progress, percent: Math.round(progress * 100) },\n        bubbles: true,\n        composed: true,\n      },\n    ));\n  }\n\n  protected override render(): TemplateResult {\n    return horizontalScrollTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-horizontal-scroll-section': LibHorizontalScrollSection;\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index77.js

@@ -1,8 +1,8 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
-import timelineCss from "./index338.js";
+import { property, customElement } from "lit/decorators.js";
+import { parallaxTemplate } from "./index251.js";
+import parallaxCss from "./index252.js";
 import sharedTokens from "./index196.js";
-import { timelineItemTemplate } from "./index339.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,106 +13,130 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibTimelineItem = class extends LitElement {
+let LibParallaxContainer = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.nKind = "dot";
-    this.nodeColor = "default";
-    this.icon = "circle";
-    this.avatar = "";
-    this.status = "default";
-    this.lineVariant = "solid";
-    this.lineProgress = 0;
-    this.hideLine = false;
-    this.timestamp = "";
-    this.title = "";
-    this.body = "";
-    this.card = false;
-    this.collapsible = false;
-    this._collapsed = false;
+    this.speed = 0.2;
+    this.axis = "y";
+    this.clamp = 0;
+    this._observer = null;
+    this._isVisible = false;
+    this._ticking = false;
+    this._reducedMotion = false;
+    this._onScroll = () => {
+      if (!this._isVisible || this._reducedMotion) return;
+      if (this._ticking) return;
+      this._ticking = true;
+      requestAnimationFrame(() => {
+        this._applyParallax();
+        this._ticking = false;
+      });
+    };
   }
-  /* ── API pública ── */
-  /** Expande el ítem si es collapsible */
-  expand() {
-    this._collapsed = false;
+  /* ── Lifecycle ── */
+  connectedCallback() {
+    super.connectedCallback();
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    this._reducedMotion = mq.matches;
+    mq.addEventListener("change", (e) => {
+      this._reducedMotion = e.matches;
+      if (this._reducedMotion) this._resetTransforms();
+    });
+    window.addEventListener("scroll", this._onScroll, { passive: true });
+    this._setupObserver();
   }
-  /** Contrae el ítem si es collapsible */
-  collapse() {
-    this._collapsed = true;
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    window.removeEventListener("scroll", this._onScroll);
+    (_a = this._observer) == null ? void 0 : _a.disconnect();
+    this._observer = null;
   }
-  /* ── Render ── */
-  render() {
-    return timelineItemTemplate({
-      nodeType: this.nKind,
-      nodeColor: this.nodeColor,
-      icon: this.icon,
-      avatar: this.avatar,
-      status: this.status,
-      lineVariant: this.lineVariant,
-      lineProgress: this.lineProgress,
-      hideLine: this.hideLine,
-      timestamp: this.timestamp,
-      title: this.title,
-      body: this.body,
-      card: this.card,
-      collapsed: this._collapsed,
-      collapsible: this.collapsible,
-      onToggleCollapse: () => {
-        this._collapsed = !this._collapsed;
+  /* ── IntersectionObserver — activa/desactiva will-change ── */
+  _setupObserver() {
+    this._observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+        this._isVisible = entry.isIntersecting;
+        if (this._isVisible) {
+          this.setAttribute("visible", "");
+          requestAnimationFrame(() => this._applyParallax());
+        } else {
+          this.removeAttribute("visible");
+        }
+      },
+      { threshold: 0.01 }
+    );
+    this._observer.observe(this);
+  }
+  /**
+   * Cálculo del desplazamiento parallax.
+   *
+   * Fórmula: centerOffset = distancia entre el centro del elemento
+   * y el centro del viewport. Cuando el elemento está centrado en
+   * pantalla → offset = 0, sin desplazamiento.
+   * Cuando el elemento sube por encima → offset negativo → el elemento
+   * se desplaza hacia arriba (más rápido o más lento que el scroll).
+   *
+   * Esto es más correcto que `(scrollY - offsetTop) * speed` porque:
+   * 1. No depende del offsetParent (fiable en Shadow DOM)
+   * 2. El punto neutro es el centro visual, no el top de la página
+   */
+  _applyParallax() {
+    var _a;
+    const slot = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("slot");
+    if (!slot) return;
+    const rect = this.getBoundingClientRect();
+    const centerOffset = rect.top + rect.height / 2 - window.innerHeight / 2;
+    const elements = slot.assignedElements();
+    elements.forEach((el) => {
+      const factor = parseFloat(el.dataset["parallaxFactor"] ?? "1");
+      const move = centerOffset * this.speed * factor;
+      const clamped = this.clamp > 0 ? Math.min(Math.max(move, -this.clamp), this.clamp) : move;
+      switch (this.axis) {
+        case "x":
+          el.style.transform = `translate3d(${clamped}px, 0, 0)`;
+          break;
+        case "xy":
+          el.style.transform = `translate3d(${clamped}px, ${clamped}px, 0)`;
+          break;
+        case "y":
+        default:
+          el.style.transform = `translate3d(0, ${clamped}px, 0)`;
       }
     });
   }
+  /** Limpia los transforms (p.ej. al activar prefers-reduced-motion en runtime) */
+  _resetTransforms() {
+    var _a;
+    const slot = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("slot");
+    const elements = slot == null ? void 0 : slot.assignedElements();
+    elements == null ? void 0 : elements.forEach((el) => {
+      el.style.transform = "";
+    });
+  }
+  render() {
+    return parallaxTemplate();
+  }
 };
-LibTimelineItem.styles = [
+LibParallaxContainer.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(timelineCss)}`
+  css`${unsafeCSS(parallaxCss)}`
 ];
 __decorateClass([
-  property({ type: String, reflect: true, attribute: "node-type" })
-], LibTimelineItem.prototype, "nKind", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "node-color" })
-], LibTimelineItem.prototype, "nodeColor", 2);
-__decorateClass([
-  property({ type: String })
-], LibTimelineItem.prototype, "icon", 2);
-__decorateClass([
-  property({ type: String })
-], LibTimelineItem.prototype, "avatar", 2);
+  property({ type: Number })
+], LibParallaxContainer.prototype, "speed", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibTimelineItem.prototype, "status", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "line-variant" })
-], LibTimelineItem.prototype, "lineVariant", 2);
-__decorateClass([
-  property({ type: Number, attribute: "line-progress" })
-], LibTimelineItem.prototype, "lineProgress", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "hide-line" })
-], LibTimelineItem.prototype, "hideLine", 2);
-__decorateClass([
-  property({ type: String })
-], LibTimelineItem.prototype, "timestamp", 2);
-__decorateClass([
-  property({ type: String })
-], LibTimelineItem.prototype, "title", 2);
-__decorateClass([
-  property({ type: String })
-], LibTimelineItem.prototype, "body", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibTimelineItem.prototype, "card", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibTimelineItem.prototype, "collapsible", 2);
+], LibParallaxContainer.prototype, "axis", 2);
 __decorateClass([
-  state()
-], LibTimelineItem.prototype, "_collapsed", 2);
-LibTimelineItem = __decorateClass([
-  customElement("lib-timeline-item")
-], LibTimelineItem);
+  property({ type: Number })
+], LibParallaxContainer.prototype, "clamp", 2);
+LibParallaxContainer = __decorateClass([
+  customElement("lib-parallax-container")
+], LibParallaxContainer);
 export {
-  LibTimelineItem
+  LibParallaxContainer
 };
 //# sourceMappingURL=index77.js.map

package/dist/index77.js.map

@@ -1 +1 @@
-{"version":3,"file":"index77.js","sources":["../src/components/organisms/timeline/lib-timeline-item.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport timelineCss from './lib-timeline.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport { timelineItemTemplate } from './lib-timeline-item.html';\nimport type {\n  TimelineNodeType,\n  TimelineNodeColor,\n  TimelineItemStatus,\n  TimelineLineVariant,\n} from './lib-timeline-item.types';\n\n/**\n * @element lib-timeline-item\n *\n * Ítem de timeline. Debe usarse dentro de `<lib-timeline>`.\n *\n * @prop {TimelineNodeType}    node-type     — Tipo de nodo: dot · icon · avatar (default: 'dot')\n * @prop {TimelineNodeColor}   node-color    — Color del nodo: default · kaki · celadon · error · muted\n * @prop {string}              icon          — Nombre de icono Phosphor (node-type='icon')\n * @prop {string}              avatar        — Iniciales (node-type='avatar')\n * @prop {TimelineItemStatus}  status        — Estado: default · active · done · error · pending\n * @prop {TimelineLineVariant} line-variant  — Estilo de línea: solid · dashed · progress\n * @prop {number}              line-progress — Progreso de la línea 0–100 (line-variant='progress')\n * @prop {boolean}             hide-line     — Oculta la línea (útil en el último ítem)\n * @prop {string}              timestamp     — Texto de fecha/hora\n * @prop {string}              title         — Título del evento\n * @prop {string}              body          — Texto descriptivo (alternativa al slot)\n * @prop {boolean}             card          — Envuelve el contenido en una tarjeta con borde\n * @prop {boolean}             collapsible   — Muestra botón de expandir/contraer\n *\n * @slot         — Contenido libre (body del evento)\n * @slot meta    — Badges, avatares y metadatos en fila\n * @slot media   — Imágenes o bloques adjuntos (solo dentro de card)\n */\n@customElement('lib-timeline-item')\nexport class LibTimelineItem extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(timelineCss)}`,\n  ];\n\n  /* ── Nodo ── */\n\n  @property({ type: String, reflect: true, attribute: 'node-type' })\n  nKind: TimelineNodeType = 'dot';\n\n  @property({ type: String, reflect: true, attribute: 'node-color' })\n  nodeColor: TimelineNodeColor = 'default';\n\n  @property({ type: String })\n  icon = 'circle';\n\n  @property({ type: String })\n  avatar = '';\n\n  /* ── Estado ── */\n\n  @property({ type: String, reflect: true })\n  status: TimelineItemStatus = 'default';\n\n  /* ── Línea ── */\n\n  @property({ type: String, reflect: true, attribute: 'line-variant' })\n  lineVariant: TimelineLineVariant = 'solid';\n\n  @property({ type: Number, attribute: 'line-progress' })\n  lineProgress = 0;\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-line' })\n  hideLine = false;\n\n  /* ── Contenido ── */\n\n  @property({ type: String })\n  timestamp = '';\n\n  @property({ type: String })\n  override title = '';\n\n  @property({ type: String })\n  body = '';\n\n  @property({ type: Boolean, reflect: true })\n  card = false;\n\n  /* ── Collapsible ── */\n\n  @property({ type: Boolean, reflect: true })\n  collapsible = false;\n\n  @state() private _collapsed = false;\n\n  /* ── API pública ── */\n\n  /** Expande el ítem si es collapsible */\n  public expand(): void {\n    this._collapsed = false;\n  }\n\n  /** Contrae el ítem si es collapsible */\n  public collapse(): void {\n    this._collapsed = true;\n  }\n\n  /* ── Render ── */\n\n  protected override render(): TemplateResult {\n    return timelineItemTemplate({\n      nodeType:    this.nKind,\n      nodeColor:   this.nodeColor,\n      icon:        this.icon,\n      avatar:      this.avatar,\n      status:      this.status,\n      lineVariant: this.lineVariant,\n      lineProgress: this.lineProgress,\n      hideLine:    this.hideLine,\n      timestamp:   this.timestamp,\n      title:       this.title,\n      body:        this.body,\n      card:        this.card,\n      collapsed:   this._collapsed,\n      collapsible: this.collapsible,\n      onToggleCollapse: (): void => { this._collapsed = !this._collapsed; },\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-timeline-item': LibTimelineItem;\n  }\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"index77.js","sources":["../src/components/organisms/parallax-container/lib-parallax.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { parallaxTemplate } from './lib-parallax.html';\nimport parallaxCss from './lib-parallax.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { ParallaxAxis } from './lib-parallax.types';\n\n/**\n * lib-parallax-container\n *\n * Aplica desplazamiento parallax a los hijos directos del slot\n * al hacer scroll. El efecto es 0 cuando el elemento está centrado\n * en el viewport, y se desplaza proporcionalmente al alejarse del centro.\n *\n * Cada hijo puede sobrescribir el multiplicador con `data-parallax-factor`.\n * Ejemplo: `<div data-parallax-factor=\"0.3\">fondo lento</div>`\n *          `<div data-parallax-factor=\"2\">elemento rápido</div>`\n *\n * @prop speed  — Multiplicador de desplazamiento base (default 0.2)\n * @prop axis   — Eje del efecto: 'y' | 'x' | 'xy' (default 'y')\n * @prop clamp  — Máximo desplazamiento en px (0 = sin límite, default 0)\n *\n * @cssvar --parallax-speed — Alternativa CSS al prop speed (no reactivo)\n *\n * @slot — Elementos a desplazar. Cada hijo acepta data-parallax-factor.\n */\n@customElement('lib-parallax-container')\nexport class LibParallaxContainer extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(parallaxCss)}`,\n  ];\n\n  /** Multiplicador de desplazamiento base */\n  @property({ type: Number })\n  speed = 0.2;\n\n  /** Eje sobre el que opera el efecto */\n  @property({ type: String, reflect: true })\n  axis: ParallaxAxis = 'y';\n\n  /** Máximo desplazamiento absoluto en px (0 = sin límite) */\n  @property({ type: Number })\n  clamp = 0;\n\n  private _observer: IntersectionObserver | null = null;\n  private _isVisible = false;\n  private _ticking = false;\n  private _reducedMotion = false;\n\n  /* ── Lifecycle ── */\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // matchMedia para prefers-reduced-motion\n    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n    this._reducedMotion = mq.matches;\n    mq.addEventListener('change', (e: MediaQueryListEvent): void => {\n      this._reducedMotion = e.matches;\n      if (this._reducedMotion) this._resetTransforms();\n    });\n\n    window.addEventListener('scroll', this._onScroll, { passive: true });\n    this._setupObserver();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('scroll', this._onScroll);\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  /* ── IntersectionObserver — activa/desactiva will-change ── */\n  private _setupObserver(): void {\n    this._observer = new IntersectionObserver(\n      (entries: IntersectionObserverEntry[]): void => {\n        const entry = entries[0];\n        if (!entry) return;\n        this._isVisible = entry.isIntersecting;\n        // Sincroniza el atributo [visible] → activa/desactiva will-change via CSS\n        if (this._isVisible) {\n          this.setAttribute('visible', '');\n          // Calcular posición inicial al entrar en viewport\n          requestAnimationFrame((): void => this._applyParallax());\n        } else {\n          this.removeAttribute('visible');\n        }\n      },\n      { threshold: 0.01 },\n    );\n    this._observer.observe(this);\n  }\n\n  /* ── Scroll handler con rAF throttle ── */\n  private _onScroll = (): void => {\n    if (!this._isVisible || this._reducedMotion) return;\n    if (this._ticking) return;\n    this._ticking = true;\n    requestAnimationFrame((): void => {\n      this._applyParallax();\n      this._ticking = false;\n    });\n  };\n\n  /**\n   * Cálculo del desplazamiento parallax.\n   *\n   * Fórmula: centerOffset = distancia entre el centro del elemento\n   * y el centro del viewport. Cuando el elemento está centrado en\n   * pantalla → offset = 0, sin desplazamiento.\n   * Cuando el elemento sube por encima → offset negativo → el elemento\n   * se desplaza hacia arriba (más rápido o más lento que el scroll).\n   *\n   * Esto es más correcto que `(scrollY - offsetTop) * speed` porque:\n   * 1. No depende del offsetParent (fiable en Shadow DOM)\n   * 2. El punto neutro es el centro visual, no el top de la página\n   */\n  private _applyParallax(): void {\n    const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement | null;\n    if (!slot) return;\n\n    const rect         = this.getBoundingClientRect();\n    const centerOffset = (rect.top + rect.height / 2) - (window.innerHeight / 2);\n\n    const elements = slot.assignedElements() as HTMLElement[];\n\n    elements.forEach((el): void => {\n      const factor = parseFloat(el.dataset['parallaxFactor'] ?? '1');\n      const move   = centerOffset * this.speed * factor;\n      const clamped = this.clamp > 0\n        ? Math.min(Math.max(move, -this.clamp), this.clamp)\n        : move;\n\n      switch (this.axis) {\n        case 'x':\n          el.style.transform = `translate3d(${clamped}px, 0, 0)`;\n          break;\n        case 'xy':\n          el.style.transform = `translate3d(${clamped}px, ${clamped}px, 0)`;\n          break;\n        case 'y':\n        default:\n          el.style.transform = `translate3d(0, ${clamped}px, 0)`;\n      }\n    });\n  }\n\n  /** Limpia los transforms (p.ej. al activar prefers-reduced-motion en runtime) */\n  private _resetTransforms(): void {\n    const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement | null;\n    const elements = slot?.assignedElements() as HTMLElement[] | undefined;\n    elements?.forEach((el): void => { el.style.transform = ''; });\n  }\n\n  protected override render(): TemplateResult {\n    return parallaxTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-parallax-container': LibParallaxContainer;\n  }\n}"],"names":[],"mappings":"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"}