@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index11.js

@@ -1,8 +1,9 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { progressTemplate } from "./index209.js";
-import progressCss from "./index210.js";
+import { generateUniqueId } from "./index210.js";
+import buttonCss from "./index281.js";
 import sharedTokens from "./index196.js";
+import { buttonTemplate } from "./index282.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,98 +14,112 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibProgress = class extends LitElement {
+let LibButton = class extends LitElement {
   constructor() {
-    super(...arguments);
-    this.value = 0;
-    this.max = 100;
+    super();
+    this.variant = "primary";
     this.size = "md";
-    this.tone = "default";
-    this.indeterminate = false;
-    this.striped = false;
-    this.square = false;
-    this.label = "";
-    this.valueLabel = "";
-    this.sub = "";
-    this.showValue = false;
-    this.segments = "";
+    this.disabled = false;
+    this.glass = false;
+    this.spotlight = false;
+    this._onMouseMove = (e) => {
+      var _a;
+      if (!this.spotlight) return;
+      const btn = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".btn");
+      if (!btn) return;
+      const rect = btn.getBoundingClientRect();
+      const x = (e.clientX - rect.left) / rect.width * 100;
+      const y = (e.clientY - rect.top) / rect.height * 100;
+      this.style.setProperty("--lib-spotlight-x", `${x}%`);
+      this.style.setProperty("--lib-spotlight-y", `${y}%`);
+    };
+    this._onMouseLeave = () => {
+      this.style.setProperty("--lib-spotlight-x", "50%");
+      this.style.setProperty("--lib-spotlight-y", "50%");
+    };
+    this.type = "button";
+    this.customPadding = null;
     this.ariaLabel = null;
+    this._buttonId = generateUniqueId("lib-button-");
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("mousemove", this._onMouseMove);
+    this.addEventListener("mouseleave", this._onMouseLeave);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("mousemove", this._onMouseMove);
+    this.removeEventListener("mouseleave", this._onMouseLeave);
+  }
+  /**
+   * Implementación del renderizado siguiendo la regla de tipado explícito.
+   */
   render() {
-    const percent = this.indeterminate ? 100 : Math.min(Math.max(this.value / (this.max || 100) * 100, 0), 100);
-    let parsedSegments = [];
-    if (this.segments) {
-      try {
-        parsedSegments = JSON.parse(this.segments);
-      } catch {
-        console.warn("[lib-progress] Invalid JSON in `segments` prop.");
-      }
-    }
-    return progressTemplate({
-      percent,
+    return buttonTemplate({
+      buttonId: this._buttonId,
+      type: this.type,
+      disabled: this.disabled,
+      ariaLabel: this.ariaLabel ?? void 0,
+      handleClick: this._handleClick.bind(this),
+      variant: this.variant,
       size: this.size,
-      tone: this.tone,
-      indeterminate: this.indeterminate,
-      striped: this.striped,
-      square: this.square,
-      label: this.label,
-      valueLabel: this.valueLabel,
-      sub: this.sub,
-      showValue: this.showValue,
-      segments: parsedSegments,
-      ariaLabel: this.ariaLabel ?? this.label,
-      rawValue: this.value,
-      max: this.max
+      glass: this.glass,
+      spotlight: this.spotlight,
+      customPadding: this.customPadding ?? void 0
     });
   }
+  _handleClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("ui-lib-click", {
+        detail: { originalEvent: event, timestamp: Date.now() },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
 };
-LibProgress.styles = [
-  css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(progressCss)}`
+LibButton.styles = [
+  css`
+      ${unsafeCSS(sharedTokens)}
+    `,
+  css`
+      ${unsafeCSS(buttonCss)}
+    `
 ];
-__decorateClass([
-  property({ type: Number })
-], LibProgress.prototype, "value", 2);
-__decorateClass([
-  property({ type: Number })
-], LibProgress.prototype, "max", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibProgress.prototype, "size", 2);
+], LibButton.prototype, "variant", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibProgress.prototype, "tone", 2);
+], LibButton.prototype, "size", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibProgress.prototype, "indeterminate", 2);
+], LibButton.prototype, "disabled", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibProgress.prototype, "striped", 2);
+], LibButton.prototype, "glass", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibProgress.prototype, "square", 2);
-__decorateClass([
-  property({ type: String })
-], LibProgress.prototype, "label", 2);
-__decorateClass([
-  property({ type: String, attribute: "value-label" })
-], LibProgress.prototype, "valueLabel", 2);
+], LibButton.prototype, "spotlight", 2);
 __decorateClass([
   property({ type: String })
-], LibProgress.prototype, "sub", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "show-value" })
-], LibProgress.prototype, "showValue", 2);
+], LibButton.prototype, "type", 2);
 __decorateClass([
-  property({ type: String })
-], LibProgress.prototype, "segments", 2);
+  property({ type: String, attribute: "custom-padding" })
+], LibButton.prototype, "customPadding", 2);
 __decorateClass([
   property({ type: String, attribute: "aria-label" })
-], LibProgress.prototype, "ariaLabel", 2);
-LibProgress = __decorateClass([
-  customElement("lib-progress")
-], LibProgress);
+], LibButton.prototype, "ariaLabel", 2);
+LibButton = __decorateClass([
+  customElement("lib-button")
+], LibButton);
 export {
-  LibProgress
+  LibButton
 };
 //# sourceMappingURL=index11.js.map

package/dist/index11.js.map

@@ -1 +1 @@
-{"version":3,"file":"index11.js","sources":["../src/components/atoms/progress/lib-progress.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { progressTemplate } from './lib-progress.html';\nimport progressCss from './lib-progress.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { ProgressSize, ProgressTone, ProgressSegment } from './lib-progress.types';\n\n/**\n * @element lib-progress\n *\n * Barra de progreso lineal del sistema Shibui.\n *\n * Modos:\n *  - Simple bar          → valor 0-100 con prop `value`\n *  - Con meta            → añade `label` y/o `value-label`\n *  - Multi-segmento      → prop `segments` (JSON)\n *\n * @attr value          — Valor actual (0–max). Default 0.\n * @attr max            — Valor máximo. Default 100.\n * @attr size           — xs · sm · md · lg · xl. Default md.\n * @attr tone           — default · kaki · celadon · error. Default default.\n * @attr indeterminate  — Duración desconocida; animación continua.\n * @attr striped        — Relleno con diagonales sutiles.\n * @attr square         — Bordes rectos (radius-sm) en lugar de full.\n * @attr label          — Etiqueta sobre la barra.\n * @attr value-label    — Texto libre junto al label (ej: \"3.4 MB / 7 MB\").\n * @attr show-value     — Muestra el % calculado junto al label (ignorado si value-label está presente).\n * @attr sub            — Texto secundario bajo la barra (DM Mono, 10px).\n * @attr segments       — JSON: ProgressSegment[]. Activa modo multi-segmento.\n */\n@customElement('lib-progress')\nexport class LibProgress extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(progressCss)}`,\n  ];\n\n  /* ── Bar config ── */\n  @property({ type: Number }) value = 0;\n  @property({ type: Number }) max   = 100;\n\n  @property({ type: String, reflect: true }) size: ProgressSize = 'md';\n  @property({ type: String, reflect: true }) tone: ProgressTone = 'default';\n\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n  @property({ type: Boolean, reflect: true }) striped       = false;\n  @property({ type: Boolean, reflect: true }) square        = false;\n\n  /* ── Meta ── */\n  @property({ type: String }) label       = '';\n  @property({ type: String, attribute: 'value-label' }) valueLabel = '';\n  @property({ type: String }) sub         = '';\n  @property({ type: Boolean, attribute: 'show-value' }) showValue  = false;\n\n  /* ── Multi-segment (JSON string) ── */\n  @property({ type: String }) segments = '';\n\n  /* ── a11y ── */\n  @property({ type: String, attribute: 'aria-label' }) override ariaLabel: string | null = null;\n\n  override render(): TemplateResult {\n    const percent = this.indeterminate\n      ? 100\n      : Math.min(Math.max((this.value / (this.max || 100)) * 100, 0), 100);\n\n    let parsedSegments: ProgressSegment[] = [];\n    if (this.segments) {\n      try {\n        parsedSegments = JSON.parse(this.segments) as ProgressSegment[];\n      } catch {\n        console.warn('[lib-progress] Invalid JSON in `segments` prop.');\n      }\n    }\n\n    return progressTemplate({\n      percent,\n      size:          this.size,\n      tone:          this.tone,\n      indeterminate: this.indeterminate,\n      striped:       this.striped,\n      square:        this.square,\n\n      label:      this.label,\n      valueLabel: this.valueLabel,\n      sub:        this.sub,\n      showValue:  this.showValue,\n\n      segments: parsedSegments,\n\n      ariaLabel: this.ariaLabel ?? this.label,\n      rawValue:  this.value,\n      max:       this.max,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-progress': LibProgress;\n  }\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"index11.js","sources":["../src/components/atoms/button/lib-button.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { generateUniqueId } from '../../../core/a11y';\nimport type { LibSize, UiClickEventDetail } from '../../../types';\nimport type { LibButtonVariant } from './lib-button.types';\nimport buttonCss from './lib-button.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport { buttonTemplate } from './lib-button.html';\n\n/**\n * @tag lib-button\n * @element lib-button\n * @fires ui-lib-click - Evento personalizado disparado al hacer clic.\n * @event lib-click\n * @csspart button - El elemento <button> nativo.\n */\n@customElement('lib-button')\nexport class LibButton extends LitElement {\n  static override styles = [\n    css`\n      ${unsafeCSS(sharedTokens)}\n    `,\n    css`\n      ${unsafeCSS(buttonCss)}\n    `\n  ];\n\n  private _buttonId: string;\n\n  constructor() {\n    super();\n    this._buttonId = generateUniqueId('lib-button-');\n  }\n\n  /**\n * @type {\"primary\" | \"secondary\" | \"ghost\" | \"accent\" | \"danger\" | \"kintsugi\" | \"brutal\"}\n */\n  @property({ type: String, reflect: true })\n  variant: LibButtonVariant = 'primary';\n\n  /**\n * @type {\"sm\" | \"md\" | \"lg\" | \"xl\"}\n */\n  @property({ type: String, reflect: true })\n  size: LibSize = 'md';\n\n  /**\n * @type {boolean}\n */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n/**\n * @type {boolean}\n */\n  @property({ type: Boolean, reflect: true })\n  glass = false;\n\n  /**\n * @type {boolean}\n */\n  @property({ type: Boolean, reflect: true })\n  spotlight = false;\n\n  private _onMouseMove = (e: MouseEvent): void => {\n    if (!this.spotlight) return;\n    const btn = this.shadowRoot?.querySelector('.btn');\n    if (!btn) return;\n    const rect = btn.getBoundingClientRect();\n    const x = ((e.clientX - rect.left) / rect.width) * 100;\n    const y = ((e.clientY - rect.top) / rect.height) * 100;\n    this.style.setProperty('--lib-spotlight-x', `${x}%`);\n    this.style.setProperty('--lib-spotlight-y', `${y}%`);\n  };\n\n  private _onMouseLeave = (): void => {\n    this.style.setProperty('--lib-spotlight-x', '50%');\n    this.style.setProperty('--lib-spotlight-y', '50%');\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('mousemove', this._onMouseMove);\n    this.addEventListener('mouseleave', this._onMouseLeave);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('mousemove', this._onMouseMove);\n    this.removeEventListener('mouseleave', this._onMouseLeave);\n  }\n\n  /**\n * @type {'button' | 'submit' | 'reset'}\n */\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n * @type {string | null}\n */\n  @property({ type: String, attribute: 'custom-padding' })\n  customPadding: string | null = null;\n\n  /**\n * @type {string | null}\n */\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel: string | null = null;\n\n  /**\n   * Implementación del renderizado siguiendo la regla de tipado explícito.\n   */\n  override render(): TemplateResult {\n    return buttonTemplate({\n      buttonId: this._buttonId,\n      type: this.type,\n      disabled: this.disabled,\n      ariaLabel: this.ariaLabel ?? undefined,\n      handleClick: this._handleClick.bind(this),\n      variant: this.variant,\n      size: this.size,\n      glass: this.glass,\n      spotlight: this.spotlight,\n      customPadding: this.customPadding ?? undefined,\n    });\n  }\n\n  private _handleClick(event: Event): void {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<UiClickEventDetail>('ui-lib-click', {\n        detail: { originalEvent: event, timestamp: Date.now() },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-button': LibButton;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/index12.js

@@ -1,8 +1,8 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { accordionItemTemplate } from "./index211.js";
-import accordionItemCss from "./index212.js";
 import sharedTokens from "./index196.js";
+import cardStyles from "./index283.js";
+import { cardTemplate } from "./index284.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,44 +13,58 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibAccordionItem = class extends LitElement {
+let LibCard = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.label = "";
-    this.open = false;
+    this.variant = "default";
+    this.accentColor = void 0;
+    this.kanji = "";
+    this.clickable = false;
   }
-  _handleToggle() {
-    this.open = !this.open;
+  render() {
+    return cardTemplate({
+      variant: this.variant,
+      accentColor: this.accentColor,
+      kanji: this.kanji,
+      clickable: this.clickable,
+      onClick: (e) => this._onClick(e)
+    });
+  }
+  _onClick(e) {
+    if (!this.clickable) return;
     this.dispatchEvent(
-      new CustomEvent("accordion-toggle", {
+      new CustomEvent("ui-lib-card-click", {
+        detail: { variant: this.variant, kanji: this.kanji, originalEvent: e },
         bubbles: true,
-        composed: true,
-        detail: { open: this.open }
+        composed: true
       })
     );
   }
-  render() {
-    return accordionItemTemplate({
-      label: this.label,
-      open: this.open,
-      onToggle: this._handleToggle.bind(this)
-    });
-  }
 };
-LibAccordionItem.styles = [
-  css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(accordionItemCss)}`
+LibCard.styles = [
+  css`
+      ${unsafeCSS(sharedTokens)}
+    `,
+  css`
+      ${unsafeCSS(cardStyles)}
+    `
 ];
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibCard.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, attribute: "accent-color" })
+], LibCard.prototype, "accentColor", 2);
 __decorateClass([
   property({ type: String })
-], LibAccordionItem.prototype, "label", 2);
+], LibCard.prototype, "kanji", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibAccordionItem.prototype, "open", 2);
-LibAccordionItem = __decorateClass([
-  customElement("lib-accordion-item")
-], LibAccordionItem);
+], LibCard.prototype, "clickable", 2);
+LibCard = __decorateClass([
+  customElement("lib-card")
+], LibCard);
 export {
-  LibAccordionItem
+  LibCard
 };
 //# sourceMappingURL=index12.js.map

package/dist/index12.js.map

@@ -1 +1 @@
-{"version":3,"file":"index12.js","sources":["../src/components/atoms/accordion-item/lib-accordion-item.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { accordionItemTemplate } from './lib-accordion-item.component.html';\nimport accordionItemCss from './lib-accordion-item.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-accordion-item\n *\n * Item colapsable individual. Puede usarse standalone o dentro de lib-accordion.\n * El padre lib-accordion orquesta el comportamiento mutually-exclusive y\n * aplica variantes (flush, separated, accent) via CSS custom properties.\n *\n * @slot - Contenido colapsable\n *\n * @fires accordion-toggle - Emitido al hacer clic en el trigger.\n *   detail: { open: boolean }\n *\n * @example\n * <lib-accordion-item label=\"Pregunta\" open>\n *   Respuesta detallada aqui.\n * </lib-accordion-item>\n */\n@customElement('lib-accordion-item')\nexport class LibAccordionItem extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(accordionItemCss)}`,\n  ];\n\n  /** Texto del trigger (cabecera del item) */\n  @property({ type: String })\n  label = '';\n\n  /** Estado abierto/cerrado */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  private _handleToggle(): void {\n    this.open = !this.open;\n\n    this.dispatchEvent(\n      new CustomEvent<{ open: boolean }>('accordion-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { open: this.open },\n      })\n    );\n  }\n\n  override render(): TemplateResult {\n    return accordionItemTemplate({\n      label: this.label,\n      open: this.open,\n      onToggle: this._handleToggle.bind(this),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-accordion-item': LibAccordionItem;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBO,IAAM,mBAAN,cAA+B,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,QAAQ;AAIR,SAAA,OAAO;AAAA,EAAA;AAAA,EAEC,gBAAsB;AAC5B,SAAK,OAAO,CAAC,KAAK;AAElB,SAAK;AAAA,MACH,IAAI,YAA+B,oBAAoB;AAAA,QACrD,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,MAAM,KAAK,KAAA;AAAA,MAAK,CAC3B;AAAA,IAAA;AAAA,EAEL;AAAA,EAES,SAAyB;AAChC,WAAO,sBAAsB;AAAA,MAC3B,OAAO,KAAK;AAAA,MACZ,MAAM,KAAK;AAAA,MACX,UAAU,KAAK,cAAc,KAAK,IAAI;AAAA,IAAA,CACvC;AAAA,EACH;AACF;AAjCa,iBACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,gBAAgB,CAAC;AACnC;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,iBAQX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAX/B,iBAYX,WAAA,QAAA,CAAA;AAZW,mBAAN,gBAAA;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB,gBAAA;"}
+{"version":3,"file":"index12.js","sources":["../src/components/atoms/card/lib-card.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 cardStyles from \"./lib-card.css?inline\";\nimport { cardTemplate } from \"./lib-card.html\";\nimport type { LibCardVariant } from \"./lib-card.types\";\n\nexport type { LibCardVariant } from \"./lib-card.types\";\n\n/**\n * @element lib-card\n *\n * @attr {'default'|'inverse'|'accent'|'featured'|'kintsugi'|'glitch'|'celadon'|'washi'|'brutal'} variant\n *   - default   → superficie elevada neutra\n *   - inverse   → fondo washi-900 oscuro\n *   - accent    → borde izquierdo de color (`accent-color`)\n *   - featured  → fondo kaki degradado, título grande — pensado para 2 columnas en grid\n *   - kintsugi  → seam de oro animado en borde superior + hilo kintsugi-border en borde\n *   - glitch    → estética terminal CRT, scanlines, fuente mono\n *   - celadon   → acento verde-gris japonés para estados de éxito / énfasis secundario\n *   - washi     → paleta neutra cálida, superficie washi-50/100\n *   - brutal    → superficie clara, borde sólido ink, --lib-shadow-brutal; hover hunde el elemento en su sombra\n *\n * @attr {string}  accent-color - Color del borde (solo variante `accent`).\n * @attr {string}  kanji        - Carácter kanji decorativo de fondo (ej: \"渋\", \"金\", \"間\").\n *\n * @attr {boolean} clickable    - Si está presente, la card emite `ui-lib-card-click` al hacer clic\n * @slot tag    - Etiqueta o metadata en el header.\n * @slot title  - Título principal de la card.\n * @slot        - Cuerpo de la card (default slot).\n * @slot footer - Acciones o información en el footer.\n * @fires ui-lib-card-click - { variant, kanji, originalEvent } — solo cuando `clickable` es true.\n */\n@customElement(\"lib-card\")\nexport class LibCard extends LitElement {\n  static override styles = [\n    css`\n      ${unsafeCSS(sharedTokens)}\n    `,\n    css`\n      ${unsafeCSS(cardStyles)}\n    `,\n  ];\n\n  @property({ type: String, reflect: true })\n  variant: LibCardVariant = \"default\";\n\n  @property({ type: String, attribute: \"accent-color\" })\n  accentColor: string | undefined = undefined;\n\n  /** Carácter kanji decorativo mostrado como marca de agua en la esquina superior derecha */\n  @property({ type: String })\n  kanji = \"\";\n\n  @property({ type: Boolean, reflect: true })\n  clickable = false;\n\n  override render(): TemplateResult {\n    return cardTemplate({\n      variant: this.variant,\n      accentColor: this.accentColor,\n      kanji: this.kanji,\n      clickable: this.clickable,\n      onClick: (e: MouseEvent) => this._onClick(e),\n    });\n  }\n\n  _onClick(e: MouseEvent): void {\n    if (!this.clickable) return;\n    this.dispatchEvent(\n      new CustomEvent(\"ui-lib-card-click\", {\n        detail: { variant: this.variant, kanji: this.kanji, originalEvent: e },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"lib-card\": LibCard;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkCO,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA;AAWL,SAAA,UAA0B;AAG1B,SAAA,cAAkC;AAIlC,SAAA,QAAQ;AAGR,SAAA,YAAY;AAAA,EAAA;AAAA,EAEH,SAAyB;AAChC,WAAO,aAAa;AAAA,MAClB,SAAS,KAAK;AAAA,MACd,aAAa,KAAK;AAAA,MAClB,OAAO,KAAK;AAAA,MACZ,WAAW,KAAK;AAAA,MAChB,SAAS,CAAC,MAAkB,KAAK,SAAS,CAAC;AAAA,IAAA,CAC5C;AAAA,EACH;AAAA,EAEA,SAAS,GAAqB;AAC5B,QAAI,CAAC,KAAK,UAAW;AACrB,SAAK;AAAA,MACH,IAAI,YAAY,qBAAqB;AAAA,QACnC,QAAQ,EAAE,SAAS,KAAK,SAAS,OAAO,KAAK,OAAO,eAAe,EAAA;AAAA,QACnE,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AACF;AA3Ca,QACK,SAAS;AAAA,EACvB;AAAA,QACI,UAAU,YAAY,CAAC;AAAA;AAAA,EAE3B;AAAA,QACI,UAAU,UAAU,CAAC;AAAA;AAE3B;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAV9B,QAWX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB;AAAA,GAb1C,QAcX,WAAA,eAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjBf,QAkBX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GApB/B,QAqBX,WAAA,aAAA,CAAA;AArBW,UAAN,gBAAA;AAAA,EADN,cAAc,UAAU;AAAA,GACZ,OAAA;"}

package/dist/index13.js

@@ -1,9 +1,8 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { generateUniqueId } from "./index213.js";
+import { glassCardTemplate } from "./index285.js";
+import glassCss from "./index286.js";
 import sharedTokens from "./index196.js";
-import tooltipCss from "./index214.js";
-import { tooltipTemplate } from "./index215.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,55 +13,33 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibTooltip = class extends LitElement {
+let LibGlassCard = class extends LitElement {
   constructor() {
-    super();
-    this.position = "top";
-    this.variant = "dark";
-    this.size = "md";
-    this.content = "";
-    this.instant = false;
-    this.open = false;
-    this._tipId = generateUniqueId("tip-");
+    super(...arguments);
+    this.variant = "paper";
+    this.intensity = "md";
   }
   render() {
-    return tooltipTemplate({
-      position: this.position,
+    return glassCardTemplate({
       variant: this.variant,
-      size: this.size,
-      content: this.content,
-      instant: this.instant,
-      open: this.open,
-      tipId: this._tipId
+      intensity: this.intensity
     });
   }
 };
-LibTooltip.styles = [
+LibGlassCard.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(tooltipCss)}`
+  css`${unsafeCSS(glassCss)}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
-], LibTooltip.prototype, "position", 2);
+], LibGlassCard.prototype, "variant", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibTooltip.prototype, "variant", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibTooltip.prototype, "size", 2);
-__decorateClass([
-  property({ type: String })
-], LibTooltip.prototype, "content", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibTooltip.prototype, "instant", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibTooltip.prototype, "open", 2);
-LibTooltip = __decorateClass([
-  customElement("lib-tooltip")
-], LibTooltip);
+], LibGlassCard.prototype, "intensity", 2);
+LibGlassCard = __decorateClass([
+  customElement("lib-glass-card")
+], LibGlassCard);
 export {
-  LibTooltip
+  LibGlassCard
 };
 //# sourceMappingURL=index13.js.map

package/dist/index13.js.map

@@ -1 +1 @@
-{"version":3,"file":"index13.js","sources":["../src/components/atoms/tooltip/lib-tooltip.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { generateUniqueId } from '../../../core/a11y';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport tooltipCss from './lib-tooltip.css?inline';\nimport { tooltipTemplate } from './lib-tooltip.html';\n\n/* ── Tipos públicos ─────────────────────────────────────────── */\n\n/**\n * Posición de la burbuja respecto al trigger.\n * Las cuatro cardinales centran la burbuja.\n * Las variantes -start/-end alinean al extremo — útiles\n * cuando el trigger está junto al borde de pantalla.\n */\nexport type TooltipPosition =\n  | 'top' | 'bottom' | 'left' | 'right'\n  | 'top-start' | 'top-end'\n  | 'bottom-start' | 'bottom-end';\n\n/**\n * Variante de color.\n * - `dark`    — washi-900, máximo contraste (default).\n * - `light`   — fondo blanco con borde, para superficies oscuras\n *               o cuando el contenido necesita estructura visible.\n * - `kaki`    — acento naranja terracota.\n * - `celadon` — estado positivo / informativo.\n * - `error`   — validación fallida o acción destructiva.\n */\nexport type TooltipVariant = 'dark' | 'light' | 'kaki' | 'celadon' | 'error';\n\n/** Tamaño de la burbuja. */\nexport type TooltipSize = 'sm' | 'md' | 'lg';\n\n/**\n * @element lib-tooltip\n *\n * Wrapper que envuelve cualquier trigger y muestra una burbuja\n * flotante en hover / focus. Sin JS para el caso base —\n * todo mediante CSS :hover + :focus-within.\n *\n * ## Uso simple\n * ```html\n * <lib-tooltip content=\"Guardar cambios\">\n *   <button>...</button>\n * </lib-tooltip>\n * ```\n *\n * ## Contenido rico (slot=\"content\")\n * ```html\n * <lib-tooltip position=\"top\" variant=\"light\" size=\"lg\">\n *   <button>...</button>\n *   <span slot=\"content\">\n *     <span class=\"tip-title\">Tokens de color</span>\n *     <span class=\"tip-body\">Paleta completa en CSS variables.</span>\n *     <div class=\"tip-sep\"></div>\n *     <div class=\"tip-kbd\"><kbd>⌘</kbd><kbd>K</kbd></div>\n *   </span>\n * </lib-tooltip>\n * ```\n *\n * @prop {TooltipPosition} position - Posición de la burbuja (default: top).\n * @prop {TooltipVariant}  variant  - Variante de color (default: dark).\n * @prop {TooltipSize}     size     - Tamaño sm | md | lg (default: md).\n * @prop {string}          content  - Texto simple. Para contenido rico usa slot=\"content\".\n * @prop {boolean}         instant  - Elimina el delay de entrada de 300ms.\n * @prop {boolean}         open     - Abre la burbuja programáticamente.\n *\n * @slot          - El trigger (cualquier elemento interactivo).\n * @slot content  - Contenido rico de la burbuja (tip-title, tip-body, tip-kbd, tip-sep).\n *\n * @csspart wrapper - El div posicionador interno.\n * @csspart bubble  - El span de la burbuja flotante.\n */\n@customElement('lib-tooltip')\nexport class LibTooltip extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(tooltipCss)}`,\n  ];\n\n  private _tipId: string;\n\n  constructor() {\n    super();\n    this._tipId = generateUniqueId('tip-');\n  }\n\n  @property({ type: String, reflect: true })\n  position: TooltipPosition = 'top';\n\n  @property({ type: String, reflect: true })\n  variant: TooltipVariant = 'dark';\n\n  @property({ type: String, reflect: true })\n  size: TooltipSize = 'md';\n\n  @property({ type: String })\n  content: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  instant: boolean = false;\n\n  /** Abre la burbuja programáticamente (equivale a `.is-open`). */\n  @property({ type: Boolean, reflect: true })\n  open: boolean = false;\n\n  override render(): TemplateResult {\n    return tooltipTemplate({\n      position: this.position,\n      variant:  this.variant,\n      size:     this.size,\n      content:  this.content,\n      instant:  this.instant,\n      open:     this.open,\n      tipId:    this._tipId,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-tooltip': LibTooltip;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA2EO,IAAM,aAAN,cAAyB,WAAW;AAAA,EAQzC,cAAc;AACZ,UAAA;AAKF,SAAA,WAA4B;AAG5B,SAAA,UAA0B;AAG1B,SAAA,OAAoB;AAGpB,SAAA,UAAkB;AAGlB,SAAA,UAAmB;AAInB,SAAA,OAAgB;AApBd,SAAK,SAAS,iBAAiB,MAAM;AAAA,EACvC;AAAA,EAqBS,SAAyB;AAChC,WAAO,gBAAgB;AAAA,MACrB,UAAU,KAAK;AAAA,MACf,SAAU,KAAK;AAAA,MACf,MAAU,KAAK;AAAA,MACf,SAAU,KAAK;AAAA,MACf,SAAU,KAAK;AAAA,MACf,MAAU,KAAK;AAAA,MACf,OAAU,KAAK;AAAA,IAAA,CAChB;AAAA,EACH;AACF;AA3Ca,WACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,UAAU,CAAC;AAC7B;AAUA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAb9B,WAcX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAhB9B,WAiBX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAnB9B,WAoBX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtBf,WAuBX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAzB/B,WA0BX,WAAA,WAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA7B/B,WA8BX,WAAA,QAAA,CAAA;AA9BW,aAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,UAAA;"}
+{"version":3,"file":"index13.js","sources":["../src/components/atoms/card/glass-card/lib-glass-card.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { LibGlassVariant, LibGlassIntensity } from './lib-glass-card.types';\nimport { glassCardTemplate } from './lib-glass-card.html';\nimport glassCss from './lib-glass-card.css?inline';\nimport sharedTokens from '../../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-glass-card\n *\n * Contenedor con efecto glassmorphism (Efecto Agua).\n * Requiere un fondo oscuro en el elemento padre para que\n * el backdrop-filter sea visible.\n *\n * @slot - Contenido de la card (eyebrow, título, body, footer...).\n *\n * @example — uso básico\n * <lib-glass-card>\n *   <h3>Paper Glass</h3>\n *   <p>Variante neutra sobre fondo oscuro.</p>\n * </lib-glass-card>\n *\n * @example — variante water con intensidad alta\n * <lib-glass-card variant=\"water\" intensity=\"high\">...</lib-glass-card>\n *\n * @example — variante kaki\n * <lib-glass-card variant=\"kaki\">...</lib-glass-card>\n */\n@customElement('lib-glass-card')\nexport class LibGlassCard extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(glassCss)}`,\n  ];\n\n  /**\n   * Tinte de color del cristal.\n   * - paper : neutro paper al 15% (default)\n   * - water : azul sereno oklch(55% 0.06 210)\n   * - kaki  : orgánico cálido oklch(45% 0.05 45)\n   */\n  @property({ type: String, reflect: true })\n  variant: LibGlassVariant = 'paper';\n\n  /**\n   * Intensidad del efecto (blur + opacidad).\n   * - low  : blur 4px  · opacity 0.10 — sutil\n   * - md   : blur 12px · opacity 0.15 — default\n   * - high : blur 25px · opacity 0.25 — máximo\n   */\n  @property({ type: String, reflect: true })\n  intensity: LibGlassIntensity = 'md';\n\n  override render(): TemplateResult {\n    return glassCardTemplate({\n      variant:   this.variant,\n      intensity: this.intensity,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-glass-card': LibGlassCard;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA6BO,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AAaL,SAAA,UAA2B;AAS3B,SAAA,YAA+B;AAAA,EAAA;AAAA,EAEtB,SAAyB;AAChC,WAAO,kBAAkB;AAAA,MACvB,SAAW,KAAK;AAAA,MAChB,WAAW,KAAK;AAAA,IAAA,CACjB;AAAA,EACH;AACF;AA9Ba,aACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,QAAQ,CAAC;AAC3B;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAZ9B,aAaX,WAAA,WAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GArB9B,aAsBX,WAAA,aAAA,CAAA;AAtBW,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;"}

package/dist/index14.js

@@ -1,7 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { stepTemplate } from "./index216.js";
-import stepCss from "./index217.js";
+import { spotlightCardTemplate } from "./index287.js";
+import spotlightCss from "./index288.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,61 +13,46 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibStep = class extends LitElement {
+let LibSpotlightCard = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.label = "";
-    this.sub = "";
-    this.index = 1;
-    this.status = "pending";
-    this.last = false;
-    this.orientation = "horizontal";
-    this.variant = "default";
-    this.size = "md";
+    this.spotlight = "kaki";
+    this.kintsugi = false;
   }
   render() {
-    return stepTemplate({
-      index: this.index,
-      status: this.status,
-      label: this.label,
-      sub: this.sub,
-      last: this.last,
-      orientation: this.orientation
+    return spotlightCardTemplate({
+      spotlight: this.spotlight,
+      kintsugi: this.kintsugi,
+      onMouseMove: this._handleMouseMove.bind(this),
+      onMouseLeave: this._handleMouseLeave.bind(this)
     });
   }
+  _handleMouseMove(e) {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = (e.clientX - rect.left) / rect.width * 100;
+    const y = (e.clientY - rect.top) / rect.height * 100;
+    this.style.setProperty("--lib-spotlight-x", `${x}%`);
+    this.style.setProperty("--lib-spotlight-y", `${y}%`);
+  }
+  _handleMouseLeave() {
+    this.style.setProperty("--lib-spotlight-x", "50%");
+    this.style.setProperty("--lib-spotlight-y", "50%");
+  }
 };
-LibStep.styles = [
+LibSpotlightCard.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(stepCss)}`
+  css`${unsafeCSS(spotlightCss)}`
 ];
-__decorateClass([
-  property({ type: String })
-], LibStep.prototype, "label", 2);
-__decorateClass([
-  property({ type: String })
-], LibStep.prototype, "sub", 2);
-__decorateClass([
-  property({ type: Number, reflect: true })
-], LibStep.prototype, "index", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibStep.prototype, "status", 2);
+], LibSpotlightCard.prototype, "spotlight", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibStep.prototype, "last", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibStep.prototype, "orientation", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibStep.prototype, "variant", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibStep.prototype, "size", 2);
-LibStep = __decorateClass([
-  customElement("lib-step")
-], LibStep);
+], LibSpotlightCard.prototype, "kintsugi", 2);
+LibSpotlightCard = __decorateClass([
+  customElement("lib-spotlight-card")
+], LibSpotlightCard);
 export {
-  LibStep
+  LibSpotlightCard
 };
 //# sourceMappingURL=index14.js.map

package/dist/index14.js.map

@@ -1 +1 @@
-{"version":3,"file":"index14.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;"}
+{"version":3,"file":"index14.js","sources":["../src/components/atoms/card/spotlight-card/lib-spotlight-card.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { LibSpotlightVariant } from './lib-spotlight-card.types';\nimport { spotlightCardTemplate } from './lib-spotlight-card.html';\nimport spotlightCss from './lib-spotlight-card.css?inline';\nimport sharedTokens from '../../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-spotlight-card\n *\n * Contenedor con foco de luz reactivo al cursor (Kintsugi Digital).\n * El gradiente radial sigue al puntero actualizando\n * `--lib-spotlight-x` y `--lib-spotlight-y` en :host.\n *\n * Con `kintsugi` activo añade el hilo de oro en el borde\n * y cambia el fondo a un tono cálido oscuro.\n *\n * @slot - Contenido de la card.\n *\n * @example — spotlight kaki\n * <lib-spotlight-card>...</lib-spotlight-card>\n *\n * @example — spotlight water\n * <lib-spotlight-card spotlight=\"water\">...</lib-spotlight-card>\n *\n * @example — kintsugi border + spotlight kaki\n * <lib-spotlight-card kintsugi>...</lib-spotlight-card>\n */\n@customElement('lib-spotlight-card')\nexport class LibSpotlightCard extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(spotlightCss)}`,\n  ];\n\n  /**\n   * Color del foco de luz.\n   * - kaki  : orgánico cálido — oklch(45% 0.05 45)  [default]\n   * - water : azul sereno    — oklch(55% 0.06 210)\n   * - white : neutro         — oklch(100% 0 0)\n   *\n   * Nota: cuando `kintsugi` está activo el spotlight es siempre kaki.\n   */\n  @property({ type: String, reflect: true })\n  spotlight: LibSpotlightVariant = 'kaki';\n\n  /**\n   * Activa el hilo de oro en el borde (--lib-kintsugi-border)\n   * y cambia el fondo del contenedor a un tono cálido oscuro.\n   */\n  @property({ type: Boolean, reflect: true })\n  kintsugi = false;\n\n  override render(): TemplateResult {\n    return spotlightCardTemplate({\n      spotlight:    this.spotlight,\n      kintsugi:     this.kintsugi,\n      onMouseMove:  this._handleMouseMove.bind(this),\n      onMouseLeave: this._handleMouseLeave.bind(this),\n    });\n  }\n\n  private _handleMouseMove(e: MouseEvent): void {\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const x = ((e.clientX - rect.left) / rect.width)  * 100;\n    const y = ((e.clientY - rect.top)  / rect.height) * 100;\n\n    // Actualiza las custom properties en :host\n    // El radial-gradient del CSS las consume automáticamente\n    this.style.setProperty('--lib-spotlight-x', `${x}%`);\n    this.style.setProperty('--lib-spotlight-y', `${y}%`);\n  }\n\n  private _handleMouseLeave(): void {\n    // Resetea al centro — la layer se oculta vía CSS opacity: 0\n    this.style.setProperty('--lib-spotlight-x', '50%');\n    this.style.setProperty('--lib-spotlight-y', '50%');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-spotlight-card': LibSpotlightCard;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA6BO,IAAM,mBAAN,cAA+B,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAeL,SAAA,YAAiC;AAOjC,SAAA,WAAW;AAAA,EAAA;AAAA,EAEF,SAAyB;AAChC,WAAO,sBAAsB;AAAA,MAC3B,WAAc,KAAK;AAAA,MACnB,UAAc,KAAK;AAAA,MACnB,aAAc,KAAK,iBAAiB,KAAK,IAAI;AAAA,MAC7C,cAAc,KAAK,kBAAkB,KAAK,IAAI;AAAA,IAAA,CAC/C;AAAA,EACH;AAAA,EAEQ,iBAAiB,GAAqB;AAC5C,UAAM,OAAQ,EAAE,cAA8B,sBAAA;AAC9C,UAAM,KAAM,EAAE,UAAU,KAAK,QAAQ,KAAK,QAAU;AACpD,UAAM,KAAM,EAAE,UAAU,KAAK,OAAQ,KAAK,SAAU;AAIpD,SAAK,MAAM,YAAY,qBAAqB,GAAG,CAAC,GAAG;AACnD,SAAK,MAAM,YAAY,qBAAqB,GAAG,CAAC,GAAG;AAAA,EACrD;AAAA,EAEQ,oBAA0B;AAEhC,SAAK,MAAM,YAAY,qBAAqB,KAAK;AACjD,SAAK,MAAM,YAAY,qBAAqB,KAAK;AAAA,EACnD;AACF;AAjDa,iBACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,YAAY,CAAC;AAC/B;AAWA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAd9B,iBAeX,WAAA,aAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GArB/B,iBAsBX,WAAA,YAAA,CAAA;AAtBW,mBAAN,gBAAA;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB,gBAAA;"}