@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index29.js

@@ -1,7 +1,9 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { state, customElement } from "lit/decorators.js";
-import { rippleTemplate } from "./index242.js";
-import styles from "./index243.js";
+import { property, query, customElement } from "lit/decorators.js";
+import { buttonLiquidTemplate } from "./index314.js";
+import liquidCss from "./index315.js";
+import sharedTokens from "./index196.js";
+import { LIQUID_PALETTES } from "./index316.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -12,57 +14,265 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibRipple = class extends LitElement {
-  constructor() {
-    super(...arguments);
+class WaterPhysics {
+  constructor(btn, canvas, water, ripple) {
+    this.fill = 0;
+    this.targetFill = 0;
+    this.fillSpeed = 0.032;
+    this.shimmerX = -1;
+    this.t = 0;
+    this.hovered = false;
+    this.raf = 0;
+    this.A = 3.5;
+    this.f1 = 0.038;
+    this.f2 = 0.063;
+    this.s1 = 1.8;
+    this.s2 = 1.2;
+    this.W = 0;
+    this.H = 0;
     this.ripples = [];
-    this.count = 0;
-    this.createRipple = (event) => {
-      console.log("LibRipple: Click detectado en coordenadas:", event.clientX, event.clientY);
-      if (!this.parentElement) return;
-      const rect = this.parentElement.getBoundingClientRect();
-      const size = Math.sqrt(rect.width ** 2 + rect.height ** 2) * 2;
-      const x = event.clientX - rect.left - size / 2;
-      const y = event.clientY - rect.top - size / 2;
-      const id = this.count++;
-      const newRipple = { id, x, y, size };
-      this.ripples = [...this.ripples, newRipple];
+    this.btn = btn;
+    this.canvas = canvas;
+    this.ctx = canvas.getContext("2d");
+    [this.wr, this.wg, this.wb] = water;
+    [this.rr, this.rg, this.rb] = ripple;
+    this.resize();
+    this.loop();
+  }
+  /* ── Dimensiones con DPR ── */
+  resize() {
+    const r = this.btn.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    this.W = r.width;
+    this.H = r.height;
+    this.canvas.width = this.W * dpr;
+    this.canvas.height = this.H * dpr;
+    this.canvas.style.width = `${this.W}px`;
+    this.canvas.style.height = `${this.H}px`;
+    this.ctx.scale(dpr, dpr);
+  }
+  /* ── Spawn de ripple ── */
+  spawnRipple(x, y, { speed = 2.2, maxR, lineWidth = 1.2 } = {}) {
+    const diag = Math.sqrt(this.W ** 2 + this.H ** 2);
+    this.ripples.push({
+      x,
+      y,
+      radius: 0,
+      maxRadius: maxR ?? diag * 0.72,
+      speed,
+      lineWidth,
+      opacity: 0
+    });
+  }
+  /* ── Eventos públicos — llamados por el componente Lit ── */
+  onMouseEnter(x, y) {
+    this.hovered = true;
+    this.targetFill = 1;
+    this.fillSpeed = 0.028;
+    this.shimmerX = -0.3;
+    this.spawnRipple(x, y, { speed: 3.2, lineWidth: 1.8 });
+    setTimeout(() => this.spawnRipple(x, y, { speed: 2, lineWidth: 1.1 }), 80);
+    setTimeout(() => this.spawnRipple(x, y, { speed: 1.3, lineWidth: 0.7 }), 180);
+  }
+  onMouseLeave() {
+    this.hovered = false;
+    this.targetFill = 0;
+    this.fillSpeed = 0.048;
+  }
+  onMouseDown(cx, cy) {
+    for (let i = 0; i < 3; i++) {
       setTimeout(() => {
-        this.ripples = this.ripples.filter((r) => r.id !== id);
-      }, 600);
+        this.spawnRipple(cx, cy, {
+          speed: 4 - i * 0.8,
+          maxR: this.W * 0.5,
+          lineWidth: 2 - i * 0.4
+        });
+      }, i * 40);
+    }
+  }
+  /* ── Dibujo ── */
+  drawWave() {
+    const { ctx, W, H, A, f1, f2, s1, s2, t, wr, wg, wb, fill } = this;
+    if (fill <= 1e-3) return;
+    const baseY = H * (1 - fill);
+    ctx.beginPath();
+    ctx.moveTo(0, H);
+    ctx.lineTo(0, baseY);
+    for (let x = 0; x <= W; x++) {
+      const y = baseY + A * Math.sin(x * f1 + t * s1) + A * 0.45 * Math.sin(x * f2 - t * s2);
+      ctx.lineTo(x, y);
+    }
+    ctx.lineTo(W, H);
+    ctx.closePath();
+    const grad = ctx.createLinearGradient(0, baseY - A * 2, 0, H);
+    grad.addColorStop(0, `rgba(${wr},${wg},${wb},0.82)`);
+    grad.addColorStop(0.4, `rgba(${wr},${wg},${wb},0.92)`);
+    grad.addColorStop(1, `rgba(${wr},${wg},${wb},0.98)`);
+    ctx.fillStyle = grad;
+    ctx.fill();
+    if (this.shimmerX > -0.5 && this.shimmerX < 1.5) {
+      const sx = W * this.shimmerX;
+      const sg = ctx.createLinearGradient(sx - 40, 0, sx + 40, 0);
+      sg.addColorStop(0, "rgba(255,255,255,0)");
+      sg.addColorStop(0.5, "rgba(255,255,255,0.12)");
+      sg.addColorStop(1, "rgba(255,255,255,0)");
+      ctx.fillStyle = sg;
+      ctx.fillRect(0, Math.max(0, baseY - 4), W, H - Math.max(0, baseY - 4));
+    }
+  }
+  drawRipples() {
+    const { ctx, rr, rg, rb } = this;
+    this.ripples = this.ripples.filter((r) => r.opacity > 0 || r.radius === 0);
+    for (const r of this.ripples) {
+      r.radius += r.speed;
+      r.opacity = Math.max(0, 1 - r.radius / r.maxRadius);
+      ctx.beginPath();
+      ctx.arc(r.x, r.y, r.radius, 0, Math.PI * 2);
+      ctx.strokeStyle = `rgba(${rr},${rg},${rb},${r.opacity * 0.9})`;
+      ctx.lineWidth = r.lineWidth;
+      ctx.stroke();
+      if (r.radius > 6) {
+        ctx.beginPath();
+        ctx.arc(r.x, r.y, r.radius * 0.65, 0, Math.PI * 2);
+        ctx.strokeStyle = `rgba(${rr},${rg},${rb},${r.opacity * 0.4})`;
+        ctx.lineWidth = r.lineWidth * 0.5;
+        ctx.stroke();
+      }
+    }
+    this.ripples = this.ripples.filter((r) => r.opacity > 0);
+  }
+  /* ── Loop principal ── */
+  loop() {
+    const tick = () => {
+      this.raf = requestAnimationFrame(tick);
+      const { ctx, W, H } = this;
+      this.t += 0.04;
+      const diff = this.targetFill - this.fill;
+      this.fill += diff * this.fillSpeed * 2.8;
+      if (Math.abs(diff) < 5e-4) this.fill = this.targetFill;
+      if (this.hovered && this.shimmerX < 1.6) {
+        this.shimmerX += 0.012;
+      }
+      if (this.fill <= 1e-3 && this.ripples.length === 0) return;
+      ctx.clearRect(0, 0, W, H);
+      this.drawWave();
+      this.drawRipples();
     };
+    this.raf = requestAnimationFrame(tick);
+  }
+  /* ── Cleanup ── */
+  destroy() {
+    cancelAnimationFrame(this.raf);
+  }
+}
+let LibButtonLiquid = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "ink";
+    this.size = "md";
+    this.disabled = false;
+    this.loading = false;
+    this.dark = false;
+    this.block = false;
+    this._physics = null;
+    this._canvas = null;
+    this._ro = null;
   }
