@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index38.js

@@ -1,9 +1,8 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, query, customElement } from "lit/decorators.js";
-import { buttonLiquidTemplate } from "./index260.js";
-import liquidCss from "./index261.js";
+import { property, customElement } from "lit/decorators.js";
+import { selectOptionTemplate } from "./index332.js";
+import optionCss from "./index333.js";
 import sharedTokens from "./index196.js";
-import { LIQUID_PALETTES } from "./index262.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,265 +13,54 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-class WaterPhysics {
-  constructor(btn, canvas, water, ripple) {
-    this.fill = 0;
-    this.targetFill = 0;
-    this.fillSpeed = 0.032;
-    this.shimmerX = -1;
-    this.t = 0;
-    this.hovered = false;
-    this.raf = 0;
-    this.A = 3.5;
-    this.f1 = 0.038;
-    this.f2 = 0.063;
-    this.s1 = 1.8;
-    this.s2 = 1.2;
-    this.W = 0;
-    this.H = 0;
-    this.ripples = [];
-    this.btn = btn;
-    this.canvas = canvas;
-    this.ctx = canvas.getContext("2d");
-    [this.wr, this.wg, this.wb] = water;
-    [this.rr, this.rg, this.rb] = ripple;
-    this.resize();
-    this.loop();
-  }
-  /* ── Dimensiones con DPR ── */
-  resize() {
-    const r = this.btn.getBoundingClientRect();
-    const dpr = window.devicePixelRatio || 1;
-    this.W = r.width;
-    this.H = r.height;
-    this.canvas.width = this.W * dpr;
-    this.canvas.height = this.H * dpr;
-    this.canvas.style.width = `${this.W}px`;
-    this.canvas.style.height = `${this.H}px`;
-    this.ctx.scale(dpr, dpr);
-  }
-  /* ── Spawn de ripple ── */
-  spawnRipple(x, y, { speed = 2.2, maxR, lineWidth = 1.2 } = {}) {
-    const diag = Math.sqrt(this.W ** 2 + this.H ** 2);
-    this.ripples.push({
-      x,
-      y,
-      radius: 0,
-      maxRadius: maxR ?? diag * 0.72,
-      speed,
-      lineWidth,
-      opacity: 0
-    });
-  }
-  /* ── Eventos públicos — llamados por el componente Lit ── */
-  onMouseEnter(x, y) {
-    this.hovered = true;
-    this.targetFill = 1;
-    this.fillSpeed = 0.028;
-    this.shimmerX = -0.3;
-    this.spawnRipple(x, y, { speed: 3.2, lineWidth: 1.8 });
-    setTimeout(() => this.spawnRipple(x, y, { speed: 2, lineWidth: 1.1 }), 80);
-    setTimeout(() => this.spawnRipple(x, y, { speed: 1.3, lineWidth: 0.7 }), 180);
-  }
-  onMouseLeave() {
-    this.hovered = false;
-    this.targetFill = 0;
-    this.fillSpeed = 0.048;
-  }
-  onMouseDown(cx, cy) {
-    for (let i = 0; i < 3; i++) {
-      setTimeout(() => {
-        this.spawnRipple(cx, cy, {
-          speed: 4 - i * 0.8,
-          maxR: this.W * 0.5,
-          lineWidth: 2 - i * 0.4
-        });
-      }, i * 40);
-    }
-  }
-  /* ── Dibujo ── */
-  drawWave() {
-    const { ctx, W, H, A, f1, f2, s1, s2, t, wr, wg, wb, fill } = this;
-    if (fill <= 1e-3) return;
-    const baseY = H * (1 - fill);
-    ctx.beginPath();
-    ctx.moveTo(0, H);
-    ctx.lineTo(0, baseY);
-    for (let x = 0; x <= W; x++) {
-      const y = baseY + A * Math.sin(x * f1 + t * s1) + A * 0.45 * Math.sin(x * f2 - t * s2);
-      ctx.lineTo(x, y);
-    }
-    ctx.lineTo(W, H);
-    ctx.closePath();
-    const grad = ctx.createLinearGradient(0, baseY - A * 2, 0, H);
-    grad.addColorStop(0, `rgba(${wr},${wg},${wb},0.82)`);
-    grad.addColorStop(0.4, `rgba(${wr},${wg},${wb},0.92)`);
-    grad.addColorStop(1, `rgba(${wr},${wg},${wb},0.98)`);
-    ctx.fillStyle = grad;
-    ctx.fill();
-    if (this.shimmerX > -0.5 && this.shimmerX < 1.5) {
-      const sx = W * this.shimmerX;
-      const sg = ctx.createLinearGradient(sx - 40, 0, sx + 40, 0);
-      sg.addColorStop(0, "rgba(255,255,255,0)");
-      sg.addColorStop(0.5, "rgba(255,255,255,0.12)");
-      sg.addColorStop(1, "rgba(255,255,255,0)");
-      ctx.fillStyle = sg;
-      ctx.fillRect(0, Math.max(0, baseY - 4), W, H - Math.max(0, baseY - 4));
-    }
-  }
-  drawRipples() {
-    const { ctx, rr, rg, rb } = this;
-    this.ripples = this.ripples.filter((r) => r.opacity > 0 || r.radius === 0);
-    for (const r of this.ripples) {
-      r.radius += r.speed;
-      r.opacity = Math.max(0, 1 - r.radius / r.maxRadius);
-      ctx.beginPath();
-      ctx.arc(r.x, r.y, r.radius, 0, Math.PI * 2);
-      ctx.strokeStyle = `rgba(${rr},${rg},${rb},${r.opacity * 0.9})`;
-      ctx.lineWidth = r.lineWidth;
-      ctx.stroke();
-      if (r.radius > 6) {
-        ctx.beginPath();
-        ctx.arc(r.x, r.y, r.radius * 0.65, 0, Math.PI * 2);
-        ctx.strokeStyle = `rgba(${rr},${rg},${rb},${r.opacity * 0.4})`;
-        ctx.lineWidth = r.lineWidth * 0.5;
-        ctx.stroke();
-      }
-    }
-    this.ripples = this.ripples.filter((r) => r.opacity > 0);
-  }
-  /* ── Loop principal ── */
-  loop() {
-    const tick = () => {
-      this.raf = requestAnimationFrame(tick);
-      const { ctx, W, H } = this;
-      this.t += 0.04;
-      const diff = this.targetFill - this.fill;
-      this.fill += diff * this.fillSpeed * 2.8;
-      if (Math.abs(diff) < 5e-4) this.fill = this.targetFill;
-      if (this.hovered && this.shimmerX < 1.6) {
-        this.shimmerX += 0.012;
-      }
-      if (this.fill <= 1e-3 && this.ripples.length === 0) return;
-      ctx.clearRect(0, 0, W, H);
-      this.drawWave();
-      this.drawRipples();
-    };
-    this.raf = requestAnimationFrame(tick);
-  }
-  /* ── Cleanup ── */
-  destroy() {
-    cancelAnimationFrame(this.raf);
-  }
-}
-let LibButtonLiquid = class extends LitElement {
+let LibSelectOption = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.variant = "ink";
-    this.size = "md";
+    this.value = "";
+    this.selected = false;
     this.disabled = false;
-    this.loading = false;
-    this.dark = false;
-    this.block = false;
-    this._physics = null;
-    this._canvas = null;
-    this._ro = null;
-  }
-  /* ── Lifecycle ── */
-  firstUpdated() {
-    this._initCanvas();
-  }
-  updated(changed) {
-    if (changed.has("variant")) {
-      this._destroyCanvas();
-      this._initCanvas();
-    }
-  }
-  disconnectedCallback() {
-    var _a;
-    super.disconnectedCallback();
-    this._destroyCanvas();
-    (_a = this._ro) == null ? void 0 : _a.disconnect();
   }
