@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index4.js

@@ -1,8 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
-import "./index22.js";
-import { copyButtonTemplate } from "./index194.js";
-import copyButtonCss from "./index195.js";
+import { property, customElement } from "lit/decorators.js";
+import { accordionItemTemplate } from "./index265.js";
+import accordionItemCss from "./index266.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -14,101 +13,44 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const COPIED_DURATION = 1800;
-let LibCopyButton = class extends LitElement {
+let LibAccordionItem = class extends LitElement {
   constructor() {
     super(...arguments);
-    this._resetTimer = null;
-    this.value = "";
-    this.variant = "ghost";
-    this.size = "md";
-    this.iconOnly = false;
-    this.label = "Copiar";
-    this.successLabel = "Copiado";
-    this.tooltip = false;
-    this.disabled = false;
-    this._copied = false;
+    this.label = "";
+    this.open = false;
   }
-  /** Refleja _copied como atributo para que los selectores CSS :host([copied]) funcionen */
-  updated(changed) {
-    if (changed.has("_copied")) {
-      this.toggleAttribute("copied", this._copied);
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._resetTimer) clearTimeout(this._resetTimer);
-  }
-  async _handleClick() {
-    if (!this.value || this.disabled || this._copied) return;
-    try {
-      await navigator.clipboard.writeText(this.value);
-      this._copied = true;
-      this.dispatchEvent(
-        new CustomEvent("lib-copy", {
-          detail: { value: this.value },
-          bubbles: true,
-          composed: true
-        })
-      );
-      if (this._resetTimer) clearTimeout(this._resetTimer);
-      this._resetTimer = setTimeout(() => {
-        this._copied = false;
-      }, COPIED_DURATION);
-    } catch (err) {
-      console.error("[lib-copy-button] Error al copiar:", err);
-    }
+  _handleToggle() {
+    this.open = !this.open;
+    this.dispatchEvent(
+      new CustomEvent("accordion-toggle", {
+        bubbles: true,
+        composed: true,
+        detail: { open: this.open }
+      })
+    );
   }
   render() {
-    return copyButtonTemplate({
-      value: this.value,
-      variant: this.variant,
-      size: this.size,
-      iconOnly: this.iconOnly,
+    return accordionItemTemplate({
       label: this.label,
-      successLabel: this.successLabel,
-      tooltip: this.tooltip,
-      copied: this._copied,
-      disabled: this.disabled,
-      onClick: this._handleClick.bind(this)
+      open: this.open,
+      onToggle: this._handleToggle.bind(this)
     });
   }
 };
-LibCopyButton.styles = [
+LibAccordionItem.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(copyButtonCss)}`
+  css`${unsafeCSS(accordionItemCss)}`
 ];
 __decorateClass([
   property({ type: String })
-], LibCopyButton.prototype, "value", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibCopyButton.prototype, "variant", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibCopyButton.prototype, "size", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "icon-only" })
-], LibCopyButton.prototype, "iconOnly", 2);
-__decorateClass([
-  property({ type: String })
-], LibCopyButton.prototype, "label", 2);
-__decorateClass([
-  property({ type: String, attribute: "success-label" })
-], LibCopyButton.prototype, "successLabel", 2);
+], LibAccordionItem.prototype, "label", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibCopyButton.prototype, "tooltip", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibCopyButton.prototype, "disabled", 2);
-__decorateClass([
-  state()
-], LibCopyButton.prototype, "_copied", 2);
-LibCopyButton = __decorateClass([
-  customElement("lib-copy-button")
-], LibCopyButton);
+], LibAccordionItem.prototype, "open", 2);
+LibAccordionItem = __decorateClass([
+  customElement("lib-accordion-item")
+], LibAccordionItem);
 export {
-  LibCopyButton
+  LibAccordionItem
 };
 //# sourceMappingURL=index4.js.map

package/dist/index4.js.map

@@ -1 +1 @@
-{"version":3,"file":"index4.js","sources":["../src/components/atoms/copy-button/lib-copy-button.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '../../atoms/icon/lib-icon.component';\nimport type { LibCopyVariant, LibCopySize } from './lib-copy-button.html';\nimport { copyButtonTemplate } from './lib-copy-button.html';\nimport copyButtonCss from './lib-copy-button.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/** Tiempo en ms que el estado copiado permanece activo */\nconst COPIED_DURATION = 1800;\n\n/**\n * @element lib-copy-button\n *\n * Boton que copia texto al portapapeles y confirma la accion\n * con un checkmark animado (crossfade idle/copied con ease-bounce).\n *\n * @fires lib-copy - Emitido al copiar con exito. detail: { value: string }\n *\n * @example\n * <lib-copy-button value=\"npm install @shibui-ui/ui\"></lib-copy-button>\n * <lib-copy-button value=\"sk-ant-api03-xyz\" variant=\"outlined\" tooltip></lib-copy-button>\n * <lib-copy-button value=\"copy me\" variant=\"ghost\" icon-only size=\"sm\"></lib-copy-button>\n */\n@customElement('lib-copy-button')\nexport class LibCopyButton extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(copyButtonCss)}`,\n  ];\n\n  private _resetTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** Texto que se copia al portapapeles */\n  @property({ type: String })\n  value = '';\n\n  /** Variante visual */\n  @property({ type: String, reflect: true })\n  variant: LibCopyVariant = 'ghost';\n\n  /** Tamaño */\n  @property({ type: String, reflect: true })\n  size: LibCopySize = 'md';\n\n  /** Modo icono-solo (sin label, cuadrado) */\n  @property({ type: Boolean, reflect: true, attribute: 'icon-only' })\n  iconOnly = false;\n\n  /** Label en estado idle */\n  @property({ type: String })\n  label = 'Copiar';\n\n  /** Label en estado copiado */\n  @property({ type: String, attribute: 'success-label' })\n  successLabel = 'Copiado';\n\n  /** Muestra un tooltip \"Copiado\" al copiar */\n  @property({ type: Boolean, reflect: true })\n  tooltip = false;\n\n  /** Estado deshabilitado */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Estado interno — activa el crossfade y el tooltip */\n  @state()\n  private _copied = false;\n\n  /** Refleja _copied como atributo para que los selectores CSS :host([copied]) funcionen */\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('_copied')) {\n      this.toggleAttribute('copied', this._copied);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._resetTimer) clearTimeout(this._resetTimer);\n  }\n\n  private async _handleClick(): Promise<void> {\n    if (!this.value || this.disabled || this._copied) return;\n\n    try {\n      await navigator.clipboard.writeText(this.value);\n      this._copied = true;\n\n      this.dispatchEvent(\n        new CustomEvent('lib-copy', {\n          detail: { value: this.value },\n          bubbles: true,\n          composed: true,\n        })\n      );\n\n      if (this._resetTimer) clearTimeout(this._resetTimer);\n      this._resetTimer = setTimeout(() => {\n        this._copied = false;\n      }, COPIED_DURATION);\n\n    } catch (err) {\n      console.error('[lib-copy-button] Error al copiar:', err);\n    }\n  }\n\n  override render(): TemplateResult {\n    return copyButtonTemplate({\n      value: this.value,\n      variant: this.variant,\n      size: this.size,\n      iconOnly: this.iconOnly,\n      label: this.label,\n      successLabel: this.successLabel,\n      tooltip: this.tooltip,\n      copied: this._copied,\n      disabled: this.disabled,\n      onClick: this._handleClick.bind(this),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-copy-button': LibCopyButton;\n  }\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"index4.js","sources":["../src/components/atoms/accordion-item/lib-accordion-item.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { accordionItemTemplate } from './lib-accordion-item.component.html';\nimport accordionItemCss from './lib-accordion-item.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-accordion-item\n *\n * Item colapsable individual. Puede usarse standalone o dentro de lib-accordion.\n * El padre lib-accordion orquesta el comportamiento mutually-exclusive y\n * aplica variantes (flush, separated, accent) via CSS custom properties.\n *\n * @slot - Contenido colapsable\n *\n * @fires accordion-toggle - Emitido al hacer clic en el trigger.\n *   detail: { open: boolean }\n *\n * @example\n * <lib-accordion-item label=\"Pregunta\" open>\n *   Respuesta detallada aqui.\n * </lib-accordion-item>\n */\n@customElement('lib-accordion-item')\nexport class LibAccordionItem extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(accordionItemCss)}`,\n  ];\n\n  /** Texto del trigger (cabecera del item) */\n  @property({ type: String })\n  label = '';\n\n  /** Estado abierto/cerrado */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  private _handleToggle(): void {\n    this.open = !this.open;\n\n    this.dispatchEvent(\n      new CustomEvent<{ open: boolean }>('accordion-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { open: this.open },\n      })\n    );\n  }\n\n  override render(): TemplateResult {\n    return accordionItemTemplate({\n      label: this.label,\n      open: this.open,\n      onToggle: this._handleToggle.bind(this),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-accordion-item': LibAccordionItem;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBO,IAAM,mBAAN,cAA+B,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,QAAQ;AAIR,SAAA,OAAO;AAAA,EAAA;AAAA,EAEC,gBAAsB;AAC5B,SAAK,OAAO,CAAC,KAAK;AAElB,SAAK;AAAA,MACH,IAAI,YAA+B,oBAAoB;AAAA,QACrD,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,MAAM,KAAK,KAAA;AAAA,MAAK,CAC3B;AAAA,IAAA;AAAA,EAEL;AAAA,EAES,SAAyB;AAChC,WAAO,sBAAsB;AAAA,MAC3B,OAAO,KAAK;AAAA,MACZ,MAAM,KAAK;AAAA,MACX,UAAU,KAAK,cAAc,KAAK,IAAI;AAAA,IAAA,CACvC;AAAA,EACH;AACF;AAjCa,iBACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,gBAAgB,CAAC;AACnC;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,iBAQX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAX/B,iBAYX,WAAA,QAAA,CAAA;AAZW,mBAAN,gBAAA;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB,gBAAA;"}

package/dist/index40.js

@@ -1,9 +1,6 @@
-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";
+import { css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { styleMap as o } from "./index267.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,409 +11,38 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibBackground = class extends LitElement {
+let LibSpacer = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.variant = "washi";
-    this.paused = false;
-    this._raf = 0;
-    this._ro = null;
+    this.size = "md";
+    this.horizontal = false;
   }
-  /* ── 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)
-    });
+    const spaceValue = `var(--lib-space-${this.size}, 16px)`;
+    const styles = this.horizontal ? { width: spaceValue, height: "100%" } : { height: spaceValue, width: "100%" };
+    return html`<div style=${o(styles)}></div>`;
   }
 };
-LibBackground.styles = [
-  css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(backgroundCss)}`
-];
+LibSpacer.styles = css`
+    :host {
+      display: block;
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
+    :host([horizontal]) {
+      display: inline-block;
+    }
+  `;
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibBackground.prototype, "variant", 2);
+  property({ type: String })
+], LibSpacer.prototype, "size", 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);
+], LibSpacer.prototype, "horizontal", 2);
+LibSpacer = __decorateClass([
+  customElement("lib-spacer")
+], LibSpacer);
 export {
-  LibBackground
+  LibSpacer
 };
 //# sourceMappingURL=index40.js.map