-  // 1. Aseguramos la conexión al padre cuando el componente entra al DOM
+  /* ── Lifecycle ── */
   firstUpdated() {
-    console.log("LibRipple: ¡Estoy vivo y montado!");
-    if (this.parentElement) {
-      console.log("LibRipple: Padre detectado ->", this.parentElement.tagName);
-      const parentStyle = window.getComputedStyle(this.parentElement);
-      if (parentStyle.position === "static") {
-        this.parentElement.style.position = "relative";
-      }
-      this.parentElement.addEventListener("mousedown", this.createRipple);
-    } else {
-      console.error("LibRipple: No se encontró parentElement. ¿Está el componente dentro de un contenedor?");
+    this._initCanvas();
+  }
+  updated(changed) {
+    if (changed.has("variant")) {
+      this._destroyCanvas();
+      this._initCanvas();
     }
   }
   disconnectedCallback() {
     var _a;
-    (_a = this.parentElement) == null ? void 0 : _a.removeEventListener("mousedown", this.createRipple);
     super.disconnectedCallback();
+    this._destroyCanvas();
+    (_a = this._ro) == null ? void 0 : _a.disconnect();
+  }
+  /* ── Canvas setup ── */
+  _initCanvas() {
+    if (!this._btn) return;
+    const canvas = document.createElement("canvas");
+    this._canvas = canvas;
+    this._btn.insertBefore(canvas, this._btn.firstChild);
+    const palette = LIQUID_PALETTES[this.variant];
+    this._physics = new WaterPhysics(this._btn, canvas, palette.water, palette.ripple);
+    this._ro = new ResizeObserver(() => {
+      var _a;
+      return (_a = this._physics) == null ? void 0 : _a.resize();
+    });
+    this._ro.observe(this._btn);
+  }
+  _destroyCanvas() {
+    var _a, _b, _c;
+    (_a = this._physics) == null ? void 0 : _a.destroy();
+    this._physics = null;
+    (_b = this._canvas) == null ? void 0 : _b.remove();
+    this._canvas = null;
+    (_c = this._ro) == null ? void 0 : _c.disconnect();
+    this._ro = null;
+  }
+  /* ── Eventos del canvas — llamados desde el template ── */
+  _onMouseEnter(e) {
+    var _a;
+    if (this.disabled || this.loading) return;
+    const rect = this._btn.getBoundingClientRect();
+    (_a = this._physics) == null ? void 0 : _a.onMouseEnter(e.clientX - rect.left, e.clientY - rect.top);
+  }
+  _onMouseLeave() {
+    var _a;
+    (_a = this._physics) == null ? void 0 : _a.onMouseLeave();
+  }
+  _onMouseDown(e) {
+    var _a;
+    if (this.disabled || this.loading) return;
+    const rect = this._btn.getBoundingClientRect();
+    (_a = this._physics) == null ? void 0 : _a.onMouseDown(e.clientX - rect.left, e.clientY - rect.top);
+    this.dispatchEvent(new CustomEvent("ui-lib-click", {
+      detail: { originalEvent: e },
+      bubbles: true,
+      composed: true
+    }));
   }
+  /* ── Render ── */
   render() {
-    return rippleTemplate(this.ripples);
+    return buttonLiquidTemplate(this);
   }
 };
