@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index18.js.map

@@ -1 +1 @@
-{"version":3,"file":"index18.js","sources":["../src/components/atoms/switch/lib-switch.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { generateUniqueId } from '../../../core/a11y';\nimport type { LibSwitchVariant, LibSwitchSize } from './lib-switch.html';\nimport { switchTemplate } from './lib-switch.html';\nimport switchCss from './lib-switch.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport type { LibSwitchVariant, LibSwitchSize };\n\n/**\n * @element lib-switch\n *\n * Toggle switch con variante kintsugi de acabado premium.\n *\n * @fires ui-lib-change — Emitido al cambiar estado con `{ checked: boolean }`\n *\n * @example — default\n * <lib-switch label=\"Notificaciones\"></lib-switch>\n *\n * @example — con subtítulo\n * <lib-switch label=\"Acceso premium\" sub=\"Funciones exclusivas\" checked></lib-switch>\n *\n * @example — kintsugi (superficie oscura)\n * <lib-switch variant=\"kintsugi\" label=\"Modo ceremonial\" sub=\"Activa el tema kintsugi\"></lib-switch>\n *\n * @example — tamaños\n * <lib-switch size=\"sm\"></lib-switch>\n * <lib-switch size=\"lg\" label=\"Sincronización\"></lib-switch>\n */\n@customElement('lib-switch')\nexport class LibSwitch extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(switchCss)}`,\n  ];\n\n  private _switchId: string;\n\n  constructor() {\n    super();\n    this._switchId = generateUniqueId('lib-switch-');\n  }\n\n  /** Estado activo del switch. */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /** Deshabilita la interacción. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Variante visual.\n   * - default   : track washi, thumb blanco\n   * - kintsugi  : cerámica oscura, venas doradas, thumb de oro al activar\n   */\n  @property({ type: String, reflect: true })\n  variant: LibSwitchVariant = 'default';\n\n  /**\n   * Tamaño del switch.\n   * - sm : 30×18px · md : 40×24px (default) · lg : 52×30px\n   */\n  @property({ type: String, reflect: true })\n  size: LibSwitchSize = 'md';\n\n  /** Texto principal de la etiqueta. */\n  @property({ type: String })\n  label = '';\n\n  /** Texto secundario debajo del label. */\n  @property({ type: String })\n  sub = '';\n\n  override render(): TemplateResult {\n    return switchTemplate({\n      switchId:     this._switchId,\n      checked:      this.checked,\n      disabled:     this.disabled,\n      label:        this.label,\n      sub:          this.sub,\n      handleChange: this._handleChange.bind(this),\n    });\n  }\n\n  private _handleChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n\n    this.dispatchEvent(\n      new CustomEvent<{ checked: boolean }>('ui-lib-change', {\n        detail:   { checked: this.checked },\n        bubbles:  true,\n        composed: true,\n      })\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-switch': LibSwitch;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA+BO,IAAM,YAAN,cAAwB,WAAW;AAAA,EAQxC,cAAc;AACZ,UAAA;AAMF,SAAA,UAAU;AAIV,SAAA,WAAW;AAQX,SAAA,UAA4B;AAO5B,SAAA,OAAsB;AAItB,SAAA,QAAQ;AAIR,SAAA,MAAM;AAhCJ,SAAK,YAAY,iBAAiB,aAAa;AAAA,EACjD;AAAA,EAiCS,SAAyB;AAChC,WAAO,eAAe;AAAA,MACpB,UAAc,KAAK;AAAA,MACnB,SAAc,KAAK;AAAA,MACnB,UAAc,KAAK;AAAA,MACnB,OAAc,KAAK;AAAA,MACnB,KAAc,KAAK;AAAA,MACnB,cAAc,KAAK,cAAc,KAAK,IAAI;AAAA,IAAA,CAC3C;AAAA,EACH;AAAA,EAEQ,cAAc,GAAgB;AACpC,UAAM,QAAQ,EAAE;AAChB,SAAK,UAAU,MAAM;AAErB,SAAK;AAAA,MACH,IAAI,YAAkC,iBAAiB;AAAA,QACrD,QAAU,EAAE,SAAS,KAAK,QAAA;AAAA,QAC1B,SAAU;AAAA,QACV,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AACF;AAnEa,UACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,SAAS,CAAC;AAC5B;AAWA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAd/B,UAeX,WAAA,WAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAlB/B,UAmBX,WAAA,YAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA1B9B,UA2BX,WAAA,WAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAjC9B,UAkCX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArCf,UAsCX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzCf,UA0CX,WAAA,OAAA,CAAA;AA1CW,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}
+{"version":3,"file":"index18.js","sources":["../src/components/atoms/code-block/lib-code-block.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { LibCodeBlockLanguage } from './lib-code-block.html';\nimport { codeBlockTemplate } from './lib-code-block.html';\nimport codeBlockCss from './lib-code-block.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport type LibCodeBlockVariant = 'default' | 'ghost';\n\n/**\n * @element lib-code-block\n *\n * Bloque de código con sintaxis destacada, etiqueta de lenguaje y botón de copia.\n *\n * @slot - Código a mostrar. Si se usa este slot, tiene prioridad sobre el atributo `code`.\n *\n * @example\n * <lib-code-block language=\"bash\" code=\"npm install @shibui-ui/ui lit\"></lib-code-block>\n *\n * @example\n * <lib-code-block language=\"ts\" filename=\"main.ts\">\n *   import '@shibui-ui/ui';\n * </lib-code-block>\n */\n@customElement('lib-code-block')\nexport class LibCodeBlock extends LitElement {\n  static override styles = [\n    css`\n      ${unsafeCSS(sharedTokens)}\n    `,\n    css`\n      ${unsafeCSS(codeBlockCss)}\n    `,\n  ];\n\n  /** Código a mostrar como texto plano */\n  @property({ type: String })\n  code = '';\n\n  /** Etiqueta de lenguaje mostrada en el header (decorativa) */\n  @property({ type: String, reflect: true })\n  language: LibCodeBlockLanguage = 'bash';\n\n  /** Nombre de fichero opcional mostrado en el header */\n  @property({ type: String })\n  filename = '';\n\n  /** Muestra u oculta el botón de copiar */\n  @property({ type: Boolean, reflect: true })\n  copyable = true;\n\n  /** Variante visual: default (oscuro) | ghost (claro) */\n  @property({ type: String, reflect: true })\n  variant: LibCodeBlockVariant = 'default';\n\n  /** Estado interno: feedback tras copiar */\n  @state()\n  private _copied = false;\n\n  private _copyTimeout: ReturnType<typeof setTimeout> | null = null;\n\n  private _handleCopy(): void {\n    const content = this.code || this._getSlotText();\n    if (!content) return;\n\n    navigator.clipboard.writeText(content).then(() => {\n      this._copied = true;\n      if (this._copyTimeout) clearTimeout(this._copyTimeout);\n      this._copyTimeout = setTimeout(() => {\n        this._copied = false;\n      }, 2000);\n    }).catch(() => {\n      // Fallback para entornos sin clipboard API\n      const ta = document.createElement('textarea');\n      ta.value = content;\n      ta.style.position = 'fixed';\n      ta.style.opacity = '0';\n      document.body.appendChild(ta);\n      ta.select();\n      document.execCommand('copy');\n      document.body.removeChild(ta);\n      this._copied = true;\n      if (this._copyTimeout) clearTimeout(this._copyTimeout);\n      this._copyTimeout = setTimeout(() => {\n        this._copied = false;\n      }, 2000);\n    });\n  }\n\n  private _getSlotText(): string {\n    const slot = this.shadowRoot?.querySelector('slot');\n    if (!slot) return '';\n    return slot.assignedNodes({ flatten: true })\n      .map(node => node.textContent ?? '')\n      .join('');\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._copyTimeout) clearTimeout(this._copyTimeout);\n  }\n\n  override render(): TemplateResult {\n    return codeBlockTemplate({\n      code: this.code,\n      language: this.language,\n      filename: this.filename,\n      copyable: this.copyable,\n      copied: this._copied,\n      onCopy: () => this._handleCopy(),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-code-block': LibCodeBlock;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAyBO,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AAYL,SAAA,OAAO;AAIP,SAAA,WAAiC;AAIjC,SAAA,WAAW;AAIX,SAAA,WAAW;AAIX,SAAA,UAA+B;AAI/B,SAAQ,UAAU;AAElB,SAAQ,eAAqD;AAAA,EAAA;AAAA,EAErD,cAAoB;AAC1B,UAAM,UAAU,KAAK,QAAQ,KAAK,aAAA;AAClC,QAAI,CAAC,QAAS;AAEd,cAAU,UAAU,UAAU,OAAO,EAAE,KAAK,MAAM;AAChD,WAAK,UAAU;AACf,UAAI,KAAK,aAAc,cAAa,KAAK,YAAY;AACrD,WAAK,eAAe,WAAW,MAAM;AACnC,aAAK,UAAU;AAAA,MACjB,GAAG,GAAI;AAAA,IACT,CAAC,EAAE,MAAM,MAAM;AAEb,YAAM,KAAK,SAAS,cAAc,UAAU;AAC5C,SAAG,QAAQ;AACX,SAAG,MAAM,WAAW;AACpB,SAAG,MAAM,UAAU;AACnB,eAAS,KAAK,YAAY,EAAE;AAC5B,SAAG,OAAA;AACH,eAAS,YAAY,MAAM;AAC3B,eAAS,KAAK,YAAY,EAAE;AAC5B,WAAK,UAAU;AACf,UAAI,KAAK,aAAc,cAAa,KAAK,YAAY;AACrD,WAAK,eAAe,WAAW,MAAM;AACnC,aAAK,UAAU;AAAA,MACjB,GAAG,GAAI;AAAA,IACT,CAAC;AAAA,EACH;AAAA,EAEQ,eAAuB;;AAC7B,UAAM,QAAO,UAAK,eAAL,mBAAiB,cAAc;AAC5C,QAAI,CAAC,KAAM,QAAO;AAClB,WAAO,KAAK,cAAc,EAAE,SAAS,MAAM,EACxC,IAAI,CAAA,SAAQ,KAAK,eAAe,EAAE,EAClC,KAAK,EAAE;AAAA,EACZ;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA;AACN,QAAI,KAAK,aAAc,cAAa,KAAK,YAAY;AAAA,EACvD;AAAA,EAES,SAAyB;AAChC,WAAO,kBAAkB;AAAA,MACvB,MAAM,KAAK;AAAA,MACX,UAAU,KAAK;AAAA,MACf,UAAU,KAAK;AAAA,MACf,UAAU,KAAK;AAAA,MACf,QAAQ,KAAK;AAAA,MACb,QAAQ,MAAM,KAAK,YAAA;AAAA,IAAY,CAChC;AAAA,EACH;AACF;AAvFa,aACK,SAAS;AAAA,EACvB;AAAA,QACI,UAAU,YAAY,CAAC;AAAA;AAAA,EAE3B;AAAA,QACI,UAAU,YAAY,CAAC;AAAA;AAE7B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAXf,aAYX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAf9B,aAgBX,WAAA,YAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnBf,aAoBX,WAAA,YAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAvB/B,aAwBX,WAAA,YAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA3B9B,aA4BX,WAAA,WAAA,CAAA;AAIQ,gBAAA;AAAA,EADP,MAAA;AAAM,GA/BI,aAgCH,WAAA,WAAA,CAAA;AAhCG,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;"}

package/dist/index19.js

@@ -1,8 +1,8 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { selectOptionTemplate } from "./index226.js";
-import optionCss from "./index227.js";
 import sharedTokens from "./index196.js";
+import colorScaleStyles from "./index296.js";
+import { colorScaleTemplate } from "./index297.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,54 +13,34 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibSelectOption = class extends LitElement {
+let LibColorScale = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.value = "";
-    this.selected = false;
-    this.disabled = false;
+    this.name = "scale";
+    this.steps = [];
+    this.showLabels = true;
   }
   render() {
-    return selectOptionTemplate({
-      value: this.value,
-      selected: this.selected,
-      disabled: this.disabled,
-      handleClick: this._handleClick.bind(this)
-    });
-  }
-  _handleClick(e) {
-    var _a;
-    e.stopPropagation();
-    if (this.disabled) return;
-    this.dispatchEvent(
-      new CustomEvent("option-selected", {
-        detail: {
-          value: this.value,
-          label: ((_a = this.textContent) == null ? void 0 : _a.trim()) ?? ""
-        },
-        bubbles: true,
-        composed: true
-      })
-    );
+    return colorScaleTemplate(this);
   }
 };
-LibSelectOption.styles = [
+LibColorScale.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(optionCss)}`
+  css`${unsafeCSS(colorScaleStyles)}`
 ];
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibSelectOption.prototype, "value", 2);
+  property({ type: String })
+], LibColorScale.prototype, "name", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibSelectOption.prototype, "selected", 2);
+  property({ type: Array })
+], LibColorScale.prototype, "steps", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibSelectOption.prototype, "disabled", 2);
-LibSelectOption = __decorateClass([
-  customElement("lib-select-option")
-], LibSelectOption);
+  property({ type: Boolean, attribute: "show-labels" })
+], LibColorScale.prototype, "showLabels", 2);
+LibColorScale = __decorateClass([
+  customElement("lib-color-scale")
+], LibColorScale);
 export {
-  LibSelectOption
+  LibColorScale
 };
 //# sourceMappingURL=index19.js.map

package/dist/index19.js.map

@@ -1 +1 @@
-{"version":3,"file":"index19.js","sources":["../src/components/atoms/select-option/lib-select-option.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { selectOptionTemplate } from './lib-select-option.html';\nimport optionCss from './lib-select-option.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-select-option\n *\n * Opción individual para usar dentro de lib-select.\n * Emite `option-selected` con { value, label } al hacer clic,\n * que lib-select captura desde el light DOM.\n *\n * @fires option-selected — { value: string, label: string }\n * @slot — Texto visible de la opción\n */\n@customElement('lib-select-option')\nexport class LibSelectOption extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(optionCss)}`,\n  ];\n\n  /** Valor interno que se comunica al select padre. */\n  @property({ type: String, reflect: true }) value = '';\n\n  /** Estado de selección — controlado por lib-select. */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /** Deshabilita la opción. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  override render(): TemplateResult {\n    return selectOptionTemplate({\n      value:       this.value,\n      selected:    this.selected,\n      disabled:    this.disabled,\n      handleClick: this._handleClick.bind(this),\n    });\n  }\n\n  private _handleClick(e: Event): void {\n    e.stopPropagation();\n    if (this.disabled) return;\n\n    this.dispatchEvent(\n      new CustomEvent<{ value: string; label: string }>('option-selected', {\n        detail: {\n          value: this.value,\n          label: this.textContent?.trim() ?? '',\n        },\n        bubbles:  true,\n        composed: true,\n      })\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-select-option': LibSelectOption;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAiBO,IAAM,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOsC,SAAA,QAAQ;AAGP,SAAA,WAAW;AAGX,SAAA,WAAW;AAAA,EAAA;AAAA,EAE9C,SAAyB;AAChC,WAAO,qBAAqB;AAAA,MAC1B,OAAa,KAAK;AAAA,MAClB,UAAa,KAAK;AAAA,MAClB,UAAa,KAAK;AAAA,MAClB,aAAa,KAAK,aAAa,KAAK,IAAI;AAAA,IAAA,CACzC;AAAA,EACH;AAAA,EAEQ,aAAa,GAAgB;;AACnC,MAAE,gBAAA;AACF,QAAI,KAAK,SAAU;AAEnB,SAAK;AAAA,MACH,IAAI,YAA8C,mBAAmB;AAAA,QACnE,QAAQ;AAAA,UACN,OAAO,KAAK;AAAA,UACZ,SAAO,UAAK,gBAAL,mBAAkB,WAAU;AAAA,QAAA;AAAA,QAErC,SAAU;AAAA,QACV,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AACF;AAvCa,gBACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,SAAS,CAAC;AAC5B;AAG2C,gBAAA;AAAA,EAA1C,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAP9B,gBAOgC,WAAA,SAAA,CAAA;AAGC,gBAAA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAV/B,gBAUiC,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAb/B,gBAaiC,WAAA,YAAA,CAAA;AAbjC,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}
+{"version":3,"file":"index19.js","sources":["../src/components/atoms/color-scale/lib-color-scale.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 colorScaleStyles      from './lib-color-scale.css?inline';\nimport { colorScaleTemplate } from './lib-color-scale.html';\nimport type { ColorStep }    from './lib-color-scale.types';\n\n/**\n * lib-color-scale — Shibui UI\n *\n * Escala de color horizontal con 11 pasos (50 → 950).\n * Cada swatch expande en hover y revela el número del paso.\n * Los extremos muestran el nombre y el valor hex.\n *\n * @prop {string}       name        — Nombre de la paleta (ej: \"washi\", \"kaki\").\n * @prop {ColorStep[]}  steps       — Array de pasos de la escala. Orden de izquierda a derecha.\n * @prop {boolean}      show-labels — Muestra las etiquetas de los extremos (activo por defecto).\n *\n * @csspart track   — El contenedor de los swatches.\n * @cssprop --lib-color-scale-height — Altura de la pista (default: 56px).\n */\n@customElement('lib-color-scale')\nexport class LibColorScale extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(colorScaleStyles)}`,\n  ];\n\n  @property({ type: String })\n  name = 'scale';\n\n  @property({ type: Array })\n  steps: ColorStep[] = [];\n\n  @property({ type: Boolean, attribute: 'show-labels' })\n  showLabels = true;\n\n  protected override render(): TemplateResult {\n    return colorScaleTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-color-scale': LibColorScale;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAsBO,IAAM,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,OAAO;AAGP,SAAA,QAAqB,CAAA;AAGrB,SAAA,aAAa;AAAA,EAAA;AAAA,EAEM,SAAyB;AAC1C,WAAO,mBAAmB,IAAI;AAAA,EAChC;AACF;AAlBa,cACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,gBAAgB,CAAC;AACnC;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANf,cAOX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GATd,cAUX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,eAAe;AAAA,GAZ1C,cAaX,WAAA,cAAA,CAAA;AAbW,gBAAN,gBAAA;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB,aAAA;"}

package/dist/index194.js

@@ -1,33 +1,103 @@
-import { nothing, html } from "lit";
-function copyButtonTemplate(props) {
-  const btn = html`
-    <button
-      type="button"
-      class="copy-btn"
-      aria-label="${props.iconOnly ? "Copiar al portapapeles" : nothing}"
-      ?disabled="${props.disabled}"
-      @click="${props.onClick}"
-    >
-      <span class="copy-btn__idle">
-        <lib-icon name="copy" size="${props.size === "lg" ? "sm" : "xs"}"></lib-icon>
-        ${!props.iconOnly && props.label ? html`<span class="copy-btn__text">${props.label}</span>` : nothing}
+import { html, nothing } from "lit";
+import { classMap as e } from "./index357.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>
-
-      <span class="copy-btn__copied">
-        <lib-icon name="check" size="${props.size === "lg" ? "sm" : "xs"}"></lib-icon>
-        ${!props.iconOnly && props.successLabel ? html`<span class="copy-btn__text">${props.successLabel}</span>` : nothing}
+    `;
+  }
+  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>
-    </button>
+    </li>
   `;
