@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index40.js.map

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

package/dist/index41.js

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

package/dist/index41.js.map

@@ -1 +1 @@
-{"version":3,"file":"index41.js","sources":["../src/components/atoms/burger-button/lib-burger-button.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { burgerTemplate } from './lib-burger-button.html';\nimport burgerCss from './lib-burger-button.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { BurgerVariant, BurgerSize } from './lib-burger-button.types';\n\n/**\n * lib-burger — Botón hamburguesa Shibui (SG-48)\n *\n * @prop variant   — 'ink' | 'kanji' | 'washi' | 'framed' | 'kintsugi' | 'glitch'\n * @prop size      — 'sm' | 'md' | 'lg'\n * @prop open      — estado abierto/cerrado (refleja en atributo)\n * @prop label     — texto opcional junto al botón ('menú' / labelOpen)\n * @prop labelOpen — texto en estado abierto (default: 'cerrar')\n * @prop ariaLabel — aria-label del button (default: 'Menú')\n *\n * @fires ui-lib-burger-change — { detail: { open: boolean } }\n */\n@customElement('lib-burger')\nexport class LibBurger extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(burgerCss)}`,\n  ];\n\n  @property({ type: String, reflect: true })\n  variant: BurgerVariant = 'ink';\n\n  @property({ type: String, reflect: true })\n  size: BurgerSize = 'md';\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /** Texto junto al botón — si está vacío no se renderiza */\n  @property({ type: String })\n  label = '';\n\n  /** Texto del label en estado abierto */\n  @property({ type: String, attribute: 'label-open' })\n  labelOpen = 'cerrar';\n\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel = 'Menú';\n\n  /* Texto reactivo del label */\n  @state()\n  _labelText = '';\n\n  @query('.burger')\n  declare private _btn: HTMLButtonElement | null;\n\n  /* Scramble timeout para glitch */\n  private _scrambleTimer = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._labelText = this.label;\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('open') && this.label) {\n      this._labelText = this.open ? this.labelOpen : this.label;\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    clearTimeout(this._scrambleTimer);\n  }\n\n  /* ── Toggle principal ── */\n  _handleClick(): void {\n    if (this.variant === 'glitch') {\n      this._glitchToggle();\n    } else {\n      this._toggle();\n    }\n  }\n\n  private _toggle(): void {\n    this.open = !this.open;\n    this._emit();\n  }\n\n  /* Glitch: scramble 320ms antes de resolver */\n  private _glitchToggle(): void {\n    const btn = this._btn;\n    if (!btn) return;\n\n    btn.classList.add('is-scrambling');\n    clearTimeout(this._scrambleTimer);\n\n    this._scrambleTimer = window.setTimeout((): void => {\n      btn.classList.remove('is-scrambling');\n      this._toggle();\n    }, 340);\n  }\n\n  private _emit(): void {\n    this.dispatchEvent(new CustomEvent('ui-lib-burger-change', {\n      detail: { open: this.open },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  protected override render(): TemplateResult {\n    return burgerTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-burger': LibBurger;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAoBO,IAAM,YAAN,cAAwB,WAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,UAAyB;AAGzB,SAAA,OAAmB;AAGnB,SAAA,OAAO;AAIP,SAAA,QAAQ;AAIR,SAAA,YAAY;AAGZ,SAAS,YAAY;AAIrB,SAAA,aAAa;AAMb,SAAQ,iBAAiB;AAAA,EAAA;AAAA,EAEhB,oBAA0B;AACjC,UAAM,kBAAA;AACN,SAAK,aAAa,KAAK;AAAA,EACzB;AAAA,EAES,QAAQ,SAAqC;AACpD,QAAI,QAAQ,IAAI,MAAM,KAAK,KAAK,OAAO;AACrC,WAAK,aAAa,KAAK,OAAO,KAAK,YAAY,KAAK;AAAA,IACtD;AAAA,EACF;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA;AACN,iBAAa,KAAK,cAAc;AAAA,EAClC;AAAA;AAAA,EAGA,eAAqB;AACnB,QAAI,KAAK,YAAY,UAAU;AAC7B,WAAK,cAAA;AAAA,IACP,OAAO;AACL,WAAK,QAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEQ,UAAgB;AACtB,SAAK,OAAO,CAAC,KAAK;AAClB,SAAK,MAAA;AAAA,EACP;AAAA;AAAA,EAGQ,gBAAsB;AAC5B,UAAM,MAAM,KAAK;AACjB,QAAI,CAAC,IAAK;AAEV,QAAI,UAAU,IAAI,eAAe;AACjC,iBAAa,KAAK,cAAc;AAEhC,SAAK,iBAAiB,OAAO,WAAW,MAAY;AAClD,UAAI,UAAU,OAAO,eAAe;AACpC,WAAK,QAAA;AAAA,IACP,GAAG,GAAG;AAAA,EACR;AAAA,EAEQ,QAAc;AACpB,SAAK,cAAc,IAAI,YAAY,wBAAwB;AAAA,MACzD,QAAQ,EAAE,MAAM,KAAK,KAAA;AAAA,MACrB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAEmB,SAAyB;AAC1C,WAAO,eAAe,IAAI;AAAA,EAC5B;AACF;AA3Fa,UACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,SAAS,CAAC;AAC5B;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAN9B,UAOX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAT9B,UAUX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAZ/B,UAaX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBf,UAiBX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GApBxC,UAqBX,WAAA,aAAA,CAAA;AAGS,gBAAA;AAAA,EADR,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAvBxC,UAwBF,WAAA,aAAA,CAAA;AAIT,gBAAA;AAAA,EADC,MAAA;AAAM,GA3BI,UA4BX,WAAA,cAAA,CAAA;AAGgB,gBAAA;AAAA,EADf,MAAM,SAAS;AAAA,GA9BL,UA+BK,WAAA,QAAA,CAAA;AA/BL,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}
+{"version":3,"file":"index41.js","sources":["../src/components/atoms/spinner/lib-spinner.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport spinnerCss from './lib-spinner.css?inline';\nimport { spinnerTemplate } from './lib-spinner.html';\n\n/* ── Tipos públicos ─────────────────────────────────────────── */\n\n/**\n * Variante visual.\n * - `enso`     — trazo de pincel zen (SVG doble capa).\n * - `sumi`     — tinta disolviéndose en agua (conic-gradient).\n * - `kintsugi` — anillo dorado con halo de polvo de oro.\n * - `shizuku`  — gotas en órbita decreciente.\n */\nexport type SpinnerVariant = 'enso' | 'sumi' | 'kintsugi' | 'shizuku';\n\n/** Tamaño del spinner. */\nexport type SpinnerSize = 'sm' | 'md' | 'lg';\n\n/**\n * Tono de color.\n * Afecta a `enso` (stroke) y `sumi` (gradiente).\n * En `shizuku`, `tone=\"kaki\"` equivale a `dark`.\n * No tiene efecto sobre `kintsugi` (siempre oro).\n */\nexport type SpinnerTone = 'ink' | 'kaki' | 'celadon';\n\n/**\n * @element lib-spinner\n *\n * @prop {SpinnerVariant} variant  - Variante visual (default: enso).\n * @prop {SpinnerSize}    size     - Tamaño sm | md | lg (default: md).\n * @prop {SpinnerTone}    tone     - Tono de color (default: ink).\n * @prop {boolean}        dark     - Optimiza colores para fondos oscuros.\n * @prop {string}         label    - Texto accesible (default: 'Cargando').\n *\n * @csspart status - El div[role=status] raíz.\n */\n@customElement('lib-spinner')\nexport class LibSpinner extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(spinnerCss)}`,\n  ];\n\n  @property({ type: String, reflect: true })\n  variant: SpinnerVariant = 'enso';\n\n  @property({ type: String, reflect: true })\n  size: SpinnerSize = 'md';\n\n  @property({ type: String, reflect: true })\n  tone: SpinnerTone = 'ink';\n\n  @property({ type: Boolean, reflect: true })\n  dark: boolean = false;\n\n  @property({ type: String })\n  label: string = 'Cargando';\n\n  override render(): TemplateResult {\n    return spinnerTemplate({\n      variant: this.variant,\n      size:    this.size,\n      tone:    this.tone,\n      dark:    this.dark,\n      label:   this.label,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-spinner': LibSpinner;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwCO,IAAM,aAAN,cAAyB,WAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,UAA0B;AAG1B,SAAA,OAAoB;AAGpB,SAAA,OAAoB;AAGpB,SAAA,OAAgB;AAGhB,SAAA,QAAgB;AAAA,EAAA;AAAA,EAEP,SAAyB;AAChC,WAAO,gBAAgB;AAAA,MACrB,SAAS,KAAK;AAAA,MACd,MAAS,KAAK;AAAA,MACd,MAAS,KAAK;AAAA,MACd,MAAS,KAAK;AAAA,MACd,OAAS,KAAK;AAAA,IAAA,CACf;AAAA,EACH;AACF;AA9Ba,WACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,UAAU,CAAC;AAC7B;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAN9B,WAOX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAT9B,WAUX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAZ9B,WAaX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAf/B,WAgBX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlBf,WAmBX,WAAA,SAAA,CAAA;AAnBW,aAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,UAAA;"}

package/dist/index42.js

@@ -1,7 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { renderEyebrow } from "./index270.js";
-import componentCss from "./index271.js";
+import { statusDotTemplate } from "./index338.js";
+import statusDotCss from "./index339.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,46 +13,43 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibEyebrow = class extends LitElement {
+let LibStatusDot = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.color = "kaki";
-    this.line = "left";
+    this.status = "offline";
     this.size = "md";
-    this.effect = "none";
-    this.dot = false;
-    this.num = "";
+    this.bordered = false;
+    this.label = false;
   }
   render() {
-    return renderEyebrow(this);
+    return statusDotTemplate({
+      status: this.status,
+      size: this.size,
+      bordered: this.bordered,
+      label: this.label
+    });
   }
 };
-LibEyebrow.styles = [
+LibStatusDot.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(componentCss)}`
+  css`${unsafeCSS(statusDotCss)}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
-], LibEyebrow.prototype, "color", 2);
+], LibStatusDot.prototype, "status", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibEyebrow.prototype, "line", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibEyebrow.prototype, "size", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibEyebrow.prototype, "effect", 2);
+], LibStatusDot.prototype, "size", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibEyebrow.prototype, "dot", 2);
+], LibStatusDot.prototype, "bordered", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibEyebrow.prototype, "num", 2);
-LibEyebrow = __decorateClass([
-  customElement("lib-eyebrow")
-], LibEyebrow);
+  property({ type: Boolean, reflect: true })
+], LibStatusDot.prototype, "label", 2);
+LibStatusDot = __decorateClass([
+  customElement("lib-status-dot")
+], LibStatusDot);
 export {
-  LibEyebrow
+  LibStatusDot
 };
 //# sourceMappingURL=index42.js.map

