@shibui-ui/ui 1.6.0 → 1.7.0

package/dist/index26.js

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

package/dist/index26.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index26.js","sources":["../src/components/atoms/lib-counter/lib-counter.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { counterTemplate } from './lib-counter.html';\nimport type { LibCounterSize, LibCounterTone, LibCounterDeltaDir } from './lib-counter.html';\nimport counterCss from './lib-counter.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport type { LibCounterSize, LibCounterTone, LibCounterDeltaDir };\n\n/**\n * @element lib-counter\n *\n * Contador animado con digit-flip: cada dígito es una columna\n * de 0 a 9 que se desplaza con translateY. Los dígitos de mayor\n * peso animan antes que los de menor — efecto odómetro.\n *\n * @example — básico\n * <lib-counter value=\"24819\" label=\"Usuarios activos\" play-on-visible></lib-counter>\n *\n * @example — moneda con delta\n * <lib-counter value=\"18540\" prefix=\"€\" size=\"lg\" tone=\"kaki\"\n *   label=\"Ingresos\" delta=\"+14,7%\" delta-dir=\"up\" play-on-visible>\n * </lib-counter>\n *\n * @example — porcentaje sin separador de miles\n * <lib-counter value=\"87\" suffix=\"%\" thousands=\"\" size=\"md\" play-on-visible></lib-counter>\n *\n * @example — con decimales\n * <lib-counter value=\"4\" decimals=\"73\" play-on-visible></lib-counter>\n * → renderiza  4,73\n */\n@customElement('lib-counter')\nexport class LibCounter extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(counterCss)}`,\n  ];\n\n  /* ── Props visuales ─────────────────────────────────────── */\n\n  /** Valor numérico a mostrar. */\n  @property({ type: Number, reflect: true })\n  value = 0;\n\n  /** Carácter prefijo (€, $, …). */\n  @property({ type: String, attribute: 'prefix', reflect: true })\n  override prefix = '';\n\n  /** Carácter sufijo (%, k, …). */\n  @property({ type: String, attribute: 'suffix', reflect: true })\n  suffix = '';\n\n  /** Separador de miles. Default: punto. Vacío = sin separador. */\n  @property({ type: String, attribute: 'thousands', reflect: true })\n  thousands = '.';\n\n  /**\n   * Dígitos decimales a mostrar después de coma.\n   * Ejemplo: decimals=\"73\" → \",73\"\n   */\n  @property({ type: Number, attribute: 'decimals', reflect: true })\n  decimals: number | null = null;\n\n  /** Tamaño del contador. */\n  @property({ type: String, reflect: true })\n  size: LibCounterSize = 'md';\n\n  /** Tono de color. */\n  @property({ type: String, reflect: true })\n  tone: LibCounterTone = 'default';\n\n  /** Etiqueta inferior en font-mono uppercase. */\n  @property({ type: String })\n  label = '';\n\n  /** Texto del indicador de variación (e.g. \"+14,7%\"). */\n  @property({ type: String })\n  delta = '';\n\n  /** Dirección del delta — controla color e icono. */\n  @property({ type: String, attribute: 'delta-dir', reflect: true })\n  deltaDir: LibCounterDeltaDir = 'up';\n\n  /**\n   * Si está presente, el contador arranca desde 0 y anima\n   * hasta `value` cuando entra en el viewport (IntersectionObserver).\n   * Nombre: play-on-visible (evita colisión con HTMLElement.animate).\n   */\n  @property({ type: Boolean, attribute: 'play-on-visible', reflect: true })\n  playOnVisible = false;\n\n  /* ── Internos ───────────────────────────────────────────── */\n\n  // FIX: declare evita el error de overload en decoradores strict\n  @query('.cnt-row')\n  declare private _rowEl: HTMLElement;\n\n  private _builtDigitCount = -1;\n  private _builtThousands  = '';\n\n  private _observer: IntersectionObserver | undefined;\n  private _hasAnimated = false;\n  private _firstUpdate = true;\n\n  /* ── Lifecycle ──────────────────────────────────────────── */\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.playOnVisible) {\n      this._observer = new IntersectionObserver(\n        (entries) => {\n          if (entries[0]?.isIntersecting && !this._hasAnimated) {\n            this._hasAnimated = true;\n            this._animateTo(this.value, /* fromZero */ true);\n            this._observer?.disconnect();\n          }\n        },\n        { threshold: 0.2 }\n      );\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n  }\n\n  override render(): TemplateResult {\n    return counterTemplate({\n      size:     this.size,\n      tone:     this.tone,\n      label:    this.label,\n      delta:    this.delta,\n      deltaDir: this.deltaDir,\n    });\n  }\n\n  override updated(changed: PropertyValues): void {\n    super.updated(changed);\n\n    const structureChanged =\n      changed.has('value')     ||\n      changed.has('prefix')    ||\n      changed.has('suffix')    ||\n      changed.has('thousands') ||\n      changed.has('decimals');\n\n    if (!structureChanged && !this._firstUpdate) return;\n\n    const needRebuild = this._needsRebuild();\n    if (needRebuild) {\n      this._buildRow();\n    }\n\n    if (this._firstUpdate) {\n      this._firstUpdate = false;\n\n      if (this.playOnVisible) {\n        // Construir en 0 y esperar viewport\n        this._setRowInstant(0);\n        // FIX: cast a Element para satisfacer IntersectionObserver.observe()\n        this._observer?.observe(this as unknown as Element);\n      } else {\n        this._setRowInstant(this.value);\n      }\n      return;\n    }\n\n    if (changed.has('value')) {\n      this._animateTo(this.value, /* fromZero */ false);\n    }\n  }\n\n  /* ── Motor de digit-flip ────────────────────────────────── */\n\n  private _needsRebuild(): boolean {\n    const digitCount = Math.abs(Math.floor(this.value)).toString().length;\n    if (digitCount !== this._builtDigitCount) return true;\n    if (this.thousands !== this._builtThousands) return true;\n    return false;\n  }\n\n  private _buildRow(): void {\n    const row = this._rowEl;\n    if (!row) return;\n    row.innerHTML = '';\n\n    const absVal = Math.abs(Math.floor(this.value));\n    const str    = absVal.toString();\n    this._builtDigitCount = str.length;\n    this._builtThousands  = this.thousands;\n\n    if (this.prefix) {\n      const p = document.createElement('span');\n      p.className   = 'cnt-prefix';\n      p.textContent = this.prefix;\n      row.appendChild(p);\n    }\n\n    const chars = this._buildCharArray(str, this.thousands);\n    chars.forEach((c) => {\n      if (c.type === 'sep') {\n        const sep = document.createElement('span');\n        sep.className   = 'cnt-sep';\n        sep.textContent = c.char;\n        row.appendChild(sep);\n      } else {\n        row.appendChild(this._makeDigitSlot(parseInt(c.char, 10)));\n      }\n    });\n\n    if (this.decimals !== null) {\n      const dot = document.createElement('span');\n      dot.className   = 'cnt-sep';\n      dot.textContent = ',';\n      row.appendChild(dot);\n\n      const decStr = this.decimals.toString().padStart(2, '0');\n      for (const ch of decStr) {\n        row.appendChild(this._makeDigitSlot(parseInt(ch, 10)));\n      }\n    }\n\n    if (this.suffix) {\n      const s = document.createElement('span');\n      s.className   = 'cnt-suffix';\n      s.textContent = this.suffix;\n      row.appendChild(s);\n    }\n  }\n\n  private _buildCharArray(\n    str: string,\n    thousands: string\n  ): Array<{ type: 'digit' | 'sep'; char: string }> {\n    const result: Array<{ type: 'digit' | 'sep'; char: string }> = [];\n    for (let i = 0; i < str.length; i++) {\n      const posFromRight = str.length - 1 - i;\n      if (i > 0 && posFromRight % 3 === 2 && thousands) {\n        result.push({ type: 'sep', char: thousands });\n      }\n      // FIX: str[i] es string | undefined en TS estricto — asegurar con ?? '0'\n      result.push({ type: 'digit', char: str[i] ?? '0' });\n    }\n    return result;\n  }\n\n  private _makeDigitSlot(digit: number): HTMLElement {\n    const slot = document.createElement('span');\n    slot.className = 'cnt-digit';\n\n    const inner = document.createElement('span');\n    inner.className = 'cnt-digit-inner';\n\n    for (let i = 0; i <= 9; i++) {\n      const span = document.createElement('span');\n      span.textContent = String(i);\n      inner.appendChild(span);\n    }\n\n    inner.style.transition = 'none';\n    inner.style.transform  = `translateY(-${digit}em)`;\n    slot.appendChild(inner);\n    return slot;\n  }\n\n  private _setRowInstant(value: number): void {\n    const slots = this._rowEl?.querySelectorAll<HTMLElement>('.cnt-digit');\n    if (!slots) return;\n    const digits = this._extractTargetDigits(value);\n    slots.forEach((slot, i) => {\n      const inner = slot.querySelector<HTMLElement>('.cnt-digit-inner');\n      if (!inner) return;\n      inner.style.transition = 'none';\n      inner.style.transform  = `translateY(-${digits[i] ?? 0}em)`;\n    });\n  }\n\n  private _animateTo(value: number, fromZero: boolean): void {\n    const slots = this._rowEl?.querySelectorAll<HTMLElement>('.cnt-digit');\n    if (!slots || !slots.length) return;\n\n    const targetDigits = this._extractTargetDigits(value);\n    const total        = slots.length;\n\n    slots.forEach((slot, i) => {\n      const inner = slot.querySelector<HTMLElement>('.cnt-digit-inner');\n      if (!inner) return;\n\n      const target    = targetDigits[i] ?? 0;\n      const fromRight = total - 1 - i;\n      const delay     = fromRight * 40;\n\n      if (fromZero) {\n        inner.style.transition = 'none';\n        inner.style.transform  = 'translateY(0)';\n      }\n\n      void inner.offsetHeight; // forzar reflow\n\n      inner.style.transition = `transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) ${delay}ms`;\n      inner.style.transform  = `translateY(-${target}em)`;\n    });\n  }\n\n  private _extractTargetDigits(value: number): number[] {\n    const absVal = Math.abs(Math.floor(value));\n    let   str    = absVal.toString();\n\n    if (this.decimals !== null) {\n      const decStr = this.decimals.toString().padStart(2, '0');\n      str = str + decStr;\n    }\n\n    return str.split('').map((c) => parseInt(c, 10));\n  }\n\n  /* ── Public API ─────────────────────────────────────────── */\n\n  /** Anima el contador a un nuevo valor manualmente. */\n  public animateTo(value: number): void {\n    this.value = value;\n  }\n\n  /** Reinicia la animación desde cero al valor actual. */\n  public replay(): void {\n    this._hasAnimated = false;\n    this._animateTo(this.value, true);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-counter': LibCounter;\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index260.js