-  if (!props.tooltip) return btn;
+}
+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`
-    <span class="copy-btn__wrap">
-      ${btn}
-      <span class="copy-btn__tooltip">Copiado</span>
-    </span>
+    <nav class="${e(bcClasses)}" aria-label="breadcrumb">
+      <ol class="bc-list">
+        ${renderItems(p)}
+      </ol>
+    </nav>
   `;
 }
 export {
-  copyButtonTemplate
+  breadcrumbTemplate
 };
 //# sourceMappingURL=index194.js.map

package/dist/index194.js.map

@@ -1 +1 @@
-{"version":3,"file":"index194.js","sources":["../src/components/atoms/copy-button/lib-copy-button.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibCopyVariant  = 'ghost' | 'outlined' | 'filled' | 'subtle' | 'on-dark';\nexport type LibCopySize     = 'sm' | 'md' | 'lg';\n\nexport interface CopyButtonTemplateProps {\n  value: string;\n  variant: LibCopyVariant;\n  size: LibCopySize;\n  iconOnly: boolean;\n  label: string;\n  successLabel: string;\n  tooltip: boolean;\n  copied: boolean;\n  disabled: boolean;\n  onClick: () => void;\n}\n\n/**\n * Plantilla para lib-copy-button.\n *\n * Dos capas internas con crossfade CSS:\n *   .copy-btn__idle   → icono copy  (+ label opcional) — visible en reposo\n *   .copy-btn__copied → icono check (+ label opcional) — visible al copiar\n *\n * El atributo [copied] en :host activa el swap via CSS.\n * El tooltip es opcional y se posiciona en un wrapper.\n */\nexport function copyButtonTemplate(props: CopyButtonTemplateProps): TemplateResult {\n  const btn = html`\n    <button\n      type=\"button\"\n      class=\"copy-btn\"\n      aria-label=\"${props.iconOnly ? 'Copiar al portapapeles' : nothing}\"\n      ?disabled=\"${props.disabled}\"\n      @click=\"${props.onClick}\"\n    >\n      <span class=\"copy-btn__idle\">\n        <lib-icon name=\"copy\" size=\"${props.size === 'lg' ? 'sm' : 'xs'}\"></lib-icon>\n        ${!props.iconOnly && props.label\n          ? html`<span class=\"copy-btn__text\">${props.label}</span>`\n          : nothing}\n      </span>\n\n      <span class=\"copy-btn__copied\">\n        <lib-icon name=\"check\" size=\"${props.size === 'lg' ? 'sm' : 'xs'}\"></lib-icon>\n        ${!props.iconOnly && props.successLabel\n          ? html`<span class=\"copy-btn__text\">${props.successLabel}</span>`\n          : nothing}\n      </span>\n    </button>\n  `;\n\n  if (!props.tooltip) return btn;\n\n  return html`\n    <span class=\"copy-btn__wrap\">\n      ${btn}\n      <span class=\"copy-btn__tooltip\">Copiado</span>\n    </span>\n  `;\n}"],"names":[],"mappings":";AA4BO,SAAS,mBAAmB,OAAgD;AACjF,QAAM,MAAM;AAAA;AAAA;AAAA;AAAA,oBAIM,MAAM,WAAW,2BAA2B,OAAO;AAAA,mBACpD,MAAM,QAAQ;AAAA,gBACjB,MAAM,OAAO;AAAA;AAAA;AAAA,sCAGS,MAAM,SAAS,OAAO,OAAO,IAAI;AAAA,UAC7D,CAAC,MAAM,YAAY,MAAM,QACvB,oCAAoC,MAAM,KAAK,YAC/C,OAAO;AAAA;AAAA;AAAA;AAAA,uCAIoB,MAAM,SAAS,OAAO,OAAO,IAAI;AAAA,UAC9D,CAAC,MAAM,YAAY,MAAM,eACvB,oCAAoC,MAAM,YAAY,YACtD,OAAO;AAAA;AAAA;AAAA;AAKjB,MAAI,CAAC,MAAM,QAAS,QAAO;AAE3B,SAAO;AAAA;AAAA,QAED,GAAG;AAAA;AAAA;AAAA;AAIX;"}
+{"version":3,"file":"index194.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;"}

