@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index67.js

@@ -1,105 +1,188 @@
-import { unsafeCSS, css, LitElement } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
-import { codeBlockTemplate } from "./index318.js";
-import codeBlockCss from "./index319.js";
-import sharedTokens from "./index196.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let LibCodeBlock = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.code = "";
-    this.language = "bash";
-    this.filename = "";
-    this.copyable = true;
-    this.variant = "default";
-    this._copied = false;
-    this._copyTimeout = null;
-  }
-  _handleCopy() {
-    const content = this.code || this._getSlotText();
-    if (!content) return;
-    navigator.clipboard.writeText(content).then(() => {
-      this._copied = true;
-      if (this._copyTimeout) clearTimeout(this._copyTimeout);
-      this._copyTimeout = setTimeout(() => {
-        this._copied = false;
-      }, 2e3);
-    }).catch(() => {
-      const ta = document.createElement("textarea");
-      ta.value = content;
-      ta.style.position = "fixed";
-      ta.style.opacity = "0";
-      document.body.appendChild(ta);
-      ta.select();
-      document.execCommand("copy");
-      document.body.removeChild(ta);
-      this._copied = true;
-      if (this._copyTimeout) clearTimeout(this._copyTimeout);
-      this._copyTimeout = setTimeout(() => {
-        this._copied = false;
-      }, 2e3);
-    });
-  }
-  _getSlotText() {
-    var _a;
-    const slot = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("slot");
-    if (!slot) return "";
-    return slot.assignedNodes({ flatten: true }).map((node) => node.textContent ?? "").join("");
+import { html, nothing } from "lit";
+import { map as o } from "./index232.js";
+function nodeMatchesSearch(node, term) {
+  var _a;
+  if (!term) return true;
+  const t = term.toLowerCase();
+  if (node.label.toLowerCase().includes(t)) return true;
+  return ((_a = node.children) == null ? void 0 : _a.some((c) => nodeMatchesSearch(c, term))) ?? false;
+}
+function highlightLabel(label, term) {
+  if (!term) return html`${label}`;
+  const idx = label.toLowerCase().indexOf(term.toLowerCase());
+  if (idx === -1) return html`${label}`;
+  return html`${label.slice(0, idx)}<mark>${label.slice(idx, idx + term.length)}</mark>${label.slice(idx + term.length)}`;
+}
+function renderNode(node, ctx, depth, ancestorIsLast, isLast) {
+  var _a;
+  if (ctx.searchValue && !nodeMatchesSearch(node, ctx.searchValue)) return nothing;
+  const st = ctx.nodeStates.get(node.id) ?? { selected: false, indeterminate: false, expanded: false };
+  const hasKids = (((_a = node.children) == null ? void 0 : _a.length) ?? 0) > 0;
+  const isExpanded = ctx.searchValue ? hasKids : st.expanded;
+  const indent = depth > 0 ? html`<div class="ts-indent">${Array.from({ length: depth }, (_, i) => {
+    const isLastUnit = i === depth - 1;
+    const ancestorWasLast = ancestorIsLast[i] ?? false;
+    const cls = [
+      "ts-indent-unit",
+      ancestorWasLast ? "ts-indent-no-line" : "",
+      isLastUnit ? "ts-indent-last" : "",
+      isLastUnit && isLast ? "ts-indent-last-child" : ""
+    ].filter(Boolean).join(" ");
+    return html`<div class="${cls}"></div>`;
+  })}</div>` : nothing;
+  const toggle = hasKids ? html`
+      <div
+        class="ts-toggle"
+        @click="${(e) => {
+    e.stopPropagation();
+    ctx.onToggle(node.id);
+  }}"
+        aria-label="${isExpanded ? "Colapsar" : "Expandir"}"
+      >
+        <svg class="ts-toggle-icon" viewBox="0 0 8 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+          <path d="M2 1.5l3 2.5-3 2.5"/>
+        </svg>
+      </div>` : html`<div class="ts-toggle-spacer"></div>`;
+  const checkbox = ctx.multi ? html`
+      <div class="ts-checkbox">
+        <svg class="ts-checkbox-check" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M1.5 5l2.5 2.5L8.5 2"/>
+        </svg>
+        <div class="ts-checkbox-dash"></div>
+      </div>` : nothing;
+  const rowCls = [
+    "ts-node-row",
+    st.selected && !st.indeterminate ? "is-selected" : "",
+    st.indeterminate ? "is-indeterminate" : ""
+  ].filter(Boolean).join(" ");
+  const badge = hasKids ? html`<span class="ts-node-badge">${node.children.length}</span>` : nothing;
+  const childAncestors = [...ancestorIsLast, isLast];
+  const children = hasKids ? html`
+      <div class="ts-children">
+        <div class="ts-children-inner">
+          ${o(
+    node.children,
+    (child, ci) => renderNode(child, ctx, depth + 1, childAncestors, ci === node.children.length - 1)
+  )}
+        </div>
+      </div>` : nothing;
+  return html`
+    <div class="ts-node ${isExpanded ? "is-expanded" : ""}">
+      <div class="${rowCls}" @click="${() => ctx.onSelect(node)}">
+        ${indent}
+        ${toggle}
+        ${checkbox}
+        <span class="ts-node-label">${highlightLabel(node.label, ctx.searchValue)}</span>
+        ${badge}
+      </div>
+      ${children}
+    </div>
+  `;
+}
+function renderTree(props) {
+  const ctx = {
+    nodeStates: props.nodeStates,
+    multi: props.multi,
+    searchValue: props.searchValue,
+    onToggle: props.onToggle,
+    onSelect: props.onSelect
+  };
+  const visibleNodes = props.nodes.filter(
+    (n) => !props.searchValue || nodeMatchesSearch(n, props.searchValue)
+  );
+  if (visibleNodes.length === 0) {
+    return html`<div class="ts-empty">${props.emptyText}</div>`;
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._copyTimeout) clearTimeout(this._copyTimeout);
+  return html`${o(
+    visibleNodes,
+    (node, i) => renderNode(node, ctx, 0, [], i === visibleNodes.length - 1)
+  )}`;
+}
+function renderSearch(props) {
+  if (!props.searchable) return nothing;
+  return html`
+    <div class="ts-search-wrap">
+      <svg class="ts-search-icon" width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+        <circle cx="7" cy="7" r="5"/><path d="M12 12l2.5 2.5"/>
+      </svg>
+      <input
+        class="ts-search"
+        type="text"
+        placeholder="Buscar…"
+        .value="${props.searchValue}"
+        autocomplete="off"
+        @input="${(e) => props.onSearch(e.target.value)}"
+      >
+    </div>
+  `;
+}
+function renderFooter(props) {
+  if (!props.multi) return nothing;
+  return html`
+    <div class="ts-footer">
+      <span class="ts-footer-info">${props.footerInfo}</span>
+      <div class="ts-footer-actions">
+        <button class="ts-btn" @click="${props.onClear}">Limpiar</button>
+        ${props.inline ? nothing : html`<button class="ts-btn ts-btn-confirm" @click="${props.onConfirm}">Aplicar</button>`}
+      </div>
+    </div>
+  `;
+}
+function renderTags(props) {
+  if (!props.multi || props.inline) return nothing;
+  return html`
+    <div class="ts-tags">
+      ${o(props.tags, (tag) => html`
+        <div class="ts-tag">
+          ${tag.label}
+          <span class="ts-tag-remove" @click="${() => props.onTagRemove(tag.id)}">×</span>
+        </div>
+      `)}
+    </div>
+  `;
+}
+function treeSelectTemplate(props) {
+  if (props.inline) {
+    return html`
+      <div class="ts-inline">
+        ${renderSearch(props)}
+        <div class="ts-tree">${renderTree(props)}</div>
+        ${renderFooter(props)}
+      </div>
+    `;
   }
-  render() {
-    return codeBlockTemplate({
-      code: this.code,
-      language: this.language,
-      filename: this.filename,
-      copyable: this.copyable,
-      copied: this._copied,
-      onCopy: () => this._handleCopy()
-    });
-  }
-};
-LibCodeBlock.styles = [
-  css`
-      ${unsafeCSS(sharedTokens)}
-    `,
-  css`
-      ${unsafeCSS(codeBlockCss)}
-    `
-];
-__decorateClass([
-  property({ type: String })
-], LibCodeBlock.prototype, "code", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibCodeBlock.prototype, "language", 2);
-__decorateClass([
-  property({ type: String })
-], LibCodeBlock.prototype, "filename", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibCodeBlock.prototype, "copyable", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibCodeBlock.prototype, "variant", 2);
-__decorateClass([
-  state()
-], LibCodeBlock.prototype, "_copied", 2);
-LibCodeBlock = __decorateClass([
-  customElement("lib-code-block")
-], LibCodeBlock);
+  return html`
+    <div class="ts-wrap">
+
+      <div
+        class="ts-trigger"
+        @click="${props.onTriggerClick}"
+        aria-haspopup="listbox"
+        aria-expanded="${props.open}"
+      >
+        <span class="ts-trigger-label ${props.isPlaceholder ? "is-placeholder" : ""}">
+          ${props.isPlaceholder ? props.placeholder : props.triggerLabel}
+        </span>
+
+        ${props.multi && props.selectionCount > 0 ? html`<span class="ts-trigger-count">${props.selectionCount}</span>` : nothing}
+
+        <svg class="ts-trigger-chevron" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+          <path d="M3 6l5 5 5-5"/>
+        </svg>
+      </div>
+
+      <div class="ts-dropdown" role="listbox">
+        ${renderSearch(props)}
+        <div class="ts-tree">${renderTree(props)}</div>
+        ${renderFooter(props)}
+      </div>
+
+    </div>
+
+    ${renderTags(props)}
+  `;
+}
 export {
-  LibCodeBlock
+  treeSelectTemplate
 };
 //# sourceMappingURL=index67.js.map