@@ -0,0 +1,35 @@
+import { svg, nothing, html } from "lit";
+const spinnerSvg = svg`
+  <svg class="spinner" viewBox="0 0 16 16" fill="none"
+    stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+    <path d="M8 2a6 6 0 1 0 6 6" opacity="0.3"/>
+    <path d="M14 8a6 6 0 0 0-6-6"/>
+  </svg>`;
+function buttonLiquidTemplate(ctx) {
+  const { loading, disabled } = ctx;
+  return html`
+    <button
+      class="btn"
+      part="button"
+      ?disabled="${disabled || loading}"
+      aria-disabled="${disabled || loading}"
+      aria-busy="${loading ? "true" : nothing}"
+      @mouseenter="${(e) => ctx._onMouseEnter(e)}"
+      @mouseleave="${() => ctx._onMouseLeave()}"
+      @mousedown="${(e) => ctx._onMouseDown(e)}"
+    >
+      <!-- Canvas inyectado por el componente en firstUpdated -->
+
+      <span class="btn-inner" part="inner">
+        ${loading ? spinnerSvg : nothing}
+        <slot name="prefix"></slot>
+        <slot></slot>
+        <slot name="suffix"></slot>
+      </span>
+    </button>
+  `;
+}
+export {
+  buttonLiquidTemplate
+};
+//# sourceMappingURL=index260.js.map

package/dist/index260.js.map

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

package/dist/index261.js