package/dist/index195.js

@@ -1,5 +1,5 @@
-const copyButtonCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;flex-shrink:0;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}}@layer components{.copy-btn__wrap{position:relative;display:inline-flex}.copy-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--lib-space-xs);position:relative;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;white-space:nowrap;overflow:hidden;outline:none;transition:background var(--duration-base) var(--ease-default),border-color var(--duration-base) var(--ease-default),color var(--duration-base) var(--ease-default),transform var(--duration-fast) var(--ease-default)}.copy-btn:disabled{opacity:.4;pointer-events:none;cursor:not-allowed}.copy-btn:active:not(:disabled){transform:scale(.94)}.copy-btn:focus-visible{box-shadow:0 0 0 3px var(--color-ink-20)}:host([size="sm"]) .copy-btn{height:28px;padding:0 var(--lib-space-sm);font-size:10px}:host([size="md"]) .copy-btn{height:34px;padding:0 var(--lib-space-md);font-size:var(--text-xs)}:host([size="lg"]) .copy-btn{height:40px;padding:0 var(--lib-space-lg);font-size:var(--text-sm)}:host([icon-only][size="sm"]) .copy-btn{height:28px;width:28px;padding:0}:host([icon-only][size="md"]) .copy-btn{height:34px;width:34px;padding:0}:host([icon-only][size="lg"]) .copy-btn{height:40px;width:40px;padding:0}.copy-btn__idle,.copy-btn__copied{display:inline-flex;align-items:center;gap:var(--lib-space-xs);transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-slow) var(--ease-bounce)}.copy-btn__idle{opacity:1;transform:translateY(0) scale(1)}.copy-btn__copied{opacity:0;transform:translateY(6px) scale(.8);position:absolute}:host([copied]) .copy-btn__idle{opacity:0;transform:translateY(-6px) scale(.8)}:host([copied]) .copy-btn__copied{opacity:1;transform:translateY(0) scale(1);position:relative}:host([copied]) .copy-btn{color:var(--color-celadon-600)!important;border-color:var(--color-celadon-500)!important}:host([variant="ghost"]) .copy-btn{background:transparent;color:var(--text-muted);border-radius:var(--radius-sm)}:host([variant="ghost"]) .copy-btn:hover{background:var(--color-washi-200);color:var(--text-primary)}:host([variant="outlined"]) .copy-btn{background:transparent;color:var(--text-secondary);border:1px solid var(--border-default);border-radius:var(--radius-sm)}:host([variant="outlined"]) .copy-btn:hover{background:var(--bg-surface);border-color:var(--border-strong);color:var(--text-primary)}:host([variant="filled"]) .copy-btn{background:var(--color-washi-900);color:var(--color-washi-50);border:1px solid transparent;border-radius:var(--radius-sm)}:host([variant="filled"]) .copy-btn:hover{background:var(--color-washi-800)}:host([variant="filled"][copied]) .copy-btn{background:var(--color-celadon-500)!important;border-color:transparent!important;color:#fff!important}:host([variant="subtle"]) .copy-btn{background:var(--color-washi-100);color:var(--text-secondary);border:1px solid transparent;border-radius:var(--radius-sm)}:host([variant="subtle"]) .copy-btn:hover{background:var(--color-washi-200);color:var(--text-primary)}:host([variant="subtle"][copied]) .copy-btn{background:var(--color-celadon-100)!important}:host([variant="on-dark"]) .copy-btn{background:#ffffff12;color:#ffffff73;border:1px solid oklch(100% 0 0deg / .1);border-radius:var(--radius-sm)}:host([variant="on-dark"]) .copy-btn:hover{background:#ffffff1f;color:#ffffffd9;border-color:#fff3}:host([variant="on-dark"][copied]) .copy-btn{color:#6daf92!important;border-color:#6daf92!important;background:#ffffff12!important}:host([variant="on-dark"]) .copy-btn:focus-visible{box-shadow:0 0 0 3px #fff3}.copy-btn__tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%) translateY(4px);background:var(--color-washi-900);color:var(--color-washi-50);font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);white-space:nowrap;padding:3px var(--lib-space-sm);pointer-events:none;opacity:0;z-index:var(--z-tooltip);transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-bounce)}:host([copied]) .copy-btn__tooltip{opacity:1;transform:translate(-50%) translateY(0)}@media(prefers-reduced-motion:reduce){.copy-btn,.copy-btn__idle,.copy-btn__copied,.copy-btn__tooltip{transition:none}}}';
+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}}';
 export {
-  copyButtonCss as default
+  componentCss as default
 };
 //# sourceMappingURL=index195.js.map