-LibRipple.styles = [css`${unsafeCSS(styles)}`];
+LibButtonLiquid.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(liquidCss)}`
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibButtonLiquid.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibButtonLiquid.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButtonLiquid.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButtonLiquid.prototype, "loading", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButtonLiquid.prototype, "dark", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButtonLiquid.prototype, "block", 2);
 __decorateClass([
-  state()
-], LibRipple.prototype, "ripples", 2);
-LibRipple = __decorateClass([
-  customElement("lib-ripple")
-], LibRipple);
+  query(".btn")
+], LibButtonLiquid.prototype, "_btn", 2);
+LibButtonLiquid = __decorateClass([
+  customElement("lib-button-liquid")
+], LibButtonLiquid);
 export {
-  LibRipple
+  LibButtonLiquid
 };
 //# sourceMappingURL=index29.js.map

package/dist/index29.js.map

@@ -1 +1 @@
-{"version":3,"file":"index29.js","sources":["../src/components/atoms/ripple/lib-ripple.component.ts"],"sourcesContent":["import { LitElement, TemplateResult, css, unsafeCSS } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport { rippleTemplate } from './lib-ripple.html';\nimport styles from './lib-ripple.css?inline';\n\nexport interface RippleEffect {\n  id: number;\n  x: number;\n  y: number;\n  size: number;\n}\n\n@customElement('lib-ripple')\nexport class LibRipple extends LitElement {\n  // Importante: usamos unsafeCSS para el string del CSS inyectado\n  static override styles = [css`${unsafeCSS(styles)}`];\n\n  @state() private ripples: RippleEffect[] = [];\n  private count: number = 0;\n\n  // 1. Aseguramos la conexión al padre cuando el componente entra al DOM\n  override firstUpdated(): void {\n    console.log('LibRipple: ¡Estoy vivo y montado!');\n    \n    if (this.parentElement) {\n      console.log('LibRipple: Padre detectado ->', this.parentElement.tagName);\n      \n      // Forzamos que el padre sea relativo si no lo es\n      const parentStyle = window.getComputedStyle(this.parentElement);\n      if (parentStyle.position === 'static') {\n        this.parentElement.style.position = 'relative';\n      }\n\n      this.parentElement.addEventListener('mousedown', this.createRipple);\n    } else {\n      console.error('LibRipple: No se encontró parentElement. ¿Está el componente dentro de un contenedor?');\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.parentElement?.removeEventListener('mousedown', this.createRipple);\n    super.disconnectedCallback();\n  }\n\n  private createRipple = (event: MouseEvent): void => {\n    console.log('LibRipple: Click detectado en coordenadas:', event.clientX, event.clientY);\n    \n    if (!this.parentElement) return;\n\n    const rect: DOMRect = this.parentElement.getBoundingClientRect();\n    \n    // Calculamos el tamaño para cubrir todo el contenedor (Pitágoras pro)\n    const size: number = Math.sqrt(rect.width ** 2 + rect.height ** 2) * 2;\n    \n    const x: number = event.clientX - rect.left - size / 2;\n    const y: number = event.clientY - rect.top - size / 2;\n\n    const id: number = this.count++;\n    const newRipple: RippleEffect = { id, x, y, size };\n    \n    this.ripples = [...this.ripples, newRipple];\n\n    // Limpiamos después de la animación (600ms según tus tokens)\n    setTimeout(() => {\n      this.ripples = this.ripples.filter(r => r.id !== id);\n    }, 600);\n  };\n\n  protected override render(): TemplateResult {\n    return rippleTemplate(this.ripples);\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;AAaO,IAAM,YAAN,cAAwB,WAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA;AAII,SAAQ,UAA0B,CAAA;AAC3C,SAAQ,QAAgB;AA0BxB,SAAQ,eAAe,CAAC,UAA4B;AAClD,cAAQ,IAAI,8CAA8C,MAAM,SAAS,MAAM,OAAO;AAEtF,UAAI,CAAC,KAAK,cAAe;AAEzB,YAAM,OAAgB,KAAK,cAAc,sBAAA;AAGzC,YAAM,OAAe,KAAK,KAAK,KAAK,SAAS,IAAI,KAAK,UAAU,CAAC,IAAI;AAErE,YAAM,IAAY,MAAM,UAAU,KAAK,OAAO,OAAO;AACrD,YAAM,IAAY,MAAM,UAAU,KAAK,MAAM,OAAO;AAEpD,YAAM,KAAa,KAAK;AACxB,YAAM,YAA0B,EAAE,IAAI,GAAG,GAAG,KAAA;AAE5C,WAAK,UAAU,CAAC,GAAG,KAAK,SAAS,SAAS;AAG1C,iBAAW,MAAM;AACf,aAAK,UAAU,KAAK,QAAQ,OAAO,CAAA,MAAK,EAAE,OAAO,EAAE;AAAA,MACrD,GAAG,GAAG;AAAA,IACR;AAAA,EAAA;AAAA;AAAA,EA7CS,eAAqB;AAC5B,YAAQ,IAAI,mCAAmC;AAE/C,QAAI,KAAK,eAAe;AACtB,cAAQ,IAAI,iCAAiC,KAAK,cAAc,OAAO;AAGvE,YAAM,cAAc,OAAO,iBAAiB,KAAK,aAAa;AAC9D,UAAI,YAAY,aAAa,UAAU;AACrC,aAAK,cAAc,MAAM,WAAW;AAAA,MACtC;AAEA,WAAK,cAAc,iBAAiB,aAAa,KAAK,YAAY;AAAA,IACpE,OAAO;AACL,cAAQ,MAAM,uFAAuF;AAAA,IACvG;AAAA,EACF;AAAA,EAES,uBAA6B;;AACpC,eAAK,kBAAL,mBAAoB,oBAAoB,aAAa,KAAK;AAC1D,UAAM,qBAAA;AAAA,EACR;AAAA,EA0BmB,SAAyB;AAC1C,WAAO,eAAe,KAAK,OAAO;AAAA,EACpC;AACF;AA1Da,UAEK,SAAS,CAAC,MAAM,UAAU,MAAM,CAAC,EAAE;AAElC,gBAAA;AAAA,EAAhB,MAAA;AAAM,GAJI,UAIM,WAAA,WAAA,CAAA;AAJN,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}
+{"version":3,"file":"index29.js","sources":["../src/components/atoms/liquid-button/lib-liquid-button.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { buttonLiquidTemplate } from './lib-liquid-button.html';\nimport liquidCss from './lib-liquid-button.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport { LIQUID_PALETTES } from './lib-liquid-button.types';\nimport type { LiquidVariant, LiquidSize } from './lib-liquid-button.types';\n\n/* ============================================================\n   WaterPhysics — clase interna de física de canvas\n   Portada desde el SG-41 (vanilla JS → TypeScript puro)\n   ============================================================ */\nclass WaterPhysics {\n  private btn:        HTMLElement;\n  private canvas:     HTMLCanvasElement;\n  private ctx:        CanvasRenderingContext2D;\n\n  /* Colores */\n  private wr: number; private wg: number; private wb: number;\n  private rr: number; private rg: number; private rb: number;\n\n  /* Estado */\n  private fill       = 0;\n  private targetFill = 0;\n  private fillSpeed  = 0.032;\n  private shimmerX   = -1;\n  private t          = 0;\n  private hovered    = false;\n  private raf        = 0;\n\n  /* Física de onda */\n  private readonly A  = 3.5;\n  private readonly f1 = 0.038;\n  private readonly f2 = 0.063;\n  private readonly s1 = 1.8;\n  private readonly s2 = 1.2;\n\n  private W = 0;\n  private H = 0;\n\n  private ripples: Array<{\n    x: number; y: number;\n    radius: number; maxRadius: number;\n    speed: number; lineWidth: number;\n    opacity: number;\n  }> = [];\n\n  constructor(\n    btn: HTMLElement,\n    canvas: HTMLCanvasElement,\n    water: [number, number, number],\n    ripple: [number, number, number],\n  ) {\n    this.btn    = btn;\n    this.canvas = canvas;\n    this.ctx    = canvas.getContext('2d')!;\n    [this.wr, this.wg, this.wb] = water;\n    [this.rr, this.rg, this.rb] = ripple;\n\n    this.resize();\n    this.loop();\n  }\n\n  /* ── Dimensiones con DPR ── */\n  resize(): void {\n    const r   = this.btn.getBoundingClientRect();\n    const dpr = window.devicePixelRatio || 1;\n    this.W = r.width;\n    this.H = r.height;\n    this.canvas.width          = this.W * dpr;\n    this.canvas.height         = this.H * dpr;\n    this.canvas.style.width    = `${this.W}px`;\n    this.canvas.style.height   = `${this.H}px`;\n    this.ctx.scale(dpr, dpr);\n  }\n\n  /* ── Spawn de ripple ── */\n  spawnRipple(\n    x: number, y: number,\n    { speed = 2.2, maxR, lineWidth = 1.2 }:\n    { speed?: number; maxR?: number; lineWidth?: number } = {},\n  ): void {\n    const diag = Math.sqrt(this.W ** 2 + this.H ** 2);\n    this.ripples.push({\n      x, y,\n      radius:    0,\n      maxRadius: maxR ?? diag * 0.72,\n      speed,\n      lineWidth,\n      opacity:   0,\n    });\n  }\n\n  /* ── Eventos públicos — llamados por el componente Lit ── */\n  onMouseEnter(x: number, y: number): void {\n    this.hovered    = true;\n    this.targetFill = 1;\n    this.fillSpeed  = 0.028;\n    this.shimmerX   = -0.3;\n\n    this.spawnRipple(x, y, { speed: 3.2, lineWidth: 1.8 });\n    setTimeout((): void => this.spawnRipple(x, y, { speed: 2.0, lineWidth: 1.1 }), 80);\n    setTimeout((): void => this.spawnRipple(x, y, { speed: 1.3, lineWidth: 0.7 }), 180);\n  }\n\n  onMouseLeave(): void {\n    this.hovered    = false;\n    this.targetFill = 0;\n    this.fillSpeed  = 0.048;\n  }\n\n  onMouseDown(cx: number, cy: number): void {\n    for (let i = 0; i < 3; i++) {\n      setTimeout((): void => {\n        this.spawnRipple(cx, cy, {\n          speed:     4 - i * 0.8,\n          maxR:      this.W * 0.5,\n          lineWidth: 2 - i * 0.4,\n        });\n      }, i * 40);\n    }\n  }\n\n  /* ── Dibujo ── */\n  private drawWave(): void {\n    const { ctx, W, H, A, f1, f2, s1, s2, t, wr, wg, wb, fill } = this;\n    if (fill <= 0.001) return;\n\n    const baseY = H * (1 - fill);\n\n    /* Cuerpo sinusoidal */\n    ctx.beginPath();\n    ctx.moveTo(0, H);\n    ctx.lineTo(0, baseY);\n    for (let x = 0; x <= W; x++) {\n      const y = baseY\n        + A * Math.sin(x * f1 + t * s1)\n        + A * 0.45 * Math.sin(x * f2 - t * s2);\n      ctx.lineTo(x, y);\n    }\n    ctx.lineTo(W, H);\n    ctx.closePath();\n\n    /* Gradiente vertical */\n    const grad = ctx.createLinearGradient(0, baseY - A * 2, 0, H);\n    grad.addColorStop(0,   `rgba(${wr},${wg},${wb},0.82)`);\n    grad.addColorStop(0.4, `rgba(${wr},${wg},${wb},0.92)`);\n    grad.addColorStop(1,   `rgba(${wr},${wg},${wb},0.98)`);\n    ctx.fillStyle = grad;\n    ctx.fill();\n\n    /* Shimmer diagonal */\n    if (this.shimmerX > -0.5 && this.shimmerX < 1.5) {\n      const sx = W * this.shimmerX;\n      const sg = ctx.createLinearGradient(sx - 40, 0, sx + 40, 0);\n      sg.addColorStop(0,   'rgba(255,255,255,0)');\n      sg.addColorStop(0.5, 'rgba(255,255,255,0.12)');\n      sg.addColorStop(1,   'rgba(255,255,255,0)');\n      ctx.fillStyle = sg;\n      ctx.fillRect(0, Math.max(0, baseY - 4), W, H - Math.max(0, baseY - 4));\n    }\n  }\n\n  private drawRipples(): void {\n    const { ctx, rr, rg, rb } = this;\n    this.ripples = this.ripples.filter(r => r.opacity > 0 || r.radius === 0);\n\n    for (const r of this.ripples) {\n      r.radius += r.speed;\n      r.opacity = Math.max(0, 1 - r.radius / r.maxRadius);\n\n      /* Anillo principal */\n      ctx.beginPath();\n      ctx.arc(r.x, r.y, r.radius, 0, Math.PI * 2);\n      ctx.strokeStyle = `rgba(${rr},${rg},${rb},${r.opacity * 0.9})`;\n      ctx.lineWidth   = r.lineWidth;\n      ctx.stroke();\n\n      /* Segundo anillo interior más fino */\n      if (r.radius > 6) {\n        ctx.beginPath();\n        ctx.arc(r.x, r.y, r.radius * 0.65, 0, Math.PI * 2);\n        ctx.strokeStyle = `rgba(${rr},${rg},${rb},${r.opacity * 0.4})`;\n        ctx.lineWidth   = r.lineWidth * 0.5;\n        ctx.stroke();\n      }\n    }\n\n    /* Limpiar ripples agotados */\n    this.ripples = this.ripples.filter(r => r.opacity > 0);\n  }\n\n  /* ── Loop principal ── */\n  private loop(): void {\n    const tick = (): void => {\n      this.raf = requestAnimationFrame(tick);\n      const { ctx, W, H } = this;\n      this.t += 0.04;\n\n      /* Lerp fill */\n      const diff = this.targetFill - this.fill;\n      this.fill += diff * this.fillSpeed * 2.8;\n      if (Math.abs(diff) < 0.0005) this.fill = this.targetFill;\n\n      /* Shimmer avanza */\n      if (this.hovered && this.shimmerX < 1.6) {\n        this.shimmerX += 0.012;\n      }\n\n      /* Skip si todo en reposo */\n      if (this.fill <= 0.001 && this.ripples.length === 0) return;\n\n      ctx.clearRect(0, 0, W, H);\n      this.drawWave();\n      this.drawRipples();\n    };\n    this.raf = requestAnimationFrame(tick);\n  }\n\n  /* ── Cleanup ── */\n  destroy(): void {\n    cancelAnimationFrame(this.raf);\n  }\n}\n\n\n/* ============================================================\n   LIB-BUTTON-LIQUID — Web Component\n   ============================================================ */\n\n/**\n * Botón con física de agua en canvas.\n *\n * @prop variant  — 'ink' | 'washi' | 'kaki' | 'celadon' | 'ghost' | 'danger'\n * @prop size     — 'sm' | 'md' | 'lg'\n * @prop disabled — bloquea interacción y detiene el canvas\n * @prop loading  — muestra spinner, bloquea interacción\n * @prop dark     — ajusta colores en surface oscura\n * @prop block    — ancho 100%\n *\n * Slots: default · prefix · suffix\n * @fires ui-lib-click — {detail: { originalEvent: MouseEvent }}\n */\n@customElement('lib-button-liquid')\nexport class LibButtonLiquid extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(liquidCss)}`,\n  ];\n\n  @property({ type: String, reflect: true })\n  variant: LiquidVariant = 'ink';\n\n  @property({ type: String, reflect: true })\n  size: LiquidSize = 'md';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean, reflect: true })\n  block = false;\n\n  @query('.btn')\n  declare private _btn: HTMLButtonElement;\n\n  private _physics: WaterPhysics | null = null;\n  private _canvas:  HTMLCanvasElement   | null = null;\n  private _ro:      ResizeObserver      | null = null;\n\n  /* ── Lifecycle ── */\n\n  override firstUpdated(): void {\n    this._initCanvas();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    /* Si cambia la variante, reconstruir physics con nueva paleta */\n    if (changed.has('variant')) {\n      this._destroyCanvas();\n      this._initCanvas();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._destroyCanvas();\n    this._ro?.disconnect();\n  }\n\n  /* ── Canvas setup ── */\n\n  private _initCanvas(): void {\n    if (!this._btn) return;\n\n    /* Crear canvas y añadirlo como primer hijo del botón (bajo .btn-inner) */\n    const canvas   = document.createElement('canvas');\n    this._canvas   = canvas;\n    this._btn.insertBefore(canvas, this._btn.firstChild);\n\n    const palette  = LIQUID_PALETTES[this.variant];\n    this._physics  = new WaterPhysics(this._btn, canvas, palette.water, palette.ripple);\n\n    /* ResizeObserver para adaptar canvas al tamaño real del botón */\n    this._ro = new ResizeObserver((): void => this._physics?.resize());\n    this._ro.observe(this._btn);\n  }\n\n  private _destroyCanvas(): void {\n    this._physics?.destroy();\n    this._physics = null;\n    this._canvas?.remove();\n    this._canvas = null;\n    this._ro?.disconnect();\n    this._ro = null;\n  }\n\n  /* ── Eventos del canvas — llamados desde el template ── */\n\n  _onMouseEnter(e: MouseEvent): void {\n    if (this.disabled || this.loading) return;\n    const rect = this._btn.getBoundingClientRect();\n    this._physics?.onMouseEnter(e.clientX - rect.left, e.clientY - rect.top);\n  }\n\n  _onMouseLeave(): void {\n    this._physics?.onMouseLeave();\n  }\n\n  _onMouseDown(e: MouseEvent): void {\n    if (this.disabled || this.loading) return;\n    const rect = this._btn.getBoundingClientRect();\n    this._physics?.onMouseDown(e.clientX - rect.left, e.clientY - rect.top);\n\n    this.dispatchEvent(new CustomEvent('ui-lib-click', {\n      detail: { originalEvent: e },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /* ── Render ── */\n  protected override render(): TemplateResult {\n    return buttonLiquidTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-button-liquid': LibButtonLiquid;\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index290.js

@@ -1,5 +1,39 @@
-const emptyStateCss = '@layer tokens,reset,components;@layer reset{:host{display:flex;width:100%;justify-content:center;align-items:center}*,*:before,*:after{box-sizing:border-box}}@layer components{.es{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--lib-space-xl) var(--lib-space-lg);gap:0;width:100%}.es-illustration{margin-bottom:var(--lib-space-lg);display:flex;align-items:center;justify-content:center;position:relative}.es-icon-wrap{width:72px;height:72px;border-radius:var(--radius-full);background:var(--color-washi-100);border:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;color:var(--color-washi-400);font-size:28px;flex-shrink:0}.es-kanji{font-family:var(--lib-font-display);font-size:6rem;line-height:1;color:var(--color-washi-200);-webkit-user-select:none;user-select:none;letter-spacing:var(--tracking-tight)}.es-body{display:flex;flex-direction:column;align-items:center;gap:0}.es-title{font-family:var(--lib-font-display);font-size:var(--text-2xl);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);color:var(--text-primary);margin-bottom:var(--lib-space-sm);line-height:var(--leading-snug)}.es-title em{font-style:italic;color:var(--text-muted)}.es-desc{font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-muted);line-height:var(--leading-relaxed);max-width:320px;margin:0 auto var(--lib-space-lg)}.es-actions{display:flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);flex-wrap:wrap}::slotted([slot="actions"]){flex-shrink:0}:host([size="sm"]) .es{padding:var(--lib-space-lg) var(--lib-space-md)}:host([size="sm"]) .es-icon-wrap{width:48px;height:48px;font-size:20px}:host([size="sm"]) .es-illustration{margin-bottom:var(--lib-space-md)}:host([size="sm"]) .es-title{font-size:var(--text-xl);margin-bottom:var(--lib-space-xs)}:host([size="sm"]) .es-desc{font-size:var(--text-xs);margin-bottom:var(--lib-space-md)}:host([layout="inline"]) .es{flex-direction:row;text-align:left;padding:var(--lib-space-md) var(--lib-space-lg);gap:var(--lib-space-lg);align-items:center;justify-content:flex-start}:host([layout="inline"]) .es-illustration{margin-bottom:0;flex-shrink:0}:host([layout="inline"]) .es-body{align-items:flex-start;gap:var(--lib-space-xs)}:host([layout="inline"]) .es-title{font-size:var(--text-xl);margin-bottom:0}:host([layout="inline"]) .es-desc{margin:0;max-width:400px}:host([layout="inline"]) .es-actions{justify-content:flex-start;margin-top:var(--lib-space-sm)}:host([bordered]) .es{border:1px dashed var(--border-default);background:var(--bg-surface)}:host([ghost]) .es-icon-wrap{background:transparent;border:none;color:var(--color-washi-300);font-size:40px}:host([tone="kaki"]) .es-icon-wrap{background:var(--color-kaki-50);color:var(--color-kaki-500);border-color:var(--color-kaki-100)}:host([tone="celadon"]) .es-icon-wrap{background:var(--color-celadon-100);color:var(--color-celadon-500);border-color:var(--color-celadon-100)}:host([tone="error"]) .es-icon-wrap{background:#f5ddd9;color:var(--color-error);border-color:#f5ddd9}@media(max-width:640px){:host([layout="inline"]) .es{flex-direction:column;text-align:center}:host([layout="inline"]) .es-body{align-items:center}:host([layout="inline"]) .es-actions{justify-content:center}}}';
+import { html, nothing } from "lit";
+const checkSvg = html`
+  <svg class="checkbox__check" viewBox="0 0 10 10" aria-hidden="true">
+    <polyline points="1.5,5 4,7.5 8.5,2"/>
+  </svg>
+`;
+const dashEl = html`<span class="checkbox__dash" aria-hidden="true"></span>`;
+function checkboxTemplate(props) {
+  return html`
+    <label class="checkbox">
+
+      <input
+        class="checkbox__input"
+        type="checkbox"
+        .checked="${props.checked}"
+        .indeterminate="${props.indeterminate}"
+        ?disabled="${props.disabled}"
+        value="${props.value}"
+        @change="${props.onChange}"
+      />
+
+      <span class="checkbox__box">
+        ${props.indeterminate ? dashEl : checkSvg}
+      </span>
+
+      ${props.label || props.sublabel ? html`
+            <span class="checkbox__label">
+              ${props.label ? html`<span class="checkbox__label-text">${props.label}</span>` : nothing}
+              ${props.sublabel ? html`<span class="checkbox__label-sub">${props.sublabel}</span>` : nothing}
+            </span>
+          ` : html`<slot></slot>`}
+
+    </label>
+  `;
+}
 export {
-  emptyStateCss as default
+  checkboxTemplate
 };
 //# sourceMappingURL=index290.js.map

package/dist/index290.js.map

@@ -1 +1 @@
-{"version":3,"file":"index290.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index290.js","sources":["../src/components/atoms/checkbox/lib-checkbox.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibCheckboxSize    = 'sm' | 'md' | 'lg';\nexport type LibCheckboxVariant = 'default' | 'kaki' | 'error';\n\nexport interface CheckboxTemplateProps {\n  checked: boolean;\n  disabled: boolean;\n  indeterminate: boolean;\n  label: string;\n  sublabel: string;\n  value: string;\n  size: LibCheckboxSize;\n  variant: LibCheckboxVariant;\n  onChange: (e: Event) => void;\n}\n\n/** SVG check — polyline del styleguide, animado con ease-bounce */\nconst checkSvg = html`\n  <svg class=\"checkbox__check\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n    <polyline points=\"1.5,5 4,7.5 8.5,2\"/>\n  </svg>\n`;\n\n/** SVG dash — estado indeterminate */\nconst dashEl = html`<span class=\"checkbox__dash\" aria-hidden=\"true\"></span>`;\n\n/**\n * Plantilla para lib-checkbox.\n *\n * Estructura:\n *   label.checkbox\n *     input[type=checkbox]  (capa de interaccion, invisible)\n *     span.checkbox__box    (visual: box + check/dash)\n *     span.checkbox__label  (label-text + sublabel opcional)\n */\nexport function checkboxTemplate(props: CheckboxTemplateProps): TemplateResult {\n  return html`\n    <label class=\"checkbox\">\n\n      <input\n        class=\"checkbox__input\"\n        type=\"checkbox\"\n        .checked=\"${props.checked}\"\n        .indeterminate=\"${props.indeterminate}\"\n        ?disabled=\"${props.disabled}\"\n        value=\"${props.value}\"\n        @change=\"${props.onChange}\"\n      />\n\n      <span class=\"checkbox__box\">\n        ${props.indeterminate ? dashEl : checkSvg}\n      </span>\n\n      ${props.label || props.sublabel\n        ? html`\n            <span class=\"checkbox__label\">\n              ${props.label\n                ? html`<span class=\"checkbox__label-text\">${props.label}</span>`\n                : nothing}\n              ${props.sublabel\n                ? html`<span class=\"checkbox__label-sub\">${props.sublabel}</span>`\n                : nothing}\n            </span>\n          `\n        : html`<slot></slot>`}\n\n    </label>\n  `;\n}"],"names":[],"mappings":";AAkBA,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAOjB,MAAM,SAAS;AAWR,SAAS,iBAAiB,OAA8C;AAC7E,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMW,MAAM,OAAO;AAAA,0BACP,MAAM,aAAa;AAAA,qBACxB,MAAM,QAAQ;AAAA,iBAClB,MAAM,KAAK;AAAA,mBACT,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,UAIvB,MAAM,gBAAgB,SAAS,QAAQ;AAAA;AAAA;AAAA,QAGzC,MAAM,SAAS,MAAM,WACnB;AAAA;AAAA,gBAEM,MAAM,QACJ,0CAA0C,MAAM,KAAK,YACrD,OAAO;AAAA,gBACT,MAAM,WACJ,yCAAyC,MAAM,QAAQ,YACvD,OAAO;AAAA;AAAA,cAGf,mBAAmB;AAAA;AAAA;AAAA;AAI7B;"}

package/dist/index291.js

@@ -1,60 +1,5 @@
-import { html } from "lit";
-const removeSvg = html`
-  <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-    <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/>
-  </svg>`;
-function staticChip() {
-  return html`
-    <span class="chip" part="chip" role="note" tabindex="-1">
-      <slot name="icon"></slot>
-      <slot></slot>
-    </span>`;
-}
-function toggleChip(ctx) {
-  return html`
-    <button
-      class="chip-toggle"
-      part="chip"
-      role="checkbox"
-      aria-checked="${ctx.selected}"
-      aria-label="${ctx.ariaLabel}"
-      @click="${() => ctx._handleToggle()}"
-      @keydown="${(e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      ctx._handleToggle();
-    }
-  }}"
-    >
-      <slot name="icon"></slot>
-      <slot></slot>
-    </button>`;
-}
-function inputChip(ctx) {
-  return html`
-    <span class="chip-input" part="chip">
-      <slot name="avatar"></slot>
-      <slot name="icon"></slot>
-      <slot></slot>
-      <button
-        class="chip-remove"
-        part="remove"
-        type="button"
-        aria-label="Eliminar ${ctx.ariaLabel || ""}"
-        @click="${(e) => ctx._handleRemove(e)}"
-      >
-        ${removeSvg}
-      </button>
-    </span>`;
-}
-function chipTemplate(ctx) {
-  if (ctx.kind === "toggle") return toggleChip(ctx);
-  if (ctx.kind === "input") return inputChip(ctx);
-  return staticChip(
-    /*ctx*/
-  );
-}
+const checkboxCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block}*,*:before,*:after{box-sizing:border-box}}@layer components{.checkbox{display:inline-flex;align-items:flex-start;gap:var(--lib-space-sm);cursor:pointer;-webkit-user-select:none;user-select:none}:host([disabled]) .checkbox{cursor:not-allowed;opacity:.4;pointer-events:none}.checkbox__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;width:0;height:0;margin:0;opacity:0;pointer-events:none}.checkbox__box{width:18px;height:18px;flex-shrink:0;margin-top:2px;border:1px solid var(--border-default);background:var(--bg-elevated);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:background var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),box-shadow var(--duration-base) var(--ease-default)}.checkbox:hover .checkbox__box{border-color:var(--border-strong)}.checkbox__input:focus-visible~.checkbox__box,.checkbox:focus-within .checkbox__box{box-shadow:0 0 0 3px var(--color-ink-20);border-color:var(--color-washi-700)}:host([checked]) .checkbox__box{background:var(--color-washi-900);border-color:var(--color-washi-900)}:host([indeterminate]) .checkbox__box{background:var(--color-washi-900);border-color:var(--color-washi-900)}.checkbox__check{width:10px;height:10px;stroke:#fff;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-base) var(--ease-bounce)}:host([checked]) .checkbox__check{opacity:1;transform:scale(1)}.checkbox__dash{width:8px;height:2px;background:#fff;border-radius:1px;opacity:0;transform:scaleX(.4);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-base) var(--ease-bounce)}:host([indeterminate]) .checkbox__dash{opacity:1;transform:scaleX(1)}.checkbox__label{display:flex;flex-direction:column;gap:var(--lib-space-xs)}.checkbox__label-text{font-family:var(--lib-font-body);font-size:var(--text-base);color:var(--text-primary);line-height:var(--leading-snug);transition:color var(--duration-fast)}.checkbox__label-sub{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);line-height:var(--leading-snug)}:host([size="sm"]) .checkbox__box{width:14px;height:14px}:host([size="sm"]) .checkbox__check{width:8px;height:8px;stroke-width:2.5}:host([size="sm"]) .checkbox__dash{width:6px;height:1.5px}:host([size="sm"]) .checkbox__label-text{font-size:var(--text-sm)}:host([size="lg"]) .checkbox__box{width:22px;height:22px}:host([size="lg"]) .checkbox__check{width:13px;height:13px}:host([size="lg"]) .checkbox__dash{width:10px;height:2.5px}:host([size="lg"]) .checkbox__label-text{font-size:var(--text-md)}:host([variant="kaki"][checked]) .checkbox__box,:host([variant="kaki"][indeterminate]) .checkbox__box{background:var(--color-kaki-500);border-color:var(--color-kaki-500)}:host([variant="kaki"]) .checkbox:hover .checkbox__box{border-color:var(--color-kaki-400)}:host([variant="kaki"]) .checkbox:focus-within .checkbox__box{box-shadow:0 0 0 3px #6d4d3e1f;border-color:var(--color-kaki-500)}:host([variant="error"]) .checkbox__box{border-color:var(--color-error)}:host([variant="error"]) .checkbox:hover .checkbox__box{border-color:var(--color-error)}:host([variant="error"]) .checkbox__label-text{color:var(--color-error)}@media(prefers-reduced-motion:reduce){.checkbox__box,.checkbox__check,.checkbox__dash{transition:none}}}';
 export {
-  chipTemplate
+  checkboxCss as default
 };
 //# sourceMappingURL=index291.js.map

package/dist/index291.js.map

@@ -1 +1 @@
-{"version":3,"file":"index291.js","sources":["../src/components/molecules/chip/lib-chip.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibChip } from './lib-chip.component';\n\n/* SVG × para el botón de eliminar */\nconst removeSvg: TemplateResult = html`\n  <svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"/>\n  </svg>`;\n\n/* ── Familia STATIC ── */\nfunction staticChip(/*ctx: LibChip*/): TemplateResult {\n  return html`\n    <span class=\"chip\" part=\"chip\" role=\"note\" tabindex=\"-1\">\n      <slot name=\"icon\"></slot>\n      <slot></slot>\n    </span>`;\n}\n\n/* ── Familia TOGGLE ── */\nfunction toggleChip(ctx: LibChip): TemplateResult {\n  return html`\n    <button\n      class=\"chip-toggle\"\n      part=\"chip\"\n      role=\"checkbox\"\n      aria-checked=\"${ctx.selected}\"\n      aria-label=\"${ctx.ariaLabel}\"\n      @click=\"${(): void => ctx._handleToggle()}\"\n      @keydown=\"${(e: KeyboardEvent): void => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          ctx._handleToggle();\n        }\n      }}\"\n    >\n      <slot name=\"icon\"></slot>\n      <slot></slot>\n    </button>`;\n}\n\n/* ── Familia INPUT (removable) ── */\nfunction inputChip(ctx: LibChip): TemplateResult {\n  return html`\n    <span class=\"chip-input\" part=\"chip\">\n      <slot name=\"avatar\"></slot>\n      <slot name=\"icon\"></slot>\n      <slot></slot>\n      <button\n        class=\"chip-remove\"\n        part=\"remove\"\n        type=\"button\"\n        aria-label=\"Eliminar ${ctx.ariaLabel || ''}\"\n        @click=\"${(e: MouseEvent): void => ctx._handleRemove(e)}\"\n      >\n        ${removeSvg}\n      </button>\n    </span>`;\n}\n\nexport function chipTemplate(ctx: LibChip): TemplateResult {\n  if (ctx.kind === 'toggle') return toggleChip(ctx);\n  if (ctx.kind === 'input')  return inputChip(ctx);\n  return staticChip(/*ctx*/);\n}"],"names":[],"mappings":";AAIA,MAAM,YAA4B;AAAA;AAAA;AAAA;AAMlC,SAAS,aAA6C;AACpD,SAAO;AAAA;AAAA;AAAA;AAAA;AAKT;AAGA,SAAS,WAAW,KAA8B;AAChD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKa,IAAI,QAAQ;AAAA,oBACd,IAAI,SAAS;AAAA,gBACjB,MAAY,IAAI,eAAe;AAAA,kBAC7B,CAAC,MAA2B;AACtC,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAA;AACF,UAAI,cAAA;AAAA,IACN;AAAA,EACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAKP;AAGA,SAAS,UAAU,KAA8B;AAC/C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BASsB,IAAI,aAAa,EAAE;AAAA,kBAChC,CAAC,MAAwB,IAAI,cAAc,CAAC,CAAC;AAAA;AAAA,UAErD,SAAS;AAAA;AAAA;AAGnB;AAEO,SAAS,aAAa,KAA8B;AACzD,MAAI,IAAI,SAAS,SAAU,QAAO,WAAW,GAAG;AAChD,MAAI,IAAI,SAAS,QAAU,QAAO,UAAU,GAAG;AAC/C,SAAO;AAAA;AAAA,EAAA;AACT;"}
+{"version":3,"file":"index291.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index292.js

@@ -1,5 +1,27 @@
-const chipCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer}}@layer components{.chip,.chip-toggle,.chip-input{display:inline-flex;align-items:center;gap:var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none;border-radius:9999px;transition:background var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),transform var(--duration-fast)}.chip{padding:4px var(--lib-space-sm);background:var(--color-washi-100);color:var(--text-secondary);border:1px solid var(--border-subtle);cursor:default}.chip-toggle{padding:5px var(--lib-space-md);background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-default);cursor:pointer;position:relative;overflow:hidden}.chip-toggle:hover{border-color:var(--border-strong);color:var(--text-primary);background:var(--bg-surface)}.chip-toggle:active{transform:scale(.96)}.chip-toggle:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:2px}:host([selected]) .chip-toggle{background:var(--color-washi-900);border-color:var(--color-washi-900);color:var(--color-washi-50);box-shadow:var(--shadow-sm)}.chip-input{padding:4px 4px 4px var(--lib-space-sm);background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-default);gap:var(--lib-space-sm)}.chip-remove{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:9999px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-size:12px;padding:0;flex-shrink:0;transition:background var(--duration-fast),color var(--duration-fast)}.chip-remove:hover{background:var(--color-washi-200);color:var(--text-primary)}.chip-remove svg{width:10px;height:10px}.chip-input.is-entering{animation:chip-enter .25s var(--ease-bounce)}@keyframes chip-enter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.chip-input.is-removing{animation:chip-remove-anim .2s var(--ease-out) forwards}@keyframes chip-remove-anim{to{opacity:0;transform:scale(.8);max-width:0;padding:0;margin:0;border-width:0}}:host([size="xs"]) .chip{font-size:9px;padding:2px var(--lib-space-sm);letter-spacing:.04em}:host([size="xs"]) .chip-toggle{font-size:9px;padding:3px var(--lib-space-sm);letter-spacing:.04em}:host([size="xs"]) .chip-input{font-size:9px;padding:2px 2px 2px var(--lib-space-sm)}:host([size="xs"]) .chip-remove{width:14px;height:14px;font-size:10px}:host([size="xs"]) .chip-avatar{width:14px;height:14px;font-size:7px}:host([size="sm"]) .chip{font-size:10px;padding:3px var(--lib-space-sm)}:host([size="sm"]) .chip-toggle{font-size:10px;padding:4px var(--lib-space-sm)}:host([size="sm"]) .chip-input{font-size:10px;padding:3px 3px 3px var(--lib-space-sm)}:host([size="lg"]) .chip{font-size:var(--text-sm);padding:var(--lib-space-sm) var(--lib-space-md);letter-spacing:var(--tracking-wider)}:host([size="lg"]) .chip-toggle{font-size:var(--text-sm);padding:var(--lib-space-sm) var(--lib-space-md);letter-spacing:var(--tracking-wider)}:host([size="lg"]) .chip-input{font-size:var(--text-sm);padding:var(--lib-space-sm) var(--lib-space-sm) var(--lib-space-sm) var(--lib-space-md)}:host([size="lg"]) .chip-remove{width:22px;height:22px;font-size:14px}:host([size="lg"]) .chip-avatar{width:22px;height:22px;font-size:9px}:host([color="kaki"]) .chip{background:var(--color-kaki-50);color:var(--color-kaki-600);border-color:var(--color-kaki-100)}:host([color="kaki"]) .chip-toggle:not(.chip-toggle-selected){background:var(--color-kaki-50);color:var(--color-kaki-600);border-color:var(--color-kaki-100)}:host([color="kaki"]) .chip-toggle:hover:not([selected]){border-color:var(--color-kaki-400)}:host([color="kaki"][selected]) .chip-toggle{background:var(--color-kaki-500);border-color:var(--color-kaki-500);color:#fff}:host([color="kaki"]) .chip-input{background:var(--color-kaki-50);color:var(--color-kaki-600);border-color:var(--color-kaki-100)}:host([color="kaki"]) .chip-remove:hover{background:var(--color-kaki-100);color:var(--color-kaki-600)}:host([color="celadon"]) .chip{background:var(--color-celadon-100);color:var(--color-celadon-600);border-color:var(--color-celadon-100)}:host([color="celadon"]) .chip-toggle{background:var(--color-celadon-50);color:var(--color-celadon-600);border-color:var(--color-celadon-100)}:host([color="celadon"][selected]) .chip-toggle{background:var(--color-celadon-500);border-color:var(--color-celadon-500);color:#fff}:host([color="celadon"]) .chip-input{background:var(--color-celadon-50);color:var(--color-celadon-600);border-color:var(--color-celadon-100)}:host([color="celadon"]) .chip-remove:hover{background:var(--color-celadon-100);color:var(--color-celadon-600)}:host([color="error"]) .chip,:host([color="error"]) .chip-input{background:var(--color-error-light);color:var(--color-error);border-color:var(--color-error-light)}:host([color="error"]) .chip-remove:hover{background:#ebc5bf;color:var(--color-error)}:host([color="info"]) .chip{background:var(--color-info-light, #D6E8F5);color:var(--color-info, #1A4A6E);border-color:var(--color-info-light, #D6E8F5)}:host([color="dark"]) .chip{background:var(--color-washi-900);color:var(--color-washi-300);border-color:var(--color-washi-800)}:host([color="dark"]) .chip-toggle{background:var(--color-washi-800);color:var(--color-washi-300);border-color:var(--color-washi-700)}:host([color="dark"]) .chip-toggle:hover{border-color:var(--color-washi-500);color:var(--color-washi-100)}:host([color="dark"][selected]) .chip-toggle{background:var(--color-washi-50);border-color:var(--color-washi-50);color:var(--color-washi-950)}:host([color="dark"]) .chip-input{background:var(--color-washi-800);color:var(--color-washi-300);border-color:var(--color-washi-700)}:host([color="dark"]) .chip-remove:hover{background:var(--color-washi-700);color:var(--color-washi-100)}:host([dot]) .chip:before,:host([dot]) .chip-toggle:before,:host([dot]) .chip-input:before{content:"";width:6px;height:6px;border-radius:9999px;background:currentcolor;flex-shrink:0;opacity:.7}.chip-avatar{width:18px;height:18px;border-radius:9999px;object-fit:cover;flex-shrink:0;background:var(--color-washi-200);display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-family:var(--lib-font-mono);color:var(--text-secondary);overflow:hidden}.chip-icon{font-size:13px;display:inline-flex;align-items:center;flex-shrink:0;opacity:.7}.chip-icon svg{width:1em;height:1em}}';
+import { html } from "lit";
+const ICON_SIZE = {
+  sm: "xs",
+  md: "sm",
+  lg: "sm",
+  xl: "md"
+};
+function closeButtonTemplate(props) {
+  return html`
+    <button
+      type="button"
+      class="close-btn"
+      aria-label="${props.ariaLabel}"
+      ?disabled="${props.disabled}"
+      @click="${props.onClick}"
+    >
+      <lib-icon
+        name="${props.icon}"
+        size="${ICON_SIZE[props.size]}"
+      ></lib-icon>
+    </button>
+  `;
+}
 export {
-  chipCss as default
+  closeButtonTemplate
 };
 //# sourceMappingURL=index292.js.map

package/dist/index292.js.map

@@ -1 +1 @@
-{"version":3,"file":"index292.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index292.js","sources":["../src/components/atoms/close-button/lib-close-button.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport type LibCloseVariant =\n  | 'ghost'\n  | 'subtle'\n  | 'outlined'\n  | 'filled'\n  | 'filled-round'\n  | 'danger'\n  | 'on-dark';\n\nexport type LibCloseSize = 'sm' | 'md' | 'lg' | 'xl';\nexport type LibCloseIcon = 'x' | 'x-circle' | 'x-square';\n\n/** Maps component size → lib-icon size prop */\nconst ICON_SIZE: Record<LibCloseSize, string> = {\n  sm: 'xs',\n  md: 'sm',\n  lg: 'sm',\n  xl: 'md',\n};\n\nexport interface CloseButtonTemplateProps {\n  variant: LibCloseVariant;\n  size: LibCloseSize;\n  icon: LibCloseIcon;\n  disabled: boolean;\n  ariaLabel: string;\n  onClick: (e: Event) => void;\n}\n\n/**\n * Plantilla para lib-close-button.\n *\n * Renderiza un <button> con lib-icon interno.\n * La variante y el tamaño se aplican via :host() selectors en CSS.\n */\nexport function closeButtonTemplate(props: CloseButtonTemplateProps): TemplateResult {\n  return html`\n    <button\n      type=\"button\"\n      class=\"close-btn\"\n      aria-label=\"${props.ariaLabel}\"\n      ?disabled=\"${props.disabled}\"\n      @click=\"${props.onClick}\"\n    >\n      <lib-icon\n        name=\"${props.icon}\"\n        size=\"${ICON_SIZE[props.size]}\"\n      ></lib-icon>\n    </button>\n  `;\n}"],"names":[],"mappings":";AAeA,MAAM,YAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAiBO,SAAS,oBAAoB,OAAiD;AACnF,SAAO;AAAA;AAAA;AAAA;AAAA,oBAIW,MAAM,SAAS;AAAA,mBAChB,MAAM,QAAQ;AAAA,gBACjB,MAAM,OAAO;AAAA;AAAA;AAAA,gBAGb,MAAM,IAAI;AAAA,gBACV,UAAU,MAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAIrC;"}

package/dist/index293.js

@@ -1,5 +1,5 @@
-const uploaderCss = "@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}:host{display:block}}@layer components{.fu-root{display:flex;flex-direction:column;width:100%}.fu-zone{position:relative;border:1.5px dashed var(--border-default);background:var(--bg-elevated);padding:var(--lib-space-xl) var(--lib-space-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--lib-space-md);text-align:center;cursor:pointer;transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out),transform var(--duration-fast);width:100%}.fu-zone input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;width:100%;height:100%}.fu-zone:hover{border-color:var(--border-strong);background:var(--bg-surface)}.fu-zone.is-dragover{border-color:var(--color-kaki-400);background:var(--color-kaki-50);transform:scale(1.005)}.fu-zone.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.fu-zone-icon{font-size:40px;color:var(--text-muted);line-height:1;display:flex;transition:color var(--duration-base),transform var(--duration-slow) var(--ease-bounce)}.fu-zone:hover .fu-zone-icon,.fu-zone.is-dragover .fu-zone-icon{color:var(--color-kaki-400);transform:translateY(-3px) scale(1.08)}.fu-zone-title{font-family:var(--lib-font-display);font-size:var(--text-xl);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);color:var(--text-primary)}.fu-zone-sub{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);color:var(--text-muted);text-transform:uppercase}.fu-zone-sub span{color:var(--color-kaki-500);text-decoration:underline;text-underline-offset:2px}.fu-zone-hint{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);margin-top:var(--lib-space-xs)}.fu-zone-sm{position:relative;border:1px dashed var(--border-default);background:var(--bg-elevated);padding:var(--lib-space-md) var(--lib-space-md);display:flex;align-items:center;gap:var(--lib-space-md);cursor:pointer;transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out);width:100%}.fu-zone-sm input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;width:100%;height:100%}.fu-zone-sm:hover,.fu-zone-sm.is-dragover{border-color:var(--color-kaki-400);background:var(--color-kaki-50)}.fu-zone-sm.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.fu-zone-sm-icon{font-size:22px;color:var(--text-muted);flex-shrink:0;display:flex;transition:color var(--duration-base)}.fu-zone-sm:hover .fu-zone-sm-icon,.fu-zone-sm.is-dragover .fu-zone-sm-icon{color:var(--color-kaki-400)}.fu-zone-sm-text{display:flex;flex-direction:column;gap:2px}.fu-zone-sm-title{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);color:var(--text-secondary);text-transform:uppercase}.fu-zone-sm-sub{font-family:var(--lib-font-mono);font-size:10px;color:var(--text-muted);letter-spacing:var(--tracking-wide)}.fu-zone-img{position:relative;border:1.5px dashed var(--border-default);background:var(--bg-surface);width:100%;aspect-ratio:16 / 7;overflow:hidden;cursor:pointer;transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--lib-space-sm)}.fu-zone-img input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;width:100%;height:100%}.fu-zone-img:hover{border-color:var(--border-strong)}.fu-zone-img.is-dragover{border-color:var(--color-kaki-400);background:var(--color-kaki-50)}.fu-zone-img.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.fu-zone-img-placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--lib-space-sm);pointer-events:none}.fu-zone-img-preview{position:absolute;top:0;right:0;bottom:0;left:0;object-fit:cover;width:100%;height:100%;display:none}.fu-zone-img.has-preview .fu-zone-img-preview{display:block}.fu-zone-img.has-preview .fu-zone-img-placeholder{display:none}.fu-zone-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#221c1680;display:flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);opacity:0;transition:opacity var(--duration-base);pointer-events:none}.fu-zone-img.has-preview:hover .fu-zone-img-overlay{opacity:1}.fu-zone-img-overlay-text{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-white)}.fu-progress-bar{height:2px;background:var(--border-subtle);width:100%;overflow:hidden;margin-top:-1px}.fu-progress-fill{height:100%;background:var(--color-kaki-400);transition:width 80ms linear}.fu-list{display:flex;flex-direction:column;gap:1px;width:100%}.fu-file{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--lib-space-md);padding:var(--lib-space-md) var(--lib-space-md);background:var(--bg-elevated);border:1px solid var(--border-subtle);position:relative;overflow:hidden;transition:background var(--duration-base);animation:fu-slide-in .25s var(--ease-out)}.fu-file:hover{background:var(--bg-surface)}.fu-file-prog-bg{position:absolute;left:0;top:0;bottom:0;background:var(--color-kaki-50);transition:width 80ms linear;pointer-events:none;z-index:0}.fu-file>*{position:relative;z-index:1}.fu-file-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border-subtle);flex-shrink:0;transition:color var(--duration-base),background var(--duration-base)}.fu-file.is-done .fu-file-icon{color:var(--color-celadon-500);background:var(--color-celadon-50);border-color:var(--color-celadon-100)}.fu-file.is-error .fu-file-icon{color:var(--color-error);background:#fff8f7;border-color:#f5c4bc}.fu-ext{font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}.fu-file-thumb{width:36px;height:36px;object-fit:cover;flex-shrink:0;border:1px solid var(--border-subtle);display:block}.fu-file-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.fu-file-name{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fu-file-info{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);display:flex;align-items:center;gap:var(--lib-space-sm)}.fu-file-info-sep{width:3px;height:3px;border-radius:var(--radius-full);background:var(--color-washi-300);flex-shrink:0}.fu-file-actions{display:flex;align-items:center;gap:var(--lib-space-sm);flex-shrink:0}.fu-file-pct{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--color-kaki-500);min-width:28px;text-align:right}.fu-status-done{color:var(--color-celadon-500);font-size:18px;display:flex}.fu-status-error{color:var(--color-error);font-size:18px;display:flex}.fu-file-remove{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-muted);background:transparent;border:none;cursor:pointer;border-radius:var(--radius-full);transition:background var(--duration-fast),color var(--duration-fast);flex-shrink:0}.fu-file-remove:hover{background:var(--color-washi-200);color:var(--text-primary)}.fu-file.is-error .fu-file-remove:hover{background:#fff8f7;color:var(--color-error)}.fu-summary{display:flex;align-items:center;justify-content:space-between;padding:var(--lib-space-sm) var(--lib-space-md);background:var(--bg-surface);border:1px solid var(--border-subtle);border-top:none}.fu-summary-text{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}.fu-summary-btn{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);text-transform:uppercase;background:var(--color-washi-900);color:var(--color-washi-50);border:none;padding:var(--lib-space-sm) var(--lib-space-md);cursor:pointer;transition:background var(--duration-base)}.fu-summary-btn:hover{background:var(--color-washi-800)}.fu-summary-btn:disabled{opacity:.38;cursor:not-allowed}.fu-spinner{width:16px;height:16px;border:2px solid var(--color-washi-200);border-top-color:var(--color-kaki-400);border-radius:var(--radius-full);animation:fu-spin .7s linear infinite;flex-shrink:0}@keyframes fu-slide-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes fu-spin{to{transform:rotate(360deg)}}}";
+const closeButtonCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;flex-shrink:0}*,*:before,*:after{box-sizing:border-box}}@layer components{.close-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;color:var(--text-muted);line-height:1;outline:none;transition:color var(--duration-fast) var(--ease-default),background var(--duration-base) var(--ease-default),border-color var(--duration-base) var(--ease-default),transform var(--duration-base) var(--ease-bounce),opacity var(--duration-base)}.close-btn:disabled{opacity:.35;pointer-events:none;cursor:not-allowed}.close-btn:focus-visible{box-shadow:0 0 0 3px var(--color-ink-20)}:host([size="sm"]) .close-btn{width:24px;height:24px}:host([size="md"]) .close-btn{width:32px;height:32px}:host([size="lg"]) .close-btn{width:40px;height:40px}:host([size="xl"]) .close-btn{width:48px;height:48px}:host([variant="ghost"]) .close-btn{color:var(--text-muted);border-radius:var(--radius-sm)}:host([variant="ghost"]) .close-btn:hover{color:var(--text-primary);background:var(--color-washi-200)}:host([variant="ghost"]) .close-btn:active{transform:scale(.88)}:host([variant="subtle"]) .close-btn{color:var(--text-secondary);border-radius:var(--radius-full)}:host([variant="subtle"]) .close-btn:hover{color:var(--text-primary);background:var(--color-washi-200);transform:rotate(90deg)}:host([variant="subtle"]) .close-btn:active{transform:rotate(90deg) scale(.88);background:var(--color-washi-300)}:host([variant="outlined"]) .close-btn{color:var(--text-secondary);border:1px solid var(--border-default);border-radius:var(--radius-sm)}:host([variant="outlined"]) .close-btn:hover{color:var(--text-primary);background:var(--bg-surface);border-color:var(--border-strong)}:host([variant="outlined"]) .close-btn:active{transform:scale(.9)}:host([variant="filled"]) .close-btn{color:var(--bg-elevated);background:var(--color-washi-800);border-radius:var(--radius-sm)}:host([variant="filled"]) .close-btn:hover{background:var(--color-washi-900);transform:scale(1.05)}:host([variant="filled"]) .close-btn:active{transform:scale(.9)}:host([variant="filled-round"]) .close-btn{color:var(--bg-elevated);background:var(--color-washi-800);border-radius:var(--radius-full)}:host([variant="filled-round"]) .close-btn:hover{background:var(--color-washi-900);transform:rotate(90deg) scale(1.08)}:host([variant="filled-round"]) .close-btn:active{transform:rotate(90deg) scale(.9)}:host([variant="danger"]) .close-btn{color:var(--color-error);border-radius:var(--radius-sm)}:host([variant="danger"]) .close-btn:hover{color:var(--color-error);background:#651f241a}:host([variant="danger"]) .close-btn:active{transform:scale(.88)}:host([variant="danger"]) .close-btn:focus-visible{box-shadow:0 0 0 3px #651f2426}:host([variant="on-dark"]) .close-btn{color:#ffffff73;border-radius:var(--radius-full)}:host([variant="on-dark"]) .close-btn:hover{color:#ffffffe6;background:#ffffff1a;transform:rotate(90deg)}:host([variant="on-dark"]) .close-btn:active{transform:rotate(90deg) scale(.88)}:host([variant="on-dark"]) .close-btn:focus-visible{box-shadow:0 0 0 3px #fff3}@media(prefers-reduced-motion:reduce){.close-btn{transition:none}}}';
 export {
-  uploaderCss as default
+  closeButtonCss as default
 };
 //# sourceMappingURL=index293.js.map