-  /* ── Canvas setup ── */
-  _initCanvas() {
-    if (!this._btn) return;
-    const canvas = document.createElement("canvas");
-    this._canvas = canvas;
-    this._btn.insertBefore(canvas, this._btn.firstChild);
-    const palette = LIQUID_PALETTES[this.variant];
-    this._physics = new WaterPhysics(this._btn, canvas, palette.water, palette.ripple);
-    this._ro = new ResizeObserver(() => {
-      var _a;
-      return (_a = this._physics) == null ? void 0 : _a.resize();
+  render() {
+    return selectOptionTemplate({
+      value: this.value,
+      selected: this.selected,
+      disabled: this.disabled,
+      handleClick: this._handleClick.bind(this)
     });
-    this._ro.observe(this._btn);
-  }
-  _destroyCanvas() {
-    var _a, _b, _c;
-    (_a = this._physics) == null ? void 0 : _a.destroy();
-    this._physics = null;
-    (_b = this._canvas) == null ? void 0 : _b.remove();
-    this._canvas = null;
-    (_c = this._ro) == null ? void 0 : _c.disconnect();
-    this._ro = null;
-  }
-  /* ── Eventos del canvas — llamados desde el template ── */
-  _onMouseEnter(e) {
-    var _a;
-    if (this.disabled || this.loading) return;
-    const rect = this._btn.getBoundingClientRect();
-    (_a = this._physics) == null ? void 0 : _a.onMouseEnter(e.clientX - rect.left, e.clientY - rect.top);
   }
-  _onMouseLeave() {
+  _handleClick(e) {
     var _a;
-    (_a = this._physics) == null ? void 0 : _a.onMouseLeave();
-  }
-  _onMouseDown(e) {
-    var _a;
-    if (this.disabled || this.loading) return;
-    const rect = this._btn.getBoundingClientRect();
-    (_a = this._physics) == null ? void 0 : _a.onMouseDown(e.clientX - rect.left, e.clientY - rect.top);
-    this.dispatchEvent(new CustomEvent("ui-lib-click", {
-      detail: { originalEvent: e },
-      bubbles: true,
-      composed: true
-    }));
-  }
-  /* ── Render ── */
-  render() {
-    return buttonLiquidTemplate(this);
+    e.stopPropagation();
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent("option-selected", {
+        detail: {
+          value: this.value,
+          label: ((_a = this.textContent) == null ? void 0 : _a.trim()) ?? ""
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
   }
 };
-LibButtonLiquid.styles = [
+LibSelectOption.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(liquidCss)}`
+  css`${unsafeCSS(optionCss)}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
-], LibButtonLiquid.prototype, "variant", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibButtonLiquid.prototype, "size", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibButtonLiquid.prototype, "disabled", 2);
+], LibSelectOption.prototype, "value", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibButtonLiquid.prototype, "loading", 2);
+], LibSelectOption.prototype, "selected", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibButtonLiquid.prototype, "dark", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibButtonLiquid.prototype, "block", 2);
-__decorateClass([
-  query(".btn")
-], LibButtonLiquid.prototype, "_btn", 2);
-LibButtonLiquid = __decorateClass([
-  customElement("lib-button-liquid")
-], LibButtonLiquid);
+], LibSelectOption.prototype, "disabled", 2);
+LibSelectOption = __decorateClass([
+  customElement("lib-select-option")
+], LibSelectOption);
 export {
-  LibButtonLiquid
+  LibSelectOption
 };
 //# sourceMappingURL=index38.js.map

package/dist/index38.js.map

