@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index82.js

@@ -1,7 +1,6 @@
-import { unsafeCSS, css, LitElement } from "lit";
+import { unsafeCSS, css, LitElement, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { renderFooter } from "./index346.js";
-import componentCss from "./index347.js";
+import timelineCss from "./index261.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,141 +12,30 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibFooter = class extends LitElement {
+let LibTimeline = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.variant = "social";
-    this.brandName = "shibui";
-    this.brandKanji = "渋";
-    this.brandSub = "Design System · Zaragoza";
-    this.location = "Zaragoza";
-    this.version = "1.0.0";
-    this.nodeVersion = "v22.0.0";
-    this.githubHref = "#";
-    this.linkedinHref = "#";
-    this.rssHref = "#";
-    this.email = "";
-    this.columns = [
-      {
-        heading: "Librería",
-        links: [
-          { label: "Componentes", href: "#" },
-          { label: "Tokens", href: "#" },
-          { label: "Estilos", href: "#" }
-        ]
-      },
-      {
-        heading: "Ecosistema",
-        links: [
-          { label: "GitHub", href: "#" },
-          { label: "NPM", href: "#" },
-          { label: "Storybook", href: "#" }
-        ]
-      },
-      {
-        heading: "Recursos",
-        links: [
-          { label: "Docs", href: "#" },
-          { label: "Changelog", href: "#" },
-          { label: "Roadmap", href: "#" }
-        ]
-      }
-    ];
-    this.navLinks = [
-      { label: "Componentes", href: "#" },
-      { label: "Tokens", href: "#" },
-      { label: "MIT License", href: "#" }
-    ];
-    this.legalLinks = [
-      { label: "privacy.md", href: "#" },
-      { label: "terms.md", href: "#" }
-    ];
-    this.runtimeLines = [
-      { key: "node", value: "v22.0.0" },
-      { key: "css", value: "pure · no-build" },
-      { key: "fonts", value: "google CDN" },
-      { key: "deps", value: "0" },
-      { key: "size", value: "~180kb total" }
-    ];
+    this.size = "md";
   }
-  /* ── Computed ── */
-  get year() {
-    return (/* @__PURE__ */ new Date()).getFullYear();
-  }
-  /* ── Behaviour ── */
-  /**
-   * Abre / cierra un ítem de acordeón.
-   * @internal
-   */
-  _toggleAccordion(trigger) {
-    const body = trigger.nextElementSibling;
-    const arrow = trigger.querySelector(".ft-acc-arrow");
-    if (!body) return;
-    const isOpen = body.style.maxHeight !== "" && body.style.maxHeight !== "0px";
-    body.style.maxHeight = isOpen ? "0" : "300px";
-    trigger.setAttribute("aria-expanded", String(!isOpen));
-    if (arrow) {
-      arrow.style.transform = isOpen ? "rotate(0deg)" : "rotate(180deg)";
-    }
-  }
-  /* ── Render ── */
   render() {
-    return renderFooter(this);
+    return html`
+      <div class="tl" role="list">
+        <slot></slot>
+      </div>
+    `;
   }
 };
