@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index259.js

@@ -1,5 +1,12 @@
-const componentCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host([variant="bar"]),:host(:not([variant])){display:block;position:absolute;bottom:-1px;left:0;width:0%;height:2px;pointer-events:none;z-index:var(--z-raised);transition:width 80ms linear;background:var(--rp-color)}:host([variant="bar"]):after,:host(:not([variant])):after{content:"";position:absolute;right:-8px;top:50%;transform:translateY(-50%);width:16px;height:5px;border-radius:var(--radius-full);background:var(--rp-glow);filter:blur(3px);opacity:0;transition:opacity var(--duration-slow)}:host([variant="bar"][active]):after,:host(:not([variant])[active]):after{opacity:1}:host([variant="line"]){display:block;position:absolute;bottom:0;left:0;width:0%;height:1px;pointer-events:none;z-index:var(--z-raised);transition:width 80ms linear;background:var(--rp-color);opacity:.6}:host([variant="dots"]){display:inline-flex;align-items:center;gap:5px}.rp-dot{width:5px;height:5px;border-radius:var(--radius-full);background:var(--border-default);transition:background var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out),opacity var(--duration-slow);flex-shrink:0}.rp-dot.is-done{background:var(--rp-color);transform:scale(1.2)}.rp-dot.is-current{background:var(--rp-color-light);transform:scale(1.4);box-shadow:0 0 0 2px var(--rp-glow)}:host([variant="ring"]){display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.rp-ring-svg{display:block;transform:rotate(-90deg);overflow:visible}.rp-ring-track{fill:none;stroke:var(--border-subtle);stroke-width:2}.rp-ring-fill{fill:none;stroke:var(--rp-color);stroke-width:2;stroke-linecap:round;transition:stroke-dashoffset 80ms linear}:host([variant="vertical"]){display:block;position:fixed;left:0;top:0;width:2px;height:0%;background:linear-gradient(to bottom,var(--rp-color),var(--rp-color-light));z-index:var(--z-modal);pointer-events:none;transition:height 80ms linear}:host([variant="vertical"]):after{content:"";position:absolute;bottom:-6px;left:-3px;width:8px;height:8px;border-radius:var(--radius-full);background:var(--rp-color-light);box-shadow:0 0 6px var(--rp-glow)}:host,:host([tone="kaki"]){--rp-color: var(--color-kaki-500);--rp-color-light: var(--color-kaki-400);--rp-glow: rgb(217, 114, 52, .25)}:host([tone="celadon"]){--rp-color: var(--color-celadon-500);--rp-color-light: var(--color-celadon-400);--rp-glow: rgb(53, 113, 100, .25)}:host([tone="ink"]){--rp-color: var(--color-washi-800);--rp-color-light: var(--color-washi-700);--rp-glow: rgb(61, 51, 42, .2)}:host([tone="kintsugi"]){--rp-color: var(--color-kaki-500);--rp-color-light: var(--color-kaki-300);--rp-glow: oklch(65% .1 50deg / .55)}:host([tone="kintsugi"][variant="bar"]),:host([tone="kintsugi"]:not([variant])){background:linear-gradient(90deg,var(--color-kaki-600) 0%,var(--color-kaki-500) 30%,var(--color-kaki-300) 65%,var(--color-kaki-400) 100%);height:3px}:host([tone="kintsugi"][variant="bar"]):before,:host([tone="kintsugi"]:not([variant])):before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 0%,oklch(92% .04 60deg / .75) 45%,oklch(98% .01 60deg / .9) 50%,oklch(92% .04 60deg / .75) 55%,transparent 100%);animation:rp-kintsugi-shimmer 3s cubic-bezier(.4,0,.6,1) infinite;pointer-events:none}:host([tone="kintsugi"][variant="bar"][active]):after,:host([tone="kintsugi"]:not([variant])[active]):after{width:24px;height:8px;background:#c07c56a6;filter:blur(5px)}:host([tone="kintsugi"][variant="line"]){background:linear-gradient(90deg,var(--color-kaki-600) 0%,var(--color-kaki-300) 60%,var(--color-kaki-500) 100%);opacity:.85;height:1.5px}:host([tone="kintsugi"][variant="vertical"]){background:linear-gradient(to bottom,var(--color-kaki-600) 0%,var(--color-kaki-400) 45%,var(--color-kaki-300) 75%,var(--color-kaki-500) 100%);width:3px}:host([tone="kintsugi"][variant="vertical"]):after{width:10px;height:10px;background:var(--color-kaki-300);box-shadow:0 0 8px #c07c56b3,0 0 16px #c07c5659}@keyframes rp-kintsugi-shimmer{0%{transform:translate(-120%);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translate(120%);opacity:0}}}';
+import { html } from "lit";
+function stepperTemplate(props) {
+  return html`
+    <div class="stepper-track" role="list" aria-label="Pasos del proceso">
+      <slot @slotchange=${props.handleSlotChange}></slot>
+    </div>
+  `;
+}
 export {
-  componentCss as default
+  stepperTemplate
 };
 //# sourceMappingURL=index259.js.map

package/dist/index259.js.map

@@ -1 +1 @@
-{"version":3,"file":"index259.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index259.js","sources":["../src/components/organisms/stepper/lib-stepper.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport type LibStepperOrientation = 'horizontal' | 'vertical';\nexport type LibStepperVariant     = 'default' | 'minimal' | 'kintsugi';\nexport type LibStepperSize        = 'sm' | 'md' | 'lg';\n\nexport interface StepperTemplateProps {\n  orientation: LibStepperOrientation;\n  handleSlotChange: (e: Event) => void;\n}\n\n/**\n * El stepper es únicamente el contenedor flex + slot.\n * Toda la lógica de estados y el dibujado visual vive en lib-step.\n * @layer components gestiona flex-direction vía :host([orientation=\"vertical\"]).\n */\nexport function stepperTemplate(props: StepperTemplateProps): TemplateResult {\n  return html`\n    <div class=\"stepper-track\" role=\"list\" aria-label=\"Pasos del proceso\">\n      <slot @slotchange=${props.handleSlotChange}></slot>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAgBO,SAAS,gBAAgB,OAA6C;AAC3E,SAAO;AAAA;AAAA,0BAEiB,MAAM,gBAAgB;AAAA;AAAA;AAGhD;"}

package/dist/index26.js

@@ -1,7 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, query, customElement } from "lit/decorators.js";
-import { counterTemplate } from "./index237.js";
-import counterCss from "./index238.js";
+import { property, state, customElement } from "lit/decorators.js";
+import { kbdTemplate } from "./index309.js";
+import kbdCss from "./index310.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,259 +13,54 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibCounter = class extends LitElement {
+let LibKbd = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.value = 0;
-    this.prefix = "";
-    this.suffix = "";
-    this.thousands = ".";
-    this.decimals = null;
     this.size = "md";
-    this.tone = "default";
-    this.label = "";
-    this.delta = "";
-    this.deltaDir = "up";
-    this.playOnVisible = false;
-    this._builtDigitCount = -1;
-    this._builtThousands = "";
-    this._hasAnimated = false;
-    this._firstUpdate = true;
-  }
-  /* ── Lifecycle ──────────────────────────────────────────── */
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.playOnVisible) {
-      this._observer = new IntersectionObserver(
-        (entries) => {
-          var _a, _b;
-          if (((_a = entries[0]) == null ? void 0 : _a.isIntersecting) && !this._hasAnimated) {
-            this._hasAnimated = true;
-            this._animateTo(
-              this.value,
-              /* fromZero */
-              true
-            );
-            (_b = this._observer) == null ? void 0 : _b.disconnect();
-          }
-        },
-        { threshold: 0.2 }
-      );
-    }
-  }
-  disconnectedCallback() {
-    var _a;
-    super.disconnectedCallback();
-    (_a = this._observer) == null ? void 0 : _a.disconnect();
+    this.variant = "default";
+    this.pressed = false;
+    this._pointerPressed = false;
   }
   render() {
-    return counterTemplate({
+    return kbdTemplate({
       size: this.size,
-      tone: this.tone,
-      label: this.label,
-      delta: this.delta,
-      deltaDir: this.deltaDir
-    });
-  }
-  updated(changed) {
-    var _a;
-    super.updated(changed);
-    const structureChanged = changed.has("value") || changed.has("prefix") || changed.has("suffix") || changed.has("thousands") || changed.has("decimals");
-    if (!structureChanged && !this._firstUpdate) return;
-    const needRebuild = this._needsRebuild();
-    if (needRebuild) {
-      this._buildRow();
-    }
-    if (this._firstUpdate) {
-      this._firstUpdate = false;
-      if (this.playOnVisible) {
-        this._setRowInstant(0);
-        (_a = this._observer) == null ? void 0 : _a.observe(this);
-      } else {
-        this._setRowInstant(this.value);
-      }
-      return;
-    }
-    if (changed.has("value")) {
-      this._animateTo(
-        this.value,
-        /* fromZero */
-        false
-      );
-    }
-  }
-  /* ── Motor de digit-flip ────────────────────────────────── */
-  _needsRebuild() {
-    const digitCount = Math.abs(Math.floor(this.value)).toString().length;
-    if (digitCount !== this._builtDigitCount) return true;
-    if (this.thousands !== this._builtThousands) return true;
-    return false;
-  }
-  _buildRow() {
-    const row = this._rowEl;
-    if (!row) return;
-    row.innerHTML = "";
-    const absVal = Math.abs(Math.floor(this.value));
-    const str = absVal.toString();
-    this._builtDigitCount = str.length;
-    this._builtThousands = this.thousands;
-    if (this.prefix) {
-      const p = document.createElement("span");
-      p.className = "cnt-prefix";
-      p.textContent = this.prefix;
-      row.appendChild(p);
-    }
-    const chars = this._buildCharArray(str, this.thousands);
-    chars.forEach((c) => {
-      if (c.type === "sep") {
-        const sep = document.createElement("span");
-        sep.className = "cnt-sep";
-        sep.textContent = c.char;
-        row.appendChild(sep);
-      } else {
-        row.appendChild(this._makeDigitSlot(parseInt(c.char, 10)));
-      }
-    });
-    if (this.decimals !== null) {
-      const dot = document.createElement("span");
-      dot.className = "cnt-sep";
-      dot.textContent = ",";
-      row.appendChild(dot);
-      const decStr = this.decimals.toString().padStart(2, "0");
-      for (const ch of decStr) {
-        row.appendChild(this._makeDigitSlot(parseInt(ch, 10)));
-      }
-    }
-    if (this.suffix) {
-      const s = document.createElement("span");
-      s.className = "cnt-suffix";
-      s.textContent = this.suffix;
-      row.appendChild(s);
-    }
-  }
-  _buildCharArray(str, thousands) {
-    const result = [];
-    for (let i = 0; i < str.length; i++) {
-      const posFromRight = str.length - 1 - i;
-      if (i > 0 && posFromRight % 3 === 2 && thousands) {
-        result.push({ type: "sep", char: thousands });
-      }
-      result.push({ type: "digit", char: str[i] ?? "0" });
-    }
-    return result;
-  }
-  _makeDigitSlot(digit) {
-    const slot = document.createElement("span");
-    slot.className = "cnt-digit";
-    const inner = document.createElement("span");
-    inner.className = "cnt-digit-inner";
-    for (let i = 0; i <= 9; i++) {
-      const span = document.createElement("span");
-      span.textContent = String(i);
-      inner.appendChild(span);
-    }
-    inner.style.transition = "none";
-    inner.style.transform = `translateY(-${digit}em)`;
-    slot.appendChild(inner);
-    return slot;
-  }
-  _setRowInstant(value) {
-    var _a;
-    const slots = (_a = this._rowEl) == null ? void 0 : _a.querySelectorAll(".cnt-digit");
-    if (!slots) return;
-    const digits = this._extractTargetDigits(value);
-    slots.forEach((slot, i) => {
-      const inner = slot.querySelector(".cnt-digit-inner");
-      if (!inner) return;
-      inner.style.transition = "none";
-      inner.style.transform = `translateY(-${digits[i] ?? 0}em)`;
+      variant: this.variant,
+      pressed: this.pressed || this._pointerPressed,
+      onDown: this._onPointerDown.bind(this),
+      onUp: this._onPointerUp.bind(this),
+      onLeave: this._onPointerLeave.bind(this)
     });
   }
-  _animateTo(value, fromZero) {
-    var _a;
-    const slots = (_a = this._rowEl) == null ? void 0 : _a.querySelectorAll(".cnt-digit");
-    if (!slots || !slots.length) return;
-    const targetDigits = this._extractTargetDigits(value);
-    const total = slots.length;
-    slots.forEach((slot, i) => {
-      const inner = slot.querySelector(".cnt-digit-inner");
-      if (!inner) return;
-      const target = targetDigits[i] ?? 0;
-      const fromRight = total - 1 - i;
-      const delay = fromRight * 40;
-      if (fromZero) {
-        inner.style.transition = "none";
-        inner.style.transform = "translateY(0)";
-      }
-      void inner.offsetHeight;
-      inner.style.transition = `transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) ${delay}ms`;
-      inner.style.transform = `translateY(-${target}em)`;
-    });
-  }
-  _extractTargetDigits(value) {
-    const absVal = Math.abs(Math.floor(value));
-    let str = absVal.toString();
-    if (this.decimals !== null) {
-      const decStr = this.decimals.toString().padStart(2, "0");
-      str = str + decStr;
-    }
-    return str.split("").map((c) => parseInt(c, 10));
+  _onPointerDown() {
+    this._pointerPressed = true;
   }
-  /* ── Public API ─────────────────────────────────────────── */
-  /** Anima el contador a un nuevo valor manualmente. */
-  animateTo(value) {
-    this.value = value;
+  _onPointerUp() {
+    this._pointerPressed = false;
   }
-  /** Reinicia la animación desde cero al valor actual. */
-  replay() {
-    this._hasAnimated = false;
-    this._animateTo(this.value, true);
+  _onPointerLeave() {
+    this._pointerPressed = false;
   }
 };
-LibCounter.styles = [
+LibKbd.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(counterCss)}`
+  css`${unsafeCSS(kbdCss)}`
 ];
-__decorateClass([
-  property({ type: Number, reflect: true })
-], LibCounter.prototype, "value", 2);
-__decorateClass([
-  property({ type: String, attribute: "prefix", reflect: true })
-], LibCounter.prototype, "prefix", 2);
-__decorateClass([
-  property({ type: String, attribute: "suffix", reflect: true })
-], LibCounter.prototype, "suffix", 2);
-__decorateClass([
-  property({ type: String, attribute: "thousands", reflect: true })
-], LibCounter.prototype, "thousands", 2);
-__decorateClass([
-  property({ type: Number, attribute: "decimals", reflect: true })
-], LibCounter.prototype, "decimals", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibCounter.prototype, "size", 2);
+], LibKbd.prototype, "size", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibCounter.prototype, "tone", 2);
-__decorateClass([
-  property({ type: String })
-], LibCounter.prototype, "label", 2);
-__decorateClass([
-  property({ type: String })
-], LibCounter.prototype, "delta", 2);
-__decorateClass([
-  property({ type: String, attribute: "delta-dir", reflect: true })
-], LibCounter.prototype, "deltaDir", 2);
+], LibKbd.prototype, "variant", 2);
 __decorateClass([
-  property({ type: Boolean, attribute: "play-on-visible", reflect: true })
-], LibCounter.prototype, "playOnVisible", 2);
+  property({ type: Boolean, reflect: true })
+], LibKbd.prototype, "pressed", 2);
 __decorateClass([
-  query(".cnt-row")
-], LibCounter.prototype, "_rowEl", 2);
-LibCounter = __decorateClass([
-  customElement("lib-counter")
-], LibCounter);
+  state()
+], LibKbd.prototype, "_pointerPressed", 2);
+LibKbd = __decorateClass([
+  customElement("lib-kbd")
+], LibKbd);
 export {
-  LibCounter
+  LibKbd
 };
 //# sourceMappingURL=index26.js.map

package/dist/index26.js.map

@@ -1 +1 @@
-{"version":3,"file":"index26.js","sources":["../src/components/atoms/lib-counter/lib-counter.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { counterTemplate } from './lib-counter.html';\nimport type { LibCounterSize, LibCounterTone, LibCounterDeltaDir } from './lib-counter.html';\nimport counterCss from './lib-counter.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport type { LibCounterSize, LibCounterTone, LibCounterDeltaDir };\n\n/**\n * @element lib-counter\n *\n * Contador animado con digit-flip: cada dígito es una columna\n * de 0 a 9 que se desplaza con translateY. Los dígitos de mayor\n * peso animan antes que los de menor — efecto odómetro.\n *\n * @example — básico\n * <lib-counter value=\"24819\" label=\"Usuarios activos\" play-on-visible></lib-counter>\n *\n * @example — moneda con delta\n * <lib-counter value=\"18540\" prefix=\"€\" size=\"lg\" tone=\"kaki\"\n *   label=\"Ingresos\" delta=\"+14,7%\" delta-dir=\"up\" play-on-visible>\n * </lib-counter>\n *\n * @example — porcentaje sin separador de miles\n * <lib-counter value=\"87\" suffix=\"%\" thousands=\"\" size=\"md\" play-on-visible></lib-counter>\n *\n * @example — con decimales\n * <lib-counter value=\"4\" decimals=\"73\" play-on-visible></lib-counter>\n * → renderiza  4,73\n */\n@customElement('lib-counter')\nexport class LibCounter extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(counterCss)}`,\n  ];\n\n  /* ── Props visuales ─────────────────────────────────────── */\n\n  /** Valor numérico a mostrar. */\n  @property({ type: Number, reflect: true })\n  value = 0;\n\n  /** Carácter prefijo (€, $, …). */\n  @property({ type: String, attribute: 'prefix', reflect: true })\n  override prefix = '';\n\n  /** Carácter sufijo (%, k, …). */\n  @property({ type: String, attribute: 'suffix', reflect: true })\n  suffix = '';\n\n  /** Separador de miles. Default: punto. Vacío = sin separador. */\n  @property({ type: String, attribute: 'thousands', reflect: true })\n  thousands = '.';\n\n  /**\n   * Dígitos decimales a mostrar después de coma.\n   * Ejemplo: decimals=\"73\" → \",73\"\n   */\n  @property({ type: Number, attribute: 'decimals', reflect: true })\n  decimals: number | null = null;\n\n  /** Tamaño del contador. */\n  @property({ type: String, reflect: true })\n  size: LibCounterSize = 'md';\n\n  /** Tono de color. */\n  @property({ type: String, reflect: true })\n  tone: LibCounterTone = 'default';\n\n  /** Etiqueta inferior en font-mono uppercase. */\n  @property({ type: String })\n  label = '';\n\n  /** Texto del indicador de variación (e.g. \"+14,7%\"). */\n  @property({ type: String })\n  delta = '';\n\n  /** Dirección del delta — controla color e icono. */\n  @property({ type: String, attribute: 'delta-dir', reflect: true })\n  deltaDir: LibCounterDeltaDir = 'up';\n\n  /**\n   * Si está presente, el contador arranca desde 0 y anima\n   * hasta `value` cuando entra en el viewport (IntersectionObserver).\n   * Nombre: play-on-visible (evita colisión con HTMLElement.animate).\n   */\n  @property({ type: Boolean, attribute: 'play-on-visible', reflect: true })\n  playOnVisible = false;\n\n  /* ── Internos ───────────────────────────────────────────── */\n\n  // FIX: declare evita el error de overload en decoradores strict\n  @query('.cnt-row')\n  declare private _rowEl: HTMLElement;\n\n  private _builtDigitCount = -1;\n  private _builtThousands  = '';\n\n  private _observer: IntersectionObserver | undefined;\n  private _hasAnimated = false;\n  private _firstUpdate = true;\n\n  /* ── Lifecycle ──────────────────────────────────────────── */\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.playOnVisible) {\n      this._observer = new IntersectionObserver(\n        (entries) => {\n          if (entries[0]?.isIntersecting && !this._hasAnimated) {\n            this._hasAnimated = true;\n            this._animateTo(this.value, /* fromZero */ true);\n            this._observer?.disconnect();\n          }\n        },\n        { threshold: 0.2 }\n      );\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n  }\n\n  override render(): TemplateResult {\n    return counterTemplate({\n      size:     this.size,\n      tone:     this.tone,\n      label:    this.label,\n      delta:    this.delta,\n      deltaDir: this.deltaDir,\n    });\n  }\n\n  override updated(changed: PropertyValues): void {\n    super.updated(changed);\n\n    const structureChanged =\n      changed.has('value')     ||\n      changed.has('prefix')    ||\n      changed.has('suffix')    ||\n      changed.has('thousands') ||\n      changed.has('decimals');\n\n    if (!structureChanged && !this._firstUpdate) return;\n\n    const needRebuild = this._needsRebuild();\n    if (needRebuild) {\n      this._buildRow();\n    }\n\n    if (this._firstUpdate) {\n      this._firstUpdate = false;\n\n      if (this.playOnVisible) {\n        // Construir en 0 y esperar viewport\n        this._setRowInstant(0);\n        // FIX: cast a Element para satisfacer IntersectionObserver.observe()\n        this._observer?.observe(this as unknown as Element);\n      } else {\n        this._setRowInstant(this.value);\n      }\n      return;\n    }\n\n    if (changed.has('value')) {\n      this._animateTo(this.value, /* fromZero */ false);\n    }\n  }\n\n  /* ── Motor de digit-flip ────────────────────────────────── */\n\n  private _needsRebuild(): boolean {\n    const digitCount = Math.abs(Math.floor(this.value)).toString().length;\n    if (digitCount !== this._builtDigitCount) return true;\n    if (this.thousands !== this._builtThousands) return true;\n    return false;\n  }\n\n  private _buildRow(): void {\n    const row = this._rowEl;\n    if (!row) return;\n    row.innerHTML = '';\n\n    const absVal = Math.abs(Math.floor(this.value));\n    const str    = absVal.toString();\n    this._builtDigitCount = str.length;\n    this._builtThousands  = this.thousands;\n\n    if (this.prefix) {\n      const p = document.createElement('span');\n      p.className   = 'cnt-prefix';\n      p.textContent = this.prefix;\n      row.appendChild(p);\n    }\n\n    const chars = this._buildCharArray(str, this.thousands);\n    chars.forEach((c) => {\n      if (c.type === 'sep') {\n        const sep = document.createElement('span');\n        sep.className   = 'cnt-sep';\n        sep.textContent = c.char;\n        row.appendChild(sep);\n      } else {\n        row.appendChild(this._makeDigitSlot(parseInt(c.char, 10)));\n      }\n    });\n\n    if (this.decimals !== null) {\n      const dot = document.createElement('span');\n      dot.className   = 'cnt-sep';\n      dot.textContent = ',';\n      row.appendChild(dot);\n\n      const decStr = this.decimals.toString().padStart(2, '0');\n      for (const ch of decStr) {\n        row.appendChild(this._makeDigitSlot(parseInt(ch, 10)));\n      }\n    }\n\n    if (this.suffix) {\n      const s = document.createElement('span');\n      s.className   = 'cnt-suffix';\n      s.textContent = this.suffix;\n      row.appendChild(s);\n    }\n  }\n\n  private _buildCharArray(\n    str: string,\n    thousands: string\n  ): Array<{ type: 'digit' | 'sep'; char: string }> {\n    const result: Array<{ type: 'digit' | 'sep'; char: string }> = [];\n    for (let i = 0; i < str.length; i++) {\n      const posFromRight = str.length - 1 - i;\n      if (i > 0 && posFromRight % 3 === 2 && thousands) {\n        result.push({ type: 'sep', char: thousands });\n      }\n      // FIX: str[i] es string | undefined en TS estricto — asegurar con ?? '0'\n      result.push({ type: 'digit', char: str[i] ?? '0' });\n    }\n    return result;\n  }\n\n  private _makeDigitSlot(digit: number): HTMLElement {\n    const slot = document.createElement('span');\n    slot.className = 'cnt-digit';\n\n    const inner = document.createElement('span');\n    inner.className = 'cnt-digit-inner';\n\n    for (let i = 0; i <= 9; i++) {\n      const span = document.createElement('span');\n      span.textContent = String(i);\n      inner.appendChild(span);\n    }\n\n    inner.style.transition = 'none';\n    inner.style.transform  = `translateY(-${digit}em)`;\n    slot.appendChild(inner);\n    return slot;\n  }\n\n  private _setRowInstant(value: number): void {\n    const slots = this._rowEl?.querySelectorAll<HTMLElement>('.cnt-digit');\n    if (!slots) return;\n    const digits = this._extractTargetDigits(value);\n    slots.forEach((slot, i) => {\n      const inner = slot.querySelector<HTMLElement>('.cnt-digit-inner');\n      if (!inner) return;\n      inner.style.transition = 'none';\n      inner.style.transform  = `translateY(-${digits[i] ?? 0}em)`;\n    });\n  }\n\n  private _animateTo(value: number, fromZero: boolean): void {\n    const slots = this._rowEl?.querySelectorAll<HTMLElement>('.cnt-digit');\n    if (!slots || !slots.length) return;\n\n    const targetDigits = this._extractTargetDigits(value);\n    const total        = slots.length;\n\n    slots.forEach((slot, i) => {\n      const inner = slot.querySelector<HTMLElement>('.cnt-digit-inner');\n      if (!inner) return;\n\n      const target    = targetDigits[i] ?? 0;\n      const fromRight = total - 1 - i;\n      const delay     = fromRight * 40;\n\n      if (fromZero) {\n        inner.style.transition = 'none';\n        inner.style.transform  = 'translateY(0)';\n      }\n\n      void inner.offsetHeight; // forzar reflow\n\n      inner.style.transition = `transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) ${delay}ms`;\n      inner.style.transform  = `translateY(-${target}em)`;\n    });\n  }\n\n  private _extractTargetDigits(value: number): number[] {\n    const absVal = Math.abs(Math.floor(value));\n    let   str    = absVal.toString();\n\n    if (this.decimals !== null) {\n      const decStr = this.decimals.toString().padStart(2, '0');\n      str = str + decStr;\n    }\n\n    return str.split('').map((c) => parseInt(c, 10));\n  }\n\n  /* ── Public API ─────────────────────────────────────────── */\n\n  /** Anima el contador a un nuevo valor manualmente. */\n  public animateTo(value: number): void {\n    this.value = value;\n  }\n\n  /** Reinicia la animación desde cero al valor actual. */\n  public replay(): void {\n    this._hasAnimated = false;\n    this._animateTo(this.value, true);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-counter': LibCounter;\n  }\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"index26.js","sources":["../src/components/atoms/kbd/lib-kbd.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { kbdTemplate } from './lib-kbd.html';\nimport kbdCss from './lib-kbd.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport type LibKbdSize    = 'xs' | 'sm' | 'md' | 'lg';\nexport type LibKbdVariant = 'default' | 'dark' | 'ghost' | 'kaki' | 'celadon';\n\n/**\n * @element lib-kbd\n *\n * Representa una tecla de teclado física.\n * El `border-bottom` de 3px simula la pared lateral de la tecla.\n * El estado `pressed` produce un desplazamiento físico de 1-2px.\n *\n * @slot (default) — el símbolo o texto de la tecla (⌘, K, Ctrl…)\n *\n * @example — tecla individual\n * <lib-kbd>⌘</lib-kbd>\n *\n * @example — combo (el consumer compone las teclas)\n * <lib-kbd size=\"sm\">⌘</lib-kbd>\n * <span>+</span>\n * <lib-kbd size=\"sm\">K</lib-kbd>\n *\n * @example — pressed programático\n * <lib-kbd pressed>Space</lib-kbd>\n */\n@customElement('lib-kbd')\nexport class LibKbd extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(kbdCss)}`,\n  ];\n\n  /** Tamaño de la tecla. */\n  @property({ type: String, reflect: true })\n  size: LibKbdSize = 'md';\n\n  /** Variante visual de color. */\n  @property({ type: String, reflect: true })\n  variant: LibKbdVariant = 'default';\n\n  /**\n   * Estado pressed programático.\n   * El componente también gestiona pressed internamente\n   * via mousedown/mouseup para la interacción del usuario.\n   */\n  @property({ type: Boolean, reflect: true })\n  pressed = false;\n\n  /** Estado interno de pulsación por ratón (no expuesto como atributo). */\n  @state()\n  private _pointerPressed = false;\n\n  override render(): TemplateResult {\n    return kbdTemplate({\n      size:    this.size,\n      variant: this.variant,\n      pressed: this.pressed || this._pointerPressed,\n      onDown:  this._onPointerDown.bind(this),\n      onUp:    this._onPointerUp.bind(this),\n      onLeave: this._onPointerLeave.bind(this),\n    });\n  }\n\n  private _onPointerDown(): void {\n    this._pointerPressed = true;\n  }\n\n  private _onPointerUp(): void {\n    this._pointerPressed = false;\n  }\n\n  private _onPointerLeave(): void {\n    this._pointerPressed = false;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-kbd': LibKbd;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA8BO,IAAM,SAAN,cAAqB,WAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,OAAmB;AAInB,SAAA,UAAyB;AAQzB,SAAA,UAAU;AAIV,SAAQ,kBAAkB;AAAA,EAAA;AAAA,EAEjB,SAAyB;AAChC,WAAO,YAAY;AAAA,MACjB,MAAS,KAAK;AAAA,MACd,SAAS,KAAK;AAAA,MACd,SAAS,KAAK,WAAW,KAAK;AAAA,MAC9B,QAAS,KAAK,eAAe,KAAK,IAAI;AAAA,MACtC,MAAS,KAAK,aAAa,KAAK,IAAI;AAAA,MACpC,SAAS,KAAK,gBAAgB,KAAK,IAAI;AAAA,IAAA,CACxC;AAAA,EACH;AAAA,EAEQ,iBAAuB;AAC7B,SAAK,kBAAkB;AAAA,EACzB;AAAA,EAEQ,eAAqB;AAC3B,SAAK,kBAAkB;AAAA,EACzB;AAAA,EAEQ,kBAAwB;AAC9B,SAAK,kBAAkB;AAAA,EACzB;AACF;AAhDa,OACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,MAAM,CAAC;AACzB;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAP9B,OAQX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAX9B,OAYX,WAAA,WAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAnB/B,OAoBX,WAAA,WAAA,CAAA;AAIQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAvBI,OAwBH,WAAA,mBAAA,CAAA;AAxBG,SAAN,gBAAA;AAAA,EADN,cAAc,SAAS;AAAA,GACX,MAAA;"}

package/dist/index260.js

@@ -1,35 +1,5 @@
-import { svg, nothing, html } from "lit";
-const spinnerSvg = svg`
-  <svg class="spinner" viewBox="0 0 16 16" fill="none"
-    stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
-    <path d="M8 2a6 6 0 1 0 6 6" opacity="0.3"/>
-    <path d="M14 8a6 6 0 0 0-6-6"/>
-  </svg>`;
-function buttonLiquidTemplate(ctx) {
-  const { loading, disabled } = ctx;
-  return html`
-    <button
-      class="btn"
-      part="button"
-      ?disabled="${disabled || loading}"
-      aria-disabled="${disabled || loading}"
-      aria-busy="${loading ? "true" : nothing}"
-      @mouseenter="${(e) => ctx._onMouseEnter(e)}"
-      @mouseleave="${() => ctx._onMouseLeave()}"
-      @mousedown="${(e) => ctx._onMouseDown(e)}"
-    >
-      <!-- Canvas inyectado por el componente en firstUpdated -->
-
-      <span class="btn-inner" part="inner">
-        ${loading ? spinnerSvg : nothing}
-        <slot name="prefix"></slot>
-        <slot></slot>
-        <slot name="suffix"></slot>
-      </span>
-    </button>
-  `;
-}
+const stepperCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.stepper-track{display:flex;flex-direction:row;align-items:flex-start;width:100%;position:relative}:host([orientation="vertical"]) .stepper-track{flex-direction:column}}';
 export {
-  buttonLiquidTemplate
+  stepperCss as default
 };
 //# sourceMappingURL=index260.js.map

package/dist/index260.js.map

@@ -1 +1 @@
-{"version":3,"file":"index260.js","sources":["../src/components/atoms/liquid-button/lib-liquid-button.html.ts"],"sourcesContent":["import { html, svg, nothing, TemplateResult } from 'lit';\nimport type { LibButtonLiquid } from './lib-liquid-button.component';\n\n/* ── Spinner SVG ── */\nconst spinnerSvg: TemplateResult = svg`\n  <svg class=\"spinner\" viewBox=\"0 0 16 16\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n    <path d=\"M8 2a6 6 0 1 0 6 6\" opacity=\"0.3\"/>\n    <path d=\"M14 8a6 6 0 0 0-6-6\"/>\n  </svg>`;\n\n/* ── Main template ── */\nexport function buttonLiquidTemplate(ctx: LibButtonLiquid): TemplateResult {\n  const { loading, disabled } = ctx;\n\n  return html`\n    <button\n      class=\"btn\"\n      part=\"button\"\n      ?disabled=\"${disabled || loading}\"\n      aria-disabled=\"${disabled || loading}\"\n      aria-busy=\"${loading ? 'true' : nothing}\"\n      @mouseenter=\"${(e: MouseEvent): void => ctx._onMouseEnter(e)}\"\n      @mouseleave=\"${(): void => ctx._onMouseLeave()}\"\n      @mousedown=\"${(e: MouseEvent): void => ctx._onMouseDown(e)}\"\n    >\n      <!-- Canvas inyectado por el componente en firstUpdated -->\n\n      <span class=\"btn-inner\" part=\"inner\">\n        ${loading ? spinnerSvg : nothing}\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </span>\n    </button>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,aAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5B,SAAS,qBAAqB,KAAsC;AACzE,QAAM,EAAE,SAAS,SAAA,IAAa;AAE9B,SAAO;AAAA;AAAA;AAAA;AAAA,mBAIU,YAAY,OAAO;AAAA,uBACf,YAAY,OAAO;AAAA,mBACvB,UAAU,SAAS,OAAO;AAAA,qBACxB,CAAC,MAAwB,IAAI,cAAc,CAAC,CAAC;AAAA,qBAC7C,MAAY,IAAI,eAAe;AAAA,oBAChC,CAAC,MAAwB,IAAI,aAAa,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,UAKtD,UAAU,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC;"}
+{"version":3,"file":"index260.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index261.js

@@ -1,5 +1,5 @@
-const liquidCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}}@layer components{.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;cursor:pointer;border:none;padding:var(--lib-space-sm) var(--lib-space-lg);white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;transition:box-shadow .2s ease,transform .1s ease;border-radius:0;outline:none;width:100%}.btn:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:2px}.btn:active:not(:disabled,.is-loading){transform:translateY(1px)}:host([disabled]) .btn,.btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.btn-inner{position:relative;z-index:1;display:inline-flex;align-items:center;gap:var(--lib-space-xs);pointer-events:none}.spinner{display:inline-block;width:11px;height:11px;flex-shrink:0;animation:lbl-spin .9s linear infinite}@keyframes lbl-spin{to{transform:rotate(360deg)}}:host([size="sm"]) .btn{padding:var(--lib-space-xs) var(--lib-space-md);font-size:10px}:host([size="lg"]) .btn{padding:var(--lib-space-md) var(--lib-space-xl);font-size:var(--text-sm);letter-spacing:var(--tracking-widest)}:host([block]){display:flex;width:100%}:host([variant="ink"]) .btn{background:var(--color-washi-900);color:var(--color-washi-100)}:host([variant="washi"]) .btn{background:transparent;color:var(--text-primary);border:1px solid var(--border-strong)}:host([variant="kaki"]) .btn{background:var(--color-kaki-400);color:#fff}:host([variant="celadon"]) .btn{background:var(--color-celadon-500);color:#fff}:host([variant="ghost"]) .btn{background:transparent;color:var(--text-secondary);border:none}:host([variant="danger"]) .btn{background:transparent;color:var(--color-error);border:1px solid var(--color-error)}:host([variant="ghost"][dark]) .btn{color:var(--color-washi-400)}}';
+const timelineCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}:host{display:block}}@layer components{.tl{display:flex;flex-direction:column;gap:0}.tl-item{display:grid;grid-template-columns:40px 1fr;gap:0 var(--lib-space-md);position:relative}.tl-spine{display:flex;flex-direction:column;align-items:center;position:relative}.tl-node{width:28px;height:28px;border-radius:var(--radius-full);flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:transform var(--duration-base),box-shadow var(--duration-base)}.tl-node-dot{background:var(--bg-elevated);border:2px solid var(--color-washi-700)}.tl-node-dot:after{content:"";width:8px;height:8px;border-radius:var(--radius-full);background:var(--color-washi-700)}.tl-node-icon{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-sm);font-size:14px;color:var(--text-secondary)}.tl-node-avatar{background:var(--color-washi-200);border:1px solid var(--border-default);font-family:var(--lib-font-mono);font-size:9px;color:var(--text-secondary)}.nd-kaki.tl-node-dot{border-color:var(--color-kaki-500)}.nd-kaki.tl-node-dot:after{background:var(--color-kaki-500)}.nd-kaki.tl-node-icon{background:var(--color-kaki-50);border-color:var(--color-kaki-100);color:var(--color-kaki-500)}.nd-kaki.tl-node-avatar{background:var(--color-kaki-100);border-color:var(--color-kaki-100);color:var(--color-kaki-600)}.nd-celadon.tl-node-dot{border-color:var(--color-celadon-500)}.nd-celadon.tl-node-dot:after{background:var(--color-celadon-500)}.nd-celadon.tl-node-icon{background:var(--color-celadon-50);border-color:var(--color-celadon-100);color:var(--color-celadon-500)}.nd-celadon.tl-node-avatar{background:var(--color-celadon-100);border-color:var(--color-celadon-100);color:var(--color-celadon-600)}.nd-error.tl-node-dot{border-color:var(--color-error)}.nd-error.tl-node-dot:after{background:var(--color-error)}.nd-error.tl-node-icon{background:#fff8f7;border-color:#f5c4bc;color:var(--color-error)}.nd-muted.tl-node-dot{border-color:var(--color-washi-300);border-style:dashed}.nd-muted.tl-node-dot:after{background:var(--color-washi-300)}.nd-muted.tl-node-icon{background:var(--bg-surface);border-color:var(--border-subtle);color:var(--text-muted)}@keyframes tl-pulse{0%{box-shadow:0 0 #b85a1e59}70%{box-shadow:0 0 0 8px #b85a1e00}to{box-shadow:0 0 #b85a1e00}}.tl-item.is-active .tl-node-dot{border-color:var(--color-kaki-500);animation:tl-pulse 2s infinite}.tl-item.is-active .tl-node-dot:after{background:var(--color-kaki-500)}.tl-item.is-active .tl-title{color:var(--text-primary)}.tl-item.is-done .tl-node-dot{background:var(--color-washi-900);border-color:var(--color-washi-900)}.tl-item.is-done .tl-node-dot:after{display:none}.tl-item.is-done .tl-node-dot:before{content:"";width:6px;height:10px;border-right:2px solid var(--color-white);border-bottom:2px solid var(--color-white);transform:rotate(45deg) translate(-1px,-2px)}.tl-item.is-error .tl-node-dot{background:var(--color-error);border-color:var(--color-error)}.tl-item.is-error .tl-node-dot:after{display:none}.tl-item.is-error .tl-node-dot:before{content:"!";font-family:var(--lib-font-mono);font-size:11px;font-weight:700;color:var(--color-white);line-height:1}.tl-item.is-error .tl-title{color:var(--color-error)}.tl-item.is-pending .tl-node-dot{border-color:var(--color-washi-300);border-style:dashed}.tl-item.is-pending .tl-node-dot:after{background:var(--color-washi-300);width:6px;height:6px}.tl-item.is-pending .tl-title{color:var(--text-muted)}.tl-item.is-pending .tl-body{opacity:.5}.tl-line{width:1px;flex:1;background:var(--border-default);margin:var(--lib-space-xs) 0;min-height:var(--lib-space-lg);position:relative;overflow:hidden}.tl-line.dashed{background:repeating-linear-gradient(to bottom,var(--border-default) 0,var(--border-default) 4px,transparent 4px,transparent 8px)}.tl-line.progress{background:var(--border-subtle)}.tl-line.progress:after{content:"";position:absolute;top:0;left:0;right:0;height:var(--tl-progress, 0%);background:var(--color-kaki-500);transition:height var(--duration-slower) var(--ease-out)}.tl-content{padding-bottom:var(--lib-space-lg);padding-top:2px}.tl-item:last-child .tl-content{padding-bottom:0}.tl-timestamp{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);color:var(--text-muted);margin-bottom:var(--lib-space-sm);display:flex;align-items:center;gap:var(--lib-space-sm);line-height:1;padding-top:6px}.tl-timestamp-dot{width:4px;height:4px;border-radius:var(--radius-full);background:var(--color-washi-300);flex-shrink:0}.tl-title{font-family:var(--lib-font-body);font-size:var(--text-base);color:var(--text-secondary);line-height:var(--leading-snug);margin-bottom:var(--lib-space-sm)}.tl-body{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);opacity:.85}.tl-body p{margin-bottom:var(--lib-space-sm)}.tl-body p:last-child{margin-bottom:0}.tl-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--lib-space-sm);margin-top:var(--lib-space-sm)}.tl-card{background:var(--bg-elevated);border:1px solid var(--border-subtle);padding:var(--lib-space-md) var(--lib-space-md);margin-top:var(--lib-space-xs)}.tl-item.is-active .tl-card{border-color:var(--color-kaki-200);background:var(--color-kaki-50)}.tl-item.is-done .tl-card{background:var(--bg-surface)}.tl-item.is-error .tl-card{border-color:#c44030;background:#fff8f7}.tl-item.is-pending .tl-card{background:var(--bg-surface);opacity:.6}.tl-media{margin-top:var(--lib-space-md);border-top:1px solid var(--border-subtle);padding-top:var(--lib-space-md);display:flex;gap:var(--lib-space-sm);flex-wrap:wrap}.tl-media-thumb{width:64px;height:48px;background:var(--border-subtle);border:1px solid var(--border-default);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-muted)}.tl-badge{display:inline-flex;align-items:center;gap:var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wider);text-transform:uppercase;padding:2px var(--lib-space-sm)}.tl-badge:before{content:"";width:4px;height:4px;border-radius:var(--radius-full);background:currentcolor;opacity:.65;flex-shrink:0}.tl-badge-default{color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border-subtle)}.tl-badge-kaki{color:var(--color-kaki-500);background:var(--color-kaki-50);border:1px solid var(--color-kaki-100)}.tl-badge-celadon{color:var(--color-celadon-500);background:var(--color-celadon-50);border:1px solid var(--color-celadon-100)}.tl-badge-error{color:var(--color-error);background:#fff8f7;border:1px solid #F5C4BC}.tl-avatar{width:20px;height:20px;border-radius:var(--radius-full);background:var(--color-washi-200);display:inline-flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:7px;color:var(--text-secondary);border:1px solid var(--border-subtle);flex-shrink:0}.tl-item.is-collapsed .tl-body,.tl-item.is-collapsed .tl-media,.tl-item.is-collapsed .tl-card-body{display:none}.tl-item.is-collapsed .tl-content{padding-bottom:var(--lib-space-md)}.tl-expand-btn{background:none;border:none;cursor:pointer;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted);padding:0;margin-top:var(--lib-space-sm);display:flex;align-items:center;gap:var(--lib-space-sm);transition:color var(--duration-fast)}.tl-expand-btn:hover{color:var(--text-primary)}:host([size="sm"]) .tl-item{grid-template-columns:28px 1fr}:host([size="sm"]) .tl-node{width:20px;height:20px}:host([size="sm"]) .tl-node-dot:after{width:6px;height:6px}:host([size="sm"]) .tl-node-icon{font-size:11px}:host([size="sm"]) .tl-node-avatar{font-size:7px}:host([size="sm"]) .tl-line{min-height:var(--lib-space-md)}:host([size="sm"]) .tl-content{padding-bottom:var(--lib-space-md)}:host([size="sm"]) .tl-timestamp{font-size:9px;padding-top:2px}:host([size="sm"]) .tl-title{font-size:var(--text-sm)}:host([size="sm"]) .tl-body{font-size:var(--text-xs)}:host([size="sm"]) .tl-card{padding:var(--lib-space-sm) var(--lib-space-md)}:host([size="lg"]) .tl-item{grid-template-columns:48px 1fr;gap:0 var(--lib-space-md)}:host([size="lg"]) .tl-node{width:36px;height:36px}:host([size="lg"]) .tl-node-dot:after{width:10px;height:10px}:host([size="lg"]) .tl-node-icon{font-size:18px}:host([size="lg"]) .tl-line{min-height:var(--lib-space-lg)}:host([size="lg"]) .tl-content{padding-bottom:var(--lib-space-xl);padding-top:4px}:host([size="lg"]) .tl-timestamp{font-size:11px;padding-top:8px}:host([size="lg"]) .tl-title{font-size:var(--text-md)}:host([size="lg"]) .tl-body{font-size:var(--text-sm)}:host([size="lg"]) .tl-card{padding:var(--lib-space-md) var(--lib-space-lg)}}';
 export {
-  liquidCss as default
+  timelineCss as default
 };
 //# sourceMappingURL=index261.js.map

package/dist/index262.js

@@ -1,12 +1,95 @@
-const LIQUID_PALETTES = {
-  ink: { water: [184, 90, 30], ripple: [255, 180, 100] },
-  washi: { water: [34, 28, 22], ripple: [90, 72, 56] },
-  kaki: { water: [140, 65, 21], ripple: [255, 220, 180] },
-  celadon: { water: [36, 82, 73], ripple: [160, 220, 200] },
-  ghost: { water: [184, 165, 146], ripple: [140, 120, 100] },
-  danger: { water: [140, 42, 26], ripple: [220, 100, 80] }
-};
+import { html, nothing } from "lit";
+import { styleMap as o } from "./index267.js";
+function timelineItemTemplate(props) {
+  const {
+    nodeType,
+    nodeColor,
+    icon,
+    avatar,
+    status,
+    lineVariant,
+    lineProgress,
+    hideLine,
+    timestamp,
+    title,
+    body,
+    card,
+    collapsed,
+    collapsible,
+    onToggleCollapse
+  } = props;
+  const itemCls = [
+    "tl-item",
+    status !== "default" ? `is-${status}` : "",
+    collapsed ? "is-collapsed" : ""
+  ].filter(Boolean).join(" ");
+  const nodeTypeCls = `tl-node-${nodeType}`;
+  const nodeColorCls = nodeColor !== "default" ? `nd-${nodeColor}` : "";
+  const nodeCls = `tl-node ${nodeTypeCls} ${nodeColorCls}`.trim();
+  const nodeInner = nodeType === "icon" ? html`<lib-icon name="${icon}" size="xs"></lib-icon>` : nodeType === "avatar" ? html`${avatar}` : nothing;
+  const lineCls = [
+    "tl-line",
+    lineVariant === "dashed" ? "dashed" : "",
+    lineVariant === "progress" ? "progress" : ""
+  ].filter(Boolean).join(" ");
+  const lineStyles = lineVariant === "progress" ? o({ "--tl-progress": `${lineProgress}%` }) : nothing;
+  const contentInner = card ? html`
+        <div class="tl-card">
+          ${title ? html`<p class="tl-title">${title}</p>` : nothing}
+          <div class="tl-card-body">
+            ${body ? html`<div class="tl-body">${body}</div>` : nothing}
+            <!-- slot por defecto para contenido libre dentro de la card -->
+            <slot></slot>
+            <!-- slot meta: badges, avatares, etc. -->
+            <div class="tl-meta">
+              <slot name="meta"></slot>
+            </div>
+            <!-- slot media: imágenes adjuntas -->
+            <slot name="media"></slot>
+          </div>
+        </div>` : html`
+        ${title ? html`<p class="tl-title">${title}</p>` : nothing}
+        ${body ? html`<div class="tl-body">${body}</div>` : html`<div class="tl-body"><slot></slot></div>`}
+        <div class="tl-meta">
+          <slot name="meta"></slot>
+        </div>`;
+  return html`
+    <div class="${itemCls}" role="listitem">
+
+      <!-- ── Spine: nodo + línea ── -->
+      <div class="tl-spine">
+        <div class="${nodeCls}">${nodeInner}</div>
+        ${hideLine ? nothing : html`<div class="${lineCls}" style="${lineStyles}"></div>`}
+      </div>
+
+      <!-- ── Content ── -->
+      <div class="tl-content">
+        ${timestamp ? html`
+              <div class="tl-timestamp">
+                <span class="tl-timestamp-dot"></span>
+                ${timestamp}
+              </div>` : nothing}
+
+        ${contentInner}
+
+        ${collapsible ? html`
+              <button
+                class="tl-expand-btn"
+                aria-expanded="${!collapsed}"
+                @click="${onToggleCollapse}"
+              >
+                <lib-icon
+                  name="${collapsed ? "caret-down" : "caret-up"}"
+                  size="xs"
+                ></lib-icon>
+                ${collapsed ? "Mostrar más" : "Mostrar menos"}
+              </button>` : nothing}
+      </div>
+
+    </div>
+  `;
+}
 export {
-  LIQUID_PALETTES
+  timelineItemTemplate
 };
 //# sourceMappingURL=index262.js.map

package/dist/index262.js.map

@@ -1 +1 @@
-{"version":3,"file":"index262.js","sources":["../src/components/atoms/liquid-button/lib-liquid-button.types.ts"],"sourcesContent":["export type LiquidVariant = 'ink' | 'washi' | 'kaki' | 'celadon' | 'ghost' | 'danger';\nexport type LiquidSize    = 'sm' | 'md' | 'lg';\n\n/** Parámetros RGB de la física del agua — uno por variante */\nexport interface LiquidPalette {\n  /** Color del cuerpo de agua (fill) */\n  water: [number, number, number];\n  /** Color de los anillos de impacto (ripple) */\n  ripple: [number, number, number];\n}\n\nexport const LIQUID_PALETTES: Record<LiquidVariant, LiquidPalette> = {\n  ink:     { water: [184, 90,  30],  ripple: [255, 180, 100] },\n  washi:   { water: [34,  28,  22],  ripple: [90,  72,  56]  },\n  kaki:    { water: [140, 65,  21],  ripple: [255, 220, 180] },\n  celadon: { water: [36,  82,  73],  ripple: [160, 220, 200] },\n  ghost:   { water: [184, 165, 146], ripple: [140, 120, 100] },\n  danger:  { water: [140, 42,  26],  ripple: [220, 100, 80]  },\n};"],"names":[],"mappings":"AAWO,MAAM,kBAAwD;AAAA,EACnE,KAAS,EAAE,OAAO,CAAC,KAAK,IAAK,EAAE,GAAI,QAAQ,CAAC,KAAK,KAAK,GAAG,EAAA;AAAA,EACzD,OAAS,EAAE,OAAO,CAAC,IAAK,IAAK,EAAE,GAAI,QAAQ,CAAC,IAAK,IAAK,EAAE,EAAA;AAAA,EACxD,MAAS,EAAE,OAAO,CAAC,KAAK,IAAK,EAAE,GAAI,QAAQ,CAAC,KAAK,KAAK,GAAG,EAAA;AAAA,EACzD,SAAS,EAAE,OAAO,CAAC,IAAK,IAAK,EAAE,GAAI,QAAQ,CAAC,KAAK,KAAK,GAAG,EAAA;AAAA,EACzD,OAAS,EAAE,OAAO,CAAC,KAAK,KAAK,GAAG,GAAG,QAAQ,CAAC,KAAK,KAAK,GAAG,EAAA;AAAA,EACzD,QAAS,EAAE,OAAO,CAAC,KAAK,IAAK,EAAE,GAAI,QAAQ,CAAC,KAAK,KAAK,EAAE,EAAA;AAC1D;"}
+{"version":3,"file":"index262.js","sources":["../src/components/organisms/timeline/lib-timeline-item.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type { TimelineItemTemplateProps } from './lib-timeline-item.types';\n\nexport function timelineItemTemplate(props: TimelineItemTemplateProps): TemplateResult {\n  const {\n    nodeType, nodeColor, icon, avatar,\n    status, lineVariant, lineProgress, hideLine,\n    timestamp, title, body, card, collapsed, collapsible,\n    onToggleCollapse,\n  } = props;\n\n  /* ── Clases del ítem raíz ── */\n  const itemCls = [\n    'tl-item',\n    status !== 'default' ? `is-${status}` : '',\n    collapsed ? 'is-collapsed' : '',\n  ].filter(Boolean).join(' ');\n\n  /* ── Clases del nodo ── */\n  const nodeTypeCls = `tl-node-${nodeType}`;\n  const nodeColorCls = nodeColor !== 'default' ? `nd-${nodeColor}` : '';\n  const nodeCls = `tl-node ${nodeTypeCls} ${nodeColorCls}`.trim();\n\n  /* ── Nodo interior ── */\n  const nodeInner = nodeType === 'icon'\n    ? html`<lib-icon name=\"${icon}\" size=\"xs\"></lib-icon>`\n    : nodeType === 'avatar'\n      ? html`${avatar}`\n      : nothing; /* dot — nodo gestionado por CSS ::before/::after */\n\n  /* ── Línea ── */\n  const lineCls = [\n    'tl-line',\n    lineVariant === 'dashed'   ? 'dashed'   : '',\n    lineVariant === 'progress' ? 'progress' : '',\n  ].filter(Boolean).join(' ');\n\n  const lineStyles = lineVariant === 'progress'\n    ? styleMap({ '--tl-progress': `${lineProgress}%` } as Record<string, string>)\n    : nothing;\n\n  /* ── Contenido ── */\n  const contentInner: TemplateResult = card\n    ? html`\n        <div class=\"tl-card\">\n          ${title ? html`<p class=\"tl-title\">${title}</p>` : nothing}\n          <div class=\"tl-card-body\">\n            ${body ? html`<div class=\"tl-body\">${body}</div>` : nothing}\n            <!-- slot por defecto para contenido libre dentro de la card -->\n            <slot></slot>\n            <!-- slot meta: badges, avatares, etc. -->\n            <div class=\"tl-meta\">\n              <slot name=\"meta\"></slot>\n            </div>\n            <!-- slot media: imágenes adjuntas -->\n            <slot name=\"media\"></slot>\n          </div>\n        </div>`\n    : html`\n        ${title ? html`<p class=\"tl-title\">${title}</p>` : nothing}\n        ${body\n          ? html`<div class=\"tl-body\">${body}</div>`\n          : html`<div class=\"tl-body\"><slot></slot></div>`}\n        <div class=\"tl-meta\">\n          <slot name=\"meta\"></slot>\n        </div>`;\n\n  return html`\n    <div class=\"${itemCls}\" role=\"listitem\">\n\n      <!-- ── Spine: nodo + línea ── -->\n      <div class=\"tl-spine\">\n        <div class=\"${nodeCls}\">${nodeInner}</div>\n        ${hideLine\n          ? nothing\n          : html`<div class=\"${lineCls}\" style=\"${lineStyles}\"></div>`}\n      </div>\n\n      <!-- ── Content ── -->\n      <div class=\"tl-content\">\n        ${timestamp\n          ? html`\n              <div class=\"tl-timestamp\">\n                <span class=\"tl-timestamp-dot\"></span>\n                ${timestamp}\n              </div>`\n          : nothing}\n\n        ${contentInner}\n\n        ${collapsible\n          ? html`\n              <button\n                class=\"tl-expand-btn\"\n                aria-expanded=\"${!collapsed}\"\n                @click=\"${onToggleCollapse}\"\n              >\n                <lib-icon\n                  name=\"${collapsed ? 'caret-down' : 'caret-up'}\"\n                  size=\"xs\"\n                ></lib-icon>\n                ${collapsed ? 'Mostrar más' : 'Mostrar menos'}\n              </button>`\n          : nothing}\n      </div>\n\n    </div>\n  `;\n}"],"names":["styleMap"],"mappings":";;AAIO,SAAS,qBAAqB,OAAkD;AACrF,QAAM;AAAA,IACJ;AAAA,IAAU;AAAA,IAAW;AAAA,IAAM;AAAA,IAC3B;AAAA,IAAQ;AAAA,IAAa;AAAA,IAAc;AAAA,IACnC;AAAA,IAAW;AAAA,IAAO;AAAA,IAAM;AAAA,IAAM;AAAA,IAAW;AAAA,IACzC;AAAA,EAAA,IACE;AAGJ,QAAM,UAAU;AAAA,IACd;AAAA,IACA,WAAW,YAAY,MAAM,MAAM,KAAK;AAAA,IACxC,YAAY,iBAAiB;AAAA,EAAA,EAC7B,OAAO,OAAO,EAAE,KAAK,GAAG;AAG1B,QAAM,cAAc,WAAW,QAAQ;AACvC,QAAM,eAAe,cAAc,YAAY,MAAM,SAAS,KAAK;AACnE,QAAM,UAAU,WAAW,WAAW,IAAI,YAAY,GAAG,KAAA;AAGzD,QAAM,YAAY,aAAa,SAC3B,uBAAuB,IAAI,4BAC3B,aAAa,WACX,OAAO,MAAM,KACb;AAGN,QAAM,UAAU;AAAA,IACd;AAAA,IACA,gBAAgB,WAAa,WAAa;AAAA,IAC1C,gBAAgB,aAAa,aAAa;AAAA,EAAA,EAC1C,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,aAAa,gBAAgB,aAC/BA,EAAS,EAAE,iBAAiB,GAAG,YAAY,IAAA,CAA+B,IAC1E;AAGJ,QAAM,eAA+B,OACjC;AAAA;AAAA,YAEM,QAAQ,2BAA2B,KAAK,SAAS,OAAO;AAAA;AAAA,cAEtD,OAAO,4BAA4B,IAAI,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAWjE;AAAA,UACI,QAAQ,2BAA2B,KAAK,SAAS,OAAO;AAAA,UACxD,OACE,4BAA4B,IAAI,WAChC,8CAA8C;AAAA;AAAA;AAAA;AAKxD,SAAO;AAAA,kBACS,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIH,OAAO,KAAK,SAAS;AAAA,UACjC,WACE,UACA,mBAAmB,OAAO,YAAY,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,UAK5D,YACE;AAAA;AAAA;AAAA,kBAGM,SAAS;AAAA,wBAEf,OAAO;AAAA;AAAA,UAET,YAAY;AAAA;AAAA,UAEZ,cACE;AAAA;AAAA;AAAA,iCAGqB,CAAC,SAAS;AAAA,0BACjB,gBAAgB;AAAA;AAAA;AAAA,0BAGhB,YAAY,eAAe,UAAU;AAAA;AAAA;AAAA,kBAG7C,YAAY,gBAAgB,eAAe;AAAA,2BAEjD,OAAO;AAAA;AAAA;AAAA;AAAA;AAKnB;"}