package/dist/index197.js

@@ -1,27 +1,5 @@
-import { nothing, html } from "lit";
-const LABEL_TEXT = {
-  online: "Online",
-  away: "Away",
-  busy: "Busy",
-  offline: "Offline"
-};
-function statusDotTemplate(props) {
-  return html`
-    <span class="sd-root">
-      <span
-        class="sd-wrap"
-        role="img"
-        aria-label=${LABEL_TEXT[props.status]}
-      >
-        <span class="sd ${props.bordered ? "sd--bordered" : ""}"></span>
-      </span>
-      ${props.label ? html`
-        <span class="sd-label">${LABEL_TEXT[props.status]}</span>
-      ` : nothing}
-    </span>
-  `;
-}
+const groupCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;align-items:stretch;vertical-align:middle;position:relative}*,*:before,*:after{box-sizing:border-box}}@layer components{.bg-wrap{display:inline-flex;align-items:stretch;position:relative}:host([block]){display:flex;width:100%}:host([block]) .bg-wrap{display:flex;width:100%}:host([block]) ::slotted(lib-button){flex:1}:host([orientation="vertical"]) .bg-wrap{flex-direction:column;align-items:stretch}:host([orientation="vertical"][block]) .bg-wrap{width:100%}}:host(lib-button-sep){display:inline-flex;flex-shrink:0;align-self:stretch;width:1px;background:var(--border-default);position:relative;z-index:1}:host(lib-button-sep[dark]){background:#ffffff1a}@layer reset{:host(lib-button-split){display:inline-flex;align-items:stretch;position:relative;vertical-align:middle}}@layer components{.split-wrap{display:inline-flex;align-items:stretch;position:relative}.split-menu{position:absolute;top:calc(100% + 5px);left:0;min-width:190px;background:var(--bg-elevated);border:1px solid var(--border-subtle);box-shadow:0 8px 24px #1a140e1a;z-index:50;display:none;opacity:0;transform:translateY(-4px);transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}.split-menu.is-open{opacity:1;transform:none}.split-menu-item,.split-menu ::slotted(button){display:flex;width:100%;align-items:center;gap:var(--lib-space-sm);padding:var(--lib-space-sm) var(--lib-space-md);background:none;border:none;border-bottom:1px solid var(--color-washi-100);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);cursor:pointer;text-align:left;transition:background var(--duration-fast),color var(--duration-fast)}.split-menu-item:last-child,.split-menu ::slotted(button:last-child){border-bottom:none}.split-menu-item:hover,.split-menu ::slotted(button:hover){background:var(--bg-base);color:var(--text-primary)}.split-menu-item:disabled,.split-menu ::slotted(button:disabled){opacity:.38;cursor:not-allowed}:host([dark]) .split-menu{background:var(--color-washi-800);border-color:#ffffff14;box-shadow:0 8px 24px #0000004d}:host([dark]) .split-menu-item,:host([dark]) .split-menu ::slotted(button){border-bottom-color:#ffffff0d;color:#faf7f473}:host([dark]) .split-menu-item:hover,:host([dark]) .split-menu ::slotted(button:hover){background:#ffffff12;color:#faf7f4d9}}';
 export {
-  statusDotTemplate
+  groupCss as default
 };
 //# sourceMappingURL=index197.js.map

package/dist/index197.js.map

@@ -1 +1 @@
-{"version":3,"file":"index197.js","sources":["../src/components/atoms/status-dot/lib-status-dot.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibStatusDotStatus = 'online' | 'away' | 'busy' | 'offline';\nexport type LibStatusDotSize   = 'sm' | 'md' | 'lg';\n\nconst LABEL_TEXT: Record<LibStatusDotStatus, string> = {\n  online:  'Online',\n  away:    'Away',\n  busy:    'Busy',\n  offline: 'Offline',\n};\n\nexport interface StatusDotTemplateProps {\n  status:   LibStatusDotStatus;\n  size:     LibStatusDotSize;\n  bordered: boolean;\n  label:    boolean;\n}\n\n/**\n * Renderiza el wrapper con el punto central y, opcionalmente, el label inline.\n *\n * Estructura:\n *   .sd-wrap   — posiciona los anillos (::before / ::after) para online·mizu\n *     .sd      — el punto coloreado y animado\n *   .sd-label  — (opcional) texto inline con color del estado\n */\nexport function statusDotTemplate(props: StatusDotTemplateProps): TemplateResult {\n  return html`\n    <span class=\"sd-root\">\n      <span\n        class=\"sd-wrap\"\n        role=\"img\"\n        aria-label=${LABEL_TEXT[props.status]}\n      >\n        <span class=\"sd ${props.bordered ? 'sd--bordered' : ''}\"></span>\n      </span>\n      ${props.label ? html`\n        <span class=\"sd-label\">${LABEL_TEXT[props.status]}</span>\n      ` : nothing}\n    </span>\n  `;\n}"],"names":[],"mappings":";AAKA,MAAM,aAAiD;AAAA,EACrD,QAAS;AAAA,EACT,MAAS;AAAA,EACT,MAAS;AAAA,EACT,SAAS;AACX;AAiBO,SAAS,kBAAkB,OAA+C;AAC/E,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKY,WAAW,MAAM,MAAM,CAAC;AAAA;AAAA,0BAEnB,MAAM,WAAW,iBAAiB,EAAE;AAAA;AAAA,QAEtD,MAAM,QAAQ;AAAA,iCACW,WAAW,MAAM,MAAM,CAAC;AAAA,UAC/C,OAAO;AAAA;AAAA;AAGjB;"}
+{"version":3,"file":"index197.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index198.js

@@ -1,5 +1,77 @@
-const statusDotCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;align-items:center;vertical-align:middle;flex-shrink:0}*,*:before,*:after{box-sizing:border-box}}@layer components{.sd-root{display:inline-flex;align-items:center;gap:var(--lib-space-sm)}.sd-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sd-wrap:before,.sd-wrap:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-full);opacity:0;pointer-events:none}.sd{width:10px;height:10px;border-radius:var(--radius-full);background:var(--color-washi-400);position:relative;z-index:1;flex-shrink:0}:host([size="sm"]) .sd{width:6px;height:6px}:host([size="md"]) .sd{width:10px;height:10px}:host([size="lg"]) .sd{width:14px;height:14px}.sd--bordered{box-shadow:0 0 0 2px var(--bg-elevated)}.sd-label{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-secondary);line-height:1}@keyframes mizu-ring-a{0%{transform:scale(1);opacity:.5}to{transform:scale(2.8);opacity:0}}@keyframes mizu-ring-b{0%{transform:scale(1);opacity:.35}to{transform:scale(2.2);opacity:0}}@keyframes iki{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.75}}@keyframes hayai{0%,to{opacity:1}40%{opacity:.3}60%{opacity:.3}}:host([status="online"]) .sd{background:var(--color-celadon-500)}:host([status="online"]) .sd-wrap:before{background:var(--color-celadon-400);animation:mizu-ring-a 2.6s cubic-bezier(0,.55,.45,1) infinite}:host([status="online"]) .sd-wrap:after{background:var(--color-celadon-400);animation:mizu-ring-b 2.6s cubic-bezier(0,.55,.45,1) .9s infinite}:host([status="online"]) .sd-label{color:var(--color-celadon-600)}:host([status="away"]) .sd{background:var(--color-kaki-500);animation:iki 3s ease-in-out infinite}:host([status="away"]) .sd-label{color:var(--color-kaki-500)}:host([status="busy"]) .sd{background:var(--color-error);animation:hayai 1.1s ease-in-out infinite}:host([status="busy"]) .sd-label{color:var(--color-error)}:host([status="offline"]) .sd{background:var(--color-washi-400)}:host([status="offline"]) .sd-label{color:var(--text-muted)}@media(prefers-reduced-motion:reduce){.sd-wrap:before,.sd-wrap:after{animation:none;opacity:0}.sd{animation:none}}}';
+import { svg, html } from "lit";
+const CARET = svg`
+  <svg width="9" height="9" viewBox="0 0 10 10" fill="none"
+    stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="2,3 5,7 8,3"/>
+  </svg>`;
+function buttonGroupTemplate() {
+  return html`
+    <div class="bg-wrap" part="group">
+      <slot></slot>
+    </div>
+  `;
+}
+function buttonSplitTemplate(p) {
+  const { label, variant, size, dark, disabled, menuOpen, items } = p;
+  const arrowKintsugi = variant === "accent" || variant === "primary";
+  const menuItems = items.length > 0 ? html`${items.map((item) => html`
+        <button
+          class="split-menu-item"
+          ?disabled="${item.disabled ?? false}"
+          data-value="${item.value}"
+        >${item.label}</button>
+      `)}` : html`<slot name="menu"></slot>`;
+  return html`
+    <div class="split-wrap" part="split">
+
+      <!-- Acción principal: lib-button posición "first" -->
+      <lib-button
+        part="main"
+        variant="${variant}"
+        size="${size}"
+        ?dark="${dark}"
+        ?disabled="${disabled}"
+        group-pos="first"
+        group-shape="rounded"
+        @click="${p.onMainClick}"
+      >
+        <slot slot="prefix" name="prefix"></slot>
+        ${label}
+        <slot slot="suffix" name="suffix"></slot>
+      </lib-button>
+
+      <!-- Flecha: lib-button posición "last", icon-only -->
+      <lib-button
+        part="arrow"
+        variant="${variant}"
+        size="${size}"
+        ?dark="${dark}"
+        ?disabled="${disabled}"
+        group-pos="last"
+        group-shape="rounded"
+        icon-only
+        ?kintsugi="${arrowKintsugi}"
+        aria-label="Más opciones"
+        aria-haspopup="true"
+        aria-expanded="${menuOpen ? "true" : "false"}"
+        @click="${p.onArrowClick}"
+      >${CARET}</lib-button>
+
+      <!-- Menú desplegable -->
+      <div
+        class="split-menu ${menuOpen ? "is-open" : ""}"
+        part="menu"
+        style="${menuOpen ? "display:block" : "display:none"}"
+        role="menu"
+      >
+        ${menuItems}
+      </div>
+
+    </div>
+  `;
+}
 export {
-  statusDotCss as default
+  buttonGroupTemplate,
+  buttonSplitTemplate
 };
 //# sourceMappingURL=index198.js.map