package/dist/index67.js.map

@@ -1 +1 @@
-{"version":3,"file":"index67.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;"}
+{"version":3,"file":"index67.js","sources":["../src/components/molecules/tree-select/lib-tree-select.component.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { map } from 'lit/directives/map.js';\nimport type {\n  TreeNode,\n  TreeNodeState,\n  TreeSelectTemplateProps,\n  RenderNodeCtx,\n} from './lib-tree-node.types';\n\n/* ──────────────────────────────────────────────────────────────\n   HELPERS\n────────────────────────────────────────────────────────────── */\n\nfunction nodeMatchesSearch(node: TreeNode, term: string): boolean {\n  if (!term) return true;\n  const t = term.toLowerCase();\n  if (node.label.toLowerCase().includes(t)) return true;\n  return node.children?.some(c => nodeMatchesSearch(c, term)) ?? false;\n}\n\nfunction highlightLabel(label: string, term: string): TemplateResult {\n  if (!term) return html`${label}`;\n  const idx = label.toLowerCase().indexOf(term.toLowerCase());\n  if (idx === -1) return html`${label}`;\n  return html`${label.slice(0, idx)}<mark>${label.slice(idx, idx + term.length)}</mark>${label.slice(idx + term.length)}`;\n}\n\n/* ──────────────────────────────────────────────────────────────\n   RENDERIZADO RECURSIVO DE NODO\n────────────────────────────────────────────────────────────── */\n\nfunction renderNode(\n  node: TreeNode,\n  ctx: RenderNodeCtx,\n  depth: number,\n  ancestorIsLast: boolean[],\n  isLast: boolean,\n): TemplateResult | typeof nothing {\n\n  if (ctx.searchValue && !nodeMatchesSearch(node, ctx.searchValue)) return nothing;\n\n  const st: TreeNodeState = ctx.nodeStates.get(node.id)\n    ?? { selected: false, indeterminate: false, expanded: false };\n\n  const hasKids    = (node.children?.length ?? 0) > 0;\n  const isExpanded = ctx.searchValue ? hasKids : st.expanded;\n\n  /* ── Líneas de indentación (estética bambú) ── */\n  const indent: TemplateResult | typeof nothing = depth > 0\n    ? html`<div class=\"ts-indent\">${\n        Array.from({ length: depth }, (_, i) => {\n          const isLastUnit      = i === depth - 1;\n          const ancestorWasLast = ancestorIsLast[i] ?? false;\n          const cls = [\n            'ts-indent-unit',\n            ancestorWasLast              ? 'ts-indent-no-line'   : '',\n            isLastUnit                   ? 'ts-indent-last'       : '',\n            isLastUnit && isLast         ? 'ts-indent-last-child' : '',\n          ].filter(Boolean).join(' ');\n          return html`<div class=\"${cls}\"></div>`;\n        })\n      }</div>`\n    : nothing;\n\n  /* ── Toggle expand/collapse ── */\n  const toggle: TemplateResult = hasKids\n    ? html`\n      <div\n        class=\"ts-toggle\"\n        @click=\"${(e: Event): void => { e.stopPropagation(); ctx.onToggle(node.id); }}\"\n        aria-label=\"${isExpanded ? 'Colapsar' : 'Expandir'}\"\n      >\n        <svg class=\"ts-toggle-icon\" viewBox=\"0 0 8 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n          <path d=\"M2 1.5l3 2.5-3 2.5\"/>\n        </svg>\n      </div>`\n    : html`<div class=\"ts-toggle-spacer\"></div>`;\n\n  /* ── Checkbox (solo en modo multi) ── */\n  const checkbox: TemplateResult | typeof nothing = ctx.multi\n    ? html`\n      <div class=\"ts-checkbox\">\n        <svg class=\"ts-checkbox-check\" viewBox=\"0 0 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M1.5 5l2.5 2.5L8.5 2\"/>\n        </svg>\n        <div class=\"ts-checkbox-dash\"></div>\n      </div>`\n    : nothing;\n\n  /* ── Row classes ── */\n  const rowCls = [\n    'ts-node-row',\n    st.selected && !st.indeterminate ? 'is-selected'     : '',\n    st.indeterminate                  ? 'is-indeterminate' : '',\n  ].filter(Boolean).join(' ');\n\n  /* ── Badge (número de hijos directos) ── */\n  const badge: TemplateResult | typeof nothing = hasKids\n    ? html`<span class=\"ts-node-badge\">${node.children!.length}</span>`\n    : nothing;\n\n  /* ── Hijos (siempre en DOM, animados con grid-template-rows) ── */\n  const childAncestors = [...ancestorIsLast, isLast];\n  const children: TemplateResult | typeof nothing = hasKids\n    ? html`\n      <div class=\"ts-children\">\n        <div class=\"ts-children-inner\">\n          ${map(node.children!, (child, ci) =>\n            renderNode(child, ctx, depth + 1, childAncestors, ci === node.children!.length - 1)\n          )}\n        </div>\n      </div>`\n    : nothing;\n\n  return html`\n    <div class=\"ts-node ${isExpanded ? 'is-expanded' : ''}\">\n      <div class=\"${rowCls}\" @click=\"${(): void => ctx.onSelect(node)}\">\n        ${indent}\n        ${toggle}\n        ${checkbox}\n        <span class=\"ts-node-label\">${highlightLabel(node.label, ctx.searchValue)}</span>\n        ${badge}\n      </div>\n      ${children}\n    </div>\n  `;\n}\n\n/* ──────────────────────────────────────────────────────────────\n   ÁRBOL COMPLETO\n────────────────────────────────────────────────────────────── */\nfunction renderTree(props: TreeSelectTemplateProps): TemplateResult {\n  const ctx: RenderNodeCtx = {\n    nodeStates:  props.nodeStates,\n    multi:       props.multi,\n    searchValue: props.searchValue,\n    onToggle:    props.onToggle,\n    onSelect:    props.onSelect,\n  };\n\n  const visibleNodes = props.nodes.filter(n =>\n    !props.searchValue || nodeMatchesSearch(n, props.searchValue)\n  );\n\n  if (visibleNodes.length === 0) {\n    return html`<div class=\"ts-empty\">${props.emptyText}</div>`;\n  }\n\n  return html`${map(visibleNodes, (node, i) =>\n    renderNode(node, ctx, 0, [], i === visibleNodes.length - 1)\n  )}`;\n}\n\n/* ──────────────────────────────────────────────────────────────\n   BÚSQUEDA\n────────────────────────────────────────────────────────────── */\nfunction renderSearch(props: TreeSelectTemplateProps): TemplateResult | typeof nothing {\n  if (!props.searchable) return nothing;\n  return html`\n    <div class=\"ts-search-wrap\">\n      <svg class=\"ts-search-icon\" width=\"13\" height=\"13\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n        <circle cx=\"7\" cy=\"7\" r=\"5\"/><path d=\"M12 12l2.5 2.5\"/>\n      </svg>\n      <input\n        class=\"ts-search\"\n        type=\"text\"\n        placeholder=\"Buscar…\"\n        .value=\"${props.searchValue}\"\n        autocomplete=\"off\"\n        @input=\"${(e: Event): void => props.onSearch((e.target as HTMLInputElement).value)}\"\n      >\n    </div>\n  `;\n}\n\n/* ──────────────────────────────────────────────────────────────\n   FOOTER (solo en multi)\n────────────────────────────────────────────────────────────── */\nfunction renderFooter(props: TreeSelectTemplateProps): TemplateResult | typeof nothing {\n  if (!props.multi) return nothing;\n  return html`\n    <div class=\"ts-footer\">\n      <span class=\"ts-footer-info\">${props.footerInfo}</span>\n      <div class=\"ts-footer-actions\">\n        <button class=\"ts-btn\" @click=\"${props.onClear}\">Limpiar</button>\n        ${props.inline\n          ? nothing\n          : html`<button class=\"ts-btn ts-btn-confirm\" @click=\"${props.onConfirm}\">Aplicar</button>`}\n      </div>\n    </div>\n  `;\n}\n\n/* ──────────────────────────────────────────────────────────────\n   TAGS (multi dropdown — debajo del trigger)\n────────────────────────────────────────────────────────────── */\nfunction renderTags(props: TreeSelectTemplateProps): TemplateResult | typeof nothing {\n  if (!props.multi || props.inline) return nothing;\n  return html`\n    <div class=\"ts-tags\">\n      ${map(props.tags, tag => html`\n        <div class=\"ts-tag\">\n          ${tag.label}\n          <span class=\"ts-tag-remove\" @click=\"${(): void => props.onTagRemove(tag.id)}\">×</span>\n        </div>\n      `)}\n    </div>\n  `;\n}\n\n/* ──────────────────────────────────────────────────────────────\n   TEMPLATE PRINCIPAL\n────────────────────────────────────────────────────────────── */\nexport function treeSelectTemplate(props: TreeSelectTemplateProps): TemplateResult {\n\n  /* ── Modo INLINE ── */\n  if (props.inline) {\n    return html`\n      <div class=\"ts-inline\">\n        ${renderSearch(props)}\n        <div class=\"ts-tree\">${renderTree(props)}</div>\n        ${renderFooter(props)}\n      </div>\n    `;\n  }\n\n  /* ── Modo DROPDOWN ── */\n  return html`\n    <div class=\"ts-wrap\">\n\n      <div\n        class=\"ts-trigger\"\n        @click=\"${props.onTriggerClick}\"\n        aria-haspopup=\"listbox\"\n        aria-expanded=\"${props.open}\"\n      >\n        <span class=\"ts-trigger-label ${props.isPlaceholder ? 'is-placeholder' : ''}\">\n          ${props.isPlaceholder ? props.placeholder : props.triggerLabel}\n        </span>\n\n        ${props.multi && props.selectionCount > 0\n          ? html`<span class=\"ts-trigger-count\">${props.selectionCount}</span>`\n          : nothing}\n\n        <svg class=\"ts-trigger-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n          <path d=\"M3 6l5 5 5-5\"/>\n        </svg>\n      </div>\n\n      <div class=\"ts-dropdown\" role=\"listbox\">\n        ${renderSearch(props)}\n        <div class=\"ts-tree\">${renderTree(props)}</div>\n        ${renderFooter(props)}\n      </div>\n\n    </div>\n\n    ${renderTags(props)}\n  `;\n}"],"names":["map"],"mappings":";;AAaA,SAAS,kBAAkB,MAAgB,MAAuB;;AAChE,MAAI,CAAC,KAAM,QAAO;AAClB,QAAM,IAAI,KAAK,YAAA;AACf,MAAI,KAAK,MAAM,YAAA,EAAc,SAAS,CAAC,EAAG,QAAO;AACjD,WAAO,UAAK,aAAL,mBAAe,KAAK,CAAA,MAAK,kBAAkB,GAAG,IAAI,OAAM;AACjE;AAEA,SAAS,eAAe,OAAe,MAA8B;AACnE,MAAI,CAAC,KAAM,QAAO,OAAO,KAAK;AAC9B,QAAM,MAAM,MAAM,YAAA,EAAc,QAAQ,KAAK,aAAa;AAC1D,MAAI,QAAQ,GAAI,QAAO,OAAO,KAAK;AACnC,SAAO,OAAO,MAAM,MAAM,GAAG,GAAG,CAAC,SAAS,MAAM,MAAM,KAAK,MAAM,KAAK,MAAM,CAAC,UAAU,MAAM,MAAM,MAAM,KAAK,MAAM,CAAC;AACvH;AAMA,SAAS,WACP,MACA,KACA,OACA,gBACA,QACiC;;AAEjC,MAAI,IAAI,eAAe,CAAC,kBAAkB,MAAM,IAAI,WAAW,EAAG,QAAO;AAEzE,QAAM,KAAoB,IAAI,WAAW,IAAI,KAAK,EAAE,KAC/C,EAAE,UAAU,OAAO,eAAe,OAAO,UAAU,MAAA;AAExD,QAAM,aAAc,UAAK,aAAL,mBAAe,WAAU,KAAK;AAClD,QAAM,aAAa,IAAI,cAAc,UAAU,GAAG;AAGlD,QAAM,SAA0C,QAAQ,IACpD,8BACE,MAAM,KAAK,EAAE,QAAQ,MAAA,GAAS,CAAC,GAAG,MAAM;AACtC,UAAM,aAAkB,MAAM,QAAQ;AACtC,UAAM,kBAAkB,eAAe,CAAC,KAAK;AAC7C,UAAM,MAAM;AAAA,MACV;AAAA,MACA,kBAA+B,sBAAwB;AAAA,MACvD,aAA+B,mBAAyB;AAAA,MACxD,cAAc,SAAiB,yBAAyB;AAAA,IAAA,EACxD,OAAO,OAAO,EAAE,KAAK,GAAG;AAC1B,WAAO,mBAAmB,GAAG;AAAA,EAC/B,CAAC,CACH,WACA;AAGJ,QAAM,SAAyB,UAC3B;AAAA;AAAA;AAAA,kBAGY,CAAC,MAAmB;AAAE,MAAE,gBAAA;AAAmB,QAAI,SAAS,KAAK,EAAE;AAAA,EAAG,CAAC;AAAA,sBAC/D,aAAa,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMpD;AAGJ,QAAM,WAA4C,IAAI,QAClD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOA;AAGJ,QAAM,SAAS;AAAA,IACb;AAAA,IACA,GAAG,YAAY,CAAC,GAAG,gBAAgB,gBAAoB;AAAA,IACvD,GAAG,gBAAiC,qBAAqB;AAAA,EAAA,EACzD,OAAO,OAAO,EAAE,KAAK,GAAG;AAG1B,QAAM,QAAyC,UAC3C,mCAAmC,KAAK,SAAU,MAAM,YACxD;AAGJ,QAAM,iBAAiB,CAAC,GAAG,gBAAgB,MAAM;AACjD,QAAM,WAA4C,UAC9C;AAAA;AAAA;AAAA,YAGMA;AAAAA,IAAI,KAAK;AAAA,IAAW,CAAC,OAAO,OAC5B,WAAW,OAAO,KAAK,QAAQ,GAAG,gBAAgB,OAAO,KAAK,SAAU,SAAS,CAAC;AAAA,EAAA,CACnF;AAAA;AAAA,gBAGL;AAEJ,SAAO;AAAA,0BACiB,aAAa,gBAAgB,EAAE;AAAA,oBACrC,MAAM,aAAa,MAAY,IAAI,SAAS,IAAI,CAAC;AAAA,UAC3D,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,sCACoB,eAAe,KAAK,OAAO,IAAI,WAAW,CAAC;AAAA,UACvE,KAAK;AAAA;AAAA,QAEP,QAAQ;AAAA;AAAA;AAGhB;AAKA,SAAS,WAAW,OAAgD;AAClE,QAAM,MAAqB;AAAA,IACzB,YAAa,MAAM;AAAA,IACnB,OAAa,MAAM;AAAA,IACnB,aAAa,MAAM;AAAA,IACnB,UAAa,MAAM;AAAA,IACnB,UAAa,MAAM;AAAA,EAAA;AAGrB,QAAM,eAAe,MAAM,MAAM;AAAA,IAAO,OACtC,CAAC,MAAM,eAAe,kBAAkB,GAAG,MAAM,WAAW;AAAA,EAAA;AAG9D,MAAI,aAAa,WAAW,GAAG;AAC7B,WAAO,6BAA6B,MAAM,SAAS;AAAA,EACrD;AAEA,SAAO,OAAOA;AAAAA,IAAI;AAAA,IAAc,CAAC,MAAM,MACrC,WAAW,MAAM,KAAK,GAAG,IAAI,MAAM,aAAa,SAAS,CAAC;AAAA,EAAA,CAC3D;AACH;AAKA,SAAS,aAAa,OAAiE;AACrF,MAAI,CAAC,MAAM,WAAY,QAAO;AAC9B,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBASS,MAAM,WAAW;AAAA;AAAA,kBAEjB,CAAC,MAAmB,MAAM,SAAU,EAAE,OAA4B,KAAK,CAAC;AAAA;AAAA;AAAA;AAI1F;AAKA,SAAS,aAAa,OAAiE;AACrF,MAAI,CAAC,MAAM,MAAO,QAAO;AACzB,SAAO;AAAA;AAAA,qCAE4B,MAAM,UAAU;AAAA;AAAA,yCAEZ,MAAM,OAAO;AAAA,UAC5C,MAAM,SACJ,UACA,qDAAqD,MAAM,SAAS,oBAAoB;AAAA;AAAA;AAAA;AAIpG;AAKA,SAAS,WAAW,OAAiE;AACnF,MAAI,CAAC,MAAM,SAAS,MAAM,OAAQ,QAAO;AACzC,SAAO;AAAA;AAAA,QAEDA,EAAI,MAAM,MAAM,CAAA,QAAO;AAAA;AAAA,YAEnB,IAAI,KAAK;AAAA,gDAC2B,MAAY,MAAM,YAAY,IAAI,EAAE,CAAC;AAAA;AAAA,OAE9E,CAAC;AAAA;AAAA;AAGR;AAKO,SAAS,mBAAmB,OAAgD;AAGjF,MAAI,MAAM,QAAQ;AAChB,WAAO;AAAA;AAAA,UAED,aAAa,KAAK,CAAC;AAAA,+BACE,WAAW,KAAK,CAAC;AAAA,UACtC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,EAG3B;AAGA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKS,MAAM,cAAc;AAAA;AAAA,yBAEb,MAAM,IAAI;AAAA;AAAA,wCAEK,MAAM,gBAAgB,mBAAmB,EAAE;AAAA,YACvE,MAAM,gBAAgB,MAAM,cAAc,MAAM,YAAY;AAAA;AAAA;AAAA,UAG9D,MAAM,SAAS,MAAM,iBAAiB,IACpC,sCAAsC,MAAM,cAAc,YAC1D,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQT,aAAa,KAAK,CAAC;AAAA,+BACE,WAAW,KAAK,CAAC;AAAA,UACtC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAKvB,WAAW,KAAK,CAAC;AAAA;AAEvB;"}