-LibFooter.styles = [
+LibTimeline.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(componentCss)}`
+  css`${unsafeCSS(timelineCss)}`
 ];
 __decorateClass([
-  property({ type: String })
-], LibFooter.prototype, "variant", 2);
-__decorateClass([
-  property({ type: String, attribute: "brand-name" })
-], LibFooter.prototype, "brandName", 2);
-__decorateClass([
-  property({ type: String, attribute: "brand-kanji" })
-], LibFooter.prototype, "brandKanji", 2);
-__decorateClass([
-  property({ type: String, attribute: "brand-sub" })
-], LibFooter.prototype, "brandSub", 2);
-__decorateClass([
-  property({ type: String })
-], LibFooter.prototype, "location", 2);
-__decorateClass([
-  property({ type: String })
-], LibFooter.prototype, "version", 2);
-__decorateClass([
-  property({ type: String, attribute: "node-version" })
-], LibFooter.prototype, "nodeVersion", 2);
-__decorateClass([
-  property({ type: String, attribute: "github-href" })
-], LibFooter.prototype, "githubHref", 2);
-__decorateClass([
-  property({ type: String, attribute: "linkedin-href" })
-], LibFooter.prototype, "linkedinHref", 2);
-__decorateClass([
-  property({ type: String, attribute: "rss-href" })
-], LibFooter.prototype, "rssHref", 2);
-__decorateClass([
-  property({ type: String })
-], LibFooter.prototype, "email", 2);
-__decorateClass([
-  property({ type: Array })
-], LibFooter.prototype, "columns", 2);
-__decorateClass([
-  property({ type: Array, attribute: "nav-links" })
-], LibFooter.prototype, "navLinks", 2);
-__decorateClass([
-  property({ type: Array, attribute: "legal-links" })
-], LibFooter.prototype, "legalLinks", 2);
-__decorateClass([
-  property({ type: Array, attribute: "runtime-lines" })
-], LibFooter.prototype, "runtimeLines", 2);
-LibFooter = __decorateClass([
-  customElement("lib-footer")
-], LibFooter);
+  property({ type: String, reflect: true })
+], LibTimeline.prototype, "size", 2);
+LibTimeline = __decorateClass([
+  customElement("lib-timeline")
+], LibTimeline);
 export {
-  LibFooter
+  LibTimeline
 };
 //# sourceMappingURL=index82.js.map

package/dist/index82.js.map

@@ -1 +1 @@
-{"version":3,"file":"index82.js","sources":["../src/components/organisms/footer/lib-footer.component.ts"],"sourcesContent":["import { LitElement, TemplateResult, css, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport  { FooterColumn, FooterLink, FooterVariant } from './lib-footer.types';\nimport { renderFooter } from './lib-footer.html';\nimport componentCss from './lib-footer.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * `<lib-footer>` — Footer polimórfico con 4 variantes de diseño.\n *\n * @tag lib-footer\n *\n * @attr {string}  variant      - Estilo del footer: 'social' | 'accordion' | 'kintsugi' | 'glitch'\n * @attr {string}  brand-name   - Nombre de marca (ej: \"shibui\")\n * @attr {string}  brand-kanji  - Caracter kanji decorativo (ej: \"渋\")\n * @attr {string}  brand-sub    - Subtítulo bajo el logo (ej: \"Design System · Zaragoza\")\n * @attr {string}  location     - Ciudad / país para el copyright\n * @attr {string}  version      - Versión del producto (ej: \"1.0.0\")\n * @attr {string}  node-version - Versión de Node para la variante glitch (ej: \"v22.0.0\")\n * @attr {string}  github-href  - URL de GitHub\n * @attr {string}  linkedin-href- URL de LinkedIn\n * @attr {string}  rss-href     - URL del feed RSS\n * @attr {string}  email        - Dirección de email de contacto\n *\n * @prop {FooterColumn[]} columns      - Columnas de navegación (accordion / kintsugi)\n * @prop {FooterLink[]}   nav-links    - Links de navegación planos (social / glitch)\n * @prop {FooterLink[]}   legal-links  - Links de pie (privacidad, términos, etc.)\n * @prop {RuntimeLine[]}  runtime-lines- Líneas de la tabla runtime (variante glitch)\n *\n * @fires ui-lib-footer-link-click - Cuando se pulsa un enlace del footer\n *   @detail { label: string; href: string }\n */\n@customElement('lib-footer')\nexport class LibFooter extends LitElement {\n\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(componentCss)}`,\n  ];\n\n  /* ── Props principales ── */\n\n  @property({ type: String })\n  variant: FooterVariant = 'social';\n\n  @property({ type: String, attribute: 'brand-name' })\n  brandName = 'shibui';\n\n  @property({ type: String, attribute: 'brand-kanji' })\n  brandKanji = '渋';\n\n  @property({ type: String, attribute: 'brand-sub' })\n  brandSub = 'Design System · Zaragoza';\n\n  @property({ type: String })\n  location = 'Zaragoza';\n\n  @property({ type: String })\n  version = '1.0.0';\n\n  @property({ type: String, attribute: 'node-version' })\n  nodeVersion = 'v22.0.0';\n\n  @property({ type: String, attribute: 'github-href' })\n  githubHref = '#';\n\n  @property({ type: String, attribute: 'linkedin-href' })\n  linkedinHref = '#';\n\n  @property({ type: String, attribute: 'rss-href' })\n  rssHref = '#';\n\n  @property({ type: String })\n  email = '';\n\n  /* ── Props de datos (pasadas como JSON o JS) ── */\n\n  @property({ type: Array })\n  columns: FooterColumn[] = [\n    {\n      heading: 'Librería',\n      links: [\n        { label: 'Componentes', href: '#' },\n        { label: 'Tokens', href: '#' },\n        { label: 'Estilos', href: '#' },\n      ],\n    },\n    {\n      heading: 'Ecosistema',\n      links: [\n        { label: 'GitHub', href: '#' },\n        { label: 'NPM', href: '#' },\n        { label: 'Storybook', href: '#' },\n      ],\n    },\n    {\n      heading: 'Recursos',\n      links: [\n        { label: 'Docs', href: '#' },\n        { label: 'Changelog', href: '#' },\n        { label: 'Roadmap', href: '#' },\n      ],\n    },\n  ];\n\n  @property({ type: Array, attribute: 'nav-links' })\n  navLinks: FooterLink[] = [\n    { label: 'Componentes', href: '#' },\n    { label: 'Tokens', href: '#' },\n    { label: 'MIT License', href: '#' },\n  ];\n\n  @property({ type: Array, attribute: 'legal-links' })\n  legalLinks: FooterLink[] = [\n    { label: 'privacy.md', href: '#' },\n    { label: 'terms.md', href: '#' },\n  ];\n\n  @property({ type: Array, attribute: 'runtime-lines' })\n  runtimeLines: { key: string; value: string }[] = [\n    { key: 'node',  value: 'v22.0.0' },\n    { key: 'css',   value: 'pure · no-build' },\n    { key: 'fonts', value: 'google CDN' },\n    { key: 'deps',  value: '0' },\n    { key: 'size',  value: '~180kb total' },\n  ];\n\n  /* ── Computed ── */\n\n  get year(): number {\n    return new Date().getFullYear();\n  }\n\n  /* ── Behaviour ── */\n\n  /**\n   * Abre / cierra un ítem de acordeón.\n   * @internal\n   */\n  _toggleAccordion(trigger: HTMLElement): void {\n    const body = trigger.nextElementSibling as HTMLElement | null;\n    const arrow = trigger.querySelector('.ft-acc-arrow') as HTMLElement | null;\n\n    if (!body) return;\n\n    const isOpen = body.style.maxHeight !== '' && body.style.maxHeight !== '0px';\n\n    body.style.maxHeight  = isOpen ? '0' : '300px';\n    trigger.setAttribute('aria-expanded', String(!isOpen));\n\n    if (arrow) {\n      arrow.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(180deg)';\n    }\n  }\n\n  /* ── Render ── */\n\n  protected override render(): TemplateResult {\n    return renderFooter(this);\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index82.js","sources":["../src/components/organisms/timeline/lib-timeline.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport timelineCss from './lib-timeline.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { TimelineSize } from './lib-timeline-item.types';\n\n/**\n * @element lib-timeline\n *\n * Contenedor de timeline. Acepta `<lib-timeline-item>` en su slot.\n *\n * @prop {TimelineSize} size — Tamaño global: sm · md · lg (default: 'md')\n *\n * @slot — Ítems del timeline (lib-timeline-item)\n */\n@customElement('lib-timeline')\nexport class LibTimeline extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(timelineCss)}`,\n  ];\n\n  @property({ type: String, reflect: true })\n  size: TimelineSize = 'md';\n\n  protected override render(): TemplateResult {\n    return html`\n      <div class=\"tl\" role=\"list\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-timeline': LibTimeline;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;AAgBO,IAAM,cAAN,cAA0B,WAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,OAAqB;AAAA,EAAA;AAAA,EAEF,SAAyB;AAC1C,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AAhBa,YACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,WAAW,CAAC;AAC9B;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAN9B,YAOX,WAAA,QAAA,CAAA;AAPW,cAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,WAAA;"}

