@shibui-ui/ui 1.5.5

package/dist/index40.js

@@ -0,0 +1,422 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, query, customElement } from "lit/decorators.js";
+import backgroundCss from "./index265.js";
+import sharedTokens from "./index196.js";
+import { backgroundTemplate } from "./index266.js";
+import { BG_CANVAS_VARIANTS } from "./index267.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LibBackground = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "washi";
+    this.paused = false;
+    this._raf = 0;
+    this._ro = null;
+  }
+  /* ── Ciclo de vida ── */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._stopCanvas();
+  }
+  updated(changed) {
+    if (changed.has("variant")) {
+      this._stopCanvas();
+      if (BG_CANVAS_VARIANTS.has(this.variant)) {
+        requestAnimationFrame(() => this._startCanvas());
+      }
+    }
+  }
+  /* ── Canvas lifecycle ── */
+  _stopCanvas() {
+    if (this._raf) {
+      cancelAnimationFrame(this._raf);
+      this._raf = 0;
+    }
+    if (this._ro) {
+      this._ro.disconnect();
+      this._ro = null;
+    }
+  }
+  _startCanvas() {
+    const canvas = this._canvas;
+    if (!canvas) return;
+    switch (this.variant) {
+      case "particles":
+        this._initParticles(canvas);
+        break;
+      case "rain":
+        this._initRain(canvas);
+        break;
+      case "wave-mesh":
+        this._initWaveMesh(canvas);
+        break;
+      case "constellation":
+        this._initConstellation(canvas);
+        break;
+      case "fireflies":
+        this._initFireflies(canvas);
+        break;
+      case "ink-wash":
+        this._initInkWash(canvas);
+        break;
+    }
+  }
+  /* ── Canvas: Particle Field ── */
+  _initParticles(canvas) {
+    const ctx = canvas.getContext("2d");
+    const host = this.renderRoot.host;
+    let W = 0, H = 0;
+    const COUNT = 55;
+    const COLORS = ["rgba(217,114,52,", "rgba(78,148,130,", "rgba(250,247,244,"];
+    let pts = [];
+    const resize = () => {
+      W = canvas.width = host.clientWidth;
+      H = canvas.height = host.clientHeight;
+      pts = Array.from({ length: COUNT }, () => ({
+        x: Math.random() * W,
+        y: Math.random() * H,
+        r: Math.random() * 1.5 + 0.3,
+        vx: (Math.random() - 0.5) * 0.25,
+        vy: (Math.random() - 0.5) * 0.25,
+        a: Math.random() * 0.4 + 0.15,
+        // ✅ Fix: COLORS es string[] → el acceso ya no devuelve undefined
+        c: COLORS[Math.floor(Math.random() * COLORS.length)] ?? "rgba(250,247,244,"
+      }));
+    };
+    const draw = () => {
+      ctx.clearRect(0, 0, W, H);
+      for (let i = 0; i < pts.length; i++) {
+        for (let j = i + 1; j < pts.length; j++) {
+          const pi = pts[i];
+          const pj = pts[j];
+          const dx = pi.x - pj.x;
+          const dy = pi.y - pj.y;
+          const d = Math.sqrt(dx * dx + dy * dy);
+          if (d < 90) {
+            ctx.beginPath();
+            ctx.moveTo(pi.x, pi.y);
+            ctx.lineTo(pj.x, pj.y);
+            ctx.strokeStyle = `rgba(250,247,244,${0.04 * (1 - d / 90)})`;
+            ctx.lineWidth = 0.5;
+            ctx.stroke();
+          }
+        }
+      }
+      pts.forEach((p) => {
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+        ctx.fillStyle = `${p.c}${p.a})`;
+        ctx.fill();
+        p.x += p.vx;
+        p.y += p.vy;
+        if (p.x < 0 || p.x > W) p.vx *= -1;
+        if (p.y < 0 || p.y > H) p.vy *= -1;
+      });
+      this._raf = requestAnimationFrame(draw);
+    };
+    this._ro = new ResizeObserver(resize);
+    this._ro.observe(host);
+    resize();
+    draw();
+  }
+  _initFireflies(canvas) {
+    const ctx = canvas.getContext("2d");
+    const host = this.renderRoot.host;
+    let W = 0, H = 0;
+    const COUNT = 32;
+    const COLORS = [
+      "rgba(250,247,244,",
+      "rgba(250,247,244,",
+      "rgba(217,114,52,",
+      "rgba(78,148,130,"
+    ];
+    let flies = [];
+    const resize = () => {
+      W = canvas.width = host.clientWidth;
+      H = canvas.height = host.clientHeight;
+      flies = Array.from({ length: COUNT }, () => ({
+        x: Math.random() * W,
+        y: Math.random() * H,
+        r: Math.random() * 2 + 0.8,
+        a: Math.random(),
+        da: (Math.random() * 8e-3 + 3e-3) * (Math.random() > 0.5 ? 1 : -1),
+        dx: (Math.random() - 0.5) * 0.18,
+        dy: -(Math.random() * 0.25 + 0.08),
+        phase: Math.random() * Math.PI * 2,
+        col: COLORS[Math.floor(Math.random() * COLORS.length)] ?? "rgba(250,247,244,"
+      }));
+    };
+    const draw = () => {
+      ctx.fillStyle = "rgba(8,6,4,0.14)";
+      ctx.fillRect(0, 0, W, H);
+      flies.forEach((f) => {
+        f.phase += 0.018;
+        f.a += f.da;
+        if (f.a > 1 || f.a < 0) {
+          f.da *= -1;
+          f.a = Math.max(0, Math.min(1, f.a));
+        }
+        f.x += f.dx + Math.sin(f.phase) * 0.28;
+        f.y += f.dy;
+        if (f.y < -10) {
+          f.y = H + 10;
+          f.x = Math.random() * W;
+        }
+        if (f.x < -10) f.x = W + 10;
+        if (f.x > W + 10) f.x = -10;
+        const grd = ctx.createRadialGradient(f.x, f.y, 0, f.x, f.y, f.r * 5);
+        grd.addColorStop(0, `${f.col}${f.a * 0.85})`);
+        grd.addColorStop(1, `${f.col}0)`);
+        ctx.beginPath();
+        ctx.arc(f.x, f.y, f.r * 5, 0, Math.PI * 2);
+        ctx.fillStyle = grd;
+        ctx.fill();
+        ctx.beginPath();
+        ctx.arc(f.x, f.y, f.r, 0, Math.PI * 2);
+        ctx.fillStyle = `${f.col}${f.a})`;
+        ctx.fill();
+      });
+      this._raf = requestAnimationFrame(draw);
+    };
+    this._ro = new ResizeObserver(resize);
+    this._ro.observe(host);
+    resize();
+    draw();
+  }
+  _initInkWash(canvas) {
+    const ctx = canvas.getContext("2d");
+    const host = this.renderRoot.host;
+    let W = 0, H = 0, t = 0;
+    let blobs = [];
+    const resize = () => {
+      W = canvas.width = host.clientWidth;
+      H = canvas.height = host.clientHeight;
+      const base = Math.min(W, H);
+      blobs = [
+        { cx: 0.28, cy: 0.42, r: base * 0.24, speed: 1, offset: 0, color: "rgba(175,150,120,0.07)" },
+        { cx: 0.68, cy: 0.58, r: base * 0.2, speed: 1.3, offset: 1.2, color: "rgba(155,135,108,0.06)" },
+        { cx: 0.5, cy: 0.28, r: base * 0.17, speed: 0.7, offset: 2.5, color: "rgba(184,90,30,0.04)" },
+        { cx: 0.18, cy: 0.72, r: base * 0.15, speed: 1.1, offset: 3.8, color: "rgba(78,148,130,0.04)" },
+        { cx: 0.82, cy: 0.32, r: base * 0.13, speed: 0.85, offset: 5, color: "rgba(175,150,120,0.05)" }
+      ];
+    };
+    const drawBlob = (b) => {
+      const pts = 44;
+      const phase = t * b.speed + b.offset;
+      ctx.beginPath();
+      for (let i = 0; i <= pts; i++) {
+        const angle = i / pts * Math.PI * 2;
+        const noise = Math.sin(angle * 3 + phase) * b.r * 0.14 + Math.cos(angle * 2 - phase * 0.8) * b.r * 0.09 + Math.sin(angle * 5 + phase * 1.4) * b.r * 0.05;
+        const x = b.cx * W + (b.r + noise) * Math.cos(angle);
+        const y = b.cy * H + (b.r + noise) * Math.sin(angle);
+        i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+      }
+      ctx.closePath();
+      ctx.fillStyle = b.color;
+      ctx.fill();
+    };
+    const draw = () => {
+      ctx.clearRect(0, 0, W, H);
+      ctx.fillStyle = "#FAF7F4";
+      ctx.fillRect(0, 0, W, H);
+      blobs.forEach(drawBlob);
+      t += 28e-4;
+      this._raf = requestAnimationFrame(draw);
+    };
+    this._ro = new ResizeObserver(resize);
+    this._ro.observe(host);
+    resize();
+    draw();
+  }
+  /* ── Canvas: Rain Lines ── */
+  _initRain(canvas) {
+    const ctx = canvas.getContext("2d");
+    const host = this.renderRoot.host;
+    let W = 0, H = 0;
+    const COUNT = 40;
+    let drops = [];
+    const resize = () => {
+      W = canvas.width = host.clientWidth;
+      H = canvas.height = host.clientHeight;
+      drops = Array.from({ length: COUNT }, () => ({
+        x: Math.random() * W,
+        y: Math.random() * H - H,
+        len: Math.random() * 22 + 8,
+        v: Math.random() * 1.8 + 0.8,
+        a: Math.random() * 0.2 + 0.04,
+        col: Math.random() > 0.85 ? "rgba(217,114,52," : "rgba(250,247,244,"
+      }));
+    };
+    const draw = () => {
+      ctx.fillStyle = "rgba(14,10,7,0.18)";
+      ctx.fillRect(0, 0, W, H);
+      drops.forEach((d) => {
+        ctx.beginPath();
+        ctx.moveTo(d.x, d.y);
+        ctx.lineTo(d.x - d.len * 0.1, d.y + d.len);
+        const g = ctx.createLinearGradient(d.x, d.y, d.x, d.y + d.len);
+        g.addColorStop(0, `${d.col}0)`);
+        g.addColorStop(0.5, `${d.col}${d.a})`);
+        g.addColorStop(1, `${d.col}0)`);
+        ctx.strokeStyle = g;
+        ctx.lineWidth = 0.8;
+        ctx.stroke();
+        d.y += d.v;
+        if (d.y > H + d.len) {
+          d.y = -d.len;
+          d.x = Math.random() * W;
+        }
+      });
+      this._raf = requestAnimationFrame(draw);
+    };
+    this._ro = new ResizeObserver(resize);
+    this._ro.observe(host);
+    resize();
+    draw();
+  }
+  /* ── Canvas: Wave Mesh ── */
+  _initWaveMesh(canvas) {
+    const ctx = canvas.getContext("2d");
+    const host = this.renderRoot.host;
+    let W = 0, H = 0, t = 0;
+    const COLS = 16, ROWS = 10;
+    const resize = () => {
+      W = canvas.width = host.clientWidth;
+      H = canvas.height = host.clientHeight;
+    };
+    const draw = () => {
+      ctx.clearRect(0, 0, W, H);
+      ctx.fillStyle = "#FAF7F4";
+      ctx.fillRect(0, 0, W, H);
+      const cw = W / (COLS - 1);
+      const ch = H / (ROWS - 1);
+      for (let r = 0; r < ROWS; r++) {
+        ctx.beginPath();
+        for (let c = 0; c < COLS; c++) {
+          const wave = Math.sin((c / COLS + t) * Math.PI * 2) * 12 + Math.cos((r / ROWS + t * 0.7) * Math.PI * 2) * 8;
+          const x = c * cw;
+          const y = r * ch + wave;
+          c === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+        }
+        ctx.strokeStyle = `rgba(160,140,118,${0.08 + Math.sin(r / ROWS * Math.PI) * 0.06})`;
+        ctx.lineWidth = 0.8;
+        ctx.stroke();
+      }
+      for (let c = 0; c < COLS; c++) {
+        ctx.beginPath();
+        for (let r = 0; r < ROWS; r++) {
+          const wave = Math.sin((c / COLS + t) * Math.PI * 2) * 12 + Math.cos((r / ROWS + t * 0.7) * Math.PI * 2) * 8;
+          const x = c * cw;
+          const y = r * ch + wave;
+          r === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+        }
+        ctx.strokeStyle = `rgba(160,140,118,${0.06 + Math.sin(c / COLS * Math.PI) * 0.04})`;
+        ctx.lineWidth = 0.8;
+        ctx.stroke();
+      }
+      t += 3e-3;
+      this._raf = requestAnimationFrame(draw);
+    };
+    this._ro = new ResizeObserver(resize);
+    this._ro.observe(host);
+    resize();
+    draw();
+  }
+  /* ── Canvas: Constellation ── */
+  _initConstellation(canvas) {
+    const ctx = canvas.getContext("2d");
+    const host = this.renderRoot.host;
+    let W = 0, H = 0;
+    const COUNT = 70;
+    let stars = [];
+    const resize = () => {
+      W = canvas.width = host.clientWidth;
+      H = canvas.height = host.clientHeight;
+      stars = Array.from({ length: COUNT }, () => ({
+        x: Math.random() * W,
+        y: Math.random() * H,
+        r: Math.random() * 1.2 + 0.2,
+        a: Math.random() * 0.5 + 0.1,
+        pa: Math.random() * Math.PI * 2,
+        ps: Math.random() * 8e-3 + 2e-3,
+        col: Math.random() > 0.9 ? [217, 114, 52] : Math.random() > 0.85 ? [78, 148, 130] : [250, 247, 244]
+      }));
+    };
+    const draw = () => {
+      ctx.fillStyle = "rgba(10,8,6,0.22)";
+      ctx.fillRect(0, 0, W, H);
+      for (let i = 0; i < stars.length; i++) {
+        for (let j = i + 1; j < stars.length; j++) {
+          const si = stars[i];
+          const sj = stars[j];
+          const dx = si.x - sj.x;
+          const dy = si.y - sj.y;
+          const d = Math.sqrt(dx * dx + dy * dy);
+          if (d < 110) {
+            ctx.beginPath();
+            ctx.moveTo(si.x, si.y);
+            ctx.lineTo(sj.x, sj.y);
+            ctx.strokeStyle = `rgba(250,247,244,${(1 - d / 110) * 0.07})`;
+            ctx.lineWidth = 0.6;
+            ctx.stroke();
+          }
+        }
+      }
+      stars.forEach((s) => {
+        s.pa += s.ps;
+        const pulse = Math.sin(s.pa) * 0.3 + 0.7;
+        ctx.beginPath();
+        ctx.arc(s.x, s.y, s.r * pulse, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(${s.col.join(",")},${s.a * pulse})`;
+        ctx.fill();
+        if (s.a > 0.4) {
+          ctx.beginPath();
+          ctx.arc(s.x, s.y, s.r * 3 * pulse, 0, Math.PI * 2);
+          ctx.fillStyle = `rgba(${s.col.join(",")},${s.a * 0.06 * pulse})`;
+          ctx.fill();
+        }
+      });
+      this._raf = requestAnimationFrame(draw);
+    };
+    this._ro = new ResizeObserver(resize);
+    this._ro.observe(host);
+    resize();
+    draw();
+  }
+  /* ── Render ── */
+  render() {
+    return backgroundTemplate({
+      variant: this.variant,
+      isCanvas: BG_CANVAS_VARIANTS.has(this.variant)
+    });
+  }
+};
+LibBackground.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(backgroundCss)}`
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibBackground.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibBackground.prototype, "paused", 2);
+__decorateClass([
+  query(".bg-canvas")
+], LibBackground.prototype, "_canvas", 2);
+LibBackground = __decorateClass([
+  customElement("lib-background")
+], LibBackground);
+export {
+  LibBackground
+};
+//# sourceMappingURL=index40.js.map

package/dist/index40.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index40.js","sources":["../src/components/atoms/background/lib-background.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport backgroundCss from './lib-background.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport { backgroundTemplate } from './lib-background.html';\nimport { BG_CANVAS_VARIANTS } from './lib-background.types';\nimport type { LibBackgroundVariant } from './lib-background.types';\n\n/**\n * @element lib-background\n *\n * Fondo decorativo con 34 variantes. Úsalo como contenedor raíz\n * de secciones, heroes, cards o paneles. El contenido se coloca\n * en el slot por defecto.\n *\n * @prop {LibBackgroundVariant} variant — Fondo activo (default: 'washi')\n * @prop {boolean}              paused  — Pausa animaciones CSS (a11y)\n *\n * @csspart base    — div de fondo CSS\n * @csspart overlay — div de overlay / grano / animación\n * @csspart canvas  — canvas 2D generativo\n * @csspart content — contenedor del slot\n *\n * @slot — Contenido que se renderiza sobre el fondo\n */\n@customElement('lib-background')\nexport class LibBackground extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(backgroundCss)}`,\n  ];\n\n  /* ── Props públicas ── */\n\n  @property({ type: String, reflect: true })\n  variant: LibBackgroundVariant = 'washi';\n\n  @property({ type: Boolean, reflect: true })\n  paused = false;\n\n  /* ── Canvas internal state ── */\n\n  @query('.bg-canvas') private declare _canvas: HTMLCanvasElement;\n\n  private _raf = 0;\n  private _ro: ResizeObserver | null = null;\n\n  /* ── Ciclo de vida ── */\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._stopCanvas();\n  }\n\n  protected override updated(changed: Map<PropertyKey, unknown>): void {\n    if (changed.has('variant')) {\n      this._stopCanvas();\n      if (BG_CANVAS_VARIANTS.has(this.variant)) {\n        // Esperar al next tick para que el canvas exista en el DOM\n        requestAnimationFrame((): void => this._startCanvas());\n      }\n    }\n  }\n\n  /* ── Canvas lifecycle ── */\n\n  private _stopCanvas(): void {\n    if (this._raf) { cancelAnimationFrame(this._raf); this._raf = 0; }\n    if (this._ro)  { this._ro.disconnect(); this._ro = null; }\n  }\n\n  private _startCanvas(): void {\n    const canvas = this._canvas;\n    if (!canvas) return;\n \n    switch (this.variant) {\n      case 'particles':     this._initParticles(canvas);     break;\n      case 'rain':          this._initRain(canvas);           break;\n      case 'wave-mesh':     this._initWaveMesh(canvas);       break;\n      case 'constellation': this._initConstellation(canvas);  break;\n      case 'fireflies':     this._initFireflies(canvas);      break;\n      case 'ink-wash':      this._initInkWash(canvas);        break;\n      default: break;\n    }\n  }\n\n  /* ── Canvas: Particle Field ── */\n  private _initParticles(canvas: HTMLCanvasElement): void {\n    const ctx  = canvas.getContext('2d')!;\n    // ✅ Fix: renderRoot es ShadowRoot en runtime — cast explícito para acceder a .host\n    const host = ((this.renderRoot as ShadowRoot).host as HTMLElement);\n    let W = 0, H = 0;\n\n    const COUNT  = 55;\n    // ✅ Fix: tipo explícito string[] — evita string | undefined en el acceso por índice\n    const COLORS: string[] = ['rgba(217,114,52,', 'rgba(78,148,130,', 'rgba(250,247,244,'];\n\n    type Particle = { x:number; y:number; r:number; vx:number; vy:number; a:number; c:string };\n    let pts: Particle[] = [];\n\n    const resize = (): void => {\n      W = canvas.width  = host.clientWidth;\n      H = canvas.height = host.clientHeight;\n      pts = Array.from({ length: COUNT }, (): Particle => ({\n        x:  Math.random() * W,\n        y:  Math.random() * H,\n        r:  Math.random() * 1.5 + 0.3,\n        vx: (Math.random() - 0.5) * 0.25,\n        vy: (Math.random() - 0.5) * 0.25,\n        a:  Math.random() * 0.4 + 0.15,\n        // ✅ Fix: COLORS es string[] → el acceso ya no devuelve undefined\n        c:  COLORS[Math.floor(Math.random() * COLORS.length)] ?? 'rgba(250,247,244,',\n      }));\n    };\n\n    const draw = (): void => {\n      ctx.clearRect(0, 0, W, H);\n      for (let i = 0; i < pts.length; i++) {\n        for (let j = i + 1; j < pts.length; j++) {\n          // ✅ Fix: destructurar con ! — los índices son seguros por los límites del bucle\n          const pi = pts[i]!;\n          const pj = pts[j]!;\n          const dx = pi.x - pj.x;\n          const dy = pi.y - pj.y;\n          const d  = Math.sqrt(dx * dx + dy * dy);\n          if (d < 90) {\n            ctx.beginPath();\n            ctx.moveTo(pi.x, pi.y);\n            ctx.lineTo(pj.x, pj.y);\n            ctx.strokeStyle = `rgba(250,247,244,${0.04 * (1 - d / 90)})`;\n            ctx.lineWidth = 0.5;\n            ctx.stroke();\n          }\n        }\n      }\n      pts.forEach(p => {\n        ctx.beginPath();\n        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\n        ctx.fillStyle = `${p.c}${p.a})`;\n        ctx.fill();\n        p.x += p.vx;\n        p.y += p.vy;\n        if (p.x < 0 || p.x > W) p.vx *= -1;\n        if (p.y < 0 || p.y > H) p.vy *= -1;\n      });\n      this._raf = requestAnimationFrame(draw);\n    };\n\n    this._ro = new ResizeObserver(resize);\n    this._ro.observe(host);\n    resize();\n    draw();\n  }\n\n  private _initFireflies(canvas: HTMLCanvasElement): void {\n    const ctx  = canvas.getContext('2d')!;\n    const host = (this.renderRoot as ShadowRoot).host as HTMLElement;\n    let W = 0, H = 0;\n \n    const COUNT = 32;\n    const COLORS: string[] = [\n      'rgba(250,247,244,',\n      'rgba(250,247,244,',\n      'rgba(217,114,52,',\n      'rgba(78,148,130,',\n    ];\n \n    type Fly = {\n      x: number; y: number; r: number;\n      a: number; da: number;\n      dx: number; dy: number;\n      phase: number; col: string;\n    };\n    let flies: Fly[] = [];\n \n    const resize = (): void => {\n      W = canvas.width  = host.clientWidth;\n      H = canvas.height = host.clientHeight;\n      flies = Array.from({ length: COUNT }, (): Fly => ({\n        x:     Math.random() * W,\n        y:     Math.random() * H,\n        r:     Math.random() * 2 + 0.8,\n        a:     Math.random(),\n        da:    (Math.random() * 0.008 + 0.003) * (Math.random() > 0.5 ? 1 : -1),\n        dx:    (Math.random() - 0.5) * 0.18,\n        dy:    -(Math.random() * 0.25 + 0.08),\n        phase: Math.random() * Math.PI * 2,\n        col:   COLORS[Math.floor(Math.random() * COLORS.length)] ?? 'rgba(250,247,244,',\n      }));\n    };\n \n    const draw = (): void => {\n      ctx.fillStyle = 'rgba(8,6,4,0.14)';\n      ctx.fillRect(0, 0, W, H);\n \n      flies.forEach(f => {\n        f.phase += 0.018;\n        f.a     += f.da;\n        if (f.a > 1 || f.a < 0) { f.da *= -1; f.a = Math.max(0, Math.min(1, f.a)); }\n \n        f.x += f.dx + Math.sin(f.phase) * 0.28;\n        f.y += f.dy;\n \n        if (f.y < -10)     { f.y = H + 10; f.x = Math.random() * W; }\n        if (f.x < -10)     f.x = W + 10;\n        if (f.x > W + 10)  f.x = -10;\n \n        /* Glow halo */\n        const grd = ctx.createRadialGradient(f.x, f.y, 0, f.x, f.y, f.r * 5);\n        grd.addColorStop(0, `${f.col}${f.a * 0.85})`);\n        grd.addColorStop(1, `${f.col}0)`);\n        ctx.beginPath();\n        ctx.arc(f.x, f.y, f.r * 5, 0, Math.PI * 2);\n        ctx.fillStyle = grd;\n        ctx.fill();\n \n        /* Core dot */\n        ctx.beginPath();\n        ctx.arc(f.x, f.y, f.r, 0, Math.PI * 2);\n        ctx.fillStyle = `${f.col}${f.a})`;\n        ctx.fill();\n      });\n \n      this._raf = requestAnimationFrame(draw);\n    };\n \n    this._ro = new ResizeObserver(resize);\n    this._ro.observe(host);\n    resize();\n    draw();\n  }\n\n  private _initInkWash(canvas: HTMLCanvasElement): void {\n    const ctx  = canvas.getContext('2d')!;\n    const host = (this.renderRoot as ShadowRoot).host as HTMLElement;\n    let W = 0, H = 0, t = 0;\n \n    type Blob = { cx: number; cy: number; r: number; speed: number; offset: number; color: string };\n    let blobs: Blob[] = [];\n \n    const resize = (): void => {\n      W = canvas.width  = host.clientWidth;\n      H = canvas.height = host.clientHeight;\n      const base = Math.min(W, H);\n      blobs = [\n        { cx: 0.28, cy: 0.42, r: base * 0.24, speed: 1.0,  offset: 0,   color: 'rgba(175,150,120,0.07)' },\n        { cx: 0.68, cy: 0.58, r: base * 0.20, speed: 1.3,  offset: 1.2, color: 'rgba(155,135,108,0.06)' },\n        { cx: 0.50, cy: 0.28, r: base * 0.17, speed: 0.7,  offset: 2.5, color: 'rgba(184,90,30,0.04)'   },\n        { cx: 0.18, cy: 0.72, r: base * 0.15, speed: 1.1,  offset: 3.8, color: 'rgba(78,148,130,0.04)'  },\n        { cx: 0.82, cy: 0.32, r: base * 0.13, speed: 0.85, offset: 5.0, color: 'rgba(175,150,120,0.05)' },\n      ];\n    };\n \n    const drawBlob = (b: Blob): void => {\n      const pts = 44;\n      const phase = t * b.speed + b.offset;\n      ctx.beginPath();\n      for (let i = 0; i <= pts; i++) {\n        const angle = (i / pts) * Math.PI * 2;\n        const noise =\n          Math.sin(angle * 3 + phase) * b.r * 0.14\n          + Math.cos(angle * 2 - phase * 0.8) * b.r * 0.09\n          + Math.sin(angle * 5 + phase * 1.4) * b.r * 0.05;\n        const x = b.cx * W + (b.r + noise) * Math.cos(angle);\n        const y = b.cy * H + (b.r + noise) * Math.sin(angle);\n        i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);\n      }\n      ctx.closePath();\n      ctx.fillStyle = b.color;\n      ctx.fill();\n    };\n \n    const draw = (): void => {\n      ctx.clearRect(0, 0, W, H);\n      ctx.fillStyle = '#FAF7F4';\n      ctx.fillRect(0, 0, W, H);\n \n      blobs.forEach(drawBlob);\n \n      t += 0.0028;\n      this._raf = requestAnimationFrame(draw);\n    };\n \n    this._ro = new ResizeObserver(resize);\n    this._ro.observe(host);\n    resize();\n    draw();\n  }\n\n  /* ── Canvas: Rain Lines ── */\n  private _initRain(canvas: HTMLCanvasElement): void {\n    const ctx  = canvas.getContext('2d')!;\n    const host = (this.renderRoot as ShadowRoot).host as HTMLElement;\n    let W = 0, H = 0;\n\n    const COUNT = 40;\n    type Drop = { x:number; y:number; len:number; v:number; a:number; col:string };\n    let drops: Drop[] = [];\n\n    const resize = (): void => {\n      W = canvas.width  = host.clientWidth;\n      H = canvas.height = host.clientHeight;\n      drops = Array.from({ length: COUNT }, () => ({\n        x:   Math.random() * W,\n        y:   Math.random() * H - H,\n        len: Math.random() * 22 + 8,\n        v:   Math.random() * 1.8 + 0.8,\n        a:   Math.random() * 0.2 + 0.04,\n        col: Math.random() > 0.85 ? 'rgba(217,114,52,' : 'rgba(250,247,244,',\n      }));\n    };\n\n    const draw = (): void => {\n      ctx.fillStyle = 'rgba(14,10,7,0.18)';\n      ctx.fillRect(0, 0, W, H);\n      drops.forEach(d => {\n        ctx.beginPath();\n        ctx.moveTo(d.x, d.y);\n        ctx.lineTo(d.x - d.len * 0.1, d.y + d.len);\n        const g = ctx.createLinearGradient(d.x, d.y, d.x, d.y + d.len);\n        g.addColorStop(0,   `${d.col}0)`);\n        g.addColorStop(0.5, `${d.col}${d.a})`);\n        g.addColorStop(1,   `${d.col}0)`);\n        ctx.strokeStyle = g;\n        ctx.lineWidth = 0.8;\n        ctx.stroke();\n        d.y += d.v;\n        if (d.y > H + d.len) { d.y = -d.len; d.x = Math.random() * W; }\n      });\n      this._raf = requestAnimationFrame(draw);\n    };\n\n    this._ro = new ResizeObserver(resize);\n    this._ro.observe(host);\n    resize();\n    draw();\n  }\n\n  /* ── Canvas: Wave Mesh ── */\n  private _initWaveMesh(canvas: HTMLCanvasElement): void {\n    const ctx  = canvas.getContext('2d')!;\n    const host = (this.renderRoot as ShadowRoot).host as HTMLElement;\n    let W = 0, H = 0, t = 0;\n    const COLS = 16, ROWS = 10;\n\n    const resize = (): void => {\n      W = canvas.width  = host.clientWidth;\n      H = canvas.height = host.clientHeight;\n    };\n\n    const draw = (): void => {\n      ctx.clearRect(0, 0, W, H);\n      ctx.fillStyle = '#FAF7F4';\n      ctx.fillRect(0, 0, W, H);\n\n      const cw = W / (COLS - 1);\n      const ch = H / (ROWS - 1);\n\n      for (let r = 0; r < ROWS; r++) {\n        ctx.beginPath();\n        for (let c = 0; c < COLS; c++) {\n          const wave = Math.sin((c / COLS + t) * Math.PI * 2) * 12\n                     + Math.cos((r / ROWS + t * 0.7) * Math.PI * 2) * 8;\n          const x = c * cw;\n          const y = r * ch + wave;\n          c === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);\n        }\n        ctx.strokeStyle = `rgba(160,140,118,${0.08 + Math.sin(r / ROWS * Math.PI) * 0.06})`;\n        ctx.lineWidth = 0.8;\n        ctx.stroke();\n      }\n      for (let c = 0; c < COLS; c++) {\n        ctx.beginPath();\n        for (let r = 0; r < ROWS; r++) {\n          const wave = Math.sin((c / COLS + t) * Math.PI * 2) * 12\n                     + Math.cos((r / ROWS + t * 0.7) * Math.PI * 2) * 8;\n          const x = c * cw;\n          const y = r * ch + wave;\n          r === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);\n        }\n        ctx.strokeStyle = `rgba(160,140,118,${0.06 + Math.sin(c / COLS * Math.PI) * 0.04})`;\n        ctx.lineWidth = 0.8;\n        ctx.stroke();\n      }\n\n      t += 0.003;\n      this._raf = requestAnimationFrame(draw);\n    };\n\n    this._ro = new ResizeObserver(resize);\n    this._ro.observe(host);\n    resize();\n    draw();\n  }\n\n  /* ── Canvas: Constellation ── */\n  private _initConstellation(canvas: HTMLCanvasElement): void {\n    const ctx  = canvas.getContext('2d')!;\n    const host = (this.renderRoot as ShadowRoot).host as HTMLElement;\n    let W = 0, H = 0;\n\n    const COUNT = 70;\n    type Star = { x:number; y:number; r:number; a:number; pa:number; ps:number; col:number[] };\n    let stars: Star[] = [];\n\n    const resize = (): void => {\n      W = canvas.width  = host.clientWidth;\n      H = canvas.height = host.clientHeight;\n      stars = Array.from({ length: COUNT }, (): Star => ({\n        x:   Math.random() * W,\n        y:   Math.random() * H,\n        r:   Math.random() * 1.2 + 0.2,\n        a:   Math.random() * 0.5 + 0.1,\n        pa:  Math.random() * Math.PI * 2,\n        ps:  Math.random() * 0.008 + 0.002,\n        col: Math.random() > 0.9\n          ? [217, 114, 52]\n          : Math.random() > 0.85\n            ? [78, 148, 130]\n            : [250, 247, 244],\n      }));\n    };\n\n    const draw = (): void => {\n      ctx.fillStyle = 'rgba(10,8,6,0.22)';\n      ctx.fillRect(0, 0, W, H);\n\n      for (let i = 0; i < stars.length; i++) {\n        for (let j = i + 1; j < stars.length; j++) {\n          // ✅ Fix: destructurar con ! — índices seguros por los límites del bucle\n          const si = stars[i]!;\n          const sj = stars[j]!;\n          const dx = si.x - sj.x;\n          const dy = si.y - sj.y;\n          const d  = Math.sqrt(dx * dx + dy * dy);\n          if (d < 110) {\n            ctx.beginPath();\n            ctx.moveTo(si.x, si.y);\n            ctx.lineTo(sj.x, sj.y);\n            ctx.strokeStyle = `rgba(250,247,244,${(1 - d / 110) * 0.07})`;\n            ctx.lineWidth = 0.6;\n            ctx.stroke();\n          }\n        }\n      }\n\n      stars.forEach(s => {\n        s.pa += s.ps;\n        const pulse = Math.sin(s.pa) * 0.3 + 0.7;\n        ctx.beginPath();\n        ctx.arc(s.x, s.y, s.r * pulse, 0, Math.PI * 2);\n        ctx.fillStyle = `rgba(${s.col.join(',')},${s.a * pulse})`;\n        ctx.fill();\n        if (s.a > 0.4) {\n          ctx.beginPath();\n          ctx.arc(s.x, s.y, s.r * 3 * pulse, 0, Math.PI * 2);\n          ctx.fillStyle = `rgba(${s.col.join(',')},${s.a * 0.06 * pulse})`;\n          ctx.fill();\n        }\n      });\n\n      this._raf = requestAnimationFrame(draw);\n    };\n\n    this._ro = new ResizeObserver(resize);\n    this._ro.observe(host);\n    resize();\n    draw();\n  }\n\n  /* ── Render ── */\n\n  protected override render(): TemplateResult {\n    return backgroundTemplate({\n      variant:  this.variant,\n      isCanvas: BG_CANVAS_VARIANTS.has(this.variant),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-background': LibBackground;\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index41.js

@@ -0,0 +1,109 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, state, query, customElement } from "lit/decorators.js";
+import { burgerTemplate } from "./index268.js";
+import burgerCss from "./index269.js";
+import sharedTokens from "./index196.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LibBurger = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "ink";
+    this.size = "md";
+    this.open = false;
+    this.label = "";
+    this.labelOpen = "cerrar";
+    this.ariaLabel = "Menú";
+    this._labelText = "";
+    this._scrambleTimer = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._labelText = this.label;
+  }
+  updated(changed) {
+    if (changed.has("open") && this.label) {
+      this._labelText = this.open ? this.labelOpen : this.label;
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this._scrambleTimer);
+  }
+  /* ── Toggle principal ── */
+  _handleClick() {
+    if (this.variant === "glitch") {
+      this._glitchToggle();
+    } else {
+      this._toggle();
+    }
+  }
+  _toggle() {
+    this.open = !this.open;
+    this._emit();
+  }
+  /* Glitch: scramble 320ms antes de resolver */
+  _glitchToggle() {
+    const btn = this._btn;
+    if (!btn) return;
+    btn.classList.add("is-scrambling");
+    clearTimeout(this._scrambleTimer);
+    this._scrambleTimer = window.setTimeout(() => {
+      btn.classList.remove("is-scrambling");
+      this._toggle();
+    }, 340);
+  }
+  _emit() {
+    this.dispatchEvent(new CustomEvent("ui-lib-burger-change", {
+      detail: { open: this.open },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  render() {
+    return burgerTemplate(this);
+  }
+};
+LibBurger.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(burgerCss)}`
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibBurger.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibBurger.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibBurger.prototype, "open", 2);
+__decorateClass([
+  property({ type: String })
+], LibBurger.prototype, "label", 2);
+__decorateClass([
+  property({ type: String, attribute: "label-open" })
+], LibBurger.prototype, "labelOpen", 2);
+__decorateClass([
+  property({ type: String, attribute: "aria-label" })
+], LibBurger.prototype, "ariaLabel", 2);
+__decorateClass([
+  state()
+], LibBurger.prototype, "_labelText", 2);
+__decorateClass([
+  query(".burger")
+], LibBurger.prototype, "_btn", 2);
+LibBurger = __decorateClass([
+  customElement("lib-burger")
+], LibBurger);
+export {
+  LibBurger
+};
+//# sourceMappingURL=index41.js.map

package/dist/index41.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index41.js","sources":["../src/components/atoms/burger-button/lib-burger-button.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { burgerTemplate } from './lib-burger-button.html';\nimport burgerCss from './lib-burger-button.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { BurgerVariant, BurgerSize } from './lib-burger-button.types';\n\n/**\n * lib-burger — Botón hamburguesa Shibui (SG-48)\n *\n * @prop variant   — 'ink' | 'kanji' | 'washi' | 'framed' | 'kintsugi' | 'glitch'\n * @prop size      — 'sm' | 'md' | 'lg'\n * @prop open      — estado abierto/cerrado (refleja en atributo)\n * @prop label     — texto opcional junto al botón ('menú' / labelOpen)\n * @prop labelOpen — texto en estado abierto (default: 'cerrar')\n * @prop ariaLabel — aria-label del button (default: 'Menú')\n *\n * @fires ui-lib-burger-change — { detail: { open: boolean } }\n */\n@customElement('lib-burger')\nexport class LibBurger extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(burgerCss)}`,\n  ];\n\n  @property({ type: String, reflect: true })\n  variant: BurgerVariant = 'ink';\n\n  @property({ type: String, reflect: true })\n  size: BurgerSize = 'md';\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /** Texto junto al botón — si está vacío no se renderiza */\n  @property({ type: String })\n  label = '';\n\n  /** Texto del label en estado abierto */\n  @property({ type: String, attribute: 'label-open' })\n  labelOpen = 'cerrar';\n\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel = 'Menú';\n\n  /* Texto reactivo del label */\n  @state()\n  _labelText = '';\n\n  @query('.burger')\n  declare private _btn: HTMLButtonElement | null;\n\n  /* Scramble timeout para glitch */\n  private _scrambleTimer = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._labelText = this.label;\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('open') && this.label) {\n      this._labelText = this.open ? this.labelOpen : this.label;\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    clearTimeout(this._scrambleTimer);\n  }\n\n  /* ── Toggle principal ── */\n  _handleClick(): void {\n    if (this.variant === 'glitch') {\n      this._glitchToggle();\n    } else {\n      this._toggle();\n    }\n  }\n\n  private _toggle(): void {\n    this.open = !this.open;\n    this._emit();\n  }\n\n  /* Glitch: scramble 320ms antes de resolver */\n  private _glitchToggle(): void {\n    const btn = this._btn;\n    if (!btn) return;\n\n    btn.classList.add('is-scrambling');\n    clearTimeout(this._scrambleTimer);\n\n    this._scrambleTimer = window.setTimeout((): void => {\n      btn.classList.remove('is-scrambling');\n      this._toggle();\n    }, 340);\n  }\n\n  private _emit(): void {\n    this.dispatchEvent(new CustomEvent('ui-lib-burger-change', {\n      detail: { open: this.open },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  protected override render(): TemplateResult {\n    return burgerTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-burger': LibBurger;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAoBO,IAAM,YAAN,cAAwB,WAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,UAAyB;AAGzB,SAAA,OAAmB;AAGnB,SAAA,OAAO;AAIP,SAAA,QAAQ;AAIR,SAAA,YAAY;AAGZ,SAAS,YAAY;AAIrB,SAAA,aAAa;AAMb,SAAQ,iBAAiB;AAAA,EAAA;AAAA,EAEhB,oBAA0B;AACjC,UAAM,kBAAA;AACN,SAAK,aAAa,KAAK;AAAA,EACzB;AAAA,EAES,QAAQ,SAAqC;AACpD,QAAI,QAAQ,IAAI,MAAM,KAAK,KAAK,OAAO;AACrC,WAAK,aAAa,KAAK,OAAO,KAAK,YAAY,KAAK;AAAA,IACtD;AAAA,EACF;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA;AACN,iBAAa,KAAK,cAAc;AAAA,EAClC;AAAA;AAAA,EAGA,eAAqB;AACnB,QAAI,KAAK,YAAY,UAAU;AAC7B,WAAK,cAAA;AAAA,IACP,OAAO;AACL,WAAK,QAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEQ,UAAgB;AACtB,SAAK,OAAO,CAAC,KAAK;AAClB,SAAK,MAAA;AAAA,EACP;AAAA;AAAA,EAGQ,gBAAsB;AAC5B,UAAM,MAAM,KAAK;AACjB,QAAI,CAAC,IAAK;AAEV,QAAI,UAAU,IAAI,eAAe;AACjC,iBAAa,KAAK,cAAc;AAEhC,SAAK,iBAAiB,OAAO,WAAW,MAAY;AAClD,UAAI,UAAU,OAAO,eAAe;AACpC,WAAK,QAAA;AAAA,IACP,GAAG,GAAG;AAAA,EACR;AAAA,EAEQ,QAAc;AACpB,SAAK,cAAc,IAAI,YAAY,wBAAwB;AAAA,MACzD,QAAQ,EAAE,MAAM,KAAK,KAAA;AAAA,MACrB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAEmB,SAAyB;AAC1C,WAAO,eAAe,IAAI;AAAA,EAC5B;AACF;AA3Fa,UACK,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,UAOX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAT9B,UAUX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAZ/B,UAaX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBf,UAiBX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GApBxC,UAqBX,WAAA,aAAA,CAAA;AAGS,gBAAA;AAAA,EADR,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAvBxC,UAwBF,WAAA,aAAA,CAAA;AAIT,gBAAA;AAAA,EADC,MAAA;AAAM,GA3BI,UA4BX,WAAA,cAAA,CAAA;AAGgB,gBAAA;AAAA,EADf,MAAM,SAAS;AAAA,GA9BL,UA+BK,WAAA,QAAA,CAAA;AA/BL,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}

package/dist/index42.js

@@ -0,0 +1,58 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { renderEyebrow } from "./index270.js";
+import componentCss from "./index271.js";
+import sharedTokens from "./index196.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LibEyebrow = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.color = "kaki";
+    this.line = "left";
+    this.size = "md";
+    this.effect = "none";
+    this.dot = false;
+    this.num = "";
+  }
+  render() {
+    return renderEyebrow(this);
+  }
+};
+LibEyebrow.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(componentCss)}`
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibEyebrow.prototype, "color", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibEyebrow.prototype, "line", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibEyebrow.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibEyebrow.prototype, "effect", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibEyebrow.prototype, "dot", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibEyebrow.prototype, "num", 2);
+LibEyebrow = __decorateClass([
+  customElement("lib-eyebrow")
+], LibEyebrow);
+export {
+  LibEyebrow
+};
+//# sourceMappingURL=index42.js.map

package/dist/index42.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index42.js","sources":["../src/components/atoms/eyebrow/lib-eyebrow.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, type TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { renderEyebrow } from './lib-eyebrow.html';\nimport componentCss from './lib-eyebrow.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport type EyebrowColor  = 'kaki' | 'washi' | 'celadon' | 'white' | 'muted' | 'dark';\nexport type EyebrowLine   = 'left' | 'right' | 'both' | 'none';\nexport type EyebrowSize   = 'sm' | 'md' | 'lg';\nexport type EyebrowEffect = 'none' | 'kintsugi' | 'glitch';\n\n/**\n * `<lib-eyebrow>` — Etiqueta introductoria previa a un titular.\n *\n * Elemento de texto en DM Mono muy pequeño con línea decorativa de gradiente.\n * Unifica los patrones `.sg-section-label`, `.hero-eyebrow` y `.section-label`\n * en un único componente agnóstico.\n *\n * @tag lib-eyebrow\n *\n * @attr {'kaki'|'washi'|'celadon'|'white'|'muted'|'dark'} color\n *   Color del texto y de la línea decorativa. Default: `'kaki'`.\n *\n * @attr {'left'|'right'|'both'|'none'} line\n *   Posición de la línea decorativa. Default: `'left'`.\n *\n * @attr {'sm'|'md'|'lg'} size\n *   Tamaño tipográfico. Default: `'md'`.\n *\n * @attr {'none'|'kintsugi'|'glitch'} effect\n *   Efecto especial de animación. Default: `'none'`.\n *\n * @attr {boolean} dot\n *   Reemplaza la línea por un punto de color.\n *\n * @attr {string} num\n *   Si se define, añade un badge numérico sufijo (ej: \"01\").\n *\n * @slot - Texto del eyebrow.\n *\n * @csspart base  - El span contenedor interno.\n * @csspart badge - El badge numérico (solo cuando `num` está definido).\n *\n * @example\n * <lib-eyebrow>Design System · v0.1.0</lib-eyebrow>\n * <lib-eyebrow color=\"celadon\" size=\"sm\" dot>Sistema online</lib-eyebrow>\n * <lib-eyebrow effect=\"kintsugi\" line=\"both\">✦ Featured</lib-eyebrow>\n * <lib-eyebrow effect=\"glitch\" line=\"none\">⌗ runtime · session</lib-eyebrow>\n * <lib-eyebrow num=\"41\">Motion</lib-eyebrow>\n */\n@customElement('lib-eyebrow')\nexport class LibEyebrow extends LitElement {\n\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(componentCss)}`,\n  ];\n\n  /** Color del texto y la línea decorativa */\n  @property({ type: String, reflect: true })\n  color: EyebrowColor = 'kaki';\n\n  /** Posición de la línea decorativa */\n  @property({ type: String, reflect: true })\n  line: EyebrowLine = 'left';\n\n  /** Tamaño tipográfico */\n  @property({ type: String, reflect: true })\n  size: EyebrowSize = 'md';\n\n  /** Efecto especial animado */\n  @property({ type: String, reflect: true })\n  effect: EyebrowEffect = 'none';\n\n  /** Sustituye la línea por un punto de color */\n  @property({ type: Boolean, reflect: true })\n  dot = false;\n\n  /**\n   * Badge numérico añadido como sufijo.\n   * Útil en listados de componentes (\"41 · Motion\").\n   */\n  @property({ type: String, reflect: true })\n  num = '';\n\n  protected override render(): TemplateResult {\n    return renderEyebrow(this);\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAmDO,IAAM,aAAN,cAAyB,WAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA;AASL,SAAA,QAAsB;AAItB,SAAA,OAAoB;AAIpB,SAAA,OAAoB;AAIpB,SAAA,SAAwB;AAIxB,SAAA,MAAM;AAON,SAAA,MAAM;AAAA,EAAA;AAAA,EAEa,SAAyB;AAC1C,WAAO,cAAc,IAAI;AAAA,EAC3B;AACF;AArCa,WAEK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,YAAY,CAAC;AAC/B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAR9B,WASX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAZ9B,WAaX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAhB9B,WAiBX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GApB9B,WAqBX,WAAA,UAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAxB/B,WAyBX,WAAA,OAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA/B9B,WAgCX,WAAA,OAAA,CAAA;AAhCW,aAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,UAAA;"}