package/dist/index68.js

@@ -1,7 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, query, customElement } from "lit/decorators.js";
-import { dialogTemplate } from "./index320.js";
-import dialogCss from "./index321.js";
+import { property, customElement } from "lit/decorators.js";
+import { accordionTemplate } from "./index233.js";
+import accordionCss from "./index234.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,106 +13,45 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibDialog = class extends LitElement {
+let LibAccordion = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.eyebrow = "";
-    this.dlgTitle = "";
     this.variant = "default";
-    this.size = "md";
-    this.layout = "dialog";
-    this.open = false;
-    this.footerMeta = "";
+    this.exclusive = false;
   }
-  /* ── Lifecycle ── */
-  /**
-   * Cuando `open` cambia: abrir con showModal + reflow + .is-open
-   * o cerrar con animación de salida + transitionend.
-   */
-  updated(changed) {
-    if (!changed.has("open")) return;
-    if (this.open) {
-      this._dlg.showModal();
-      this._dlg.getBoundingClientRect();
-      this._dlg.classList.add("is-open");
-    } else {
-      this._animateClose();
-    }
-  }
-  /* ── API pública ── */
-  /** Abre el dialog */
-  show() {
-    this.open = true;
-  }
-  /** Cierra el dialog con animación */
-  close() {
-    this.open = false;
-  }
-  /* ── Render ── */
-  render() {
-    return dialogTemplate({
-      eyebrow: this.eyebrow,
-      dlgTitle: this.dlgTitle,
-      variant: this.variant,
-      size: this.size,
-      layout: this.layout,
-      footerMeta: this.footerMeta,
-      open: this.open,
-      onClose: () => {
-        this.close();
+  _handleToggle(e) {
+    if (!this.exclusive) return;
+    const target = e.target;
+    if (!target.open) return;
+    const items = Array.from(
+      this.querySelectorAll("lib-accordion-item")
+    );
+    items.forEach((item) => {
+      if (item !== target) {
+        item.open = false;
       }
     });
   }
-  /* ── Private ── */
-  _animateClose() {
-    var _a;
-    if (!((_a = this._dlg) == null ? void 0 : _a.open)) return;
-    this._dlg.classList.add("is-closing");
-    this._dlg.classList.remove("is-open");
-    this._dlg.addEventListener("transitionend", () => {
-      this._dlg.close();
-      this._dlg.classList.remove("is-closing");
-      this.dispatchEvent(
-        new CustomEvent("ui-lib-dialog-close", {
-          bubbles: true,
-          composed: true
-        })
-      );
-    }, { once: true });
+  render() {
+    return accordionTemplate({
+      onToggle: this._handleToggle.bind(this)
+    });
   }
 };
-LibDialog.styles = [
+LibAccordion.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(dialogCss)}`
+  css`${unsafeCSS(accordionCss)}`
 ];
-__decorateClass([
-  property({ type: String })
-], LibDialog.prototype, "eyebrow", 2);
-__decorateClass([
-  property({ type: String, attribute: "dlg-title" })
-], LibDialog.prototype, "dlgTitle", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibDialog.prototype, "variant", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibDialog.prototype, "size", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibDialog.prototype, "layout", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibDialog.prototype, "open", 2);
-__decorateClass([
-  property({ type: String, attribute: "footer-meta" })
-], LibDialog.prototype, "footerMeta", 2);
+], LibAccordion.prototype, "variant", 2);
 __decorateClass([
-  query("dialog")
-], LibDialog.prototype, "_dlg", 2);
-LibDialog = __decorateClass([
-  customElement("lib-dialog")
-], LibDialog);
+  property({ type: Boolean })
+], LibAccordion.prototype, "exclusive", 2);
+LibAccordion = __decorateClass([
+  customElement("lib-accordion")
+], LibAccordion);
 export {
-  LibDialog
+  LibAccordion
 };
 //# sourceMappingURL=index68.js.map

package/dist/index68.js.map

@@ -1 +1 @@
-{"version":3,"file":"index68.js","sources":["../src/components/organisms/dialog/lib-dialog.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { dialogTemplate } from './lib-dialog.html';\nimport dialogCss from './lib-dialog.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { DialogVariant, DialogSize, DialogLayout } from './lib-dialog.types';\n\n/**\n * @element lib-dialog\n *\n * Ventana de diálogo sobre `<dialog>` nativo con animación de entrada/salida.\n *\n * @prop {string}        eyebrow     — Texto pequeño encima del título\n * @prop {string}        dlg-title   — Título principal del header\n * @prop {DialogVariant} variant     — default · danger · warning · dark\n * @prop {DialogSize}    size        — sm · md · lg · xl · full (default: md)\n * @prop {DialogLayout}  layout      — dialog · drawer-right · drawer-bottom · alert (default: dialog)\n * @prop {boolean}       open        — Estado controlado del panel\n * @prop {string}        footer-meta — Texto auxiliar izquierdo en el footer\n *\n * @slot         — Cuerpo del dialog (dlg-body)\n * @slot header  — Override completo del título (dentro de dlg-header-text)\n * @slot footer  — Botones del footer (a la derecha del footer-meta)\n *\n * @fires ui-lib-dialog-close — Emitido tras la animación de cierre (bubbles, composed)\n *\n * @method show()  — Abre el dialog con animación de entrada\n * @method close() — Cierra el dialog con animación de salida\n */\n@customElement('lib-dialog')\nexport class LibDialog extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(dialogCss)}`,\n  ];\n\n  /* ── Props ── */\n\n  @property({ type: String })\n  eyebrow = '';\n\n  /**\n   * `title` está reservado en HTMLElement — usamos `dlgTitle` + attribute `dlg-title`.\n   */\n  @property({ type: String, attribute: 'dlg-title' })\n  dlgTitle = '';\n\n  @property({ type: String, reflect: true })\n  variant: DialogVariant = 'default';\n\n  @property({ type: String, reflect: true })\n  size: DialogSize = 'md';\n\n  @property({ type: String, reflect: true })\n  layout: DialogLayout = 'dialog';\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String, attribute: 'footer-meta' })\n  footerMeta = '';\n\n  /* ── Refs ── */\n\n  @query('dialog') declare private _dlg: HTMLDialogElement;\n\n  /* ── Lifecycle ── */\n\n  /**\n   * Cuando `open` cambia: abrir con showModal + reflow + .is-open\n   * o cerrar con animación de salida + transitionend.\n   */\n  protected override updated(changed: PropertyValues<this>): void {\n    if (!changed.has('open')) return;\n\n    if (this.open) {\n      this._dlg.showModal();\n      this._dlg.getBoundingClientRect(); // force reflow antes de la transición\n      this._dlg.classList.add('is-open');\n    } else {\n      this._animateClose();\n    }\n  }\n\n  /* ── API pública ── */\n\n  /** Abre el dialog */\n  public show(): void {\n    this.open = true;\n  }\n\n  /** Cierra el dialog con animación */\n  public close(): void {\n    this.open = false;\n  }\n\n  /* ── Render ── */\n\n  protected override render(): TemplateResult {\n    return dialogTemplate({\n      eyebrow:    this.eyebrow,\n      dlgTitle:   this.dlgTitle,\n      variant:    this.variant,\n      size:       this.size,\n      layout:     this.layout,\n      footerMeta: this.footerMeta,\n      open:       this.open,\n      onClose:    (): void => { this.close(); },\n    });\n  }\n\n  /* ── Private ── */\n\n  private _animateClose(): void {\n    if (!this._dlg?.open) return;\n\n    this._dlg.classList.add('is-closing');\n    this._dlg.classList.remove('is-open');\n\n    this._dlg.addEventListener('transitionend', () => {\n      this._dlg.close();\n      this._dlg.classList.remove('is-closing');\n\n      this.dispatchEvent(\n        new CustomEvent('ui-lib-dialog-close', {\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }, { once: true });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-dialog': LibDialog;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA8BO,IAAM,YAAN,cAAwB,WAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA;AASL,SAAA,UAAU;AAMV,SAAA,WAAW;AAGX,SAAA,UAAyB;AAGzB,SAAA,OAAmB;AAGnB,SAAA,SAAuB;AAGvB,SAAA,OAAO;AAGP,SAAA,aAAa;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYM,QAAQ,SAAqC;AAC9D,QAAI,CAAC,QAAQ,IAAI,MAAM,EAAG;AAE1B,QAAI,KAAK,MAAM;AACb,WAAK,KAAK,UAAA;AACV,WAAK,KAAK,sBAAA;AACV,WAAK,KAAK,UAAU,IAAI,SAAS;AAAA,IACnC,OAAO;AACL,WAAK,cAAA;AAAA,IACP;AAAA,EACF;AAAA;AAAA;AAAA,EAKO,OAAa;AAClB,SAAK,OAAO;AAAA,EACd;AAAA;AAAA,EAGO,QAAc;AACnB,SAAK,OAAO;AAAA,EACd;AAAA;AAAA,EAImB,SAAyB;AAC1C,WAAO,eAAe;AAAA,MACpB,SAAY,KAAK;AAAA,MACjB,UAAY,KAAK;AAAA,MACjB,SAAY,KAAK;AAAA,MACjB,MAAY,KAAK;AAAA,MACjB,QAAY,KAAK;AAAA,MACjB,YAAY,KAAK;AAAA,MACjB,MAAY,KAAK;AAAA,MACjB,SAAY,MAAY;AAAE,aAAK,MAAA;AAAA,MAAS;AAAA,IAAA,CACzC;AAAA,EACH;AAAA;AAAA,EAIQ,gBAAsB;;AAC5B,QAAI,GAAC,UAAK,SAAL,mBAAW,MAAM;AAEtB,SAAK,KAAK,UAAU,IAAI,YAAY;AACpC,SAAK,KAAK,UAAU,OAAO,SAAS;AAEpC,SAAK,KAAK,iBAAiB,iBAAiB,MAAM;AAChD,WAAK,KAAK,MAAA;AACV,WAAK,KAAK,UAAU,OAAO,YAAY;AAEvC,WAAK;AAAA,QACH,IAAI,YAAY,uBAAuB;AAAA,UACrC,SAAS;AAAA,UACT,UAAU;AAAA,QAAA,CACX;AAAA,MAAA;AAAA,IAEL,GAAG,EAAE,MAAM,MAAM;AAAA,EACnB;AACF;AArGa,UACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,SAAS,CAAC;AAC5B;AAKA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARf,UASX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAdvC,UAeX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAjB9B,UAkBX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GApB9B,UAqBX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAvB9B,UAwBX,WAAA,UAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA1B/B,UA2BX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe;AAAA,GA7BzC,UA8BX,WAAA,cAAA,CAAA;AAIiC,gBAAA;AAAA,EAAhC,MAAM,QAAQ;AAAA,GAlCJ,UAkCsB,WAAA,QAAA,CAAA;AAlCtB,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}
+{"version":3,"file":"index68.js","sources":["../src/components/organisms/accordion/lib-accordion.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { accordionTemplate } from './lib-accordion.component.html';\nimport type { LibAccordionItem } from '../../atoms/accordion-item/lib-accordion-item.component';\nimport accordionCss from './lib-accordion.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport type LibAccordionVariant = 'default' | 'flush' | 'separated' | 'accent';\n\n/**\n * @element lib-accordion\n *\n * Organismo que orquesta uno o varios lib-accordion-item.\n * Gestiona el modo exclusive y aplica variantes visuales\n * sobre los items via la API de CSS custom properties.\n *\n * @slot - lib-accordion-item elements\n *\n * @example\n * <lib-accordion variant=\"accent\" exclusive>\n *   <lib-accordion-item label=\"Pregunta 1\">Respuesta 1</lib-accordion-item>\n *   <lib-accordion-item label=\"Pregunta 2\" open>Respuesta 2</lib-accordion-item>\n * </lib-accordion>\n */\n@customElement('lib-accordion')\nexport class LibAccordion extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(accordionCss)}`,\n  ];\n\n  /** Variante visual del accordion */\n  @property({ type: String, reflect: true })\n  variant: LibAccordionVariant = 'default';\n\n  /**\n   * Si true, solo un item puede estar abierto a la vez.\n   * Al abrir uno, los demas se cierran automaticamente.\n   */\n  @property({ type: Boolean })\n  exclusive = false;\n\n  private _handleToggle(e: Event): void {\n    if (!this.exclusive) return;\n\n    const target = e.target as LibAccordionItem;\n\n    // Solo actuamos si el item se acaba de abrir\n    if (!target.open) return;\n\n    const items = Array.from(\n      this.querySelectorAll<LibAccordionItem>('lib-accordion-item')\n    );\n\n    items.forEach(item => {\n      if (item !== target) {\n        item.open = false;\n      }\n    });\n  }\n\n  override render(): TemplateResult {\n    return accordionTemplate({\n      onToggle: this._handleToggle.bind(this),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-accordion': LibAccordion;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAyBO,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,UAA+B;AAO/B,SAAA,YAAY;AAAA,EAAA;AAAA,EAEJ,cAAc,GAAgB;AACpC,QAAI,CAAC,KAAK,UAAW;AAErB,UAAM,SAAS,EAAE;AAGjB,QAAI,CAAC,OAAO,KAAM;AAElB,UAAM,QAAQ,MAAM;AAAA,MAClB,KAAK,iBAAmC,oBAAoB;AAAA,IAAA;AAG9D,UAAM,QAAQ,CAAA,SAAQ;AACpB,UAAI,SAAS,QAAQ;AACnB,aAAK,OAAO;AAAA,MACd;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAES,SAAyB;AAChC,WAAO,kBAAkB;AAAA,MACvB,UAAU,KAAK,cAAc,KAAK,IAAI;AAAA,IAAA,CACvC;AAAA,EACH;AACF;AAzCa,aACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,YAAY,CAAC;AAC/B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAP9B,aAQX,WAAA,WAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAdhB,aAeX,WAAA,aAAA,CAAA;AAfW,eAAN,gBAAA;AAAA,EADN,cAAc,eAAe;AAAA,GACjB,YAAA;"}