package/dist/index83.js

@@ -1,8 +1,8 @@
-import { unsafeCSS, css, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import cursorCss from "./index348.js";
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import timelineCss from "./index261.js";
 import sharedTokens from "./index196.js";
-import { CURSOR_MODES } from "./index349.js";
+import { timelineItemTemplate } from "./index262.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,235 +13,106 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibCursorFollower = class extends LitElement {
+let LibTimelineItem = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.mode = "ink";
-    this.lerp = 0;
-    this.trail = false;
-    this._mouse = { x: -200, y: -200 };
-    this._lerped = { x: -200, y: -200 };
-    this._curstate = "hidden";
-    this._lastTrail = { x: 0, y: 0, t: 0 };
-    this._rafId = 0;
-    this._onMove = (e) => {
-      this._mouse.x = e.clientX;
-      this._mouse.y = e.clientY;
-      const dot = this._dot;
-      if (dot) {
-        dot.style.left = `${e.clientX}px`;
-        dot.style.top = `${e.clientY}px`;
-      }
-      const label = this._label;
-      if (label == null ? void 0 : label.classList.contains("is-visible")) {
-        label.style.left = `${e.clientX}px`;
-        label.style.top = `${e.clientY}px`;
-      }
-      if (this.trail) this._maybeSpawnTrail(e.clientX, e.clientY);
-      if (this._curstate === "hidden") this._setState("default");
-    };
-    this._onLeave = () => {
-      this._setState("hidden");
-    };
-    this._onEnter = () => {
-      this._setState("default");
-    };
-    this._onDown = () => {
-      this._setState("press");
-    };
-    this._onUp = () => {
-      const el = document.elementFromPoint(this._mouse.x, this._mouse.y);
-      this._setState(this._detectState(el));
-    };
-    this._onOver = (e) => {
-      if (this._curstate === "press") return;
-      const el = e.target;
-      const state = this._detectState(el);
-      this._setState(state);
-      const isDark = !!(el == null ? void 0 : el.closest('[data-cursor-zone="dark"]'));
-      this.toggleAttribute("dark-zone", isDark);
-      const labelAnchor = el == null ? void 0 : el.closest("[data-cursor-label]");
-      const label = this._label;
-      if (label) {
-        if (labelAnchor == null ? void 0 : labelAnchor.dataset["cursorLabel"]) {
-          label.textContent = labelAnchor.dataset["cursorLabel"];
-          label.classList.add("is-visible");
-          label.style.left = `${this._mouse.x}px`;
-          label.style.top = `${this._mouse.y}px`;
-        } else {
-          label.classList.remove("is-visible");
-        }
-      }
-    };
-    this._loop = () => {
-      const factor = this.lerp > 0 ? this.lerp : CURSOR_MODES[this.mode].lerpFactor;
-      this._lerped.x += (this._mouse.x - this._lerped.x) * factor;
-      this._lerped.y += (this._mouse.y - this._lerped.y) * factor;
-      const ring = this._ring;
-      if (ring) {
-        ring.style.left = `${this._lerped.x}px`;
-        ring.style.top = `${this._lerped.y}px`;
-      }
-      this._rafId = requestAnimationFrame(this._loop);
-    };
-  }
-  /* ── Refs a los elementos del shadow ── */
-  get _dot() {
-    return this.shadowRoot.querySelector(".cur-dot");
-  }
-  get _ring() {
-    return this.shadowRoot.querySelector(".cur-ring");
-  }
-  get _label() {
-    return this.shadowRoot.querySelector(".cur-label");
-  }
-  /* ── Lifecycle ── */
-  connectedCallback() {
-    super.connectedCallback();
-    document.documentElement.style.cursor = "none";
-    window.addEventListener("mousemove", this._onMove, { passive: true });
-    window.addEventListener("mouseleave", this._onLeave, { passive: true });
-    window.addEventListener("mouseenter", this._onEnter, { passive: true });
-    window.addEventListener("mousedown", this._onDown, { passive: true });
-    window.addEventListener("mouseup", this._onUp, { passive: true });
-    window.addEventListener("mouseover", this._onOver, { passive: true });
-    this._rafId = requestAnimationFrame(this._loop);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.documentElement.style.cursor = "";
-    window.removeEventListener("mousemove", this._onMove);
-    window.removeEventListener("mouseleave", this._onLeave);
-    window.removeEventListener("mouseenter", this._onEnter);
-    window.removeEventListener("mousedown", this._onDown);
-    window.removeEventListener("mouseup", this._onUp);
-    window.removeEventListener("mouseover", this._onOver);
-    cancelAnimationFrame(this._rafId);
-  }
-  /** Aplica el modo visual al dot y ring */
-  updated(changed) {
-    if (changed.has("mode")) {
-      this._applyMode();
-    }
+    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;
   }
   /* ── API pública ── */
