@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index28.js

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

package/dist/index28.js.map

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

package/dist/index280.js

@@ -1,45 +1,5 @@
-import { nothing, html } from "lit";
-function labelColor(step) {
-  return step <= 400 ? "rgba(26,20,14,0.45)" : "rgba(250,247,244,0.55)";
-}
-function colorScaleTemplate(ctx) {
-  const steps = ctx.steps ?? [];
-  const first = steps[0];
-  const last = steps[steps.length - 1];
-  return html`
-    <div class="scale-wrap">
-
-      <!-- Swatches -->
-      <div class="scale-track">
-        ${steps.map((s) => html`
-          <div
-            class="scale-swatch"
-            style="background:${s.oklch ?? s.hex};"
-            title="${ctx.name}-${s.step} · ${s.hex}"
-          >
-            <span class="scale-swatch-label" style="color:${labelColor(s.step)};">
-              ${s.step}
-            </span>
-          </div>
-        `)}
-      </div>
-
-      <!-- Extreme labels -->
-      ${ctx.showLabels && first && last ? html`
-        <div class="scale-legends">
-          <span class="scale-legend">
-            ${ctx.name}-${first.step} · ${first.hex}
-          </span>
-          <span class="scale-legend scale-legend--right">
-            ${ctx.name}-${last.step} · ${last.hex}
-          </span>
-        </div>
-      ` : nothing}
-
-    </div>
-  `;
-}
+const burgerCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;align-items:center}*,*:before,*:after{box-sizing:border-box}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer}}@layer components{.burger{position:relative;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;outline:none}.burger:focus-visible{box-shadow:0 0 0 2px var(--color-washi-50),0 0 0 4px var(--color-washi-600)}.burger-lines{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.burger-line{display:block;border-radius:var(--lib-radius-sm);background:currentcolor;transform-origin:center;will-change:transform,opacity,width}.burger-wrap{display:inline-flex;align-items:center;gap:var(--lib-space-sm);cursor:pointer}.burger-label{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);transition:color var(--duration-base),opacity var(--duration-base);-webkit-user-select:none;user-select:none}.burger-wrap:hover .burger-label{color:var(--text-primary)}:host([size="sm"]) .burger-lines{width:18px;height:12px}:host([size="sm"]) .burger-line{height:1px}:host([size="sm"]) .burger-line:nth-child(1){margin-bottom:5px}:host([size="sm"]) .burger-line:nth-child(2){margin-bottom:5px}:host([size="lg"]) .burger-lines{width:36px;height:24px}:host([size="lg"]) .burger-line{height:2px}:host([size="lg"]) .burger-line:nth-child(1){margin-bottom:10px}:host([size="lg"]) .burger-line:nth-child(2){margin-bottom:10px}:host([variant="ink"]) .burger{width:44px;height:44px;color:var(--text-primary);transition:color var(--duration-base)}:host([variant="ink"]) .burger:hover{color:var(--color-kaki-500)}:host([variant="ink"]) .burger:active{transform:scale(.94)}:host([variant="ink"]) .burger-lines{width:28px;height:18px}:host([variant="ink"]) .burger-line{height:1.5px;transition:transform var(--duration-slow) var(--ease-bounce),opacity var(--duration-base) var(--ease-out),width var(--duration-slow) var(--ease-bounce)}:host([variant="ink"]) .burger-line:nth-child(1){width:20px;margin-bottom:7px}:host([variant="ink"]) .burger-line:nth-child(2){width:28px;margin-bottom:7px}:host([variant="ink"]) .burger-line:nth-child(3){width:14px}:host([variant="ink"][open]) .burger-line:nth-child(1){transform:translateY(8.5px) rotate(45deg);width:26px;transition-delay:0ms,0ms,80ms}:host([variant="ink"][open]) .burger-line:nth-child(2){opacity:0;transform:scaleX(0);transition-delay:0ms}:host([variant="ink"][open]) .burger-line:nth-child(3){transform:translateY(-8.5px) rotate(-45deg);width:26px;transition-delay:0ms,0ms,80ms}:host([variant="kanji"]) .burger{width:48px;height:48px;color:var(--text-primary);position:relative;transition:color var(--duration-base)}:host([variant="kanji"]) .burger:hover{color:var(--color-kaki-500)}:host([variant="kanji"]) .burger:active{transform:scale(.93)}:host([variant="kanji"]) .burger:after{content:"三";position:absolute;bottom:0;left:50%;transform:translate(-50%);font-family:var(--lib-font-mono);font-size:8px;letter-spacing:0;color:var(--text-muted);transition:opacity var(--duration-base)}:host([variant="kanji"][open]) .burger:after{content:"×"}:host([variant="kanji"]) .burger-lines{width:26px;height:16px;margin-bottom:6px}:host([variant="kanji"]) .burger-line{height:1px;transition:transform var(--duration-slow) var(--ease-bounce),opacity var(--duration-base) var(--ease-out),width var(--duration-slow) var(--ease-bounce)}:host([variant="kanji"]) .burger-line:nth-child(1){width:26px;margin-bottom:7px}:host([variant="kanji"]) .burger-line:nth-child(2){width:18px;margin-bottom:7px}:host([variant="kanji"]) .burger-line:nth-child(3){width:26px}:host([variant="kanji"][open]) .burger-line:nth-child(1){transform:translateY(7.5px) rotate(45deg);width:24px}:host([variant="kanji"][open]) .burger-line:nth-child(2){opacity:0;width:0}:host([variant="kanji"][open]) .burger-line:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);width:24px}:host([variant="washi"]) .burger{width:48px;height:48px;color:var(--text-primary);transition:color var(--duration-base)}:host([variant="washi"]) .burger:hover{color:var(--color-kaki-500)}:host([variant="washi"]) .burger:active{transform:scale(.93)}:host([variant="washi"]) .burger-lines{width:28px;height:18px}:host([variant="washi"]) .burger-line{width:28px;height:1px;transition:transform var(--duration-slow) var(--ease-bounce),width var(--duration-slow) var(--ease-bounce),opacity var(--duration-base) var(--ease-out)}:host([variant="washi"]) .burger-line:nth-child(1){margin-bottom:8px}:host([variant="washi"]) .burger-line:nth-child(2){margin-bottom:8px}:host([variant="washi"][open]) .burger-line:nth-child(1){transform:translateY(9px) rotate(45deg);transition-delay:60ms,0ms,0ms}:host([variant="washi"][open]) .burger-line:nth-child(2){opacity:0;width:0}:host([variant="washi"][open]) .burger-line:nth-child(3){transform:translateY(-9px) rotate(-45deg);transition-delay:60ms,0ms,0ms}:host([variant="framed"]) .burger{width:44px;height:44px;color:var(--text-primary);border:1px solid var(--border-default);transition:border-color var(--duration-base),color var(--duration-base),transform var(--duration-slow) var(--ease-bounce)}:host([variant="framed"]) .burger:hover{border-color:var(--border-strong);color:var(--color-kaki-500)}:host([variant="framed"][open]) .burger{transform:rotate(45deg);border-color:var(--color-kaki-500);color:var(--color-kaki-500)}:host([variant="framed"]) .burger-lines{width:20px;height:13px;transition:transform var(--duration-slow) var(--ease-bounce)}:host([variant="framed"][open]) .burger-lines{transform:rotate(-45deg)}:host([variant="framed"]) .burger-line{width:20px;height:1.5px;transition:transform var(--duration-slow) var(--ease-bounce),opacity var(--duration-base) var(--ease-out),width var(--duration-base) var(--ease-out)}:host([variant="framed"]) .burger-line:nth-child(1){margin-bottom:5px}:host([variant="framed"]) .burger-line:nth-child(2){margin-bottom:5px}:host([variant="framed"][open]) .burger-line:nth-child(1){transform:translateY(6.75px) rotate(90deg);width:14px}:host([variant="framed"][open]) .burger-line:nth-child(2){opacity:0}:host([variant="framed"][open]) .burger-line:nth-child(3){transform:translateY(-6.75px);width:14px}:host([variant="kintsugi"]) .burger{width:48px;height:48px;color:#faf7f480;position:relative;overflow:hidden;transition:color var(--duration-base)}:host([variant="kintsugi"]) .burger:hover{color:#faf7f4cc}:host([variant="kintsugi"]) .burger:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgb(217,114,52,.18) 0%,transparent 70%);opacity:0;transition:opacity var(--duration-slow)}:host([variant="kintsugi"][open]) .burger:before{opacity:1}:host([variant="kintsugi"][open]) .burger{color:var(--color-kaki-400)}:host([variant="kintsugi"]) .burger-lines{width:24px;height:16px}:host([variant="kintsugi"]) .burger-line{height:1px;transition:transform var(--duration-slow) var(--ease-bounce),opacity var(--duration-base) var(--ease-out),width var(--duration-slow) var(--ease-bounce),background var(--duration-base)}:host([variant="kintsugi"]) .burger-line:nth-child(1){width:24px;margin-bottom:7px}:host([variant="kintsugi"]) .burger-line:nth-child(2){width:16px;margin-bottom:7px}:host([variant="kintsugi"]) .burger-line:nth-child(3){width:24px}:host([variant="kintsugi"][open]) .burger-line:nth-child(1){transform:translateY(7.5px) rotate(45deg);width:22px}:host([variant="kintsugi"][open]) .burger-line:nth-child(2){opacity:0;width:0}:host([variant="kintsugi"][open]) .burger-line:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);width:22px}:host([variant="glitch"]) .burger{width:52px;height:52px;color:var(--text-primary);position:relative;transition:color var(--duration-base)}:host([variant="glitch"]) .burger:hover{color:var(--color-kaki-500)}.burger-ghost{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;align-items:center;justify-content:center;z-index:0}.burger-ghost svg{position:absolute;opacity:0}:host([variant="glitch"]) .burger:hover .ghost-a{opacity:1;animation:burger-glitch-a .32s steps(1) infinite}:host([variant="glitch"]) .burger:hover .ghost-b{opacity:1;animation:burger-glitch-b .32s steps(1) infinite;animation-delay:50ms}@keyframes burger-glitch-a{0%{clip-path:inset(0 0 70% 0);transform:translate(-3px)}25%{clip-path:inset(40% 0 40% 0);transform:translate(2px)}50%{clip-path:inset(70% 0 0 0);transform:translate(-2px)}75%{clip-path:inset(20% 0 60% 0);transform:translate(3px)}to{clip-path:inset(55% 0 20% 0);transform:translate(-3px)}}@keyframes burger-glitch-b{0%{clip-path:inset(60% 0 0 0);transform:translate(3px)}25%{clip-path:inset(0 0 60% 0);transform:translate(-2px)}50%{clip-path:inset(30% 0 50% 0);transform:translate(3px)}75%{clip-path:inset(70% 0 10% 0);transform:translate(-3px)}to{clip-path:inset(10% 0 70% 0);transform:translate(2px)}}:host([variant="glitch"]) .burger-lines{width:28px;height:18px;position:relative;z-index:1}:host([variant="glitch"]) .burger-line{width:28px;height:1.5px;position:relative;transition:transform var(--duration-slow) var(--ease-bounce),opacity var(--duration-base) var(--ease-out)}:host([variant="glitch"]) .burger-line:nth-child(1){margin-bottom:7px}:host([variant="glitch"]) .burger-line:nth-child(2){margin-bottom:7px}:host([variant="glitch"][open]) .burger-line:nth-child(1){transform:translateY(8.5px) rotate(45deg)}:host([variant="glitch"][open]) .burger-line:nth-child(2){opacity:0}:host([variant="glitch"][open]) .burger-line:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}:host([variant="glitch"]) .burger.is-scrambling .burger-line{animation:burger-scramble 80ms steps(1) 4}@keyframes burger-scramble{0%{transform:translate(-2px,1px);opacity:.7}25%{transform:translate(3px,-1px);opacity:.5}50%{transform:translate(-1px,2px);opacity:.8}75%{transform:translate(2px,-2px);opacity:.6}to{transform:translate(0);opacity:1}}}';
 export {
-  colorScaleTemplate
+  burgerCss as default
 };
 //# sourceMappingURL=index280.js.map

package/dist/index280.js.map

@@ -1 +1 @@
-{"version":3,"file":"index280.js","sources":["../src/components/atoms/color-scale/lib-color-scale.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibColorScale } from './lib-color-scale.component';\nimport type { ColorStep } from './lib-color-scale.types';\n\n/**\n * Determina si el label del paso debe mostrarse en color claro u oscuro\n * según el luminance aproximado del paso (por encima de 500 → oscuro, por debajo → claro).\n */\nfunction labelColor(step: number): string {\n  return step <= 400\n    ? 'rgba(26,20,14,0.45)'   /* sobre claro */\n    : 'rgba(250,247,244,0.55)'; /* sobre oscuro */\n}\n\nexport function colorScaleTemplate(ctx: LibColorScale): TemplateResult {\n  const steps = ctx.steps ?? [];\n  const first = steps[0];\n  const last  = steps[steps.length - 1];\n\n  return html`\n    <div class=\"scale-wrap\">\n\n      <!-- Swatches -->\n      <div class=\"scale-track\">\n        ${steps.map((s: ColorStep) => html`\n          <div\n            class=\"scale-swatch\"\n            style=\"background:${s.oklch ?? s.hex};\"\n            title=\"${ctx.name}-${s.step} · ${s.hex}\"\n          >\n            <span class=\"scale-swatch-label\" style=\"color:${labelColor(s.step)};\">\n              ${s.step}\n            </span>\n          </div>\n        `)}\n      </div>\n\n      <!-- Extreme labels -->\n      ${ctx.showLabels && first && last ? html`\n        <div class=\"scale-legends\">\n          <span class=\"scale-legend\">\n            ${ctx.name}-${first.step} · ${first.hex}\n          </span>\n          <span class=\"scale-legend scale-legend--right\">\n            ${ctx.name}-${last.step} · ${last.hex}\n          </span>\n        </div>\n      ` : nothing}\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAQA,SAAS,WAAW,MAAsB;AACxC,SAAO,QAAQ,MACX,wBACA;AACN;AAEO,SAAS,mBAAmB,KAAoC;AACrE,QAAM,QAAQ,IAAI,SAAS,CAAA;AAC3B,QAAM,QAAQ,MAAM,CAAC;AACrB,QAAM,OAAQ,MAAM,MAAM,SAAS,CAAC;AAEpC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,UAKC,MAAM,IAAI,CAAC,MAAiB;AAAA;AAAA;AAAA,gCAGN,EAAE,SAAS,EAAE,GAAG;AAAA,qBAC3B,IAAI,IAAI,IAAI,EAAE,IAAI,MAAM,EAAE,GAAG;AAAA;AAAA,4DAEU,WAAW,EAAE,IAAI,CAAC;AAAA,gBAC9D,EAAE,IAAI;AAAA;AAAA;AAAA,SAGb,CAAC;AAAA;AAAA;AAAA;AAAA,QAIF,IAAI,cAAc,SAAS,OAAO;AAAA;AAAA;AAAA,cAG5B,IAAI,IAAI,IAAI,MAAM,IAAI,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,cAGrC,IAAI,IAAI,IAAI,KAAK,IAAI,MAAM,KAAK,GAAG;AAAA;AAAA;AAAA,UAGvC,OAAO;AAAA;AAAA;AAAA;AAIjB;"}
+{"version":3,"file":"index280.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index281.js

@@ -1,103 +1,5 @@
-import { html, nothing } from "lit";
-import { classMap as e } from "./index352.js";
-function renderSep(separator) {
-  if (separator === "chevron") {
-    return html`
-      <span class="bc-sep" aria-hidden="true">
-        <lib-icon name="caret-right" size="xs"></lib-icon>
-      </span>
-    `;
-  }
-  return html`<span class="bc-sep" aria-hidden="true"></span>`;
-}
-function renderIcon(icon) {
-  if (!icon) return nothing;
-  return html`<span class="bc-icon"><lib-icon name="${icon}" size="xs"></lib-icon></span>`;
-}
-function renderLink(item, index, separator, onNavigate) {
-  return html`
-    <li class="bc-item">
-      <a
-        class="bc-link"
-        href="${item.href ?? "#"}"
-        @click="${(e2) => {
-    e2.preventDefault();
-    onNavigate(item, index);
-  }}"
-      >
-        ${renderIcon(item.icon)}
-        ${item.label ? html`${item.label}` : nothing}
-      </a>
-      ${renderSep(separator)}
-    </li>
-  `;
-}
-function renderCurrent(item) {
-  return html`
-    <li class="bc-item">
-      <span class="bc-current" aria-current="page">
-        ${renderIcon(item.icon)}
-        ${item.label ? html`${item.label}` : nothing}
-      </span>
-    </li>
-  `;
-}
-function renderEllipsis(separator, onExpand) {
-  return html`
-    <li class="bc-item">
-      <button
-        class="bc-ellipsis"
-        aria-label="Mostrar ruta completa"
-        @click="${onExpand}"
-      >…</button>
-      ${renderSep(separator)}
-    </li>
-  `;
-}
-function renderItems(p) {
-  const { items, separator, maxVisible, expanded, onExpand, onNavigate } = p;
-  const shouldCollapse = maxVisible > 0 && items.length > maxVisible && !expanded;
-  if (shouldCollapse) {
-    const first = items[0];
-    const last = items[items.length - 1];
-    if (!first || !last) return [];
-    return [
-      renderLink(first, 0, separator, onNavigate),
-      renderEllipsis(separator, onExpand),
-      last.href ? renderLink(last, items.length - 1, separator, onNavigate) : renderCurrent(last)
-    ];
-  }
-  return items.map((item, i) => {
-    const isLast = i === items.length - 1;
-    if (isLast || !item.href) return renderCurrent(item);
-    return renderLink(item, i, separator, onNavigate);
-  });
-}
-function breadcrumbTemplate(p) {
-  const bcClasses = {
-    "bc": true,
-    "bc-slash": p.separator === "slash",
-    "bc-chevron": p.separator === "chevron",
-    "bc-dot": p.separator === "dot",
-    "bc-line": p.separator === "line",
-    "bc-sm": p.size === "sm",
-    "bc-lg": p.size === "lg",
-    "bc-filled": p.surface === "filled",
-    "bc-pill": p.surface === "pill",
-    "bc-kaki": p.accent === "kaki",
-    "bc-celadon": p.accent === "celadon",
-    "bc-bold": p.accent === "bold",
-    "bc-dark": p.dark
-  };
-  return html`
-    <nav class="${e(bcClasses)}" aria-label="breadcrumb">
-      <ol class="bc-list">
-        ${renderItems(p)}
-      </ol>
-    </nav>
-  `;
-}
+const buttonCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}}@layer components{.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);font-family:var(--lib-font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;white-space:nowrap;line-height:1;padding:var(--lib-space-sm) var(--lib-space-md);width:100%;border:var(--lib-border-width) solid transparent;border-radius:var(--radius-none);background:transparent;cursor:pointer;outline:none;text-decoration:none;position:relative;overflow:hidden;transition:background var(--duration-base) var(--ease-default),color var(--duration-base) var(--ease-default),border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-base) var(--ease-default),transform var(--duration-fast) var(--ease-default)}.btn ::slotted(*){position:relative;z-index:1}.btn:active:not(:disabled){transform:translateY(1px)}:host([size="sm"]) .btn{padding:var(--lib-space-xs) var(--lib-space-sm);font-size:10px}:host([size="lg"]) .btn{padding:var(--lib-space-md) var(--lib-space-lg);font-size:var(--text-sm);letter-spacing:var(--tracking-widest)}:host([disabled]) .btn{opacity:.38;cursor:not-allowed;pointer-events:none}:host([variant="primary"]) .btn{background:var(--color-washi-900);color:var(--color-washi-50)}:host([variant="primary"]) .btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--color-kaki-400);transform:scaleX(0);transform-origin:left;transition:transform var(--duration-slow) var(--ease-out);z-index:0}:host([variant="primary"]) .btn:hover{box-shadow:var(--shadow-md)}:host([variant="primary"]) .btn:hover:after{transform:scaleX(1)}:host([variant="secondary"]) .btn{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}:host([variant="secondary"]) .btn:hover{background:var(--color-washi-900);color:var(--color-washi-50);border-color:var(--color-washi-900)}:host([variant="ghost"]) .btn{background:transparent;color:var(--text-secondary)}:host([variant="ghost"]) .btn:hover{color:var(--text-primary);background:var(--color-ink-10)}:host([variant="accent"]) .btn{background:var(--color-kaki-400);color:var(--color-white)}:host([variant="accent"]) .btn:hover{background:var(--color-kaki-500);box-shadow:var(--shadow-md)}:host([variant="danger"]) .btn{background:transparent;color:var(--color-error);border-color:var(--color-error)}:host([variant="danger"]) .btn:hover{background:var(--color-error);color:var(--color-white)}:host([glass]) .btn{border-radius:var(--radius-md);-webkit-backdrop-filter:var(--lib-glass-filter);backdrop-filter:var(--lib-glass-filter);background:var(--lib-glass-bg);border:var(--lib-glass-border);box-shadow:var(--lib-glass-shadow);color:var(--lib-glass-text);text-shadow:var(--lib-glass-text-shadow)}:host([glass]) .btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:var(--lib-glass-shine);pointer-events:none;z-index:0}:host([glass]) .btn:hover{box-shadow:var(--lib-glass-shadow-hover);transform:translateY(-1px)}:host([glass][variant="primary"]) .btn{background:var(--lib-glass-bg-water);border-color:#ffffff40}:host([glass][variant="accent"]) .btn{background:var(--lib-glass-bg-kaki);border-color:#6d4d3e59}:host([glass][variant="primary"]) .btn:after{display:none}:host([variant="kintsugi"]) .btn{background:var(--color-washi-950);color:var(--color-washi-50);border-color:transparent}:host([variant="kintsugi"]) .btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;padding:1px;background:var(--lib-kintsugi-border);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:0}@media(hover:hover){:host([variant="kintsugi"]) .btn:hover{background:var(--color-washi-900)}}:host([variant="brutal"]) .btn{background:var(--color-washi-50);color:var(--color-ink-100);border:2px solid var(--color-ink-100);box-shadow:var(--lib-shadow-brutal);border-radius:0;transition:transform var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default)}@media(hover:hover){:host([variant="brutal"]) .btn:hover{transform:translate(4px,4px);box-shadow:none}}:host([variant="brutal"]) .btn:active{transform:translate(4px,4px);box-shadow:none}.spotlight-layer{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--lib-spotlight-gradient-white);transition:var(--lib-spotlight-transition);pointer-events:none;z-index:0}:host([variant="brutal"]) .spotlight-layer,:host([variant="secondary"]) .spotlight-layer,:host([variant="ghost"]) .spotlight-layer{background:var(--lib-spotlight-gradient)}}';
 export {
-  breadcrumbTemplate
+  buttonCss as default
 };
 //# sourceMappingURL=index281.js.map

package/dist/index281.js.map

@@ -1 +1 @@
-{"version":3,"file":"index281.js","sources":["../src/components/molecules/breadcrumb/lib-breadcrumb.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { classMap }                       from 'lit/directives/class-map.js';\nimport type {\n  BreadcrumbItem,\n  BreadcrumbSeparator,\n  BreadcrumbSize,\n  BreadcrumbSurface,\n  BreadcrumbAccent,\n} from './lib-breadcrumb.types';\n\nexport interface BreadcrumbTemplateProps {\n  items: BreadcrumbItem[];\n  separator: BreadcrumbSeparator;\n  size: BreadcrumbSize;\n  surface: BreadcrumbSurface;\n  accent: BreadcrumbAccent;\n  dark: boolean;\n  /** Si > 0 y items.length > maxVisible, colapsa los crumbs intermedios. */\n  maxVisible: number;\n  /** Estado interno: ¿está expandido el truncado? */\n  expanded: boolean;\n  onExpand: () => void;\n  onNavigate: (item: BreadcrumbItem, index: number) => void;\n}\n\n/* ── Separador ─────────────────────────────────────────── */\nfunction renderSep(separator: BreadcrumbSeparator): TemplateResult {\n  if (separator === 'chevron') {\n    return html`\n      <span class=\"bc-sep\" aria-hidden=\"true\">\n        <lib-icon name=\"caret-right\" size=\"xs\"></lib-icon>\n      </span>\n    `;\n  }\n  return html`<span class=\"bc-sep\" aria-hidden=\"true\"></span>`;\n}\n\n/* ── Icono opcional dentro de un crumb ─────────────────── */\nfunction renderIcon(icon?: string): TemplateResult | typeof nothing {\n  if (!icon) return nothing;\n  return html`<span class=\"bc-icon\"><lib-icon name=\"${icon}\" size=\"xs\"></lib-icon></span>`;\n}\n\n/* ── Crumb enlazable (ancestro) ─────────────────────────── */\nfunction renderLink(\n  item: BreadcrumbItem,\n  index: number,\n  separator: BreadcrumbSeparator,\n  onNavigate: BreadcrumbTemplateProps['onNavigate'],\n): TemplateResult {\n  return html`\n    <li class=\"bc-item\">\n      <a\n        class=\"bc-link\"\n        href=\"${item.href ?? '#'}\"\n        @click=\"${(e: Event):void => { e.preventDefault(); onNavigate(item, index); }}\"\n      >\n        ${renderIcon(item.icon)}\n        ${item.label ? html`${item.label}` : nothing}\n      </a>\n      ${renderSep(separator)}\n    </li>\n  `;\n}\n\n/* ── Crumb activo (último) ──────────────────────────────── */\nfunction renderCurrent(item: BreadcrumbItem): TemplateResult {\n  return html`\n    <li class=\"bc-item\">\n      <span class=\"bc-current\" aria-current=\"page\">\n        ${renderIcon(item.icon)}\n        ${item.label ? html`${item.label}` : nothing}\n      </span>\n    </li>\n  `;\n}\n\n/* ── Botón de ellipsis (truncado) ──────────────────────── */\nfunction renderEllipsis(\n  separator: BreadcrumbSeparator,\n  onExpand: () => void,\n): TemplateResult {\n  return html`\n    <li class=\"bc-item\">\n      <button\n        class=\"bc-ellipsis\"\n        aria-label=\"Mostrar ruta completa\"\n        @click=\"${onExpand}\"\n      >…</button>\n      ${renderSep(separator)}\n    </li>\n  `;\n}\n\n/* ── Lista de ítems con lógica de collapse ─────────────── */\nfunction renderItems(p: BreadcrumbTemplateProps): TemplateResult[] {\n  const { items, separator, maxVisible, expanded, onExpand, onNavigate } = p;\n\n  const shouldCollapse =\n    maxVisible > 0 &&\n    items.length > maxVisible &&\n    !expanded;\n\n  if (shouldCollapse) {\n    const first = items[0];\n    const last  = items[items.length - 1];\n\n    if (!first || !last) return [];\n\n    return [\n      renderLink(first, 0, separator, onNavigate),\n      renderEllipsis(separator, onExpand),\n      last.href\n        ? renderLink(last, items.length - 1, separator, onNavigate)\n        : renderCurrent(last),\n    ];\n  }\n\n  return items.map((item, i) => {\n    const isLast = i === items.length - 1;\n    if (isLast || !item.href) return renderCurrent(item);\n    return renderLink(item, i, separator, onNavigate);\n  });\n}\n\n/* ── Template principal ─────────────────────────────────── */\nexport function breadcrumbTemplate(p: BreadcrumbTemplateProps): TemplateResult {\n  const bcClasses = {\n    'bc':            true,\n    'bc-slash':      p.separator === 'slash',\n    'bc-chevron':    p.separator === 'chevron',\n    'bc-dot':        p.separator === 'dot',\n    'bc-line':       p.separator === 'line',\n    'bc-sm':         p.size === 'sm',\n    'bc-lg':         p.size === 'lg',\n    'bc-filled':     p.surface === 'filled',\n    'bc-pill':       p.surface === 'pill',\n    'bc-kaki':       p.accent === 'kaki',\n    'bc-celadon':    p.accent === 'celadon',\n    'bc-bold':       p.accent === 'bold',\n    'bc-dark':       p.dark,\n  };\n\n  return html`\n    <nav class=\"${classMap(bcClasses)}\" aria-label=\"breadcrumb\">\n      <ol class=\"bc-list\">\n        ${renderItems(p)}\n      </ol>\n    </nav>\n  `;\n}"],"names":["e","classMap"],"mappings":";;AA0BA,SAAS,UAAU,WAAgD;AACjE,MAAI,cAAc,WAAW;AAC3B,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACA,SAAO;AACT;AAGA,SAAS,WAAW,MAAgD;AAClE,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO,6CAA6C,IAAI;AAC1D;AAGA,SAAS,WACP,MACA,OACA,WACA,YACgB;AAChB,SAAO;AAAA;AAAA;AAAA;AAAA,gBAIO,KAAK,QAAQ,GAAG;AAAA,kBACd,CAACA,OAAkB;AAAE,IAAAA,GAAE,eAAA;AAAkB,eAAW,MAAM,KAAK;AAAA,EAAG,CAAC;AAAA;AAAA,UAE3E,WAAW,KAAK,IAAI,CAAC;AAAA,UACrB,KAAK,QAAQ,OAAO,KAAK,KAAK,KAAK,OAAO;AAAA;AAAA,QAE5C,UAAU,SAAS,CAAC;AAAA;AAAA;AAG5B;AAGA,SAAS,cAAc,MAAsC;AAC3D,SAAO;AAAA;AAAA;AAAA,UAGC,WAAW,KAAK,IAAI,CAAC;AAAA,UACrB,KAAK,QAAQ,OAAO,KAAK,KAAK,KAAK,OAAO;AAAA;AAAA;AAAA;AAIpD;AAGA,SAAS,eACP,WACA,UACgB;AAChB,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKS,QAAQ;AAAA;AAAA,QAElB,UAAU,SAAS,CAAC;AAAA;AAAA;AAG5B;AAGA,SAAS,YAAY,GAA8C;AACjE,QAAM,EAAE,OAAO,WAAW,YAAY,UAAU,UAAU,eAAe;AAEzE,QAAM,iBACJ,aAAa,KACb,MAAM,SAAS,cACf,CAAC;AAEH,MAAI,gBAAgB;AAClB,UAAM,QAAQ,MAAM,CAAC;AACrB,UAAM,OAAQ,MAAM,MAAM,SAAS,CAAC;AAEpC,QAAI,CAAC,SAAS,CAAC,aAAa,CAAA;AAE5B,WAAO;AAAA,MACL,WAAW,OAAO,GAAG,WAAW,UAAU;AAAA,MAC1C,eAAe,WAAW,QAAQ;AAAA,MAClC,KAAK,OACD,WAAW,MAAM,MAAM,SAAS,GAAG,WAAW,UAAU,IACxD,cAAc,IAAI;AAAA,IAAA;AAAA,EAE1B;AAEA,SAAO,MAAM,IAAI,CAAC,MAAM,MAAM;AAC5B,UAAM,SAAS,MAAM,MAAM,SAAS;AACpC,QAAI,UAAU,CAAC,KAAK,KAAM,QAAO,cAAc,IAAI;AACnD,WAAO,WAAW,MAAM,GAAG,WAAW,UAAU;AAAA,EAClD,CAAC;AACH;AAGO,SAAS,mBAAmB,GAA4C;AAC7E,QAAM,YAAY;AAAA,IAChB,MAAiB;AAAA,IACjB,YAAiB,EAAE,cAAc;AAAA,IACjC,cAAiB,EAAE,cAAc;AAAA,IACjC,UAAiB,EAAE,cAAc;AAAA,IACjC,WAAiB,EAAE,cAAc;AAAA,IACjC,SAAiB,EAAE,SAAS;AAAA,IAC5B,SAAiB,EAAE,SAAS;AAAA,IAC5B,aAAiB,EAAE,YAAY;AAAA,IAC/B,WAAiB,EAAE,YAAY;AAAA,IAC/B,WAAiB,EAAE,WAAW;AAAA,IAC9B,cAAiB,EAAE,WAAW;AAAA,IAC9B,WAAiB,EAAE,WAAW;AAAA,IAC9B,WAAiB,EAAE;AAAA,EAAA;AAGrB,SAAO;AAAA,kBACSC,EAAS,SAAS,CAAC;AAAA;AAAA,UAE3B,YAAY,CAAC,CAAC;AAAA;AAAA;AAAA;AAIxB;"}
+{"version":3,"file":"index281.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index282.js

@@ -1,5 +1,23 @@
-const componentCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.bc{display:flex;align-items:center}.bc-list{display:flex;align-items:center;flex-wrap:wrap;list-style:none;gap:0;padding:0;margin:0}.bc-item{display:flex;align-items:center;gap:0;position:relative}.bc-link{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);text-decoration:none;padding:var(--lib-space-xs) var(--lib-space-xs);transition:color var(--duration-fast);white-space:nowrap;display:flex;align-items:center;gap:var(--lib-space-xs)}.bc-link:hover{color:var(--text-primary)}.bc-current{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-secondary);white-space:nowrap;padding:var(--lib-space-xs) var(--lib-space-xs);display:flex;align-items:center;gap:var(--lib-space-xs)}.bc-sep{display:flex;align-items:center;padding:0 var(--lib-space-sm);color:var(--color-washi-300);-webkit-user-select:none;user-select:none;flex-shrink:0}.bc-slash .bc-sep:before{content:"/";font-family:var(--lib-font-mono);font-size:10px;line-height:1}.bc-dot .bc-sep:before{content:"·";font-family:var(--lib-font-mono);font-size:13px;line-height:1}.bc-line .bc-sep:before{content:"—";font-family:var(--lib-font-mono);font-size:10px;line-height:1}.bc-chevron .bc-sep{padding:0 var(--lib-space-xs);font-size:12px}.bc-chevron .bc-sep:before{content:none}.bc-icon{font-size:13px;display:flex;align-items:center;opacity:.7}.bc-sm .bc-link,.bc-sm .bc-current{font-size:10px;letter-spacing:var(--tracking-wide)}.bc-sm .bc-sep{padding:0 var(--lib-space-xs)}.bc-sm .bc-icon{font-size:11px}.bc-lg .bc-link,.bc-lg .bc-current{font-family:var(--lib-font-body);font-size:var(--text-sm);letter-spacing:0}.bc-lg .bc-icon{font-size:15px}.bc-filled{background:var(--bg-surface);border:1px solid var(--border-subtle);padding:var(--lib-space-sm) var(--lib-space-md)}.bc-pill .bc-link{background:var(--bg-surface);border:1px solid var(--border-subtle);padding:var(--lib-space-xs) var(--lib-space-sm);transition:background var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast)}.bc-pill .bc-link:hover{background:var(--color-washi-200);border-color:var(--border-default);color:var(--text-primary)}.bc-pill .bc-current{background:var(--color-washi-900);color:var(--color-washi-50);border:1px solid var(--color-washi-900);padding:var(--lib-space-xs) var(--lib-space-sm)}.bc-pill .bc-sep{padding:0 var(--lib-space-sm)}.bc-kaki .bc-current,.bc-kaki .bc-link:hover{color:var(--color-kaki-500)}.bc-celadon .bc-current,.bc-celadon .bc-link:hover{color:var(--color-celadon-500)}.bc-bold .bc-current{color:var(--text-primary);font-weight:600}.bc-ellipsis{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border-subtle);padding:1px var(--lib-space-sm);cursor:pointer;transition:background var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast);line-height:1.6;display:inline-flex;align-items:center}.bc-ellipsis:hover{background:var(--color-washi-200);border-color:var(--border-default);color:var(--text-primary)}.bc-dropdown-wrap{position:relative}.bc-dropdown-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:var(--z-dropdown, 300);background:var(--bg-elevated);border:1px solid var(--border-default);box-shadow:var(--shadow-md);min-width:180px;opacity:0;transform:translateY(-4px) scaleY(.97);transform-origin:top left;pointer-events:none;transition:opacity .16s var(--ease-out),transform .18s var(--ease-out)}.bc-dropdown-panel.is-open{opacity:1;transform:translateY(0) scaleY(1);pointer-events:auto}.bc-dropdown-item{display:flex;align-items:center;gap:var(--lib-space-sm);padding:var(--lib-space-sm) var(--lib-space-md);font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-secondary);text-decoration:none;cursor:pointer;transition:background var(--duration-fast),color var(--duration-fast)}.bc-dropdown-item:hover{background:var(--bg-surface);color:var(--text-primary)}.bc-dropdown-item-icon{font-size:14px;color:var(--text-muted);display:flex;flex-shrink:0}.bc-dark .bc-link{color:#3c302a}.bc-dark .bc-link:hover{color:#998c84}.bc-dark .bc-current{color:#7b6f67}.bc-dark .bc-sep{color:#231813}.bc-dark.bc-filled{background:#100704;border-color:#1e130e}.bc-dark .bc-ellipsis{background:#100704;border-color:#1e130e;color:#433831}.bc-dark .bc-ellipsis:hover{background:#190f0a;color:#998c84}.bc-dark.bc-pill .bc-link{background:#100704;border-color:#1e130e}.bc-dark.bc-pill .bc-link:hover{background:#1e130e}.bc-dark.bc-pill .bc-current{background:#8a7d75;color:var(--color-washi-950);border-color:#8a7d75}.bc-dark .bc-dropdown-panel{background:#150a06;border-color:#231813}.bc-dark .bc-dropdown-item{color:#574a43}.bc-dark .bc-dropdown-item:hover{background:#1e130e;color:#998c84}}';
+import { nothing, html } from "lit";
+function buttonTemplate(props) {
+  return html`
+    <button
+      id="${props.buttonId}"
+      type="${props.type}"
+      ?disabled="${props.disabled}"
+      aria-label="${props.ariaLabel ?? nothing}"
+      style="${props.customPadding ? `padding: ${props.customPadding}` : nothing}"
+      @click="${props.handleClick}"
+      class="btn"
+    >
+      ${props.spotlight ? html`<span class="spotlight-layer" aria-hidden="true"></span>` : nothing}
+      <slot name="prefix"></slot>
+      <slot></slot>
+      <slot name="suffix"></slot>
+    </button>
+  `;
+}
 export {
-  componentCss as default
+  buttonTemplate
 };
 //# sourceMappingURL=index282.js.map

package/dist/index282.js.map

@@ -1 +1 @@
-{"version":3,"file":"index282.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index282.js","sources":["../src/components/atoms/button/lib-button.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibSize } from '../../../types';\nimport type { LibButtonVariant } from './lib-button.types';\n\nexport interface ButtonTemplateProps {\n  buttonId: string;\n  type: 'button' | 'submit' | 'reset';\n  disabled: boolean;\n  ariaLabel?: string | undefined;\n  handleClick: (event: Event) => void;\n  variant: LibButtonVariant;\n  size: LibSize;\n  glass: boolean;\n  spotlight: boolean;\n  customPadding?: string | undefined;\n}\n    \n/**\n * Plantilla base para el componente lib-button.\n * Renderiza un único <button> estilizado vía :host() selectors.\n */\nexport function buttonTemplate(props: ButtonTemplateProps): TemplateResult {\n  return html`\n    <button\n      id=\"${props.buttonId}\"\n      type=\"${props.type}\"\n      ?disabled=\"${props.disabled}\"\n      aria-label=\"${props.ariaLabel ?? nothing}\"\n      style=\"${props.customPadding ? `padding: ${props.customPadding}` : nothing}\"\n      @click=\"${props.handleClick}\"\n      class=\"btn\"\n    >\n      ${props.spotlight ? html`<span class=\"spotlight-layer\" aria-hidden=\"true\"></span>` : nothing}\n      <slot name=\"prefix\"></slot>\n      <slot></slot>\n      <slot name=\"suffix\"></slot>\n    </button>\n  `;\n}"],"names":[],"mappings":";AAqBO,SAAS,eAAe,OAA4C;AACzE,SAAO;AAAA;AAAA,YAEG,MAAM,QAAQ;AAAA,cACZ,MAAM,IAAI;AAAA,mBACL,MAAM,QAAQ;AAAA,oBACb,MAAM,aAAa,OAAO;AAAA,eAC/B,MAAM,gBAAgB,YAAY,MAAM,aAAa,KAAK,OAAO;AAAA,gBAChE,MAAM,WAAW;AAAA;AAAA;AAAA,QAGzB,MAAM,YAAY,iEAAiE,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAMlG;"}