@@ -1 +1 @@
-{"version":3,"file":"index38.js","sources":["../src/components/atoms/liquid-button/lib-liquid-button.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { buttonLiquidTemplate } from './lib-liquid-button.html';\nimport liquidCss from './lib-liquid-button.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport { LIQUID_PALETTES } from './lib-liquid-button.types';\nimport type { LiquidVariant, LiquidSize } from './lib-liquid-button.types';\n\n/* ============================================================\n   WaterPhysics — clase interna de física de canvas\n   Portada desde el SG-41 (vanilla JS → TypeScript puro)\n   ============================================================ */\nclass WaterPhysics {\n  private btn:        HTMLElement;\n  private canvas:     HTMLCanvasElement;\n  private ctx:        CanvasRenderingContext2D;\n\n  /* Colores */\n  private wr: number; private wg: number; private wb: number;\n  private rr: number; private rg: number; private rb: number;\n\n  /* Estado */\n  private fill       = 0;\n  private targetFill = 0;\n  private fillSpeed  = 0.032;\n  private shimmerX   = -1;\n  private t          = 0;\n  private hovered    = false;\n  private raf        = 0;\n\n  /* Física de onda */\n  private readonly A  = 3.5;\n  private readonly f1 = 0.038;\n  private readonly f2 = 0.063;\n  private readonly s1 = 1.8;\n  private readonly s2 = 1.2;\n\n  private W = 0;\n  private H = 0;\n\n  private ripples: Array<{\n    x: number; y: number;\n    radius: number; maxRadius: number;\n    speed: number; lineWidth: number;\n    opacity: number;\n  }> = [];\n\n  constructor(\n    btn: HTMLElement,\n    canvas: HTMLCanvasElement,\n    water: [number, number, number],\n    ripple: [number, number, number],\n  ) {\n    this.btn    = btn;\n    this.canvas = canvas;\n    this.ctx    = canvas.getContext('2d')!;\n    [this.wr, this.wg, this.wb] = water;\n    [this.rr, this.rg, this.rb] = ripple;\n\n    this.resize();\n    this.loop();\n  }\n\n  /* ── Dimensiones con DPR ── */\n  resize(): void {\n    const r   = this.btn.getBoundingClientRect();\n    const dpr = window.devicePixelRatio || 1;\n    this.W = r.width;\n    this.H = r.height;\n    this.canvas.width          = this.W * dpr;\n    this.canvas.height         = this.H * dpr;\n    this.canvas.style.width    = `${this.W}px`;\n    this.canvas.style.height   = `${this.H}px`;\n    this.ctx.scale(dpr, dpr);\n  }\n\n  /* ── Spawn de ripple ── */\n  spawnRipple(\n    x: number, y: number,\n    { speed = 2.2, maxR, lineWidth = 1.2 }:\n    { speed?: number; maxR?: number; lineWidth?: number } = {},\n  ): void {\n    const diag = Math.sqrt(this.W ** 2 + this.H ** 2);\n    this.ripples.push({\n      x, y,\n      radius:    0,\n      maxRadius: maxR ?? diag * 0.72,\n      speed,\n      lineWidth,\n      opacity:   0,\n    });\n  }\n\n  /* ── Eventos públicos — llamados por el componente Lit ── */\n  onMouseEnter(x: number, y: number): void {\n    this.hovered    = true;\n    this.targetFill = 1;\n    this.fillSpeed  = 0.028;\n    this.shimmerX   = -0.3;\n\n    this.spawnRipple(x, y, { speed: 3.2, lineWidth: 1.8 });\n    setTimeout((): void => this.spawnRipple(x, y, { speed: 2.0, lineWidth: 1.1 }), 80);\n    setTimeout((): void => this.spawnRipple(x, y, { speed: 1.3, lineWidth: 0.7 }), 180);\n  }\n\n  onMouseLeave(): void {\n    this.hovered    = false;\n    this.targetFill = 0;\n    this.fillSpeed  = 0.048;\n  }\n\n  onMouseDown(cx: number, cy: number): void {\n    for (let i = 0; i < 3; i++) {\n      setTimeout((): void => {\n        this.spawnRipple(cx, cy, {\n          speed:     4 - i * 0.8,\n          maxR:      this.W * 0.5,\n          lineWidth: 2 - i * 0.4,\n        });\n      }, i * 40);\n    }\n  }\n\n  /* ── Dibujo ── */\n  private drawWave(): void {\n    const { ctx, W, H, A, f1, f2, s1, s2, t, wr, wg, wb, fill } = this;\n    if (fill <= 0.001) return;\n\n    const baseY = H * (1 - fill);\n\n    /* Cuerpo sinusoidal */\n    ctx.beginPath();\n    ctx.moveTo(0, H);\n    ctx.lineTo(0, baseY);\n    for (let x = 0; x <= W; x++) {\n      const y = baseY\n        + A * Math.sin(x * f1 + t * s1)\n        + A * 0.45 * Math.sin(x * f2 - t * s2);\n      ctx.lineTo(x, y);\n    }\n    ctx.lineTo(W, H);\n    ctx.closePath();\n\n    /* Gradiente vertical */\n    const grad = ctx.createLinearGradient(0, baseY - A * 2, 0, H);\n    grad.addColorStop(0,   `rgba(${wr},${wg},${wb},0.82)`);\n    grad.addColorStop(0.4, `rgba(${wr},${wg},${wb},0.92)`);\n    grad.addColorStop(1,   `rgba(${wr},${wg},${wb},0.98)`);\n    ctx.fillStyle = grad;\n    ctx.fill();\n\n    /* Shimmer diagonal */\n    if (this.shimmerX > -0.5 && this.shimmerX < 1.5) {\n      const sx = W * this.shimmerX;\n      const sg = ctx.createLinearGradient(sx - 40, 0, sx + 40, 0);\n      sg.addColorStop(0,   'rgba(255,255,255,0)');\n      sg.addColorStop(0.5, 'rgba(255,255,255,0.12)');\n      sg.addColorStop(1,   'rgba(255,255,255,0)');\n      ctx.fillStyle = sg;\n      ctx.fillRect(0, Math.max(0, baseY - 4), W, H - Math.max(0, baseY - 4));\n    }\n  }\n\n  private drawRipples(): void {\n    const { ctx, rr, rg, rb } = this;\n    this.ripples = this.ripples.filter(r => r.opacity > 0 || r.radius === 0);\n\n    for (const r of this.ripples) {\n      r.radius += r.speed;\n      r.opacity = Math.max(0, 1 - r.radius / r.maxRadius);\n\n      /* Anillo principal */\n      ctx.beginPath();\n      ctx.arc(r.x, r.y, r.radius, 0, Math.PI * 2);\n      ctx.strokeStyle = `rgba(${rr},${rg},${rb},${r.opacity * 0.9})`;\n      ctx.lineWidth   = r.lineWidth;\n      ctx.stroke();\n\n      /* Segundo anillo interior más fino */\n      if (r.radius > 6) {\n        ctx.beginPath();\n        ctx.arc(r.x, r.y, r.radius * 0.65, 0, Math.PI * 2);\n        ctx.strokeStyle = `rgba(${rr},${rg},${rb},${r.opacity * 0.4})`;\n        ctx.lineWidth   = r.lineWidth * 0.5;\n        ctx.stroke();\n      }\n    }\n\n    /* Limpiar ripples agotados */\n    this.ripples = this.ripples.filter(r => r.opacity > 0);\n  }\n\n  /* ── Loop principal ── */\n  private loop(): void {\n    const tick = (): void => {\n      this.raf = requestAnimationFrame(tick);\n      const { ctx, W, H } = this;\n      this.t += 0.04;\n\n      /* Lerp fill */\n      const diff = this.targetFill - this.fill;\n      this.fill += diff * this.fillSpeed * 2.8;\n      if (Math.abs(diff) < 0.0005) this.fill = this.targetFill;\n\n      /* Shimmer avanza */\n      if (this.hovered && this.shimmerX < 1.6) {\n        this.shimmerX += 0.012;\n      }\n\n      /* Skip si todo en reposo */\n      if (this.fill <= 0.001 && this.ripples.length === 0) return;\n\n      ctx.clearRect(0, 0, W, H);\n      this.drawWave();\n      this.drawRipples();\n    };\n    this.raf = requestAnimationFrame(tick);\n  }\n\n  /* ── Cleanup ── */\n  destroy(): void {\n    cancelAnimationFrame(this.raf);\n  }\n}\n\n\n/* ============================================================\n   LIB-BUTTON-LIQUID — Web Component\n   ============================================================ */\n\n/**\n * Botón con física de agua en canvas.\n *\n * @prop variant  — 'ink' | 'washi' | 'kaki' | 'celadon' | 'ghost' | 'danger'\n * @prop size     — 'sm' | 'md' | 'lg'\n * @prop disabled — bloquea interacción y detiene el canvas\n * @prop loading  — muestra spinner, bloquea interacción\n * @prop dark     — ajusta colores en surface oscura\n * @prop block    — ancho 100%\n *\n * Slots: default · prefix · suffix\n * @fires ui-lib-click — {detail: { originalEvent: MouseEvent }}\n */\n@customElement('lib-button-liquid')\nexport class LibButtonLiquid extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(liquidCss)}`,\n  ];\n\n  @property({ type: String, reflect: true })\n  variant: LiquidVariant = 'ink';\n\n  @property({ type: String, reflect: true })\n  size: LiquidSize = 'md';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean, reflect: true })\n  block = false;\n\n  @query('.btn')\n  declare private _btn: HTMLButtonElement;\n\n  private _physics: WaterPhysics | null = null;\n  private _canvas:  HTMLCanvasElement   | null = null;\n  private _ro:      ResizeObserver      | null = null;\n\n  /* ── Lifecycle ── */\n\n  override firstUpdated(): void {\n    this._initCanvas();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    /* Si cambia la variante, reconstruir physics con nueva paleta */\n    if (changed.has('variant')) {\n      this._destroyCanvas();\n      this._initCanvas();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._destroyCanvas();\n    this._ro?.disconnect();\n  }\n\n  /* ── Canvas setup ── */\n\n  private _initCanvas(): void {\n    if (!this._btn) return;\n\n    /* Crear canvas y añadirlo como primer hijo del botón (bajo .btn-inner) */\n    const canvas   = document.createElement('canvas');\n    this._canvas   = canvas;\n    this._btn.insertBefore(canvas, this._btn.firstChild);\n\n    const palette  = LIQUID_PALETTES[this.variant];\n    this._physics  = new WaterPhysics(this._btn, canvas, palette.water, palette.ripple);\n\n    /* ResizeObserver para adaptar canvas al tamaño real del botón */\n    this._ro = new ResizeObserver((): void => this._physics?.resize());\n    this._ro.observe(this._btn);\n  }\n\n  private _destroyCanvas(): void {\n    this._physics?.destroy();\n    this._physics = null;\n    this._canvas?.remove();\n    this._canvas = null;\n    this._ro?.disconnect();\n    this._ro = null;\n  }\n\n  /* ── Eventos del canvas — llamados desde el template ── */\n\n  _onMouseEnter(e: MouseEvent): void {\n    if (this.disabled || this.loading) return;\n    const rect = this._btn.getBoundingClientRect();\n    this._physics?.onMouseEnter(e.clientX - rect.left, e.clientY - rect.top);\n  }\n\n  _onMouseLeave(): void {\n    this._physics?.onMouseLeave();\n  }\n\n  _onMouseDown(e: MouseEvent): void {\n    if (this.disabled || this.loading) return;\n    const rect = this._btn.getBoundingClientRect();\n    this._physics?.onMouseDown(e.clientX - rect.left, e.clientY - rect.top);\n\n    this.dispatchEvent(new CustomEvent('ui-lib-click', {\n      detail: { originalEvent: e },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /* ── Render ── */\n  protected override render(): TemplateResult {\n    return buttonLiquidTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-button-liquid': LibButtonLiquid;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAYA,MAAM,aAAa;AAAA,EAmCjB,YACE,KACA,QACA,OACA,QACA;AA9BF,SAAQ,OAAa;AACrB,SAAQ,aAAa;AACrB,SAAQ,YAAa;AACrB,SAAQ,WAAa;AACrB,SAAQ,IAAa;AACrB,SAAQ,UAAa;AACrB,SAAQ,MAAa;AAGrB,SAAiB,IAAK;AACtB,SAAiB,KAAK;AACtB,SAAiB,KAAK;AACtB,SAAiB,KAAK;AACtB,SAAiB,KAAK;AAEtB,SAAQ,IAAI;AACZ,SAAQ,IAAI;AAEZ,SAAQ,UAKH,CAAA;AAQH,SAAK,MAAS;AACd,SAAK,SAAS;AACd,SAAK,MAAS,OAAO,WAAW,IAAI;AACpC,KAAC,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,IAAI;AAC9B,KAAC,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,IAAI;AAE9B,SAAK,OAAA;AACL,SAAK,KAAA;AAAA,EACP;AAAA;AAAA,EAGA,SAAe;AACb,UAAM,IAAM,KAAK,IAAI,sBAAA;AACrB,UAAM,MAAM,OAAO,oBAAoB;AACvC,SAAK,IAAI,EAAE;AACX,SAAK,IAAI,EAAE;AACX,SAAK,OAAO,QAAiB,KAAK,IAAI;AACtC,SAAK,OAAO,SAAiB,KAAK,IAAI;AACtC,SAAK,OAAO,MAAM,QAAW,GAAG,KAAK,CAAC;AACtC,SAAK,OAAO,MAAM,SAAW,GAAG,KAAK,CAAC;AACtC,SAAK,IAAI,MAAM,KAAK,GAAG;AAAA,EACzB;AAAA;AAAA,EAGA,YACE,GAAW,GACX,EAAE,QAAQ,KAAK,MAAM,YAAY,IAAA,IACuB,IAClD;AACN,UAAM,OAAO,KAAK,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAChD,SAAK,QAAQ,KAAK;AAAA,MAChB;AAAA,MAAG;AAAA,MACH,QAAW;AAAA,MACX,WAAW,QAAQ,OAAO;AAAA,MAC1B;AAAA,MACA;AAAA,MACA,SAAW;AAAA,IAAA,CACZ;AAAA,EACH;AAAA;AAAA,EAGA,aAAa,GAAW,GAAiB;AACvC,SAAK,UAAa;AAClB,SAAK,aAAa;AAClB,SAAK,YAAa;AAClB,SAAK,WAAa;AAElB,SAAK,YAAY,GAAG,GAAG,EAAE,OAAO,KAAK,WAAW,KAAK;AACrD,eAAW,MAAY,KAAK,YAAY,GAAG,GAAG,EAAE,OAAO,GAAK,WAAW,IAAA,CAAK,GAAG,EAAE;AACjF,eAAW,MAAY,KAAK,YAAY,GAAG,GAAG,EAAE,OAAO,KAAK,WAAW,IAAA,CAAK,GAAG,GAAG;AAAA,EACpF;AAAA,EAEA,eAAqB;AACnB,SAAK,UAAa;AAClB,SAAK,aAAa;AAClB,SAAK,YAAa;AAAA,EACpB;AAAA,EAEA,YAAY,IAAY,IAAkB;AACxC,aAAS,IAAI,GAAG,IAAI,GAAG,KAAK;AAC1B,iBAAW,MAAY;AACrB,aAAK,YAAY,IAAI,IAAI;AAAA,UACvB,OAAW,IAAI,IAAI;AAAA,UACnB,MAAW,KAAK,IAAI;AAAA,UACpB,WAAW,IAAI,IAAI;AAAA,QAAA,CACpB;AAAA,MACH,GAAG,IAAI,EAAE;AAAA,IACX;AAAA,EACF;AAAA;AAAA,EAGQ,WAAiB;AACvB,UAAM,EAAE,KAAK,GAAG,GAAG,GAAG,IAAI,IAAI,IAAI,IAAI,GAAG,IAAI,IAAI,IAAI,SAAS;AAC9D,QAAI,QAAQ,KAAO;AAEnB,UAAM,QAAQ,KAAK,IAAI;AAGvB,QAAI,UAAA;AACJ,QAAI,OAAO,GAAG,CAAC;AACf,QAAI,OAAO,GAAG,KAAK;AACnB,aAAS,IAAI,GAAG,KAAK,GAAG,KAAK;AAC3B,YAAM,IAAI,QACN,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,EAAE,IAC5B,IAAI,OAAO,KAAK,IAAI,IAAI,KAAK,IAAI,EAAE;AACvC,UAAI,OAAO,GAAG,CAAC;AAAA,IACjB;AACA,QAAI,OAAO,GAAG,CAAC;AACf,QAAI,UAAA;AAGJ,UAAM,OAAO,IAAI,qBAAqB,GAAG,QAAQ,IAAI,GAAG,GAAG,CAAC;AAC5D,SAAK,aAAa,GAAK,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ;AACrD,SAAK,aAAa,KAAK,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ;AACrD,SAAK,aAAa,GAAK,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ;AACrD,QAAI,YAAY;AAChB,QAAI,KAAA;AAGJ,QAAI,KAAK,WAAW,QAAQ,KAAK,WAAW,KAAK;AAC/C,YAAM,KAAK,IAAI,KAAK;AACpB,YAAM,KAAK,IAAI,qBAAqB,KAAK,IAAI,GAAG,KAAK,IAAI,CAAC;AAC1D,SAAG,aAAa,GAAK,qBAAqB;AAC1C,SAAG,aAAa,KAAK,wBAAwB;AAC7C,SAAG,aAAa,GAAK,qBAAqB;AAC1C,UAAI,YAAY;AAChB,UAAI,SAAS,GAAG,KAAK,IAAI,GAAG,QAAQ,CAAC,GAAG,GAAG,IAAI,KAAK,IAAI,GAAG,QAAQ,CAAC,CAAC;AAAA,IACvE;AAAA,EACF;AAAA,EAEQ,cAAoB;AAC1B,UAAM,EAAE,KAAK,IAAI,IAAI,OAAO;AAC5B,SAAK,UAAU,KAAK,QAAQ,OAAO,CAAA,MAAK,EAAE,UAAU,KAAK,EAAE,WAAW,CAAC;AAEvE,eAAW,KAAK,KAAK,SAAS;AAC5B,QAAE,UAAU,EAAE;AACd,QAAE,UAAU,KAAK,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,SAAS;AAGlD,UAAI,UAAA;AACJ,UAAI,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,GAAG,KAAK,KAAK,CAAC;AAC1C,UAAI,cAAc,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,GAAG;AAC3D,UAAI,YAAc,EAAE;AACpB,UAAI,OAAA;AAGJ,UAAI,EAAE,SAAS,GAAG;AAChB,YAAI,UAAA;AACJ,YAAI,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,MAAM,GAAG,KAAK,KAAK,CAAC;AACjD,YAAI,cAAc,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,GAAG;AAC3D,YAAI,YAAc,EAAE,YAAY;AAChC,YAAI,OAAA;AAAA,MACN;AAAA,IACF;AAGA,SAAK,UAAU,KAAK,QAAQ,OAAO,CAAA,MAAK,EAAE,UAAU,CAAC;AAAA,EACvD;AAAA;AAAA,EAGQ,OAAa;AACnB,UAAM,OAAO,MAAY;AACvB,WAAK,MAAM,sBAAsB,IAAI;AACrC,YAAM,EAAE,KAAK,GAAG,EAAA,IAAM;AACtB,WAAK,KAAK;AAGV,YAAM,OAAO,KAAK,aAAa,KAAK;AACpC,WAAK,QAAQ,OAAO,KAAK,YAAY;AACrC,UAAI,KAAK,IAAI,IAAI,IAAI,KAAQ,MAAK,OAAO,KAAK;AAG9C,UAAI,KAAK,WAAW,KAAK,WAAW,KAAK;AACvC,aAAK,YAAY;AAAA,MACnB;AAGA,UAAI,KAAK,QAAQ,QAAS,KAAK,QAAQ,WAAW,EAAG;AAErD,UAAI,UAAU,GAAG,GAAG,GAAG,CAAC;AACxB,WAAK,SAAA;AACL,WAAK,YAAA;AAAA,IACP;AACA,SAAK,MAAM,sBAAsB,IAAI;AAAA,EACvC;AAAA;AAAA,EAGA,UAAgB;AACd,yBAAqB,KAAK,GAAG;AAAA,EAC/B;AACF;AAqBO,IAAM,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,UAAyB;AAGzB,SAAA,OAAmB;AAGnB,SAAA,WAAW;AAGX,SAAA,UAAU;AAGV,SAAA,OAAO;AAGP,SAAA,QAAQ;AAKR,SAAQ,WAAgC;AACxC,SAAQ,UAAuC;AAC/C,SAAQ,MAAuC;AAAA,EAAA;AAAA;AAAA,EAItC,eAAqB;AAC5B,SAAK,YAAA;AAAA,EACP;AAAA,EAES,QAAQ,SAAqC;AAEpD,QAAI,QAAQ,IAAI,SAAS,GAAG;AAC1B,WAAK,eAAA;AACL,WAAK,YAAA;AAAA,IACP;AAAA,EACF;AAAA,EAES,uBAA6B;;AACpC,UAAM,qBAAA;AACN,SAAK,eAAA;AACL,eAAK,QAAL,mBAAU;AAAA,EACZ;AAAA;AAAA,EAIQ,cAAoB;AAC1B,QAAI,CAAC,KAAK,KAAM;AAGhB,UAAM,SAAW,SAAS,cAAc,QAAQ;AAChD,SAAK,UAAY;AACjB,SAAK,KAAK,aAAa,QAAQ,KAAK,KAAK,UAAU;AAEnD,UAAM,UAAW,gBAAgB,KAAK,OAAO;AAC7C,SAAK,WAAY,IAAI,aAAa,KAAK,MAAM,QAAQ,QAAQ,OAAO,QAAQ,MAAM;AAGlF,SAAK,MAAM,IAAI,eAAe,MAAA;;AAAY,wBAAK,aAAL,mBAAe;AAAA,KAAQ;AACjE,SAAK,IAAI,QAAQ,KAAK,IAAI;AAAA,EAC5B;AAAA,EAEQ,iBAAuB;;AAC7B,eAAK,aAAL,mBAAe;AACf,SAAK,WAAW;AAChB,eAAK,YAAL,mBAAc;AACd,SAAK,UAAU;AACf,eAAK,QAAL,mBAAU;AACV,SAAK,MAAM;AAAA,EACb;AAAA;AAAA,EAIA,cAAc,GAAqB;;AACjC,QAAI,KAAK,YAAY,KAAK,QAAS;AACnC,UAAM,OAAO,KAAK,KAAK,sBAAA;AACvB,eAAK,aAAL,mBAAe,aAAa,EAAE,UAAU,KAAK,MAAM,EAAE,UAAU,KAAK;AAAA,EACtE;AAAA,EAEA,gBAAsB;;AACpB,eAAK,aAAL,mBAAe;AAAA,EACjB;AAAA,EAEA,aAAa,GAAqB;;AAChC,QAAI,KAAK,YAAY,KAAK,QAAS;AACnC,UAAM,OAAO,KAAK,KAAK,sBAAA;AACvB,eAAK,aAAL,mBAAe,YAAY,EAAE,UAAU,KAAK,MAAM,EAAE,UAAU,KAAK;AAEnE,SAAK,cAAc,IAAI,YAAY,gBAAgB;AAAA,MACjD,QAAQ,EAAE,eAAe,EAAA;AAAA,MACzB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA;AAAA,EAGmB,SAAyB;AAC1C,WAAO,qBAAqB,IAAI;AAAA,EAClC;AACF;AA1Ga,gBACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,SAAS,CAAC;AAC5B;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAN9B,gBAOX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAT9B,gBAUX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAZ/B,gBAaX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAf/B,gBAgBX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAlB/B,gBAmBX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GArB/B,gBAsBX,WAAA,SAAA,CAAA;AAGgB,gBAAA;AAAA,EADf,MAAM,MAAM;AAAA,GAxBF,gBAyBK,WAAA,QAAA,CAAA;AAzBL,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}
+{"version":3,"file":"index38.js","sources":["../src/components/atoms/select-option/lib-select-option.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { selectOptionTemplate } from './lib-select-option.html';\nimport optionCss from './lib-select-option.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-select-option\n *\n * Opción individual para usar dentro de lib-select.\n * Emite `option-selected` con { value, label } al hacer clic,\n * que lib-select captura desde el light DOM.\n *\n * @fires option-selected — { value: string, label: string }\n * @slot — Texto visible de la opción\n */\n@customElement('lib-select-option')\nexport class LibSelectOption extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(optionCss)}`,\n  ];\n\n  /** Valor interno que se comunica al select padre. */\n  @property({ type: String, reflect: true }) value = '';\n\n  /** Estado de selección — controlado por lib-select. */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /** Deshabilita la opción. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  override render(): TemplateResult {\n    return selectOptionTemplate({\n      value:       this.value,\n      selected:    this.selected,\n      disabled:    this.disabled,\n      handleClick: this._handleClick.bind(this),\n    });\n  }\n\n  private _handleClick(e: Event): void {\n    e.stopPropagation();\n    if (this.disabled) return;\n\n    this.dispatchEvent(\n      new CustomEvent<{ value: string; label: string }>('option-selected', {\n        detail: {\n          value: this.value,\n          label: this.textContent?.trim() ?? '',\n        },\n        bubbles:  true,\n        composed: true,\n      })\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-select-option': LibSelectOption;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAiBO,IAAM,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOsC,SAAA,QAAQ;AAGP,SAAA,WAAW;AAGX,SAAA,WAAW;AAAA,EAAA;AAAA,EAE9C,SAAyB;AAChC,WAAO,qBAAqB;AAAA,MAC1B,OAAa,KAAK;AAAA,MAClB,UAAa,KAAK;AAAA,MAClB,UAAa,KAAK;AAAA,MAClB,aAAa,KAAK,aAAa,KAAK,IAAI;AAAA,IAAA,CACzC;AAAA,EACH;AAAA,EAEQ,aAAa,GAAgB;;AACnC,MAAE,gBAAA;AACF,QAAI,KAAK,SAAU;AAEnB,SAAK;AAAA,MACH,IAAI,YAA8C,mBAAmB;AAAA,QACnE,QAAQ;AAAA,UACN,OAAO,KAAK;AAAA,UACZ,SAAO,UAAK,gBAAL,mBAAkB,WAAU;AAAA,QAAA;AAAA,QAErC,SAAU;AAAA,QACV,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AACF;AAvCa,gBACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,SAAS,CAAC;AAC5B;AAG2C,gBAAA;AAAA,EAA1C,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAP9B,gBAOgC,WAAA,SAAA,CAAA;AAGC,gBAAA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAV/B,gBAUiC,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAb/B,gBAaiC,WAAA,YAAA,CAAA;AAbjC,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}

package/dist/index39.js

@@ -1,8 +1,8 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
+import { skeletonTemplate } from "./index334.js";
+import skeletonCss from "./index335.js";
 import sharedTokens from "./index196.js";
-import glitchCss from "./index263.js";
-import { textGlitchTemplate } from "./index264.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,155 +13,48 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const KANA = "ア イ ウ エ オ カ キ ク ケ コ サ シ ス セ ソ タ チ ツ テ ト ナ ニ ヌ ネ ノ ハ ヒ フ ヘ ホ マ ミ ム メ モ ヤ ユ ヨ ラ リ ル レ ロ ワ ヲ ン ガ ギ グ ゲ ゴ " + "ザ ジ ズ ゼ ゾ ダ ヂ ヅ デ ド バ ビ ブ ベ ボ 渋 液 美 乱 進 間 静 陰 影 黒 白 墨 和 侘".split(" ");
-let LibTextGlitch = class extends LitElement {
+let LibSkeleton = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.text = "";
-    this.variant = "slice";
-    this.trigger = "hover";
-    this.active = false;
-    this._running = false;
-    this._boundMouseEnter = () => {
-      this._decodePlay();
-    };
-  }
-  /* ── Lifecycle ──────────────────────────────────────────── */
-  connectedCallback() {
-    super.connectedCallback();
-    this._setupDecode();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("mouseenter", this._boundMouseEnter);
-    clearTimeout(this._alwaysTimer);
-  }
-  updated(changed) {
-    const reInit = changed.has("variant") || changed.has("trigger") || changed.has("text");
-    if (reInit) {
-      this.removeEventListener("mouseenter", this._boundMouseEnter);
-      clearTimeout(this._alwaysTimer);
-      this._running = false;
-      this._setupDecode();
-    }
+    this.shape = "rect";
+    this.animation = "shimmer";
+    this.surface = "light";
+    this.width = "100%";
+    this.height = "";
   }
   render() {
-    return textGlitchTemplate({ text: this.text, variant: this.variant });
-  }
-  /* ── API pública ────────────────────────────────────────── */
-  /**
-   * Reproduce el efecto manualmente una vez.
-   * - Para `decode`: lanza el scramble de kanji.
-   * - Para `scan` / `redact`: activa [active] y lo retira al terminar.
-   * - Para `slice` / `shift` / `noise`: activa [active] (CSS bucle).
-   */
-  play() {
-    if (this.variant === "decode") {
-      this._decodePlay();
-      return;
-    }
-    this.active = true;
-    if (this.variant === "scan" || this.variant === "redact") {
-      const dur = this.variant === "scan" ? 620 : 720;
-      setTimeout(() => {
-        this.active = false;
-      }, dur);
-    }
-  }
-  /** Detiene el bucle `trigger="always"` y desactiva [active]. */
-  stop() {
-    clearTimeout(this._alwaysTimer);
-    this._running = false;
-    this.active = false;
-  }
-  /* ── Decode engine ──────────────────────────────────────── */
-  _setupDecode() {
-    if (this.variant !== "decode") return;
-    if (this.trigger === "hover") {
-      this.addEventListener("mouseenter", this._boundMouseEnter);
-    } else {
-      this.updateComplete.then(() => {
-        this._scheduleAlwaysDecode();
-      });
-    }
-  }
-  _scheduleAlwaysDecode() {
-    this._decodePlay();
-    const pause = Math.max([...this.text].length * 55 * 1.5, 400) + 2e3;
-    this._alwaysTimer = setTimeout(() => {
-      this._scheduleAlwaysDecode();
-    }, pause);
-  }
-  /**
-   * Motor de decodificación kanji.
-   *
-   * Cada char span se sustituye por un katakana/kanji aleatorio
-   * durante un número variable de frames, y luego se resuelve al
-   * carácter original. El orden de resolución es estocástico.
-   */
-  _decodePlay() {
-    if (this._running) return;
-    this._running = true;
-    const chars = Array.from(
-      this.renderRoot.querySelectorAll(".char")
-    );
-    if (chars.length === 0) {
-      this._running = false;
-      return;
-    }
-    const SCRAMBLE_CYCLES = 6;
-    const FRAME_MS = 55;
-    const delays = chars.map(
-      () => Math.floor(Math.random() * chars.length * SCRAMBLE_CYCLES * 0.6) + SCRAMBLE_CYCLES
-    );
-    let frame = 0;
-    const total = Math.max(...delays) + 2;
-    const tick = () => {
-      chars.forEach((span, i) => {
-        const orig = span.dataset["original"] ?? "";
-        if (frame < (delays[i] ?? 0)) {
-          if (orig.trim() === "" || orig === "·" || orig === "-") return;
-          span.textContent = KANA[Math.floor(Math.random() * KANA.length)] ?? orig;
-          span.classList.add("is-scrambling");
-        } else {
-          span.textContent = orig;
-          span.classList.remove("is-scrambling");
-        }
-      });
-      frame++;
-      if (frame < total) {
-        setTimeout(tick, FRAME_MS);
-      } else {
-        chars.forEach((span) => {
-          span.textContent = span.dataset["original"] ?? "";
-          span.classList.remove("is-scrambling");
-        });
-        this._running = false;
-      }
-    };
-    tick();
+    return skeletonTemplate({
+      shape: this.shape,
+      animation: this.animation,
+      surface: this.surface,
+      width: this.width,
+      height: this.height
+    });
   }
 };
-LibTextGlitch.styles = [
+LibSkeleton.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(glitchCss)}`
+  css`${unsafeCSS(skeletonCss)}`
 ];
 __decorateClass([
-  property({ type: String })
-], LibTextGlitch.prototype, "text", 2);
+  property({ type: String, reflect: true })
+], LibSkeleton.prototype, "shape", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibTextGlitch.prototype, "variant", 2);
+], LibSkeleton.prototype, "animation", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibTextGlitch.prototype, "trigger", 2);
+], LibSkeleton.prototype, "surface", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibTextGlitch.prototype, "active", 2);
-LibTextGlitch = __decorateClass([
-  customElement("lib-text-glitch")
-], LibTextGlitch);
+  property({ type: String })
+], LibSkeleton.prototype, "width", 2);
+__decorateClass([
+  property({ type: String })
+], LibSkeleton.prototype, "height", 2);
+LibSkeleton = __decorateClass([
+  customElement("lib-skeleton")
+], LibSkeleton);
 export {
-  LibTextGlitch
+  LibSkeleton
 };
 //# sourceMappingURL=index39.js.map

package/dist/index39.js.map

@@ -1 +1 @@
-{"version":3,"file":"index39.js","sources":["../src/components/atoms/text-glitch/lib-text-glitch.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport glitchCss from './lib-text-glitch.css?inline';\nimport { textGlitchTemplate } from './lib-text-glitch.html';\n\n/* ── Tipos públicos ─────────────────────────────────────────── */\n\n/** Variante visual del efecto de glitch. */\nexport type TextGlitchVariant = 'slice' | 'scan' | 'shift' | 'decode' | 'redact' | 'noise';\n\n/**\n * Modo de activación del efecto.\n * - `hover`  → se activa al pasar el cursor (default).\n * - `always` → se activa de forma continua al montar el componente.\n */\nexport type TextGlitchTrigger = 'hover' | 'always';\n\n/* ── Pool de caracteres para el decode ──────────────────────── */\n\nconst KANA =\n  'ア イ ウ エ オ カ キ ク ケ コ サ シ ス セ ソ タ チ ツ テ ト ナ ニ ヌ ネ ノ ' +\n  'ハ ヒ フ ヘ ホ マ ミ ム メ モ ヤ ユ ヨ ラ リ ル レ ロ ワ ヲ ン ガ ギ グ ゲ ゴ ' +\n  'ザ ジ ズ ゼ ゾ ダ ヂ ヅ デ ド バ ビ ブ ベ ボ 渋 液 美 乱 進 間 静 陰 影 黒 白 墨 和 侘'.split(' ');\n\n/**\n * @element lib-text-glitch\n *\n * @prop {string}              text    - Texto a renderizar y distorsionar.\n * @prop {TextGlitchVariant}   variant - Efecto visual: slice | scan | shift | decode | redact | noise.\n * @prop {TextGlitchTrigger}   trigger - Modo de activación: hover | always.\n * @prop {boolean}             active  - Activa el efecto programáticamente (reflectado en atributo).\n *\n * @method play()  - Reproduce el efecto una vez (scan / redact / decode).\n * @method stop()  - Detiene el bucle `trigger=\"always\"`.\n */\n@customElement('lib-text-glitch')\nexport class LibTextGlitch extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(glitchCss)}`,\n  ];\n\n  /* ── Props ──────────────────────────────────────────────── */\n\n  @property({ type: String })\n  text: string = '';\n\n  @property({ type: String, reflect: true })\n  variant: TextGlitchVariant = 'slice';\n\n  @property({ type: String, reflect: true })\n  trigger: TextGlitchTrigger = 'hover';\n\n  /** Activa el efecto desde el exterior (CSS reacciona a [active]). */\n  @property({ type: Boolean, reflect: true })\n  active: boolean = false;\n\n  /* ── Estado interno ─────────────────────────────────────── */\n\n  private _running = false;\n  private _alwaysTimer?: ReturnType<typeof setTimeout>;\n\n  /* Bound handler reutilizable para poder hacer removeEventListener */\n  private readonly _boundMouseEnter = (): void => { this._decodePlay(); };\n\n  /* ── Lifecycle ──────────────────────────────────────────── */\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._setupDecode();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('mouseenter', this._boundMouseEnter);\n    clearTimeout(this._alwaysTimer);\n  }\n\n  override updated(changed: PropertyValues): void {\n    const reInit =\n      changed.has('variant') ||\n      changed.has('trigger') ||\n      changed.has('text');\n\n    if (reInit) {\n      /* Limpieza del ciclo anterior */\n      this.removeEventListener('mouseenter', this._boundMouseEnter);\n      clearTimeout(this._alwaysTimer);\n      this._running = false;\n      this._setupDecode();\n    }\n  }\n\n  override render(): TemplateResult {\n    return textGlitchTemplate({ text: this.text, variant: this.variant });\n  }\n\n  /* ── API pública ────────────────────────────────────────── */\n\n  /**\n   * Reproduce el efecto manualmente una vez.\n   * - Para `decode`: lanza el scramble de kanji.\n   * - Para `scan` / `redact`: activa [active] y lo retira al terminar.\n   * - Para `slice` / `shift` / `noise`: activa [active] (CSS bucle).\n   */\n  play(): void {\n    if (this.variant === 'decode') {\n      this._decodePlay();\n      return;\n    }\n    this.active = true;\n    if (this.variant === 'scan' || this.variant === 'redact') {\n      const dur = this.variant === 'scan' ? 620 : 720;\n      setTimeout(() => { this.active = false; }, dur);\n    }\n  }\n\n  /** Detiene el bucle `trigger=\"always\"` y desactiva [active]. */\n  stop(): void {\n    clearTimeout(this._alwaysTimer);\n    this._running = false;\n    this.active = false;\n  }\n\n  /* ── Decode engine ──────────────────────────────────────── */\n\n  private _setupDecode(): void {\n    if (this.variant !== 'decode') return;\n\n    if (this.trigger === 'hover') {\n      this.addEventListener('mouseenter', this._boundMouseEnter);\n    } else {\n      /* always: esperamos el primer render completo para tener los .char */\n      this.updateComplete.then(() => { this._scheduleAlwaysDecode(); });\n    }\n  }\n\n  private _scheduleAlwaysDecode(): void {\n    this._decodePlay();\n    /* Pausa entre repeticiones: proporcional a la longitud del texto */\n    const pause = Math.max([...this.text].length * 55 * 1.5, 400) + 2000;\n    this._alwaysTimer = setTimeout(() => { this._scheduleAlwaysDecode(); }, pause);\n  }\n\n  /**\n   * Motor de decodificación kanji.\n   *\n   * Cada char span se sustituye por un katakana/kanji aleatorio\n   * durante un número variable de frames, y luego se resuelve al\n   * carácter original. El orden de resolución es estocástico.\n   */\n  private _decodePlay(): void {\n    if (this._running) return;\n    this._running = true;\n\n    const chars = Array.from(\n      this.renderRoot.querySelectorAll<HTMLElement>('.char')\n    );\n\n    if (chars.length === 0) {\n      this._running = false;\n      return;\n    }\n\n    const SCRAMBLE_CYCLES = 6;\n    const FRAME_MS        = 55;\n\n    /* Delay estocástico por carácter — no resuelven de izquierda a derecha */\n    const delays = chars.map(() =>\n      Math.floor(Math.random() * chars.length * SCRAMBLE_CYCLES * 0.6) + SCRAMBLE_CYCLES\n    );\n\n    let frame = 0;\n    const total = Math.max(...delays) + 2;\n\n    const tick = (): void => {\n      chars.forEach((span, i) => {\n        const orig = span.dataset['original'] ?? '';\n\n        if (frame < (delays[i] ?? 0)) {\n          /* Espacios y puntuación — no se scramblea */\n          if (orig.trim() === '' || orig === '·' || orig === '-') return;\n          span.textContent = KANA[Math.floor(Math.random() * KANA.length)] ?? orig;\n          span.classList.add('is-scrambling');\n        } else {\n          span.textContent = orig;\n          span.classList.remove('is-scrambling');\n        }\n      });\n\n      frame++;\n\n      if (frame < total) {\n        setTimeout(tick, FRAME_MS);\n      } else {\n        /* Garantía final — todos al original */\n        chars.forEach(span => {\n          span.textContent = span.dataset['original'] ?? '';\n          span.classList.remove('is-scrambling');\n        });\n        this._running = false;\n      }\n    };\n\n    tick();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-text-glitch': LibTextGlitch;\n  }\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"index39.js","sources":["../src/components/atoms/skeleton/lib-skeleton.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { LibSkeletonShape, LibSkeletonAnimation, LibSkeletonSurface } from './lib-skeleton.html';\nimport { skeletonTemplate } from './lib-skeleton.html';\nimport skeletonCss from './lib-skeleton.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-skeleton\n *\n * Bloque de carga que replica la arquitectura del contenido real.\n * Tres animaciones, tres superficies, diez formas semánticas.\n *\n * @slot — (vacío) El componente es puramente visual, sin contenido.\n *\n * @example — línea de texto\n * <lib-skeleton shape=\"line\" width=\"80%\"></lib-skeleton>\n *\n * @example — avatar 40px\n * <lib-skeleton shape=\"avatar\" width=\"40px\" height=\"40px\"></lib-skeleton>\n *\n * @example — dark + wave\n * <lib-skeleton shape=\"title\" surface=\"dark\" animation=\"wave\" width=\"60%\"></lib-skeleton>\n *\n * @example — kaki + pulse\n * <lib-skeleton shape=\"img\" surface=\"kaki\" animation=\"pulse\"></lib-skeleton>\n */\n@customElement('lib-skeleton')\nexport class LibSkeleton extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(skeletonCss)}`,\n  ];\n\n  /**\n   * Forma semántica del bloque.\n   * Cada shape tiene una altura por defecto en CSS:\n   * - line   : 13px\n   * - title  : 22px\n   * - h1     : 36px\n   * - avatar : border-radius full (width/height obligatorio)\n   * - icon   : border-radius sm  (width/height obligatorio)\n   * - btn    : 36px\n   * - badge  : 20px\n   * - pill   : 22px, border-radius full\n   * - img    : 160px\n   * - rect   : sin altura — usar `height` prop\n   */\n  @property({ type: String, reflect: true })\n  shape: LibSkeletonShape = 'rect';\n\n  /**\n   * Tipo de animación.\n   * - shimmer : barrido de luz lateral (default)\n   * - wave    : barrido más lento y orgánico\n   * - pulse   : opacidad, sin movimiento\n   */\n  @property({ type: String, reflect: true })\n  animation: LibSkeletonAnimation = 'shimmer';\n\n  /**\n   * Superficie de color.\n   * - light : washi-200 → washi-100 (default)\n   * - dark  : washi-800 → washi-700\n   * - kaki  : kaki-200  → kaki-100\n   */\n  @property({ type: String, reflect: true })\n  surface: LibSkeletonSurface = 'light';\n\n  /** Anchura del bloque. Default: 100% */\n  @property({ type: String })\n  width = '100%';\n\n  /**\n   * Altura del bloque.\n   * Si no se especifica, el CSS usa la altura propia de cada `shape`.\n   * Obligatorio para `avatar`, `icon` y `rect`.\n   */\n  @property({ type: String })\n  height = '';\n\n  override render(): TemplateResult {\n    return skeletonTemplate({\n      shape:     this.shape,\n      animation: this.animation,\n      surface:   this.surface,\n      width:     this.width,\n      height:    this.height,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-skeleton': LibSkeleton;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA4BO,IAAM,cAAN,cAA0B,WAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AAqBL,SAAA,QAA0B;AAS1B,SAAA,YAAkC;AASlC,SAAA,UAA8B;AAI9B,SAAA,QAAQ;AAQR,SAAA,SAAS;AAAA,EAAA;AAAA,EAEA,SAAyB;AAChC,WAAO,iBAAiB;AAAA,MACtB,OAAW,KAAK;AAAA,MAChB,WAAW,KAAK;AAAA,MAChB,SAAW,KAAK;AAAA,MAChB,OAAW,KAAK;AAAA,MAChB,QAAW,KAAK;AAAA,IAAA,CACjB;AAAA,EACH;AACF;AA9Da,YACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,WAAW,CAAC;AAC9B;AAiBA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GApB9B,YAqBX,WAAA,SAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA7B9B,YA8BX,WAAA,aAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAtC9B,YAuCX,WAAA,WAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1Cf,YA2CX,WAAA,SAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlDf,YAmDX,WAAA,UAAA,CAAA;AAnDW,cAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,WAAA;"}