-  /** Cambia el modo en tiempo de ejecución */
-  setMode(mode) {
-    this.mode = mode;
+  /** Expande el ítem si es collapsible */
+  expand() {
+    this._collapsed = false;
   }
-  /** Activa o desactiva el trail de tinta */
-  toggleTrail() {
-    this.trail = !this.trail;
-    this._lastTrail = { x: this._mouse.x, y: this._mouse.y, t: performance.now() };
+  /** Contrae el ítem si es collapsible */
+  collapse() {
+    this._collapsed = true;
   }
   /* ── Render ── */
   render() {
-    return html`
-      <div class="cur-dot"  part="dot"></div>
-      <div class="cur-ring" part="ring"></div>
-      <div class="cur-label" part="label"></div>
-    `;
-  }
-  /* ── Helpers ── */
-  _detectState(el) {
-    if (!el) return "default";
-    const textZone = el.closest('[data-cursor-zone="text"]');
-    if (textZone && el.matches("p, h1, h2, h3, h4, h5, h6, em, strong, span:not(.cursor-zone-label)")) {
-      return "text";
-    }
-    if (el.matches('a, button, input, select, textarea, [role="button"], [data-interactive], .interactive')) {
-      return "hover";
-    }
-    if (el.closest('a, button, [role="button"]')) {
-      return "hover";
-    }
-    return "default";
-  }
-  _setState(state) {
-    if (this._curstate === state) return;
-    this._curstate = state;
-    this.setAttribute("curstate", state);
-  }
-  /** Aplica los estilos base del modo al dot y ring */
-  _applyMode() {
-    const m = CURSOR_MODES[this.mode];
-    if (!m) return;
-    const dot = this._dot;
-    const ring = this._ring;
-    if (!dot || !ring) return;
-    dot.style.background = m.dotBg;
-    dot.style.width = m.dotSize;
-    dot.style.height = m.dotSize;
-    ring.style.border = m.ringBorder;
-    ring.style.background = m.ringBg;
-    ring.style.width = m.ringSize;
-    ring.style.height = m.ringSize;
-    ring.style.mixBlendMode = m.ringMix;
-  }
-  /** Genera partículas de tinta proporcionales a la velocidad */
-  _maybeSpawnTrail(x, y) {
-    const now = performance.now();
-    const dx = x - this._lastTrail.x;
-    const dy = y - this._lastTrail.y;
-    const dist = Math.sqrt(dx * dx + dy * dy);
-    const dt = Math.max(1, now - this._lastTrail.t);
-    const speed = dist / dt;
-    if (dist > 4) {
-      this._spawnTrailParticle(x, y, speed);
-      this._lastTrail = { x, y, t: now };
-    }
-  }
-  _spawnTrailParticle(x, y, speed) {
-    const size = Math.max(2, Math.min(8, speed * 1.5));
-    const isLight = this.mode === "ghost";
-    const color = isLight ? "rgba(250,247,244,0.4)" : "var(--color-kaki-500)";
-    const el = document.createElement("div");
-    el.style.cssText = `
-      position: fixed;
-      border-radius: 50%;
-      pointer-events: none;
-      z-index: 9997;
-      left: ${x}px;
-      top: ${y}px;
-      width: ${size}px;
-      height: ${size}px;
-      background: ${color};
-      transform: translate(-50%, -50%) scale(1);
-      opacity: 0.4;
-      animation: lib-ink-fade ${600 + speed * 50}ms cubic-bezier(0.2, 0, 0.8, 1) forwards;
-    `;
-    document.body.appendChild(el);
-    setTimeout(() => el.remove(), 900);
+    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;
+      }
+    });
   }
 };