package/dist/index42.js.map

@@ -1 +1 @@
-{"version":3,"file":"index42.js","sources":["../src/components/atoms/eyebrow/lib-eyebrow.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, type TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { renderEyebrow } from './lib-eyebrow.html';\nimport componentCss from './lib-eyebrow.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport type EyebrowColor  = 'kaki' | 'washi' | 'celadon' | 'white' | 'muted' | 'dark';\nexport type EyebrowLine   = 'left' | 'right' | 'both' | 'none';\nexport type EyebrowSize   = 'sm' | 'md' | 'lg';\nexport type EyebrowEffect = 'none' | 'kintsugi' | 'glitch';\n\n/**\n * `<lib-eyebrow>` — Etiqueta introductoria previa a un titular.\n *\n * Elemento de texto en DM Mono muy pequeño con línea decorativa de gradiente.\n * Unifica los patrones `.sg-section-label`, `.hero-eyebrow` y `.section-label`\n * en un único componente agnóstico.\n *\n * @tag lib-eyebrow\n *\n * @attr {'kaki'|'washi'|'celadon'|'white'|'muted'|'dark'} color\n *   Color del texto y de la línea decorativa. Default: `'kaki'`.\n *\n * @attr {'left'|'right'|'both'|'none'} line\n *   Posición de la línea decorativa. Default: `'left'`.\n *\n * @attr {'sm'|'md'|'lg'} size\n *   Tamaño tipográfico. Default: `'md'`.\n *\n * @attr {'none'|'kintsugi'|'glitch'} effect\n *   Efecto especial de animación. Default: `'none'`.\n *\n * @attr {boolean} dot\n *   Reemplaza la línea por un punto de color.\n *\n * @attr {string} num\n *   Si se define, añade un badge numérico sufijo (ej: \"01\").\n *\n * @slot - Texto del eyebrow.\n *\n * @csspart base  - El span contenedor interno.\n * @csspart badge - El badge numérico (solo cuando `num` está definido).\n *\n * @example\n * <lib-eyebrow>Design System · v0.1.0</lib-eyebrow>\n * <lib-eyebrow color=\"celadon\" size=\"sm\" dot>Sistema online</lib-eyebrow>\n * <lib-eyebrow effect=\"kintsugi\" line=\"both\">✦ Featured</lib-eyebrow>\n * <lib-eyebrow effect=\"glitch\" line=\"none\">⌗ runtime · session</lib-eyebrow>\n * <lib-eyebrow num=\"41\">Motion</lib-eyebrow>\n */\n@customElement('lib-eyebrow')\nexport class LibEyebrow extends LitElement {\n\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(componentCss)}`,\n  ];\n\n  /** Color del texto y la línea decorativa */\n  @property({ type: String, reflect: true })\n  color: EyebrowColor = 'kaki';\n\n  /** Posición de la línea decorativa */\n  @property({ type: String, reflect: true })\n  line: EyebrowLine = 'left';\n\n  /** Tamaño tipográfico */\n  @property({ type: String, reflect: true })\n  size: EyebrowSize = 'md';\n\n  /** Efecto especial animado */\n  @property({ type: String, reflect: true })\n  effect: EyebrowEffect = 'none';\n\n  /** Sustituye la línea por un punto de color */\n  @property({ type: Boolean, reflect: true })\n  dot = false;\n\n  /**\n   * Badge numérico añadido como sufijo.\n   * Útil en listados de componentes (\"41 · Motion\").\n   */\n  @property({ type: String, reflect: true })\n  num = '';\n\n  protected override render(): TemplateResult {\n    return renderEyebrow(this);\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAmDO,IAAM,aAAN,cAAyB,WAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA;AASL,SAAA,QAAsB;AAItB,SAAA,OAAoB;AAIpB,SAAA,OAAoB;AAIpB,SAAA,SAAwB;AAIxB,SAAA,MAAM;AAON,SAAA,MAAM;AAAA,EAAA;AAAA,EAEa,SAAyB;AAC1C,WAAO,cAAc,IAAI;AAAA,EAC3B;AACF;AArCa,WAEK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,YAAY,CAAC;AAC/B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAR9B,WASX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAZ9B,WAaX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAhB9B,WAiBX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GApB9B,WAqBX,WAAA,UAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAxB/B,WAyBX,WAAA,OAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA/B9B,WAgCX,WAAA,OAAA,CAAA;AAhCW,aAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,UAAA;"}
+{"version":3,"file":"index42.js","sources":["../src/components/atoms/status-dot/lib-status-dot.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { LibStatusDotStatus, LibStatusDotSize } from './lib-status-dot.html';\nimport { statusDotTemplate } from './lib-status-dot.html';\nimport statusDotCss from './lib-status-dot.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-status-dot\n *\n * Indicador de presencia con animación semántica por estado.\n * Cada estado tiene su propio ritmo extraído de conceptos japoneses:\n *   - 水 mizu   : online  — doble onda concéntrica (2.6s)\n *   - 息 iki    : away    — respiración scale+opacity (3s)\n *   - 速い hayai : busy    — parpadeo asimétrico (1.1s)\n *   - 間 ma     : offline — quietud total, sin movimiento\n *\n * @example — uso básico\n * <lib-status-dot status=\"online\"></lib-status-dot>\n *\n * @example — con label inline\n * <lib-status-dot status=\"away\" label></lib-status-dot>\n *\n * @example — sobre avatar (borde blanco)\n * <lib-status-dot status=\"busy\" size=\"md\" bordered></lib-status-dot>\n *\n * @example — tamaño grande en dashboard\n * <lib-status-dot status=\"online\" size=\"lg\"></lib-status-dot>\n */\n@customElement('lib-status-dot')\nexport class LibStatusDot extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(statusDotCss)}`,\n  ];\n\n  /**\n   * Estado de presencia.\n   * - online  : celadón · onda mizu\n   * - away    : kaki · respiración iki\n   * - busy    : error · parpadeo hayai\n   * - offline : washi-400 · quietud ma\n   */\n  @property({ type: String, reflect: true })\n  status: LibStatusDotStatus = 'offline';\n\n  /**\n   * Tamaño del punto.\n   * - sm : 6px  — tablas y listas densas\n   * - md : 10px — uso general (default)\n   * - lg : 14px — alta visibilidad\n   */\n  @property({ type: String, reflect: true })\n  size: LibStatusDotSize = 'md';\n\n  /**\n   * Añade un halo blanco (`box-shadow: 0 0 0 2px --bg-elevated`)\n   * para separar el punto visualmente cuando se posiciona sobre un avatar.\n   */\n  @property({ type: Boolean, reflect: true })\n  bordered = false;\n\n  /**\n   * Muestra el texto del estado (Online / Away / Busy / Offline)\n   * en línea con el punto. El color hereda el estado activo.\n   */\n  @property({ type: Boolean, reflect: true })\n  label = false;\n\n  override render(): TemplateResult {\n    return statusDotTemplate({\n      status:   this.status,\n      size:     this.size,\n      bordered: this.bordered,\n      label:    this.label,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-status-dot': LibStatusDot;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA8BO,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AAcL,SAAA,SAA6B;AAS7B,SAAA,OAAyB;AAOzB,SAAA,WAAW;AAOX,SAAA,QAAQ;AAAA,EAAA;AAAA,EAEC,SAAyB;AAChC,WAAO,kBAAkB;AAAA,MACvB,QAAU,KAAK;AAAA,MACf,MAAU,KAAK;AAAA,MACf,UAAU,KAAK;AAAA,MACf,OAAU,KAAK;AAAA,IAAA,CAChB;AAAA,EACH;AACF;AA/Ca,aACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,YAAY,CAAC;AAC/B;AAUA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAb9B,aAcX,WAAA,UAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAtB9B,aAuBX,WAAA,QAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA7B/B,aA8BX,WAAA,YAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GApC/B,aAqCX,WAAA,SAAA,CAAA;AArCW,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;"}

package/dist/index43.js

@@ -1,7 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { renderDisplayHeading } from "./index272.js";
-import componentCss from "./index273.js";
+import { stepTemplate } from "./index340.js";
+import stepCss from "./index341.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,58 +13,61 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibDisplayHeading = class extends LitElement {
+let LibStep = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.line1 = "";
-    this.line2Prefix = "";
-    this.accent = "";
-    this.description = "";
-    this.surface = "light";
+    this.label = "";
+    this.sub = "";
+    this.index = 1;
+    this.status = "pending";
+    this.last = false;
+    this.orientation = "horizontal";
+    this.variant = "default";
     this.size = "md";
-    this.tag = "h2";
-    this.centered = false;
-    this._animate = false;
   }
   render() {
-    return renderDisplayHeading(this);
+    return stepTemplate({
+      index: this.index,
+      status: this.status,
+      label: this.label,
+      sub: this.sub,
+      last: this.last,
+      orientation: this.orientation
+    });
   }
 };