package/dist/index198.js.map

@@ -1 +1 @@
-{"version":3,"file":"index198.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index198.js","sources":["../src/components/molecules/button-group/lib-button-group.html.ts"],"sourcesContent":["import { html, svg, TemplateResult } from 'lit';\nimport type { LibVariant, LibSize } from '../../../types';\nimport type { SplitMenuItem } from './lib-button-group.types';\n\n/* ── Caret SVG (va dentro del slot del lib-button flecha) ── */\nconst CARET = svg`\n  <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <polyline points=\"2,3 5,7 8,3\"/>\n  </svg>`;\n\n/* ────────────────────────────────────────────\n   Group template\n   ──────────────────────────────────────────── */\nexport function buttonGroupTemplate(): TemplateResult {\n  return html`\n    <div class=\"bg-wrap\" part=\"group\">\n      <slot></slot>\n    </div>\n  `;\n}\n\n/* ────────────────────────────────────────────\n   Split template — compone dos lib-button\n   ──────────────────────────────────────────── */\nexport interface SplitTemplateProps {\n  label:       string;\n  variant:     LibVariant;\n  size:        LibSize;\n  dark:        boolean;\n  disabled:    boolean;\n  menuOpen:    boolean;\n  items:       SplitMenuItem[];\n  onMainClick: (e: Event) => void;\n  onArrowClick:(e: Event) => void;\n}\n\nexport function buttonSplitTemplate(p: SplitTemplateProps): TemplateResult {\n  const { label, variant, size, dark, disabled, menuOpen, items } = p;\n\n  /* Kintsugi en el arrow solo para variantes sólidas (accent/primary) */\n  const arrowKintsugi = variant === 'accent' || variant === 'primary';\n\n  const menuItems: TemplateResult = items.length > 0\n    ? html`${items.map(item => html`\n        <button\n          class=\"split-menu-item\"\n          ?disabled=\"${item.disabled ?? false}\"\n          data-value=\"${item.value}\"\n        >${item.label}</button>\n      `)}`\n    : html`<slot name=\"menu\"></slot>`;\n\n  return html`\n    <div class=\"split-wrap\" part=\"split\">\n\n      <!-- Acción principal: lib-button posición \"first\" -->\n      <lib-button\n        part=\"main\"\n        variant=\"${variant}\"\n        size=\"${size}\"\n        ?dark=\"${dark}\"\n        ?disabled=\"${disabled}\"\n        group-pos=\"first\"\n        group-shape=\"rounded\"\n        @click=\"${p.onMainClick}\"\n      >\n        <slot slot=\"prefix\" name=\"prefix\"></slot>\n        ${label}\n        <slot slot=\"suffix\" name=\"suffix\"></slot>\n      </lib-button>\n\n      <!-- Flecha: lib-button posición \"last\", icon-only -->\n      <lib-button\n        part=\"arrow\"\n        variant=\"${variant}\"\n        size=\"${size}\"\n        ?dark=\"${dark}\"\n        ?disabled=\"${disabled}\"\n        group-pos=\"last\"\n        group-shape=\"rounded\"\n        icon-only\n        ?kintsugi=\"${arrowKintsugi}\"\n        aria-label=\"Más opciones\"\n        aria-haspopup=\"true\"\n        aria-expanded=\"${menuOpen ? 'true' : 'false'}\"\n        @click=\"${p.onArrowClick}\"\n      >${CARET}</lib-button>\n\n      <!-- Menú desplegable -->\n      <div\n        class=\"split-menu ${menuOpen ? 'is-open' : ''}\"\n        part=\"menu\"\n        style=\"${menuOpen ? 'display:block' : 'display:none'}\"\n        role=\"menu\"\n      >\n        ${menuItems}\n      </div>\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAKA,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AASP,SAAS,sBAAsC;AACpD,SAAO;AAAA;AAAA;AAAA;AAAA;AAKT;AAiBO,SAAS,oBAAoB,GAAuC;AACzE,QAAM,EAAE,OAAO,SAAS,MAAM,MAAM,UAAU,UAAU,UAAU;AAGlE,QAAM,gBAAgB,YAAY,YAAY,YAAY;AAE1D,QAAM,YAA4B,MAAM,SAAS,IAC7C,OAAO,MAAM,IAAI,CAAA,SAAQ;AAAA;AAAA;AAAA,uBAGR,KAAK,YAAY,KAAK;AAAA,wBACrB,KAAK,KAAK;AAAA,WACvB,KAAK,KAAK;AAAA,OACd,CAAC,KACF;AAEJ,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMU,OAAO;AAAA,gBACV,IAAI;AAAA,iBACH,IAAI;AAAA,qBACA,QAAQ;AAAA;AAAA;AAAA,kBAGX,EAAE,WAAW;AAAA;AAAA;AAAA,UAGrB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAOI,OAAO;AAAA,gBACV,IAAI;AAAA,iBACH,IAAI;AAAA,qBACA,QAAQ;AAAA;AAAA;AAAA;AAAA,qBAIR,aAAa;AAAA;AAAA;AAAA,yBAGT,WAAW,SAAS,OAAO;AAAA,kBAClC,EAAE,YAAY;AAAA,SACvB,KAAK;AAAA;AAAA;AAAA;AAAA,4BAIc,WAAW,YAAY,EAAE;AAAA;AAAA,iBAEpC,WAAW,kBAAkB,cAAc;AAAA;AAAA;AAAA,UAGlD,SAAS;AAAA;AAAA;AAAA;AAAA;AAKnB;"}

package/dist/index199.js

@@ -1,48 +1,77 @@
-import { html, nothing } from "lit";
-const defaultIconSvg = html`
-  <svg
-    class="avatar__icon"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    aria-hidden="true"
-  >
-    <circle cx="12" cy="8" r="4"/>
-    <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
-  </svg>
-`;
-function avatarTemplate(props) {
+import { html } from "lit";
+const checkSvg = html`
+  <svg viewBox="0 0 12 12">
+    <polyline points="2,6 5,9 10,3"/>
+  </svg>`;
+function checkboxCardTemplate(ctx) {
+  const checkClass = [
+    "cc-check",
+    ctx.inputType === "radio" || ctx.checkShape === "pill" ? "cc-check-pill" : ""
+  ].filter(Boolean).join(" ");
   return html`
-    <div
-      class="avatar__wrapper"
-      role="img"
-      aria-label="${props.name || "avatar"}"
+    <label
+      class="cc"
+      part="label"
+      @click="${(e) => ctx._handleClick(e)}"
     >
-      <div class="avatar__face">
+      <!-- Input nativo — hermano directo de .cc-body para :checked ~ -->
+      <input
+        class="cc-input"
+        part="input"
+        .type="${ctx.inputType}"
+        .name="${ctx.name}"
+        .value="${ctx.value}"
+        .checked="${ctx.checked}"
+        ?disabled="${ctx.disabled}"
+        @change="${(e) => ctx._handleChange(e)}"
+      />
 
-        ${props.showImage ? html`<img
-              class="avatar__img"
-              src="${props.src}"
-              alt="${props.name}"
-              @error=${props.onError}
-            />` : nothing}
+      <div class="cc-body" part="body">
 
-        ${!props.showImage && props.initials ? html`<span class="avatar__initials">${props.initials}</span>` : nothing}
+        <!-- Checkmark -->
+        <div class="${checkClass}" part="check">${checkSvg}</div>
 
-        ${!props.showImage && !props.initials ? html`<slot>${defaultIconSvg}</slot>` : nothing}
+        <!-- Slot: icono -->
+        <slot name="icon">
+          ${ctx._hasSlot("icon") ? "" : ""}
+        </slot>
 
-      </div>
+        <!-- Slot: badge -->
+        <slot name="badge"></slot>
+
+        <!-- Slot: título -->
+        <slot name="title">
+          ${ctx.cardTitle ? html`<div class="cc-title" part="title">${ctx.cardTitle}</div>` : ""}
+        </slot>
+
+        <!-- Slot: descripción -->
+        <slot name="desc">
+          ${ctx.desc ? html`<div class="cc-desc" part="desc">${ctx.desc}</div>` : ""}
+        </slot>
+
+        <!-- Slot: precio -->
+        <slot name="price"></slot>
+
+        <!-- Slot: divider -->
+        <slot name="divider"></slot>
+
+        <!-- Slot: features -->
+        <slot name="features"></slot>
+
+        <!-- Slot: imagen -->
+        <slot name="image"></slot>
+
+        <!-- Slot: contenido libre (default) -->
+        <slot></slot>
+
+        <!-- Ripple layer -->
+        <div class="cc-ripple" part="ripple"></div>
 
-      <div class="avatar__status">
-        <slot name="status"></slot>
       </div>
-    </div>
+    </label>
   `;
 }
 export {
-  avatarTemplate
+  checkboxCardTemplate
 };
 //# sourceMappingURL=index199.js.map