@@ -0,0 +1,5 @@
+const liquidCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}}@layer components{.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;cursor:pointer;border:none;padding:var(--lib-space-sm) var(--lib-space-lg);white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;transition:box-shadow .2s ease,transform .1s ease;border-radius:0;outline:none;width:100%}.btn:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:2px}.btn:active:not(:disabled,.is-loading){transform:translateY(1px)}:host([disabled]) .btn,.btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.btn-inner{position:relative;z-index:1;display:inline-flex;align-items:center;gap:var(--lib-space-xs);pointer-events:none}.spinner{display:inline-block;width:11px;height:11px;flex-shrink:0;animation:lbl-spin .9s linear infinite}@keyframes lbl-spin{to{transform:rotate(360deg)}}:host([size="sm"]) .btn{padding:var(--lib-space-xs) var(--lib-space-md);font-size:10px}:host([size="lg"]) .btn{padding:var(--lib-space-md) var(--lib-space-xl);font-size:var(--text-sm);letter-spacing:var(--tracking-widest)}:host([block]){display:flex;width:100%}:host([variant="ink"]) .btn{background:var(--color-washi-900);color:var(--color-washi-100)}:host([variant="washi"]) .btn{background:transparent;color:var(--text-primary);border:1px solid var(--border-strong)}:host([variant="kaki"]) .btn{background:var(--color-kaki-400);color:#fff}:host([variant="celadon"]) .btn{background:var(--color-celadon-500);color:#fff}:host([variant="ghost"]) .btn{background:transparent;color:var(--text-secondary);border:none}:host([variant="danger"]) .btn{background:transparent;color:var(--color-error);border:1px solid var(--color-error)}:host([variant="ghost"][dark]) .btn{color:var(--color-washi-400)}}';
+export {
+  liquidCss as default
+};
+//# sourceMappingURL=index261.js.map

package/dist/index261.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index261.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index262.js

@@ -0,0 +1,12 @@
+const LIQUID_PALETTES = {
+  ink: { water: [184, 90, 30], ripple: [255, 180, 100] },
+  washi: { water: [34, 28, 22], ripple: [90, 72, 56] },
+  kaki: { water: [140, 65, 21], ripple: [255, 220, 180] },
+  celadon: { water: [36, 82, 73], ripple: [160, 220, 200] },
+  ghost: { water: [184, 165, 146], ripple: [140, 120, 100] },
+  danger: { water: [140, 42, 26], ripple: [220, 100, 80] }
+};
+export {
+  LIQUID_PALETTES
+};
+//# sourceMappingURL=index262.js.map

package/dist/index262.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index262.js","sources":["../src/components/atoms/liquid-button/lib-liquid-button.types.ts"],"sourcesContent":["export type LiquidVariant = 'ink' | 'washi' | 'kaki' | 'celadon' | 'ghost' | 'danger';\nexport type LiquidSize    = 'sm' | 'md' | 'lg';\n\n/** Parámetros RGB de la física del agua — uno por variante */\nexport interface LiquidPalette {\n  /** Color del cuerpo de agua (fill) */\n  water: [number, number, number];\n  /** Color de los anillos de impacto (ripple) */\n  ripple: [number, number, number];\n}\n\nexport const LIQUID_PALETTES: Record<LiquidVariant, LiquidPalette> = {\n  ink:     { water: [184, 90,  30],  ripple: [255, 180, 100] },\n  washi:   { water: [34,  28,  22],  ripple: [90,  72,  56]  },\n  kaki:    { water: [140, 65,  21],  ripple: [255, 220, 180] },\n  celadon: { water: [36,  82,  73],  ripple: [160, 220, 200] },\n  ghost:   { water: [184, 165, 146], ripple: [140, 120, 100] },\n  danger:  { water: [140, 42,  26],  ripple: [220, 100, 80]  },\n};"],"names":[],"mappings":"AAWO,MAAM,kBAAwD;AAAA,EACnE,KAAS,EAAE,OAAO,CAAC,KAAK,IAAK,EAAE,GAAI,QAAQ,CAAC,KAAK,KAAK,GAAG,EAAA;AAAA,EACzD,OAAS,EAAE,OAAO,CAAC,IAAK,IAAK,EAAE,GAAI,QAAQ,CAAC,IAAK,IAAK,EAAE,EAAA;AAAA,EACxD,MAAS,EAAE,OAAO,CAAC,KAAK,IAAK,EAAE,GAAI,QAAQ,CAAC,KAAK,KAAK,GAAG,EAAA;AAAA,EACzD,SAAS,EAAE,OAAO,CAAC,IAAK,IAAK,EAAE,GAAI,QAAQ,CAAC,KAAK,KAAK,GAAG,EAAA;AAAA,EACzD,OAAS,EAAE,OAAO,CAAC,KAAK,KAAK,GAAG,GAAG,QAAQ,CAAC,KAAK,KAAK,GAAG,EAAA;AAAA,EACzD,QAAS,EAAE,OAAO,CAAC,KAAK,IAAK,EAAE,GAAI,QAAQ,CAAC,KAAK,KAAK,EAAE,EAAA;AAC1D;"}

package/dist/index263.js

@@ -0,0 +1,5 @@
+const glitchCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{display:inline-block;cursor:default}.tg-inner{position:relative;display:inline-block}:host([variant="slice"]) .tg-inner:before,:host([variant="slice"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0}:host([variant="slice"]) .tg-inner:before{color:var(--color-kaki-500);mix-blend-mode:multiply}:host([variant="slice"]) .tg-inner:after{color:var(--color-celadon-400);mix-blend-mode:multiply}:host([variant="slice"]:hover) .tg-inner:before,:host([variant="slice"][active]) .tg-inner:before,:host([variant="slice"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-slice-before .42s steps(1) infinite}:host([variant="slice"]:hover) .tg-inner:after,:host([variant="slice"][active]) .tg-inner:after,:host([variant="slice"][trigger="always"]) .tg-inner:after{opacity:1;animation:tg-slice-after .42s steps(1) infinite;animation-delay:60ms}@keyframes tg-slice-before{0%{clip-path:inset(14% 0 72% 0);transform:translate(-3px)}10%{clip-path:inset(52% 0 32% 0);transform:translate(2px)}20%{clip-path:inset(8% 0 82% 0);transform:translate(-4px)}30%{clip-path:inset(66% 0 12% 0);transform:translate(3px)}40%{clip-path:inset(33% 0 44% 0);transform:translate(-2px)}50%{clip-path:inset(0% 0 90% 0);transform:translate(4px)}60%{clip-path:inset(78% 0 8% 0);transform:translate(-3px)}70%{clip-path:inset(22% 0 60% 0);transform:translate(2px)}80%{clip-path:inset(44% 0 38% 0);transform:translate(-4px)}90%{clip-path:inset(60% 0 18% 0);transform:translate(3px)}to{clip-path:inset(10% 0 75% 0);transform:translate(-2px)}}@keyframes tg-slice-after{0%{clip-path:inset(64% 0 20% 0);transform:translate(3px)}10%{clip-path:inset(28% 0 56% 0);transform:translate(-4px)}20%{clip-path:inset(76% 0 6% 0);transform:translate(2px)}30%{clip-path:inset(12% 0 70% 0);transform:translate(-3px)}40%{clip-path:inset(88% 0 4% 0);transform:translate(4px)}50%{clip-path:inset(40% 0 48% 0);transform:translate(-2px)}60%{clip-path:inset(6% 0 84% 0);transform:translate(3px)}70%{clip-path:inset(55% 0 30% 0);transform:translate(-4px)}80%{clip-path:inset(18% 0 66% 0);transform:translate(2px)}90%{clip-path:inset(82% 0 10% 0);transform:translate(-3px)}to{clip-path:inset(36% 0 50% 0);transform:translate(4px)}}:host([variant="scan"]) .tg-inner:before{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;color:var(--color-kaki-500);opacity:0;clip-path:inset(0 100% 0 0)}:host([variant="scan"]:hover) .tg-inner:before,:host([variant="scan"][active]) .tg-inner:before{opacity:1;animation:tg-scan-sweep .6s cubic-bezier(.4,0,.2,1) forwards}:host([variant="scan"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-scan-sweep .6s cubic-bezier(.4,0,.2,1) infinite}@keyframes tg-scan-sweep{0%{clip-path:inset(0% 100% 0 0);transform:translate(0)}30%{clip-path:inset(0% 0% 0 0);transform:translate(4px)}60%{clip-path:inset(0% 0% 0 0);transform:translate(-2px)}80%{clip-path:inset(0% 0% 0 0);transform:translate(0)}90%{clip-path:inset(0% 0% 0 0);transform:translate(0);opacity:1}to{clip-path:inset(0% 0% 0 0);opacity:0}}:host([variant="shift"]) .tg-inner:before,:host([variant="shift"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;color:inherit}:host([variant="shift"]:hover) .tg-inner:before,:host([variant="shift"][active]) .tg-inner:before,:host([variant="shift"][trigger="always"]) .tg-inner:before{opacity:.55;color:var(--color-kaki-400);animation:tg-shift-a .38s steps(1) infinite}:host([variant="shift"]:hover) .tg-inner:after,:host([variant="shift"][active]) .tg-inner:after,:host([variant="shift"][trigger="always"]) .tg-inner:after{opacity:.35;color:var(--color-celadon-500);animation:tg-shift-b .38s steps(1) infinite;animation-delay:.1s}@keyframes tg-shift-a{0%{transform:translate(-2px,1px);clip-path:inset(20% 0 55% 0)}20%{transform:translate(2px);clip-path:inset(60% 0 10% 0)}40%{transform:translate(-1px,-1px);clip-path:inset(5% 0 70% 0)}60%{transform:translate(3px,1px);clip-path:inset(40% 0 30% 0)}80%{transform:translate(-2px);clip-path:inset(75% 0 5% 0)}to{transform:translate(1px,-1px);clip-path:inset(30% 0 45% 0)}}@keyframes tg-shift-b{0%{transform:translate(3px,-1px);clip-path:inset(50% 0 20% 0)}20%{transform:translate(-2px,1px);clip-path:inset(10% 0 65% 0)}40%{transform:translate(2px);clip-path:inset(70% 0 10% 0)}60%{transform:translate(-3px,-1px);clip-path:inset(25% 0 50% 0)}80%{transform:translate(1px,1px);clip-path:inset(80% 0 5% 0)}to{transform:translate(-2px);clip-path:inset(35% 0 40% 0)}}:host([variant="decode"]) .char{display:inline-block;will-change:transform}:host([variant="decode"]) .char.is-scrambling{color:var(--color-kaki-500);animation:tg-char-jitter 60ms steps(1) infinite}@keyframes tg-char-jitter{0%{transform:translateY(0)}33%{transform:translateY(-1px)}66%{transform:translateY(1px)}}:host([variant="redact"]) .tg-inner:before{content:"";position:absolute;top:0;right:-3px;bottom:0;left:-3px;background:var(--color-washi-900);transform:scaleX(0);transform-origin:left;pointer-events:none}:host([variant="redact"]:hover) .tg-inner:before,:host([variant="redact"][active]) .tg-inner:before{animation:tg-redact .7s cubic-bezier(.4,0,.2,1) forwards}:host([variant="redact"][trigger="always"]) .tg-inner:before{animation:tg-redact .7s cubic-bezier(.4,0,.2,1) infinite}@keyframes tg-redact{0%{transform:scaleX(0);transform-origin:left}40%{transform:scaleX(1);transform-origin:left}41%{transform:scaleX(1);transform-origin:right}80%{transform:scaleX(0);transform-origin:right}to{transform:scaleX(0);transform-origin:right}}:host([variant="noise"]) .tg-inner:before,:host([variant="noise"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0}:host([variant="noise"]) .tg-inner:before{color:#9a614dcc}:host([variant="noise"]) .tg-inner:after{color:#487d73b3}:host([variant="noise"]:hover) .tg-inner:before,:host([variant="noise"][active]) .tg-inner:before,:host([variant="noise"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-noise-a .28s steps(1) infinite}:host([variant="noise"]:hover) .tg-inner:after,:host([variant="noise"][active]) .tg-inner:after,:host([variant="noise"][trigger="always"]) .tg-inner:after{opacity:1;animation:tg-noise-b .28s steps(1) infinite;animation-delay:40ms}@keyframes tg-noise-a{0%{clip-path:inset(18% 0 60% 0);transform:translate(-4px,1px) skew(-1deg)}14%{clip-path:inset(72% 0 8% 0);transform:translate(3px,-2px) skew(2deg)}28%{clip-path:inset(36% 0 40% 0);transform:translate(-2px,2px) skew(-2deg)}42%{clip-path:inset(5% 0 80% 0);transform:translate(4px) skew(1deg)}57%{clip-path:inset(55% 0 22% 0);transform:translate(-3px,-1px) skew(-1deg)}71%{clip-path:inset(85% 0 5% 0);transform:translate(2px,2px) skew(2deg)}85%{clip-path:inset(28% 0 50% 0);transform:translate(-4px,-2px) skew(-2deg)}to{clip-path:inset(48% 0 30% 0);transform:translate(3px,1px) skew(1deg)}}@keyframes tg-noise-b{0%{clip-path:inset(62% 0 18% 0);transform:translate(4px,-1px) skew(2deg)}14%{clip-path:inset(12% 0 68% 0);transform:translate(-3px,2px) skew(-1deg)}28%{clip-path:inset(80% 0 8% 0);transform:translate(2px,-2px) skew(1deg)}42%{clip-path:inset(30% 0 42% 0);transform:translate(-4px,1px) skew(-2deg)}57%{clip-path:inset(5% 0 75% 0);transform:translate(3px,-1px) skew(2deg)}71%{clip-path:inset(45% 0 35% 0);transform:translate(-2px,2px) skew(-1deg)}85%{clip-path:inset(70% 0 12% 0);transform:translate(4px,-2px) skew(1deg)}to{clip-path:inset(22% 0 58% 0);transform:translate(-3px,1px) skew(-2deg)}}}';
+export {
+  glitchCss as default
+};
+//# sourceMappingURL=index263.js.map

package/dist/index263.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index263.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index264.js

@@ -0,0 +1,19 @@
+import { html } from "lit";
+function textGlitchTemplate(props) {
+  if (props.variant === "decode") {
+    return html`
+      <span class="tg-inner" data-text="${props.text}">
+        ${[...props.text].map(
+      (ch) => html`<span class="char" data-original="${ch}">${ch}</span>`
+    )}
+      </span>
+    `;
+  }
+  return html`
+    <span class="tg-inner" data-text="${props.text}">${props.text}</span>
+  `;
+}
+export {
+  textGlitchTemplate
+};
+//# sourceMappingURL=index264.js.map

package/dist/index264.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index264.js","sources":["../src/components/atoms/text-glich/lib-text-glitch.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { TextGlitchVariant } from './lib-text-glitch.component';\n\nexport interface TextGlitchTemplateProps {\n  text: string;\n  variant: TextGlitchVariant;\n}\n\n/**\n * Template de lib-text-glitch.\n *\n * Para `decode`: renderiza un <span class=\"char\"> por cada carácter Unicode\n * (usando spread de string — correcto para emoji y kanji multibyte).\n * El JS del componente manipula estos spans directamente sin pasar por Lit.\n *\n * Para el resto de variantes: texto plano dentro del wrapper con data-text,\n * que los ::before/::after leen con attr(data-text).\n */\nexport function textGlitchTemplate(props: TextGlitchTemplateProps): TemplateResult {\n  if (props.variant === 'decode') {\n    return html`\n      <span class=\"tg-inner\" data-text=\"${props.text}\">\n        ${[...props.text].map(\n          ch => html`<span class=\"char\" data-original=\"${ch}\">${ch}</span>`\n        )}\n      </span>\n    `;\n  }\n\n  return html`\n    <span class=\"tg-inner\" data-text=\"${props.text}\">${props.text}</span>\n  `;\n}"],"names":[],"mappings":";AAkBO,SAAS,mBAAmB,OAAgD;AACjF,MAAI,MAAM,YAAY,UAAU;AAC9B,WAAO;AAAA,0CAC+B,MAAM,IAAI;AAAA,UAC1C,CAAC,GAAG,MAAM,IAAI,EAAE;AAAA,MAChB,CAAA,OAAM,yCAAyC,EAAE,KAAK,EAAE;AAAA,IAAA,CACzD;AAAA;AAAA;AAAA,EAGP;AAEA,SAAO;AAAA,wCAC+B,MAAM,IAAI,KAAK,MAAM,IAAI;AAAA;AAEjE;"}

package/dist/index265.js

@@ -0,0 +1,5 @@
+const backgroundCss = `@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}:host{display:block;position:relative;overflow:hidden}}@layer components{.bg-base{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.bg-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}.bg-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0}.bg-content{position:relative;z-index:2;width:100%;height:100%}:host([paused]) .bg-base,:host([paused]) .bg-overlay{animation-play-state:paused!important}:host([variant="washi"]) .bg-base{background:var(--color-washi-50)}:host([variant="washi-grain"]) .bg-base{background:var(--color-washi-50)}:host([variant="washi-grain"]) .bg-overlay{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.045'/%3E%3C/svg%3E");background-repeat:repeat;mix-blend-mode:multiply}:host([variant="washi-weave"]) .bg-base{background-color:var(--color-washi-100);background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(180,160,140,.06) 3px,rgb(180,160,140,.06) 4px),repeating-linear-gradient(90deg,transparent,transparent 3px,rgb(180,160,140,.06) 3px,rgb(180,160,140,.06) 4px)}:host([variant="seigaiha"]) .bg-base{background-color:var(--color-washi-50);background-image:radial-gradient(ellipse 100% 90% at 50% 0%,transparent 60%,rgb(180,155,130,.18) 60%,rgb(180,155,130,.18) 64%,transparent 64%);background-size:36px 18px;background-position:0 0,18px 9px}:host([variant="tatami"]) .bg-base{background-color:var(--color-washi-100);background-image:linear-gradient(rgb(160,140,118,.12) 1px,transparent 1px),linear-gradient(90deg,rgb(160,140,118,.12) 1px,transparent 1px),linear-gradient(rgb(160,140,118,.06) 1px,transparent 1px),linear-gradient(90deg,rgb(160,140,118,.06) 1px,transparent 1px);background-size:60px 60px,60px 60px,20px 20px,20px 20px}:host([variant="asanoha"]) .bg-base{background-color:var(--color-washi-50);background-image:repeating-linear-gradient(60deg,rgb(160,140,118,.1) 0,rgb(160,140,118,.1) 1px,transparent 1px,transparent 18px),repeating-linear-gradient(-60deg,rgb(160,140,118,.1) 0,rgb(160,140,118,.1) 1px,transparent 1px,transparent 18px),repeating-linear-gradient(0deg,rgb(160,140,118,.08) 0,rgb(160,140,118,.08) 1px,transparent 1px,transparent 18px)}:host([variant="sashiko"]) .bg-base{background-color:#f0eae0;background-image:radial-gradient(circle,rgb(130,100,70,.18) 1.5px,transparent 1.5px);background-size:16px 16px}:host([variant="komon"]) .bg-base{background-color:var(--color-washi-50);background-image:radial-gradient(circle at 2px 2px,rgb(160,130,100,.15) 1px,transparent 0),radial-gradient(circle at 10px 10px,rgb(160,130,100,.08) 1px,transparent 0);background-size:12px 12px}:host([variant="kasuri"]) .bg-base{background-color:#f5efe6;background-image:repeating-linear-gradient(-45deg,transparent 0,transparent 8px,rgb(150,120,90,.05) 8px,rgb(150,120,90,.05) 10px),repeating-linear-gradient(45deg,transparent 0,transparent 8px,rgb(150,120,90,.04) 8px,rgb(150,120,90,.04) 10px)}:host([variant="nishiki"]) .bg-base{background:linear-gradient(135deg,var(--color-washi-50) 0%,#F5EEE4 35%,#EDE3D5 65%,var(--color-washi-100) 100%)}:host([variant="sumi"]) .bg-base{background:var(--color-washi-950)}:host([variant="sumi-grain"]) .bg-base{background:var(--color-washi-950)}:host([variant="sumi-grain"]) .bg-overlay{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.055'/%3E%3C/svg%3E");background-repeat:repeat;mix-blend-mode:screen}:host([variant="kintsugi"]) .bg-base{background:var(--color-washi-950);background-image:linear-gradient(125deg,transparent 30%,rgb(184,90,30,.07) 50%,transparent 70%),linear-gradient(45deg,transparent 20%,rgb(184,90,30,.04) 60%,transparent 80%)}:host([variant="ash-grid"]) .bg-base{background-color:var(--color-washi-950);background-image:linear-gradient(rgb(250,247,244,.04) 1px,transparent 1px),linear-gradient(90deg,rgb(250,247,244,.04) 1px,transparent 1px);background-size:40px 40px}:host([variant="ink-dot"]) .bg-base{background-color:var(--color-washi-950);background-image:radial-gradient(circle,rgb(250,247,244,.07) 1px,transparent 1px);background-size:20px 20px}:host([variant="mokume"]) .bg-base{background:#1a120a;background-image:repeating-linear-gradient(2deg,transparent 0,transparent 14px,rgb(255,240,220,.025) 14px,rgb(255,240,220,.025) 16px),repeating-linear-gradient(-1deg,transparent 0,transparent 22px,rgb(255,240,220,.015) 22px,rgb(255,240,220,.015) 24px)}:host([variant="kumo"]) .bg-base{background:#0e0a07;background-image:radial-gradient(ellipse 60% 40% at 20% 30%,rgb(184,90,30,.08) 0%,transparent 70%),radial-gradient(ellipse 50% 35% at 80% 70%,rgb(78,148,130,.06) 0%,transparent 70%),radial-gradient(ellipse 40% 30% at 60% 20%,rgb(184,90,30,.04) 0%,transparent 70%)}:host([variant="temari"]) .bg-base{background:#110d09;background-image:radial-gradient(circle at 50% 50%,transparent 38px,rgb(250,247,244,.04) 39px,transparent 40px),radial-gradient(circle at 50% 50%,transparent 58px,rgb(250,247,244,.03) 59px,transparent 60px),radial-gradient(circle at 50% 50%,transparent 78px,rgb(250,247,244,.025) 79px,transparent 80px),radial-gradient(circle at 50% 50%,transparent 98px,rgb(250,247,244,.02) 99px,transparent 100px),radial-gradient(circle at 50% 50%,transparent 118px,rgb(250,247,244,.015) 119px,transparent 120px)}:host([variant="dusk"]) .bg-base{background:linear-gradient(160deg,#1a1008,#2a1a0e,#1a1208 60%,#0e0a06)}:host([variant="embers"]) .bg-base{background:#0c0804;background-image:radial-gradient(ellipse 50% 40% at 50% 100%,rgb(184,90,30,.22) 0%,transparent 65%),radial-gradient(ellipse 30% 20% at 50% 90%,rgb(217,114,52,.3) 0%,transparent 50%),radial-gradient(ellipse 80% 60% at 50% 50%,transparent 40%,rgb(10,6,2,.9) 100%)}:host([variant="aurora-light"]) .bg-base{background:radial-gradient(ellipse 80% 60% at 10% 20%,rgb(217,114,52,.12) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 90% 80%,rgb(78,148,130,.1) 0%,transparent 60%),radial-gradient(ellipse 70% 70% at 50% 50%,rgb(250,247,244,.5) 0%,transparent 100%),var(--color-washi-50)}:host([variant="kaki-glow"]) .bg-base{background:radial-gradient(ellipse 70% 60% at 30% 40%,rgb(217,114,52,.18) 0%,transparent 65%),radial-gradient(ellipse 50% 40% at 80% 20%,rgb(184,90,30,.1) 0%,transparent 60%),var(--color-washi-100)}:host([variant="celadon-mist"]) .bg-base{background:radial-gradient(ellipse 80% 60% at 70% 30%,rgb(78,148,130,.14) 0%,transparent 65%),radial-gradient(ellipse 60% 50% at 20% 80%,rgb(78,148,130,.08) 0%,transparent 60%),var(--color-washi-50)}:host([variant="noctiluca"]) .bg-base{background:#0a0806;background-image:radial-gradient(ellipse 60% 50% at 20% 30%,rgb(217,114,52,.12) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 80% 70%,rgb(78,148,130,.09) 0%,transparent 60%),radial-gradient(ellipse 70% 60% at 50% 50%,rgb(26,20,14,.8) 0%,transparent 100%)}:host([variant="horizon"]) .bg-base{background:linear-gradient(180deg,var(--color-washi-50) 0%,#EDE3D5 40%,#D8C8B4 70%,var(--color-washi-200) 100%)}:host([variant="breathing"]) .bg-base{background:var(--color-washi-50)}:host([variant="breathing"]) .bg-overlay{top:-20%;right:-20%;bottom:-20%;left:-20%;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgb(217,114,52,.1) 0%,transparent 70%);animation:bg-breathe 6s ease-in-out infinite}:host([variant="aurora-drift"]) .bg-base{background:#0c0906}:host([variant="aurora-drift"]) .bg-overlay{background:transparent;animation:none}:host([variant="aurora-drift"]) .bg-orb-a,:host([variant="aurora-drift"]) .bg-orb-b{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:1}:host([variant="aurora-drift"]) .bg-orb-a{width:200px;height:160px;background:#b85a1e2e;top:10%;left:15%;animation:bg-aurora-float 12s ease-in-out infinite}:host([variant="aurora-drift"]) .bg-orb-b{width:180px;height:140px;background:#4e948224;bottom:15%;right:20%;animation:bg-aurora-float 12s ease-in-out infinite;animation-delay:-5s;animation-direction:reverse}:host([variant="scan"]) .bg-base{background:#0e0a07;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgb(255,255,255,.018) 3px,rgb(255,255,255,.018) 4px)}:host([variant="scan"]) .bg-overlay{height:2px;inset:0 0 auto;top:0;left:0;right:0;background:linear-gradient(90deg,transparent,rgb(184,90,30,.35),transparent);animation:bg-scan-sweep 5s linear infinite}:host([variant="ink-drop"]) .bg-base{background:var(--color-washi-50)}:host([variant="ink-drop"]) .bg-overlay{width:80px;height:80px;inset:unset;top:50%;left:50%;margin:-40px 0 0 -40px;background:radial-gradient(circle,rgb(26,20,14,.08) 0%,rgb(26,20,14,.03) 50%,transparent 100%);border-radius:50%;animation:bg-ink-expand 4s ease-in-out infinite}:host([variant="shimmer"]) .bg-base{background:var(--color-washi-100)}:host([variant="shimmer"]) .bg-overlay{background:linear-gradient(105deg,transparent 30%,rgb(250,247,244,.5) 50%,transparent 70%);transform:translate(-100%);animation:bg-shimmer-pass 4s ease-in-out infinite;animation-delay:1s}:host([variant="particles"]){background:var(--color-washi-950)}:host([variant="rain"]){background:#0e0a07}:host([variant="wave-mesh"]){background:var(--color-washi-50)}:host([variant="constellation"]){background:#0a0806}:host([variant="kagome"]) .bg-base{background-color:var(--color-washi-50);background-image:linear-gradient(60deg,rgb(160,140,118,.11) 1px,transparent 1px),linear-gradient(120deg,rgb(160,140,118,.11) 1px,transparent 1px),linear-gradient(0deg,rgb(160,140,118,.07) 1px,transparent 1px);background-size:22px 38px}:host([variant="shoji"]) .bg-base{background-color:#fdfaf6;background-image:linear-gradient(rgb(160,140,118,.07) 1px,transparent 1px),linear-gradient(90deg,rgb(160,140,118,.07) 1px,transparent 1px),linear-gradient(rgb(160,140,118,.13) 1px,transparent 1px),linear-gradient(90deg,rgb(160,140,118,.13) 1px,transparent 1px);background-size:10px 10px,10px 10px,40px 40px,40px 40px}:host([variant="shibori"]) .bg-base{background-color:var(--color-washi-50);background-image:radial-gradient(circle at 0% 0%,transparent 28%,rgb(160,140,118,.1) 29%,transparent 30%),radial-gradient(circle at 100% 0%,transparent 28%,rgb(160,140,118,.1) 29%,transparent 30%),radial-gradient(circle at 0% 100%,transparent 28%,rgb(160,140,118,.1) 29%,transparent 30%),radial-gradient(circle at 100% 100%,transparent 28%,rgb(160,140,118,.1) 29%,transparent 30%),radial-gradient(circle at 50% 50%,transparent 28%,rgb(160,140,118,.07) 29%,transparent 30%),radial-gradient(circle at 0% 0%,transparent 14%,rgb(160,140,118,.06) 15%,transparent 16%),radial-gradient(circle at 100% 0%,transparent 14%,rgb(160,140,118,.06) 15%,transparent 16%),radial-gradient(circle at 0% 100%,transparent 14%,rgb(160,140,118,.06) 15%,transparent 16%),radial-gradient(circle at 100% 100%,transparent 14%,rgb(160,140,118,.06) 15%,transparent 16%);background-size:48px 48px}:host([variant="ori"]) .bg-base{background-color:var(--color-washi-100);background-image:repeating-linear-gradient(45deg,transparent 0,transparent 4px,rgb(150,130,108,.09) 4px,rgb(150,130,108,.09) 5px),repeating-linear-gradient(-45deg,transparent 0,transparent 4px,rgb(150,130,108,.07) 4px,rgb(150,130,108,.07) 5px)}:host([variant="chirimen"]) .bg-base{background-color:#faf6f0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.3' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23c)' fill='rgb(160,140,118)' opacity='0.04'/%3E%3C/svg%3E");background-repeat:repeat}:host([variant="obsidian"]) .bg-base{background:#0a0808;background-image:linear-gradient(135deg,transparent 0%,rgb(220,215,210,.025) 25%,transparent 50%,rgb(220,215,210,.015) 75%,transparent 100%),radial-gradient(ellipse 60% 40% at 70% 30%,rgb(184,90,30,.06),transparent 60%)}:host([variant="forge"]) .bg-base{background:#080604;background-image:radial-gradient(ellipse 90% 40% at 50% 110%,rgb(217,114,52,.35) 0%,rgb(140,65,21,.2) 35%,transparent 65%),radial-gradient(ellipse 60% 25% at 50% 100%,rgb(250,180,80,.12) 0%,transparent 50%)}:host([variant="void"]) .bg-base{background:#06040302;background-image:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 20%,rgb(0,0,0,.3) 55%,rgb(0,0,0,.75) 100%),radial-gradient(ellipse 30% 25% at 50% 50%,rgb(184,90,30,.04),transparent 70%);background-color:#0c0a08}:host([variant="yami"]) .bg-base{background:linear-gradient(160deg,#1a1208,#0e0b07 30%,#080604 55%,#04030200);background-color:#080604}:host([variant="midnight"]) .bg-base{background-color:#090806;background-image:radial-gradient(circle,rgb(250,247,244,.04) 1px,transparent 1px);background-size:12px 12px;background-position:0 0,6px 6px}:host([variant="midnight"]) .bg-overlay{background:linear-gradient(180deg,transparent 60%,rgb(184,90,30,.04) 100%)}:host([variant="sakura"]) .bg-base{background:radial-gradient(ellipse 70% 60% at 30% 30%,rgb(230,190,180,.22) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 70%,rgb(217,114,52,.08) 0%,transparent 60%),radial-gradient(ellipse 80% 80% at 50% 50%,rgb(250,247,244,.6) 0%,transparent 100%),#faf4f2}:host([variant="twilight"]) .bg-base{background:linear-gradient(160deg,#2a1a0e,#1e1208 35%,#120c06 65%,#080604);background-image:radial-gradient(ellipse 80% 50% at 30% 20%,rgb(217,114,52,.14) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 80% 80%,rgb(184,90,30,.08) 0%,transparent 60%)}:host([variant="jade-deep"]) .bg-base{background:#080e0c;background-image:radial-gradient(ellipse 70% 60% at 20% 40%,rgb(78,148,130,.16) 0%,transparent 65%),radial-gradient(ellipse 50% 40% at 85% 65%,rgb(53,113,100,.1) 0%,transparent 60%),radial-gradient(ellipse 40% 30% at 60% 20%,rgb(78,148,130,.07) 0%,transparent 60%)}:host([variant="pulse"]) .bg-base{background:var(--color-washi-950)}:host([variant="pulse"]) .bg-overlay{background:transparent}:host([variant="pulse"]) .bg-overlay:before,:host([variant="pulse"]) .bg-overlay:after{content:"";position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid rgb(184,90,30,.35);transform:translate(-50%,-50%) scale(0);width:160px;height:160px;animation:bg-pulse-ring 4s ease-out infinite}:host([variant="pulse"]) .bg-overlay:after{border-color:#f5d08a33;animation-delay:2s}@keyframes bg-pulse-ring{0%{transform:translate(-50%,-50%) scale(0);opacity:1}to{transform:translate(-50%,-50%) scale(5.5);opacity:0}}:host([variant="fog"]) .bg-base{background:var(--color-washi-950)}:host([variant="fog"]) .bg-overlay{background:radial-gradient(ellipse 500px 220px at 0% 50%,rgb(250,247,244,.045),transparent 70%),radial-gradient(ellipse 300px 140px at 0% 50%,rgb(250,247,244,.03),transparent 60%);animation:bg-fog-drift 10s linear infinite}:host([variant="fog"]) .bg-overlay:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 400px 180px at 0% 65%,rgb(184,90,30,.025),transparent 70%);animation:bg-fog-drift 14s linear infinite;animation-delay:-5s}@keyframes bg-fog-drift{0%{transform:translate(-40%)}to{transform:translate(140%)}}:host([variant="static"]) .bg-base{background:#0a0806;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");background-repeat:repeat}:host([variant="static"]) .bg-overlay{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(255,255,255,.012) 3px,rgb(255,255,255,.012) 4px);animation:bg-static-noise .12s steps(1) infinite}@keyframes bg-static-noise{0%{background-position:0 0,0 0;opacity:1}20%{background-position:-3% 2%,0 0;opacity:.9}40%{background-position:4% -1%,0 -2px;opacity:1}60%{background-position:-1% 3%,0 0;opacity:.8}80%{background-position:2% -2%,0 1px;opacity:1}}:host([variant="fireflies"]){background:#080604}:host([variant="ink-wash"]){background:var(--color-washi-50)}@keyframes bg-breathe{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}@keyframes bg-aurora-float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-20px) scale(1.1)}66%{transform:translate(-20px,15px) scale(.95)}}@keyframes bg-scan-sweep{0%{top:0%;opacity:0}2%{opacity:1}98%{opacity:.4}to{top:100%;opacity:0}}@keyframes bg-ink-expand{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(4);opacity:1}}@keyframes bg-shimmer-pass{0%{transform:translate(-100%)}to{transform:translate(200%)}}}`;
+export {
+  backgroundCss as default
+};
+//# sourceMappingURL=index265.js.map

package/dist/index265.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index265.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index266.js

@@ -0,0 +1,19 @@
+import { html, nothing } from "lit";
+function backgroundTemplate(props) {
+  const { variant, isCanvas } = props;
+  const isAuroraDrift = variant === "aurora-drift";
+  return html`
+    ${isCanvas ? html`<canvas class="bg-canvas"></canvas>` : html`
+          <div class="bg-base"></div>
+          <div class="bg-overlay"></div>
+          ${isAuroraDrift ? html`<div class="bg-orb-a"></div><div class="bg-orb-b"></div>` : nothing}
+        `}
+    <div class="bg-content">
+      <slot></slot>
+    </div>
+  `;
+}
+export {
+  backgroundTemplate
+};
+//# sourceMappingURL=index266.js.map

package/dist/index266.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index266.js","sources":["../src/components/atoms/background/lib-background.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { BackgroundTemplateProps } from './lib-background.types';\n\n/**\n * Template principal de lib-background.\n *\n * Estructura de capas:\n *  .bg-base    → recibe background CSS (color/patrón/gradiente)\n *  .bg-overlay → grain, shimmer, scan line, ink-drop...\n *  .bg-orb-a/b → orbes animados (solo aurora-drift)\n *  .bg-canvas  → canvas 2D generativo (solo variantes canvas)\n *  .bg-content → contenido sloteado — z-index 2\n */\nexport function backgroundTemplate(props: BackgroundTemplateProps): TemplateResult {\n  const { variant, isCanvas } = props;\n  const isAuroraDrift = variant === 'aurora-drift';\n\n  return html`\n    ${isCanvas\n      ? html`<canvas class=\"bg-canvas\"></canvas>`\n      : html`\n          <div class=\"bg-base\"></div>\n          <div class=\"bg-overlay\"></div>\n          ${isAuroraDrift\n            ? html`<div class=\"bg-orb-a\"></div><div class=\"bg-orb-b\"></div>`\n            : nothing}\n        `\n    }\n    <div class=\"bg-content\">\n      <slot></slot>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAaO,SAAS,mBAAmB,OAAgD;AACjF,QAAM,EAAE,SAAS,SAAA,IAAa;AAC9B,QAAM,gBAAgB,YAAY;AAElC,SAAO;AAAA,MACH,WACE,4CACA;AAAA;AAAA;AAAA,YAGI,gBACE,iEACA,OAAO;AAAA,SAEjB;AAAA;AAAA;AAAA;AAAA;AAKJ;"}

package/dist/index267.js

@@ -0,0 +1,12 @@
+const BG_CANVAS_VARIANTS = /* @__PURE__ */ new Set([
+  "particles",
+  "rain",
+  "wave-mesh",
+  "constellation",
+  "fireflies",
+  "ink-wash"
+]);
+export {
+  BG_CANVAS_VARIANTS
+};
+//# sourceMappingURL=index267.js.map

package/dist/index267.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index267.js","sources":["../src/components/atoms/background/lib-background.types.ts"],"sourcesContent":["/* ============================================================\n   LIB-BACKGROUND — Tipos e interfaces públicas\n   52 variantes: 15 light · 15 dark · 8 gradient · 8 animated · 6 canvas\n   ============================================================ */\n\n/** 15 fondos light inspirados en papel y textil japonés */\nexport type LibBackgroundLight =\n  | 'washi'\n  | 'washi-grain'\n  | 'washi-weave'\n  | 'seigaiha'\n  | 'tatami'\n  | 'asanoha'\n  | 'sashiko'\n  | 'komon'\n  | 'kasuri'\n  | 'nishiki'\n  /* ── Nuevos ── */\n  | 'kagome'      /* 籠目  hexagonal basket weave */\n  | 'shoji'       /* 障子  paper screen fine grid */\n  | 'shibori'     /* 絞り  tie-dye concentric circles */\n  | 'ori'         /* 織   diagonal woven textile */\n  | 'chirimen';   /* 縮緬  crepe silk fine crinkle */\n\n/** 15 fondos dark derivados de la tinta sumi */\nexport type LibBackgroundDark =\n  | 'sumi'\n  | 'sumi-grain'\n  | 'kintsugi'\n  | 'ash-grid'\n  | 'ink-dot'\n  | 'mokume'\n  | 'kumo'\n  | 'temari'\n  | 'dusk'\n  | 'embers'\n  /* ── Nuevos ── */\n  | 'obsidian'    /* 黒曜石  mineral shimmer sobre negro profundo */\n  | 'forge'       /* 鍛冶   brasa naranja desde abajo */\n  | 'void'        /* 虚空   vignette radial, oscuridad pura */\n  | 'yami'        /* 闇     degradado de profundidad casi imperceptible */\n  | 'midnight';   /* 深夜   matriz de puntos finos sobre near-black */\n\n/** 8 fondos de gradiente mesh */\nexport type LibBackgroundGradient =\n  | 'aurora-light'\n  | 'kaki-glow'\n  | 'celadon-mist'\n  | 'noctiluca'\n  | 'horizon'\n  /* ── Nuevos ── */\n  | 'sakura'      /* 桜    rosa-washi suave */\n  | 'twilight'    /* 黄昏  kaki cálido a oscuro */\n  | 'jade-deep';  /* 翡翠  celadón profundo con humo */\n\n/** 8 fondos animados en CSS puro */\nexport type LibBackgroundAnimated =\n  | 'breathing'\n  | 'aurora-drift'\n  | 'scan'\n  | 'ink-drop'\n  | 'shimmer'\n  /* ── Nuevos ── */\n  | 'pulse'       /* anillos kintsugi expandiéndose desde el centro */\n  | 'fog'         /* niebla lenta cruzando de izquierda a derecha */\n  | 'static';     /* ruido CRT — estética glitch */\n\n/** 6 fondos generativos en Canvas 2D */\nexport type LibBackgroundCanvas =\n  | 'particles'\n  | 'rain'\n  | 'wave-mesh'\n  | 'constellation'\n  /* ── Nuevos ── */\n  | 'fireflies'   /* partículas luminosas con movimiento orgánico */\n  | 'ink-wash';   /* manchas de tinta expandiéndose sobre papel */\n\n/** Unión completa de las 52 variantes */\nexport type LibBackgroundVariant =\n  | LibBackgroundLight\n  | LibBackgroundDark\n  | LibBackgroundGradient\n  | LibBackgroundAnimated\n  | LibBackgroundCanvas;\n\n/** Props del template */\nexport interface BackgroundTemplateProps {\n  variant:  LibBackgroundVariant;\n  isCanvas: boolean;\n}\n\n/** Set de variantes canvas (requieren inicialización JS) */\nexport const BG_CANVAS_VARIANTS = new Set<LibBackgroundVariant>([\n  'particles', 'rain', 'wave-mesh', 'constellation',\n  'fireflies', 'ink-wash',\n]);\n\n/** Set de variantes oscuras (para decidir color de demo content) */\nexport const BG_DARK_VARIANTS = new Set<LibBackgroundVariant>([\n  'sumi', 'sumi-grain', 'kintsugi', 'ash-grid', 'ink-dot',\n  'mokume', 'kumo', 'temari', 'dusk', 'embers',\n  'obsidian', 'forge', 'void', 'yami', 'midnight',\n  'noctiluca', 'aurora-drift', 'scan', 'particles', 'rain',\n  'constellation', 'twilight', 'jade-deep', 'pulse', 'fog',\n  'static', 'fireflies', 'ink-wash',\n]);"],"names":[],"mappings":"AA4FO,MAAM,yCAAyB,IAA0B;AAAA,EAC9D;AAAA,EAAa;AAAA,EAAQ;AAAA,EAAa;AAAA,EAClC;AAAA,EAAa;AACf,CAAC;"}

package/dist/index268.js

@@ -0,0 +1,58 @@
+import { html, nothing } from "lit";
+const glitchGhost = html`
+  <div class="burger-ghost">
+    <svg class="ghost-a" width="52" height="52" viewBox="0 0 52 52" fill="none">
+      <line x1="12" y1="19" x2="40" y2="19" stroke="rgba(217,114,52,0.6)"  stroke-width="1.5"/>
+      <line x1="12" y1="26" x2="40" y2="26" stroke="rgba(217,114,52,0.6)"  stroke-width="1.5"/>
+      <line x1="12" y1="33" x2="40" y2="33" stroke="rgba(217,114,52,0.6)"  stroke-width="1.5"/>
+    </svg>
+    <svg class="ghost-b" width="52" height="52" viewBox="0 0 52 52" fill="none">
+      <line x1="12" y1="19" x2="40" y2="19" stroke="rgba(78,148,130,0.4)"  stroke-width="1"/>
+      <line x1="12" y1="26" x2="40" y2="26" stroke="rgba(78,148,130,0.4)"  stroke-width="1"/>
+      <line x1="12" y1="33" x2="40" y2="33" stroke="rgba(78,148,130,0.4)"  stroke-width="1"/>
+    </svg>
+  </div>`;
+const lines = html`
+  <div class="burger-lines">
+    <span class="burger-line"></span>
+    <span class="burger-line"></span>
+    <span class="burger-line"></span>
+  </div>`;
+function burgerBtn(ctx) {
+  return html`
+    <button
+      class="burger"
+      part="burger"
+      aria-label="${ctx.ariaLabel || "Menú"}"
+      aria-expanded="${ctx.open}"
+      @click="${() => ctx._handleClick()}"
+    >
+      ${ctx.variant === "glitch" ? glitchGhost : nothing}
+      ${lines}
+    </button>`;
+}
+function burgerTemplate(ctx) {
+  if (!ctx.label) return burgerBtn(ctx);
+  return html`
+    <div
+      class="burger-wrap"
+      part="wrap"
+      @click="${() => ctx._handleClick()}"
+    >
+      <button
+        class="burger"
+        part="burger"
+        aria-label="${ctx.ariaLabel || "Menú"}"
+        aria-expanded="${ctx.open}"
+        @click="${(e) => e.stopPropagation()}"
+      >
+        ${ctx.variant === "glitch" ? glitchGhost : nothing}
+        ${lines}
+      </button>
+      <span class="burger-label" part="label">${ctx._labelText}</span>
+    </div>`;
+}
+export {
+  burgerTemplate
+};
+//# sourceMappingURL=index268.js.map

package/dist/index268.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index268.js","sources":["../src/components/atoms/burger-button/lib-burger-button.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibBurger } from './lib-burger-button.component';\n\n/* SVG ghost lines para la variante glitch */\nconst glitchGhost: TemplateResult = html`\n  <div class=\"burger-ghost\">\n    <svg class=\"ghost-a\" width=\"52\" height=\"52\" viewBox=\"0 0 52 52\" fill=\"none\">\n      <line x1=\"12\" y1=\"19\" x2=\"40\" y2=\"19\" stroke=\"rgba(217,114,52,0.6)\"  stroke-width=\"1.5\"/>\n      <line x1=\"12\" y1=\"26\" x2=\"40\" y2=\"26\" stroke=\"rgba(217,114,52,0.6)\"  stroke-width=\"1.5\"/>\n      <line x1=\"12\" y1=\"33\" x2=\"40\" y2=\"33\" stroke=\"rgba(217,114,52,0.6)\"  stroke-width=\"1.5\"/>\n    </svg>\n    <svg class=\"ghost-b\" width=\"52\" height=\"52\" viewBox=\"0 0 52 52\" fill=\"none\">\n      <line x1=\"12\" y1=\"19\" x2=\"40\" y2=\"19\" stroke=\"rgba(78,148,130,0.4)\"  stroke-width=\"1\"/>\n      <line x1=\"12\" y1=\"26\" x2=\"40\" y2=\"26\" stroke=\"rgba(78,148,130,0.4)\"  stroke-width=\"1\"/>\n      <line x1=\"12\" y1=\"33\" x2=\"40\" y2=\"33\" stroke=\"rgba(78,148,130,0.4)\"  stroke-width=\"1\"/>\n    </svg>\n  </div>`;\n\n/* Las tres líneas internas */\nconst lines: TemplateResult = html`\n  <div class=\"burger-lines\">\n    <span class=\"burger-line\"></span>\n    <span class=\"burger-line\"></span>\n    <span class=\"burger-line\"></span>\n  </div>`;\n\n/* Botón principal */\nfunction burgerBtn(ctx: LibBurger): TemplateResult {\n  return html`\n    <button\n      class=\"burger\"\n      part=\"burger\"\n      aria-label=\"${ctx.ariaLabel || 'Menú'}\"\n      aria-expanded=\"${ctx.open}\"\n      @click=\"${(): void => ctx._handleClick()}\"\n    >\n      ${ctx.variant === 'glitch' ? glitchGhost : nothing}\n      ${lines}\n    </button>`;\n}\n\nexport function burgerTemplate(ctx: LibBurger): TemplateResult {\n  /* Sin label — renderiza solo el botón */\n  if (!ctx.label) return burgerBtn(ctx);\n\n  /* Con label — wrapper flex */\n  return html`\n    <div\n      class=\"burger-wrap\"\n      part=\"wrap\"\n      @click=\"${(): void => ctx._handleClick()}\"\n    >\n      <button\n        class=\"burger\"\n        part=\"burger\"\n        aria-label=\"${ctx.ariaLabel || 'Menú'}\"\n        aria-expanded=\"${ctx.open}\"\n        @click=\"${(e: MouseEvent): void => e.stopPropagation()}\"\n      >\n        ${ctx.variant === 'glitch' ? glitchGhost : nothing}\n        ${lines}\n      </button>\n      <span class=\"burger-label\" part=\"label\">${ctx._labelText}</span>\n    </div>`;\n}"],"names":[],"mappings":";AAIA,MAAM,cAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAepC,MAAM,QAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ9B,SAAS,UAAU,KAAgC;AACjD,SAAO;AAAA;AAAA;AAAA;AAAA,oBAIW,IAAI,aAAa,MAAM;AAAA,uBACpB,IAAI,IAAI;AAAA,gBACf,MAAY,IAAI,cAAc;AAAA;AAAA,QAEtC,IAAI,YAAY,WAAW,cAAc,OAAO;AAAA,QAChD,KAAK;AAAA;AAEb;AAEO,SAAS,eAAe,KAAgC;AAE7D,MAAI,CAAC,IAAI,MAAO,QAAO,UAAU,GAAG;AAGpC,SAAO;AAAA;AAAA;AAAA;AAAA,gBAIO,MAAY,IAAI,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKxB,IAAI,aAAa,MAAM;AAAA,yBACpB,IAAI,IAAI;AAAA,kBACf,CAAC,MAAwB,EAAE,iBAAiB;AAAA;AAAA,UAEpD,IAAI,YAAY,WAAW,cAAc,OAAO;AAAA,UAChD,KAAK;AAAA;AAAA,gDAEiC,IAAI,UAAU;AAAA;AAE9D;"}