-LibDisplayHeading.styles = [
+LibStep.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(componentCss)}`
+  css`${unsafeCSS(stepCss)}`
 ];
 __decorateClass([
   property({ type: String })
-], LibDisplayHeading.prototype, "line1", 2);
-__decorateClass([
-  property({ type: String, attribute: "line2-prefix" })
-], LibDisplayHeading.prototype, "line2Prefix", 2);
+], LibStep.prototype, "label", 2);
 __decorateClass([
   property({ type: String })
-], LibDisplayHeading.prototype, "accent", 2);
+], LibStep.prototype, "sub", 2);
 __decorateClass([
-  property({ type: String })
-], LibDisplayHeading.prototype, "description", 2);
+  property({ type: Number, reflect: true })
+], LibStep.prototype, "index", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibDisplayHeading.prototype, "surface", 2);
+], LibStep.prototype, "status", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibDisplayHeading.prototype, "size", 2);
+  property({ type: Boolean, reflect: true })
+], LibStep.prototype, "last", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibDisplayHeading.prototype, "tag", 2);
+], LibStep.prototype, "orientation", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibDisplayHeading.prototype, "centered", 2);
+  property({ type: String, reflect: true })
+], LibStep.prototype, "variant", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibDisplayHeading.prototype, "_animate", 2);
-LibDisplayHeading = __decorateClass([
-  customElement("lib-display-heading")
-], LibDisplayHeading);
+  property({ type: String, reflect: true })
+], LibStep.prototype, "size", 2);
+LibStep = __decorateClass([
+  customElement("lib-step")
+], LibStep);
 export {
-  LibDisplayHeading
+  LibStep
 };
 //# sourceMappingURL=index43.js.map

package/dist/index43.js.map

@@ -1 +1 @@
-{"version":3,"file":"index43.js","sources":["../src/components/atoms/display-heading/lib-display-heading.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, type TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { renderDisplayHeading } from './lib-display-heading.html';\nimport type {\n  DisplayHeadingSurface,\n  DisplayHeadingSize,\n  DisplayHeadingTag,\n} from './lib-display-heading.types';\nimport componentCss from './lib-display-heading.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * `<lib-display-heading>` — Titular de display editorial.\n *\n * Heading en Cormorant Garamond con peso 300 y acento itálico en kaki.\n * Patrón recurrente del sistema: primera línea normal + segunda línea con\n * texto itálico en `--color-kaki-400`. Acepta un `<lib-eyebrow>` por slot.\n *\n * @tag lib-display-heading\n *\n * @attr {string} line1         - Primera línea del titular.\n * @attr {string} line2-prefix  - Texto antes del acento en la segunda línea.\n * @attr {string} accent        - Texto en itálica kaki (acento).\n * @attr {string} description   - Párrafo de descripción (alternativa al slot).\n * @attr {'dark'|'light'|'washi'} surface - Superficie sobre la que se muestra.\n * @attr {'sm'|'md'|'lg'}       size    - Tamaño tipográfico fluido.\n * @attr {'h1'|'h2'|'h3'|'h4'} tag     - Tag semántico del heading.\n * @attr {boolean}              centered - Centra el bloque.\n * @attr {boolean}              animate  - Activa la animación de entrada fade-up.\n *\n * @slot eyebrow     - Acepta un `<lib-eyebrow>` como prefijo.\n * @slot description - Descripción como rich content (alternativa a `description`).\n *\n * @csspart wrapper     - Div contenedor externo.\n * @csspart heading     - El elemento h1–h4.\n * @csspart description - El párrafo de descripción.\n *\n * @example\n * <!-- Básico -->\n * <lib-display-heading\n *   line1=\"Todo lo que\"\n *   line2-prefix=\"necesitas,\"\n *   accent=\"nada más\"\n *   surface=\"dark\"\n * ></lib-display-heading>\n *\n * <!-- Con eyebrow y descripción -->\n * <lib-display-heading\n *   line1=\"La belleza\"\n *   line2-prefix=\"de lo\"\n *   accent=\"austero\"\n *   surface=\"dark\"\n *   size=\"lg\"\n *   description=\"66 componentes sin dependencias.\"\n * >\n *   <lib-eyebrow slot=\"eyebrow\" effect=\"kintsugi\" size=\"lg\">\n *     Design System · v0.1.0\n *   </lib-eyebrow>\n * </lib-display-heading>\n */\n@customElement('lib-display-heading')\nexport class LibDisplayHeading extends LitElement {\n\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(componentCss)}`,\n  ];\n\n  /** Primera línea del titular */\n  @property({ type: String })\n  line1 = '';\n\n  /** Texto antes del acento en la segunda línea */\n  @property({ type: String, attribute: 'line2-prefix' })\n  line2Prefix = '';\n\n  /** Texto en itálica kaki */\n  @property({ type: String })\n  accent = '';\n\n  /** Párrafo de descripción inline */\n  @property({ type: String })\n  description = '';\n\n  /** Superficie sobre la que aparece */\n  @property({ type: String, reflect: true })\n  surface: DisplayHeadingSurface = 'light';\n\n  /** Tamaño tipográfico fluido */\n  @property({ type: String, reflect: true })\n  size: DisplayHeadingSize = 'md';\n\n  /** Tag semántico del heading */\n  @property({ type: String, reflect: true })\n  tag: DisplayHeadingTag = 'h2';\n\n  /** Centra el bloque */\n  @property({ type: Boolean, reflect: true })\n  centered = false;\n\n  /** Activa animación de entrada */\n  @property({ type: Boolean, reflect: true })\n  _animate = false;\n\n  protected override render(): TemplateResult {\n    return renderDisplayHeading(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-display-heading': LibDisplayHeading;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA6DO,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AASL,SAAA,QAAQ;AAIR,SAAA,cAAc;AAId,SAAA,SAAS;AAIT,SAAA,cAAc;AAId,SAAA,UAAiC;AAIjC,SAAA,OAA2B;AAI3B,SAAA,MAAyB;AAIzB,SAAA,WAAW;AAIX,SAAA,WAAW;AAAA,EAAA;AAAA,EAEQ,SAAyB;AAC1C,WAAO,qBAAqB,IAAI;AAAA,EAClC;AACF;AA9Ca,kBAEK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,YAAY,CAAC;AAC/B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARf,kBASX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB;AAAA,GAZ1C,kBAaX,WAAA,eAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBf,kBAiBX,WAAA,UAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApBf,kBAqBX,WAAA,eAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAxB9B,kBAyBX,WAAA,WAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA5B9B,kBA6BX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAhC9B,kBAiCX,WAAA,OAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GApC/B,kBAqCX,WAAA,YAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAxC/B,kBAyCX,WAAA,YAAA,CAAA;AAzCW,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}
+{"version":3,"file":"index43.js","sources":["../src/components/atoms/step/lib-step.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type {\n  LibStepStatus,\n  LibStepOrientation,\n  LibStepVariant,\n  LibStepSize,\n} from './lib-step.types';\nimport { stepTemplate } from './lib-step.html';\nimport stepCss from './lib-step.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-step\n *\n * Paso individual del stepper. Diseñado para usarse dentro de `<lib-stepper>`,\n * que inyecta automáticamente `index`, `status`, `last`, `orientation`,\n * `variant` y `size`. El usuario solo necesita declarar `label` y, opcionalmente, `sub`.\n *\n * En modo vertical acepta contenido descriptivo en el slot por defecto.\n *\n * @example — dentro de lib-stepper (uso recomendado)\n * <lib-stepper current=\"2\">\n *   <lib-step label=\"Información\" sub=\"Datos personales\"></lib-step>\n *   <lib-step label=\"Pago\" sub=\"Método de pago\"></lib-step>\n *   <lib-step label=\"Confirmación\"></lib-step>\n * </lib-stepper>\n *\n * @example — vertical con contenido en slot\n * <lib-stepper orientation=\"vertical\">\n *   <lib-step label=\"Crea tu cuenta\">\n *     Registro completado. Tu correo ha sido verificado.\n *   </lib-step>\n * </lib-stepper>\n */\n@customElement('lib-step')\nexport class LibStep extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(stepCss)}`,\n  ];\n\n  /** Texto principal del paso (requerido por el usuario). */\n  @property({ type: String })\n  label = '';\n\n  /** Texto secundario corto (opcional). */\n  @property({ type: String })\n  sub = '';\n\n  /**\n   * Número ordinal del paso.\n   * Inyectado automáticamente por lib-stepper.\n   */\n  @property({ type: Number, reflect: true })\n  index = 1;\n\n  /**\n   * Estado visual del nodo.\n   * Inyectado automáticamente por lib-stepper.\n   * - pending   : por defecto — nodo vacío\n   * - active    : paso en curso — fondo oscuro + halo\n   * - completed : paso superado — checkmark\n   * - error     : fallo — icono de exclamación\n   */\n  @property({ type: String, reflect: true })\n  status: LibStepStatus = 'pending';\n\n  /**\n   * Marca el último paso del stepper (no renderiza conector).\n   * Inyectado automáticamente por lib-stepper.\n   */\n  @property({ type: Boolean, reflect: true })\n  last = false;\n\n  /**\n   * Dirección del flujo. Inyectado por lib-stepper.\n   */\n  @property({ type: String, reflect: true })\n  orientation: LibStepOrientation = 'horizontal';\n\n  /**\n   * Variante visual. Inyectada por lib-stepper.\n   * - default  : nodo circular washi\n   * - minimal  : nodo cuadrado kaki\n   * - kintsugi : venas doradas sobre superficie oscura\n   */\n  @property({ type: String, reflect: true })\n  variant: LibStepVariant = 'default';\n\n  /**\n   * Tamaño del nodo. Inyectado por lib-stepper.\n   * - sm : 24px\n   * - md : 32px (default)\n   * - lg : 40px\n   */\n  @property({ type: String, reflect: true })\n  size: LibStepSize = 'md';\n\n  override render(): TemplateResult {\n    return stepTemplate({\n      index:       this.index,\n      status:      this.status,\n      label:       this.label,\n      sub:         this.sub,\n      last:        this.last,\n      orientation: this.orientation,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-step': LibStep;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAoCO,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,QAAQ;AAIR,SAAA,MAAM;AAON,SAAA,QAAQ;AAWR,SAAA,SAAwB;AAOxB,SAAA,OAAO;AAMP,SAAA,cAAkC;AASlC,SAAA,UAA0B;AAS1B,SAAA,OAAoB;AAAA,EAAA;AAAA,EAEX,SAAyB;AAChC,WAAO,aAAa;AAAA,MAClB,OAAa,KAAK;AAAA,MAClB,QAAa,KAAK;AAAA,MAClB,OAAa,KAAK;AAAA,MAClB,KAAa,KAAK;AAAA,MAClB,MAAa,KAAK;AAAA,MAClB,aAAa,KAAK;AAAA,IAAA,CACnB;AAAA,EACH;AACF;AAzEa,QACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,OAAO,CAAC;AAC1B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,QAQX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAXf,QAYX,WAAA,OAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAlB9B,QAmBX,WAAA,SAAA,CAAA;AAWA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA7B9B,QA8BX,WAAA,UAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GApC/B,QAqCX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA1C9B,QA2CX,WAAA,eAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAnD9B,QAoDX,WAAA,WAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA5D9B,QA6DX,WAAA,QAAA,CAAA;AA7DW,UAAN,gBAAA;AAAA,EADN,cAAc,UAAU;AAAA,GACZ,OAAA;"}

package/dist/index44.js

@@ -1,32 +1,78 @@
-import { unsafeCSS, css, LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
-import gridCss from "./index274.js";
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { generateUniqueId } from "./index210.js";
+import { switchTemplate } from "./index342.js";
+import switchCss from "./index343.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 = decorator(result) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibComponentGrid = class extends LitElement {
+let LibSwitch = class extends LitElement {
+  constructor() {
+    super();
+    this.checked = false;
+    this.disabled = false;
+    this.variant = "default";
+    this.size = "md";
+    this.label = "";
+    this.sub = "";
+    this._switchId = generateUniqueId("lib-switch-");
+  }
   render() {
-    return html`
-      <div class="grid" part="grid">
-        <slot></slot>
-      </div>
-    `;
+    return switchTemplate({
+      switchId: this._switchId,
+      checked: this.checked,
+      disabled: this.disabled,
+      label: this.label,
+      sub: this.sub,
+      handleChange: this._handleChange.bind(this)
+    });
+  }
+  _handleChange(e) {
+    const input = e.target;
+    this.checked = input.checked;
+    this.dispatchEvent(
+      new CustomEvent("ui-lib-change", {
+        detail: { checked: this.checked },
+        bubbles: true,
+        composed: true
+      })
+    );
   }
 };
-LibComponentGrid.styles = [
+LibSwitch.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(gridCss)}`
+  css`${unsafeCSS(switchCss)}`
 ];
-LibComponentGrid = __decorateClass([
-  customElement("lib-component-grid")
-], LibComponentGrid);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibSwitch.prototype, "checked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibSwitch.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibSwitch.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibSwitch.prototype, "size", 2);
+__decorateClass([
+  property({ type: String })
+], LibSwitch.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], LibSwitch.prototype, "sub", 2);
+LibSwitch = __decorateClass([
+  customElement("lib-switch")
+], LibSwitch);
 export {
-  LibComponentGrid
+  LibSwitch
 };
 //# sourceMappingURL=index44.js.map

package/dist/index44.js.map

@@ -1 +1 @@
-{"version":3,"file":"index44.js","sources":["../src/components/atoms/card/card-grid/lib-card-grid.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport gridCss from './lib-card-grid.css?inline';\nimport sharedTokens from '../../../../styles/shared/tokens.css?inline';\n\n/**\n * `<lib-component-grid>` — Grid contenedor de `<lib-component-card>`.\n *\n * Gestiona el layout CSS Grid y aplica automáticamente `grid-column: span 2`\n * a las tarjetas con el atributo `featured`.\n *\n * @tag lib-component-grid\n *\n * @slot - Acepta uno o más `<lib-component-card>`.\n *\n * @cssprop --cg-cols   - Grid template columns. Default: `repeat(auto-fill, minmax(280px, 1fr))`.\n * @cssprop --cg-gap    - Gap entre celdas. Default: `1.5px`.\n *\n * @example\n * <lib-component-grid>\n *   <lib-component-card featured num=\"✦ Kintsugi\" name=\"La cicatriz\" name-accent=\"de oro\">\n *     <div slot=\"preview\">...</div>\n *   </lib-component-card>\n *   <lib-component-card num=\"01–05\" name=\"Buttons\" .tags=${[...]}>\n *     <div slot=\"preview\">...</div>\n *   </lib-component-card>\n * </lib-component-grid>\n */\n@customElement('lib-component-grid')\nexport class LibComponentGrid extends LitElement {\n\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(gridCss)}`,\n  ];\n\n  protected override render(): TemplateResult {\n    return html`\n      <div class=\"grid\" part=\"grid\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-component-grid': LibComponentGrid;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;AA6BO,IAAM,mBAAN,cAA+B,WAAW;AAAA,EAO5B,SAAyB;AAC1C,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AAda,iBAEK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,OAAO,CAAC;AAC1B;AALW,mBAAN,gBAAA;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB,gBAAA;"}
+{"version":3,"file":"index44.js","sources":["../src/components/atoms/switch/lib-switch.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { generateUniqueId } from '../../../core/a11y';\nimport type { LibSwitchVariant, LibSwitchSize } from './lib-switch.html';\nimport { switchTemplate } from './lib-switch.html';\nimport switchCss from './lib-switch.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport type { LibSwitchVariant, LibSwitchSize };\n\n/**\n * @element lib-switch\n *\n * Toggle switch con variante kintsugi de acabado premium.\n *\n * @fires ui-lib-change — Emitido al cambiar estado con `{ checked: boolean }`\n *\n * @example — default\n * <lib-switch label=\"Notificaciones\"></lib-switch>\n *\n * @example — con subtítulo\n * <lib-switch label=\"Acceso premium\" sub=\"Funciones exclusivas\" checked></lib-switch>\n *\n * @example — kintsugi (superficie oscura)\n * <lib-switch variant=\"kintsugi\" label=\"Modo ceremonial\" sub=\"Activa el tema kintsugi\"></lib-switch>\n *\n * @example — tamaños\n * <lib-switch size=\"sm\"></lib-switch>\n * <lib-switch size=\"lg\" label=\"Sincronización\"></lib-switch>\n */\n@customElement('lib-switch')\nexport class LibSwitch extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(switchCss)}`,\n  ];\n\n  private _switchId: string;\n\n  constructor() {\n    super();\n    this._switchId = generateUniqueId('lib-switch-');\n  }\n\n  /** Estado activo del switch. */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /** Deshabilita la interacción. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Variante visual.\n   * - default   : track washi, thumb blanco\n   * - kintsugi  : cerámica oscura, venas doradas, thumb de oro al activar\n   */\n  @property({ type: String, reflect: true })\n  variant: LibSwitchVariant = 'default';\n\n  /**\n   * Tamaño del switch.\n   * - sm : 30×18px · md : 40×24px (default) · lg : 52×30px\n   */\n  @property({ type: String, reflect: true })\n  size: LibSwitchSize = 'md';\n\n  /** Texto principal de la etiqueta. */\n  @property({ type: String })\n  label = '';\n\n  /** Texto secundario debajo del label. */\n  @property({ type: String })\n  sub = '';\n\n  override render(): TemplateResult {\n    return switchTemplate({\n      switchId:     this._switchId,\n      checked:      this.checked,\n      disabled:     this.disabled,\n      label:        this.label,\n      sub:          this.sub,\n      handleChange: this._handleChange.bind(this),\n    });\n  }\n\n  private _handleChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n\n    this.dispatchEvent(\n      new CustomEvent<{ checked: boolean }>('ui-lib-change', {\n        detail:   { checked: this.checked },\n        bubbles:  true,\n        composed: true,\n      })\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-switch': LibSwitch;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA+BO,IAAM,YAAN,cAAwB,WAAW;AAAA,EAQxC,cAAc;AACZ,UAAA;AAMF,SAAA,UAAU;AAIV,SAAA,WAAW;AAQX,SAAA,UAA4B;AAO5B,SAAA,OAAsB;AAItB,SAAA,QAAQ;AAIR,SAAA,MAAM;AAhCJ,SAAK,YAAY,iBAAiB,aAAa;AAAA,EACjD;AAAA,EAiCS,SAAyB;AAChC,WAAO,eAAe;AAAA,MACpB,UAAc,KAAK;AAAA,MACnB,SAAc,KAAK;AAAA,MACnB,UAAc,KAAK;AAAA,MACnB,OAAc,KAAK;AAAA,MACnB,KAAc,KAAK;AAAA,MACnB,cAAc,KAAK,cAAc,KAAK,IAAI;AAAA,IAAA,CAC3C;AAAA,EACH;AAAA,EAEQ,cAAc,GAAgB;AACpC,UAAM,QAAQ,EAAE;AAChB,SAAK,UAAU,MAAM;AAErB,SAAK;AAAA,MACH,IAAI,YAAkC,iBAAiB;AAAA,QACrD,QAAU,EAAE,SAAS,KAAK,QAAA;AAAA,QAC1B,SAAU;AAAA,QACV,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AACF;AAnEa,UACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,SAAS,CAAC;AAC5B;AAWA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAd/B,UAeX,WAAA,WAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAlB/B,UAmBX,WAAA,YAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA1B9B,UA2BX,WAAA,WAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAjC9B,UAkCX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArCf,UAsCX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzCf,UA0CX,WAAA,OAAA,CAAA;AA1CW,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}