-LibCursorFollower.styles = [
+LibTimelineItem.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(cursorCss)}`
+  css`${unsafeCSS(timelineCss)}`
 ];
+__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);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibCursorFollower.prototype, "mode", 2);
+], 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: Number })
-], LibCursorFollower.prototype, "lerp", 2);
+  property({ type: Boolean, reflect: true })
+], LibTimelineItem.prototype, "collapsible", 2);
 __decorateClass([
-  property({ type: Boolean })
-], LibCursorFollower.prototype, "trail", 2);
-LibCursorFollower = __decorateClass([
-  customElement("lib-cursor-follower")
-], LibCursorFollower);
-if (!document.head.querySelector("#lib-cursor-keyframes")) {
-  const s = document.createElement("style");
-  s.id = "lib-cursor-keyframes";
-  s.textContent = `
-    @keyframes lib-ink-fade {
-      0%   { opacity: 0.4; transform: translate(-50%,-50%) scale(1);   }
-      100% { opacity: 0;   transform: translate(-50%,-50%) scale(0.2); }
-    }
-  `;
-  document.head.appendChild(s);
-}
+  state()
+], LibTimelineItem.prototype, "_collapsed", 2);
+LibTimelineItem = __decorateClass([
+  customElement("lib-timeline-item")
+], LibTimelineItem);
 export {
-  LibCursorFollower
+  LibTimelineItem
 };
 //# sourceMappingURL=index83.js.map

package/dist/index83.js.map

@@ -1 +1 @@
-{"version":3,"file":"index83.js","sources":["../src/components/organisms/cursor-follower/lib-cursor-follower.component.ts"],"sourcesContent":["import { LitElement, html, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport cursorCss from './lib-cursor-follower.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport { CURSOR_MODES } from './lib-cursor-follower.types';\nimport type { CursorMode, CursorState } from './lib-cursor-follower.types';\n\n/**\n * @element lib-cursor-follower\n *\n * Cursor personalizado con tres capas: dot exacto, ring con lerp e inercia,\n * y label contextual. Detecta automáticamente el tipo de elemento bajo el cursor.\n *\n * Coloca el componente una sola vez al inicio del <body>. Se encarga de ocultar\n * el cursor nativo del documento.\n *\n * @prop {CursorMode} mode    — ink · minimal · kaki · ghost (default: 'ink')\n * @prop {number}     lerp    — Factor de interpolación del ring 0–1 (override del modo)\n * @prop {boolean}    trail   — Activa la cola de tinta al mover rápido\n *\n * @method setMode(mode)   — Cambia el modo en tiempo de ejecución\n * @method toggleTrail()   — Activa/desactiva el trail\n *\n * @csspart dot   — El punto exacto\n * @csspart ring  — El anillo con lag\n * @csspart label — La etiqueta contextual\n */\n@customElement('lib-cursor-follower')\nexport class LibCursorFollower extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(cursorCss)}`,\n  ];\n\n  /* ── Props ── */\n\n  @property({ type: String, reflect: true })\n  mode: CursorMode = 'ink';\n\n  @property({ type: Number })\n  lerp = 0;                 // 0 = usar el del modo\n\n  @property({ type: Boolean })\n  trail = false;\n\n  /* ── Estado interno del cursor (no reactivo — actualizado en rAF) ── */\n\n  /** Posición exacta del ratón */\n  private _mouse  = { x: -200, y: -200 };\n  /** Posición interpolada del ring */\n  private _lerped = { x: -200, y: -200 };\n\n  /** Estado contextual actual */\n  private _curstate: CursorState = 'hidden';\n\n  /** Anclajes para el trail */\n  private _lastTrail  = { x: 0, y: 0, t: 0 };\n  private _rafId      = 0;\n\n  /* ── Refs a los elementos del shadow ── */\n\n  private get _dot():   HTMLElement { return this.shadowRoot!.querySelector('.cur-dot')   as HTMLElement; }\n  private get _ring():  HTMLElement { return this.shadowRoot!.querySelector('.cur-ring')  as HTMLElement; }\n  private get _label(): HTMLElement { return this.shadowRoot!.querySelector('.cur-label') as HTMLElement; }\n\n  /* ── Lifecycle ── */\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Ocultar cursor nativo\n    document.documentElement.style.cursor = 'none';\n\n    window.addEventListener('mousemove',  this._onMove,   { passive: true });\n    window.addEventListener('mouseleave', this._onLeave,  { passive: true });\n    window.addEventListener('mouseenter', this._onEnter,  { passive: true });\n    window.addEventListener('mousedown',  this._onDown,   { passive: true });\n    window.addEventListener('mouseup',    this._onUp,     { passive: true });\n    window.addEventListener('mouseover',  this._onOver,   { passive: true });\n\n    this._rafId = requestAnimationFrame(this._loop);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.documentElement.style.cursor = '';\n\n    window.removeEventListener('mousemove',  this._onMove);\n    window.removeEventListener('mouseleave', this._onLeave);\n    window.removeEventListener('mouseenter', this._onEnter);\n    window.removeEventListener('mousedown',  this._onDown);\n    window.removeEventListener('mouseup',    this._onUp);\n    window.removeEventListener('mouseover',  this._onOver);\n\n    cancelAnimationFrame(this._rafId);\n  }\n\n  /** Aplica el modo visual al dot y ring */\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('mode')) {\n      this._applyMode();\n    }\n  }\n\n  /* ── API pública ── */\n\n  /** Cambia el modo en tiempo de ejecución */\n  public setMode(mode: CursorMode): void {\n    this.mode = mode;\n  }\n\n  /** Activa o desactiva el trail de tinta */\n  public toggleTrail(): void {\n    this.trail = !this.trail;\n    this._lastTrail = { x: this._mouse.x, y: this._mouse.y, t: performance.now() };\n  }\n\n  /* ── Render ── */\n\n  protected override render(): TemplateResult {\n    return html`\n      <div class=\"cur-dot\"  part=\"dot\"></div>\n      <div class=\"cur-ring\" part=\"ring\"></div>\n      <div class=\"cur-label\" part=\"label\"></div>\n    `;\n  }\n\n  /* ── Event handlers ── */\n\n  private _onMove = (e: MouseEvent): void => {\n    this._mouse.x = e.clientX;\n    this._mouse.y = e.clientY;\n\n    // Dot sigue instantáneamente\n    const dot = this._dot;\n    if (dot) {\n      dot.style.left = `${e.clientX}px`;\n      dot.style.top  = `${e.clientY}px`;\n    }\n\n    // Label sigue al dot\n    const label = this._label;\n    if (label?.classList.contains('is-visible')) {\n      label.style.left = `${e.clientX}px`;\n      label.style.top  = `${e.clientY}px`;\n    }\n\n    // Trail\n    if (this.trail) this._maybeSpawnTrail(e.clientX, e.clientY);\n\n    // Si estaba oculto, restaurar\n    if (this._curstate === 'hidden') this._setState('default');\n  };\n\n  private _onLeave  = (): void => { this._setState('hidden'); };\n  private _onEnter  = (): void => { this._setState('default'); };\n  private _onDown   = (): void => { this._setState('press'); };\n  private _onUp     = (): void => {\n    // Volver al estado previo al press\n    const el = document.elementFromPoint(this._mouse.x, this._mouse.y);\n    this._setState(this._detectState(el));\n  };\n\n  private _onOver = (e: MouseEvent): void => {\n    if (this._curstate === 'press') return; // no interrumpir press\n\n    const el = e.target as Element | null;\n    const state = this._detectState(el);\n    this._setState(state);\n\n    // Zona oscura — el ring adapta el color\n    const isDark = !!el?.closest('[data-cursor-zone=\"dark\"]');\n    this.toggleAttribute('dark-zone', isDark);\n\n    // Label contextual\n    const labelAnchor = el?.closest('[data-cursor-label]') as HTMLElement | null;\n    const label = this._label;\n    if (label) {\n      if (labelAnchor?.dataset['cursorLabel']) {\n        label.textContent = labelAnchor.dataset['cursorLabel'];\n        label.classList.add('is-visible');\n        label.style.left = `${this._mouse.x}px`;\n        label.style.top  = `${this._mouse.y}px`;\n      } else {\n        label.classList.remove('is-visible');\n      }\n    }\n  };\n\n  /* ── Loop de animación del ring ── */\n\n  private _loop = (): void => {\n    const factor = this.lerp > 0\n      ? this.lerp\n      : CURSOR_MODES[this.mode].lerpFactor;\n\n    this._lerped.x += (this._mouse.x - this._lerped.x) * factor;\n    this._lerped.y += (this._mouse.y - this._lerped.y) * factor;\n\n    const ring = this._ring;\n    if (ring) {\n      ring.style.left = `${this._lerped.x}px`;\n      ring.style.top  = `${this._lerped.y}px`;\n    }\n\n    this._rafId = requestAnimationFrame(this._loop);\n  };\n\n  /* ── Helpers ── */\n\n  private _detectState(el: Element | null): CursorState {\n    if (!el) return 'default';\n\n    // Texto editable / seleccionable\n    const textZone = el.closest('[data-cursor-zone=\"text\"]');\n    if (textZone && el.matches('p, h1, h2, h3, h4, h5, h6, em, strong, span:not(.cursor-zone-label)')) {\n      return 'text';\n    }\n\n    // Elemento interactivo\n    if (el.matches('a, button, input, select, textarea, [role=\"button\"], [data-interactive], .interactive')) {\n      return 'hover';\n    }\n    if (el.closest('a, button, [role=\"button\"]')) {\n      return 'hover';\n    }\n\n    return 'default';\n  }\n\n  private _setState(state: CursorState): void {\n    if (this._curstate === state) return;\n    this._curstate = state;\n    this.setAttribute('curstate', state);\n  }\n\n  /** Aplica los estilos base del modo al dot y ring */\n  private _applyMode(): void {\n    const m = CURSOR_MODES[this.mode];\n    if (!m) return;\n\n    const dot  = this._dot;\n    const ring = this._ring;\n    if (!dot || !ring) return;\n\n    dot.style.background = m.dotBg;\n    dot.style.width      = m.dotSize;\n    dot.style.height     = m.dotSize;\n\n    ring.style.border     = m.ringBorder;\n    ring.style.background = m.ringBg;\n    ring.style.width      = m.ringSize;\n    ring.style.height     = m.ringSize;\n    ring.style.mixBlendMode = m.ringMix;\n  }\n\n  /** Genera partículas de tinta proporcionales a la velocidad */\n  private _maybeSpawnTrail(x: number, y: number): void {\n    const now  = performance.now();\n    const dx   = x - this._lastTrail.x;\n    const dy   = y - this._lastTrail.y;\n    const dist = Math.sqrt(dx * dx + dy * dy);\n    const dt   = Math.max(1, now - this._lastTrail.t);\n    const speed = dist / dt;\n\n    if (dist > 4) {\n      this._spawnTrailParticle(x, y, speed);\n      this._lastTrail = { x, y, t: now };\n    }\n  }\n\n  private _spawnTrailParticle(x: number, y: number, speed: number): void {\n    const size = Math.max(2, Math.min(8, speed * 1.5));\n    const isLight = this.mode === 'ghost';\n    const color = isLight\n      ? 'rgba(250,247,244,0.4)'\n      : 'var(--color-kaki-500)';\n\n    const el = document.createElement('div');\n    el.style.cssText = `\n      position: fixed;\n      border-radius: 50%;\n      pointer-events: none;\n      z-index: 9997;\n      left: ${x}px;\n      top: ${y}px;\n      width: ${size}px;\n      height: ${size}px;\n      background: ${color};\n      transform: translate(-50%, -50%) scale(1);\n      opacity: 0.4;\n      animation: lib-ink-fade ${600 + speed * 50}ms cubic-bezier(0.2, 0, 0.8, 1) forwards;\n    `;\n    document.body.appendChild(el);\n    setTimeout(() => el.remove(), 900);\n  }\n}\n\n/* Keyframe global para las partículas de trail */\nif (!document.head.querySelector('#lib-cursor-keyframes')) {\n  const s = document.createElement('style');\n  s.id = 'lib-cursor-keyframes';\n  s.textContent = `\n    @keyframes lib-ink-fade {\n      0%   { opacity: 0.4; transform: translate(-50%,-50%) scale(1);   }\n      100% { opacity: 0;   transform: translate(-50%,-50%) scale(0.2); }\n    }\n  `;\n  document.head.appendChild(s);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-cursor-follower': LibCursorFollower;\n  }\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"index83.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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"}