@shibui-ui/ui 1.25.0 → 1.25.1

package/dist/index11.js

@@ -1,6 +1,6 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { generateUniqueId } from "./index242.js";
+import { generateUniqueId } from "./index210.js";
 import buttonCss from "./index281.js";
 import sharedTokens from "./index196.js";
 import { buttonTemplate } from "./index282.js";

package/dist/index194.js

@@ -1,12 +1,103 @@
-import { html } from "lit";
-function accordionTemplate(props) {
+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>
+    `;
+  }
+  return html`<span class="bc-sep" aria-hidden="true"></span>`;
+}
+function renderIcon(icon) {
+  if (!icon) return nothing;
+  return html`<span class="bc-icon"><lib-icon name="${icon}" size="xs"></lib-icon></span>`;
+}
+function renderLink(item, index, separator, onNavigate) {
+  return html`
+    <li class="bc-item">
+      <a
+        class="bc-link"
+        href="${item.href ?? "#"}"
+        @click="${(e2) => {
+    e2.preventDefault();
+    onNavigate(item, index);
+  }}"
+      >
+        ${renderIcon(item.icon)}
+        ${item.label ? html`${item.label}` : nothing}
+      </a>
+      ${renderSep(separator)}
+    </li>
+  `;
+}
+function renderCurrent(item) {
+  return html`
+    <li class="bc-item">
+      <span class="bc-current" aria-current="page">
+        ${renderIcon(item.icon)}
+        ${item.label ? html`${item.label}` : nothing}
+      </span>
+    </li>
+  `;
+}
+function renderEllipsis(separator, onExpand) {
+  return html`
+    <li class="bc-item">
+      <button
+        class="bc-ellipsis"
+        aria-label="Mostrar ruta completa"
+        @click="${onExpand}"
+      >…</button>
+      ${renderSep(separator)}
+    </li>
+  `;
+}
+function renderItems(p) {
+  const { items, separator, maxVisible, expanded, onExpand, onNavigate } = p;
+  const shouldCollapse = maxVisible > 0 && items.length > maxVisible && !expanded;
+  if (shouldCollapse) {
+    const first = items[0];
+    const last = items[items.length - 1];
+    if (!first || !last) return [];
+    return [
+      renderLink(first, 0, separator, onNavigate),
+      renderEllipsis(separator, onExpand),
+      last.href ? renderLink(last, items.length - 1, separator, onNavigate) : renderCurrent(last)
+    ];
+  }
+  return items.map((item, i) => {
+    const isLast = i === items.length - 1;
+    if (isLast || !item.href) return renderCurrent(item);
+    return renderLink(item, i, separator, onNavigate);
+  });
+}
+function breadcrumbTemplate(p) {
+  const bcClasses = {
+    "bc": true,
+    "bc-slash": p.separator === "slash",
+    "bc-chevron": p.separator === "chevron",
+    "bc-dot": p.separator === "dot",
+    "bc-line": p.separator === "line",
+    "bc-sm": p.size === "sm",
+    "bc-lg": p.size === "lg",
+    "bc-filled": p.surface === "filled",
+    "bc-pill": p.surface === "pill",
+    "bc-kaki": p.accent === "kaki",
+    "bc-celadon": p.accent === "celadon",
+    "bc-bold": p.accent === "bold",
+    "bc-dark": p.dark
+  };
   return html`
-    <div class="accordion__root" @accordion-toggle=${props.onToggle}>
-      <slot></slot>
-    </div>
+    <nav class="${e(bcClasses)}" aria-label="breadcrumb">
+      <ol class="bc-list">
+        ${renderItems(p)}
+      </ol>
+    </nav>
   `;
 }
 export {
-  accordionTemplate
+  breadcrumbTemplate
 };
 //# sourceMappingURL=index194.js.map

package/dist/index194.js.map

@@ -1 +1 @@
-{"version":3,"file":"index194.js","sources":["../src/components/organisms/accordion/lib-accordion.component.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport interface AccordionTemplateProps {\n  onToggle: (e: Event) => void;\n}\n\n/**\n * Plantilla para lib-accordion.\n *\n * El organismo es un contenedor de slot: no renderiza items propios,\n * solo orquesta el comportamiento exclusive y aplica variantes via CSS.\n */\nexport function accordionTemplate(props: AccordionTemplateProps): TemplateResult {\n  return html`\n    <div class=\"accordion__root\" @accordion-toggle=${props.onToggle}>\n      <slot></slot>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAYO,SAAS,kBAAkB,OAA+C;AAC/E,SAAO;AAAA,qDAC4C,MAAM,QAAQ;AAAA;AAAA;AAAA;AAInE;"}
+{"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 accordionCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{:host{border:1px solid var(--border-subtle);background:var(--bg-elevated);display:block}.accordion__root{display:flex;flex-direction:column}::slotted(lib-accordion-item:last-of-type){border-bottom:none!important}:host([variant="flush"]){border:none;background:transparent;box-shadow:none}:host([variant="flush"]) ::slotted(lib-accordion-item){--accordion-item-trigger-px: 0px;--accordion-item-content-px: 0px;--accordion-item-trigger-hover-bg: transparent;--accordion-item-trigger-bg: transparent;--accordion-item-body-bg: transparent}:host([variant="separated"]){border:none;background:transparent;box-shadow:none}:host([variant="separated"]) .accordion__root{gap:var(--lib-space-sm)}:host([variant="separated"]) ::slotted(lib-accordion-item){border:1px solid var(--border-subtle)!important;transition:box-shadow var(--duration-slow) var(--ease-out),border-color var(--duration-slow) var(--ease-out)}:host([variant="separated"]) ::slotted(lib-accordion-item[open]){box-shadow:var(--shadow-md);border-color:var(--border-default)!important}:host([variant="accent"]){border:1px solid var(--border-subtle);background:var(--bg-elevated)}:host([variant="accent"]) ::slotted(lib-accordion-item[open]){--accordion-item-accent-border: 2px solid var(--color-kaki-400);--accordion-item-trigger-bg: var(--color-kaki-50);--accordion-item-trigger-hover-bg: var(--color-kaki-100);--accordion-item-body-bg: var(--color-kaki-50);--accordion-item-label-color: var(--color-kaki-600);--accordion-item-icon-color: var(--color-kaki-400);--accordion-item-content-border: var(--color-kaki-200);--accordion-item-content-color: var(--color-kaki-600)}@media(prefers-reduced-motion:reduce){::slotted(lib-accordion-item){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 {
-  accordionCss as default
+  componentCss as default
 };
 //# sourceMappingURL=index195.js.map

package/dist/index197.js

@@ -1,21 +1,5 @@
-import { html } from "lit";
-function bentoGridTemplate(ctx) {
-  return html`
-    <div
-      class="bento-grid"
-      part="grid"
-      role="presentation"
-      style="
-        --_columns: ${ctx.columns};
-        --_gap: var(--lib-space-${ctx.gap});
-        --_row-height: ${ctx.rowHeight};
-      "
-    >
-      <slot></slot>
-    </div>
-  `;
-}
+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 {
-  bentoGridTemplate
+  groupCss as default
 };
 //# sourceMappingURL=index197.js.map

package/dist/index197.js.map

@@ -1 +1 @@
-{"version":3,"file":"index197.js","sources":["../src/components/organisms/bento-grid/lib-bento-grid.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibBentoGrid } from './lib-bento-grid.component';\n\nexport function bentoGridTemplate(ctx: LibBentoGrid): TemplateResult {\n  return html`\n    <div\n      class=\"bento-grid\"\n      part=\"grid\"\n      role=\"presentation\"\n      style=\"\n        --_columns: ${ctx.columns};\n        --_gap: var(--lib-space-${ctx.gap});\n        --_row-height: ${ctx.rowHeight};\n      \"\n    >\n      <slot></slot>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,kBAAkB,KAAmC;AACnE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMa,IAAI,OAAO;AAAA,kCACC,IAAI,GAAG;AAAA,yBAChB,IAAI,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAMtC;"}
+{"version":3,"file":"index197.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index198.js

@@ -1,5 +1,77 @@
-const gridCss = "@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.bento-item{height:100%;width:100%;display:flex;flex-direction:column;position:relative;background:var(--bg-elevated);border-radius:var(--lib-radius-lg);border:1px solid var(--border-subtle);overflow:hidden}:host([interactive]) .bento-item{cursor:pointer;transition:transform var(--duration-slow) var(--ease-default),border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-slow) var(--ease-default)}:host([interactive]) .bento-item:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-md)}:host([interactive]) .bento-item:active{transform:translateY(-1px)}.content{padding:var(--lib-space-md);height:100%;display:flex;flex-direction:column}:host([flush]) .content{padding:0}@media(prefers-reduced-motion:reduce){:host([interactive]) .bento-item{transition:border-color var(--duration-base)}:host([interactive]) .bento-item:hover{transform: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 {
-  gridCss 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,87 +1,77 @@
-import { svg, html, nothing } from "lit";
-const iconPrev = svg`
-  <svg viewBox="0 0 16 16" fill="none"
-       stroke="currentColor" stroke-width="1.5"
-       stroke-linecap="round" stroke-linejoin="round">
-    <polyline points="10,3 5,8 10,13"/>
+import { html } from "lit";
+const checkSvg = html`
+  <svg viewBox="0 0 12 12">
+    <polyline points="2,6 5,9 10,3"/>
   </svg>`;
-const iconNext = svg`
-  <svg viewBox="0 0 16 16" fill="none"
-       stroke="currentColor" stroke-width="1.5"
-       stroke-linecap="round" stroke-linejoin="round">
-    <polyline points="6,3 11,8 6,13"/>
-  </svg>`;
-function carouselTemplate(props) {
-  const {
-    mode,
-    current,
-    total,
-    peek,
-    arrows,
-    dots,
-    counter,
-    loop,
-    handlePrev,
-    handleNext,
-    handleDot,
-    handleSlot,
-    handleThumb,
-    handleKey
-  } = props;
-  const prevDisabled = !loop && current === 0;
-  const nextDisabled = !loop && current === total - 1;
-  const counterHtml = peek > 1 ? html`<span>${current + 1}</span>&thinsp;–&thinsp;<span>${Math.min(current + peek, total)}</span> / ${total}` : html`<span>${current + 1}</span> / ${total}`;
+function checkboxCardTemplate(ctx) {
+  const checkClass = [
+    "cc-check",
+    ctx.inputType === "radio" || ctx.checkShape === "pill" ? "cc-check-pill" : ""
+  ].filter(Boolean).join(" ");
   return html`
-    <div
-      class="cr"
-      tabindex="0"
-      role="region"
-      aria-label="Carousel"
-      @keydown=${handleKey}
+    <label
+      class="cc"
+      part="label"
+      @click="${(e) => ctx._handleClick(e)}"
     >
-      <div class="cr-track" part="track">
-        <slot @slotchange=${handleSlot}></slot>
-      </div>
+      <!-- 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)}"
+      />
 
-      ${arrows && mode === "slide" ? html`
-        <button
-          class="cr-arrow cr-arrow-prev ${prevDisabled ? "is-disabled" : ""}"
-          ?disabled=${prevDisabled}
-          aria-label="Anterior"
-          @click=${handlePrev}
-        >${iconPrev}</button>
+      <div class="cc-body" part="body">
 
-        <button
-          class="cr-arrow cr-arrow-next ${nextDisabled ? "is-disabled" : ""}"
-          ?disabled=${nextDisabled}
-          aria-label="Siguiente"
-          @click=${handleNext}
-        >${iconNext}</button>
-      ` : nothing}
-    </div>
+        <!-- Checkmark -->
+        <div class="${checkClass}" part="check">${checkSvg}</div>
 
-    ${dots && total > 1 ? html`
-      <div class="cr-dots" role="tablist" aria-label="Navegación por slides">
-        ${Array.from({ length: total }, (_, i) => html`
-          <button
-            class="cr-dot ${i === current ? "is-active" : ""}"
-            role="tab"
-            aria-selected=${i === current ? "true" : "false"}
-            aria-label="Ir a slide ${i + 1}"
-            @click=${() => handleDot(i)}
-          ></button>
-        `)}
-      </div>
-    ` : nothing}
+        <!-- Slot: icono -->
+        <slot name="icon">
+          ${ctx._hasSlot("icon") ? "" : ""}
+        </slot>
+
+        <!-- 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>
 
-    ${counter && total > 1 ? html`
-      <p class="cr-counter">${counterHtml}</p>
-    ` : nothing}
+        <!-- Slot: precio -->
+        <slot name="price"></slot>
 
-    <slot name="thumbnail" @slotchange=${handleThumb}></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>
+    </label>
   `;
 }
 export {
-  carouselTemplate
+  checkboxCardTemplate
 };
 //# sourceMappingURL=index199.js.map

package/dist/index199.js.map

@@ -1 +1 @@
-{"version":3,"file":"index199.js","sources":["../src/components/organisms/carousel/lib-carousel.html.ts"],"sourcesContent":["import { html, nothing, svg, TemplateResult } from 'lit';\n\nexport type LibCarouselMode = 'slide' | 'fade';\n\nexport interface CarouselTemplateProps {\n  mode:          LibCarouselMode;\n  current:       number;\n  total:         number;\n  peek:          number;\n  arrows:        boolean;\n  dots:          boolean;\n  counter:       boolean;\n  loop:          boolean;\n  handlePrev:    () => void;\n  handleNext:    () => void;\n  handleDot:     (i: number) => void;\n  handleSlot:    (e: Event) => void;\n  handleThumb:   (e: Event) => void;\n  handleKey:     (e: KeyboardEvent) => void;\n}\n\n/** SVG chevron left */\nconst iconPrev = svg`\n  <svg viewBox=\"0 0 16 16\" fill=\"none\"\n       stroke=\"currentColor\" stroke-width=\"1.5\"\n       stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <polyline points=\"10,3 5,8 10,13\"/>\n  </svg>`;\n\n/** SVG chevron right */\nconst iconNext = svg`\n  <svg viewBox=\"0 0 16 16\" fill=\"none\"\n       stroke=\"currentColor\" stroke-width=\"1.5\"\n       stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <polyline points=\"6,3 11,8 6,13\"/>\n  </svg>`;\n\n/**\n * Template para lib-carousel.\n *\n * Estructura:\n *   div.cr                      ← raíz, maneja keydown\n *     div.cr-track              ← contenedor deslizante\n *       slot                    ← slides del consumer\n *   button.cr-arrow-prev        ← (condicional)\n *   button.cr-arrow-next        ← (condicional)\n *   div.cr-dots                 ← (condicional)\n *   p.cr-counter                ← (condicional)\n *   slot[name=\"thumbnail\"]      ← tira de miniaturas (condicional)\n */\nexport function carouselTemplate(props: CarouselTemplateProps): TemplateResult {\n  const {\n    mode, current, total, peek, arrows, dots, counter, loop,\n    handlePrev, handleNext, handleDot, handleSlot, handleThumb, handleKey,\n  } = props;\n\n  const prevDisabled = !loop && current === 0;\n  const nextDisabled = !loop && current === total - 1;\n\n  // Counter text: \"2 / 6\" para peek=1, \"1 – 3 / 6\" para peek>1\n  const counterHtml = peek > 1\n    ? html`<span>${current + 1}</span>&thinsp;–&thinsp;<span>${Math.min(current + peek, total)}</span> / ${total}`\n    : html`<span>${current + 1}</span> / ${total}`;\n\n  return html`\n    <div\n      class=\"cr\"\n      tabindex=\"0\"\n      role=\"region\"\n      aria-label=\"Carousel\"\n      @keydown=${handleKey}\n    >\n      <div class=\"cr-track\" part=\"track\">\n        <slot @slotchange=${handleSlot}></slot>\n      </div>\n\n      ${arrows && mode === 'slide' ? html`\n        <button\n          class=\"cr-arrow cr-arrow-prev ${prevDisabled ? 'is-disabled' : ''}\"\n          ?disabled=${prevDisabled}\n          aria-label=\"Anterior\"\n          @click=${handlePrev}\n        >${iconPrev}</button>\n\n        <button\n          class=\"cr-arrow cr-arrow-next ${nextDisabled ? 'is-disabled' : ''}\"\n          ?disabled=${nextDisabled}\n          aria-label=\"Siguiente\"\n          @click=${handleNext}\n        >${iconNext}</button>\n      ` : nothing}\n    </div>\n\n    ${dots && total > 1 ? html`\n      <div class=\"cr-dots\" role=\"tablist\" aria-label=\"Navegación por slides\">\n        ${Array.from({ length: total }, (_, i) => html`\n          <button\n            class=\"cr-dot ${i === current ? 'is-active' : ''}\"\n            role=\"tab\"\n            aria-selected=${i === current ? 'true' : 'false'}\n            aria-label=\"Ir a slide ${i + 1}\"\n            @click=${():void => handleDot(i)}\n          ></button>\n        `)}\n      </div>\n    ` : nothing}\n\n    ${counter && total > 1 ? html`\n      <p class=\"cr-counter\">${counterHtml}</p>\n    ` : nothing}\n\n    <slot name=\"thumbnail\" @slotchange=${handleThumb}></slot>\n  `;\n}"],"names":[],"mappings":";AAsBA,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBV,SAAS,iBAAiB,OAA8C;AAC7E,QAAM;AAAA,IACJ;AAAA,IAAM;AAAA,IAAS;AAAA,IAAO;AAAA,IAAM;AAAA,IAAQ;AAAA,IAAM;AAAA,IAAS;AAAA,IACnD;AAAA,IAAY;AAAA,IAAY;AAAA,IAAW;AAAA,IAAY;AAAA,IAAa;AAAA,EAAA,IAC1D;AAEJ,QAAM,eAAe,CAAC,QAAQ,YAAY;AAC1C,QAAM,eAAe,CAAC,QAAQ,YAAY,QAAQ;AAGlD,QAAM,cAAc,OAAO,IACvB,aAAa,UAAU,CAAC,iCAAiC,KAAK,IAAI,UAAU,MAAM,KAAK,CAAC,aAAa,KAAK,KAC1G,aAAa,UAAU,CAAC,aAAa,KAAK;AAE9C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMQ,SAAS;AAAA;AAAA;AAAA,4BAGE,UAAU;AAAA;AAAA;AAAA,QAG9B,UAAU,SAAS,UAAU;AAAA;AAAA,0CAEK,eAAe,gBAAgB,EAAE;AAAA,sBACrD,YAAY;AAAA;AAAA,mBAEf,UAAU;AAAA,WAClB,QAAQ;AAAA;AAAA;AAAA,0CAGuB,eAAe,gBAAgB,EAAE;AAAA,sBACrD,YAAY;AAAA;AAAA,mBAEf,UAAU;AAAA,WAClB,QAAQ;AAAA,UACT,OAAO;AAAA;AAAA;AAAA,MAGX,QAAQ,QAAQ,IAAI;AAAA;AAAA,UAEhB,MAAM,KAAK,EAAE,QAAQ,SAAS,CAAC,GAAG,MAAM;AAAA;AAAA,4BAEtB,MAAM,UAAU,cAAc,EAAE;AAAA;AAAA,4BAEhC,MAAM,UAAU,SAAS,OAAO;AAAA,qCACvB,IAAI,CAAC;AAAA,qBACrB,MAAW,UAAU,CAAC,CAAC;AAAA;AAAA,SAEnC,CAAC;AAAA;AAAA,QAEF,OAAO;AAAA;AAAA,MAET,WAAW,QAAQ,IAAI;AAAA,8BACC,WAAW;AAAA,QACjC,OAAO;AAAA;AAAA,yCAE0B,WAAW;AAAA;AAEpD;"}
+{"version":3,"file":"index199.js","sources":["../src/components/molecules/checkbox-card/lib-checkbox-card.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibCheckboxCard } from './lib-checkbox-card.component';\n\n/* SVG checkmark compartido */\nconst checkSvg: TemplateResult = html`\n  <svg viewBox=\"0 0 12 12\">\n    <polyline points=\"2,6 5,9 10,3\"/>\n  </svg>`;\n\nexport function checkboxCardTemplate(ctx: LibCheckboxCard): TemplateResult {\n  const checkClass = [\n    'cc-check',\n    ctx.inputType === 'radio' || ctx.checkShape === 'pill' ? 'cc-check-pill' : '',\n  ].filter(Boolean).join(' ');\n\n  return html`\n    <label\n      class=\"cc\"\n      part=\"label\"\n      @click=\"${(e: MouseEvent): void => ctx._handleClick(e)}\"\n    >\n      <!-- Input nativo — hermano directo de .cc-body para :checked ~ -->\n      <input\n        class=\"cc-input\"\n        part=\"input\"\n        .type=\"${ctx.inputType}\"\n        .name=\"${ctx.name}\"\n        .value=\"${ctx.value}\"\n        .checked=\"${ctx.checked}\"\n        ?disabled=\"${ctx.disabled}\"\n        @change=\"${(e: Event): void => ctx._handleChange(e)}\"\n      />\n\n      <div class=\"cc-body\" part=\"body\">\n\n        <!-- Checkmark -->\n        <div class=\"${checkClass}\" part=\"check\">${checkSvg}</div>\n\n        <!-- Slot: icono -->\n        <slot name=\"icon\">\n          ${ctx._hasSlot('icon') ? '' : ''}\n        </slot>\n\n        <!-- Slot: badge -->\n        <slot name=\"badge\"></slot>\n\n        <!-- Slot: título -->\n        <slot name=\"title\">\n          ${ctx.cardTitle\n            ? html`<div class=\"cc-title\" part=\"title\">${ctx.cardTitle}</div>`\n            : ''}\n        </slot>\n\n        <!-- Slot: descripción -->\n        <slot name=\"desc\">\n          ${ctx.desc\n            ? html`<div class=\"cc-desc\" part=\"desc\">${ctx.desc}</div>`\n            : ''}\n        </slot>\n\n        <!-- Slot: precio -->\n        <slot name=\"price\"></slot>\n\n        <!-- Slot: divider -->\n        <slot name=\"divider\"></slot>\n\n        <!-- Slot: features -->\n        <slot name=\"features\"></slot>\n\n        <!-- Slot: imagen -->\n        <slot name=\"image\"></slot>\n\n        <!-- Slot: contenido libre (default) -->\n        <slot></slot>\n\n        <!-- Ripple layer -->\n        <div class=\"cc-ripple\" part=\"ripple\"></div>\n\n      </div>\n    </label>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,WAA2B;AAAA;AAAA;AAAA;AAK1B,SAAS,qBAAqB,KAAsC;AACzE,QAAM,aAAa;AAAA,IACjB;AAAA,IACA,IAAI,cAAc,WAAW,IAAI,eAAe,SAAS,kBAAkB;AAAA,EAAA,EAC3E,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SAAO;AAAA;AAAA;AAAA;AAAA,gBAIO,CAAC,MAAwB,IAAI,aAAa,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAM3C,IAAI,SAAS;AAAA,iBACb,IAAI,IAAI;AAAA,kBACP,IAAI,KAAK;AAAA,oBACP,IAAI,OAAO;AAAA,qBACV,IAAI,QAAQ;AAAA,mBACd,CAAC,MAAmB,IAAI,cAAc,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMrC,UAAU,kBAAkB,QAAQ;AAAA;AAAA;AAAA;AAAA,YAI9C,IAAI,SAAS,MAAM,IAAI,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ9B,IAAI,YACF,0CAA0C,IAAI,SAAS,WACvD,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAKJ,IAAI,OACF,wCAAwC,IAAI,IAAI,WAChD,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBhB;"}

package/dist/index200.js

@@ -1,5 +1,5 @@
-const carouselCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}button{font:inherit}}@layer components{.cr{position:relative;width:100%;overflow:hidden;-webkit-user-select:none;user-select:none;outline:none}.cr:focus-visible{outline:2px solid var(--color-washi-700);outline-offset:2px}.cr-track{display:flex;transition:transform var(--duration-slow) var(--ease-out);will-change:transform}::slotted(*){flex:0 0 100%;min-width:0}:host([peek="2"]) .cr-track{gap:var(--lib-space-md)}:host([peek="2"]) ::slotted(*){flex:0 0 calc(50% - 8px)}:host([peek="3"]) .cr-track{gap:var(--lib-space-md)}:host([peek="3"]) ::slotted(*){flex:0 0 calc(33.333% - 11px)}:host([peek="4"]) .cr-track{gap:var(--lib-space-sm)}:host([peek="4"]) ::slotted(*){flex:0 0 calc(25% - 6px)}.cr-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:var(--z-raised);width:40px;height:40px;border:1px solid var(--border-default);background:#faf7f4e0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary);transition:background var(--duration-base) var(--ease-default),border-color var(--duration-base) var(--ease-default),opacity var(--duration-base) var(--ease-default),transform var(--duration-base) var(--ease-bounce);border-radius:var(--radius-none)}.cr-arrow svg{width:16px;height:16px;flex-shrink:0}.cr-arrow:hover:not(.is-disabled){background:var(--bg-elevated);border-color:var(--border-strong, var(--color-washi-500));transform:translateY(-50%) scale(1.05)}.cr-arrow.is-disabled{opacity:.3;pointer-events:none}.cr-arrow-prev{left:var(--lib-space-md)}.cr-arrow-next{right:var(--lib-space-md)}.cr-dots{display:flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);padding-top:var(--lib-space-md)}.cr-dot{width:6px;height:6px;border-radius:var(--radius-full);background:var(--color-washi-300);border:none;cursor:pointer;padding:0;transition:width var(--duration-slow) var(--ease-bounce),background var(--duration-base) var(--ease-default);flex-shrink:0}.cr-dot.is-active{width:20px;background:var(--color-washi-900)}.cr-counter{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);color:var(--text-muted);text-align:center;padding-top:var(--lib-space-sm)}.cr-counter span{color:var(--text-primary)}:host([mode="fade"]) .cr-track{transition:none;position:relative}:host([mode="fade"]) ::slotted(*){position:absolute;top:0;left:0;width:100%;opacity:0;transition:opacity var(--duration-slow) var(--ease-out);pointer-events:none}:host([mode="fade"]) ::slotted(.is-active){position:relative;opacity:1;pointer-events:auto}slot[name=thumbnail]{display:flex;gap:var(--lib-space-xs);padding-top:var(--lib-space-sm);overflow-x:auto;scrollbar-width:none}slot[name=thumbnail]::-webkit-scrollbar{display:none}::slotted([slot="thumbnail"]){width:64px;height:48px;flex-shrink:0;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color var(--duration-base) var(--ease-default),opacity var(--duration-base) var(--ease-default);opacity:.5}::slotted([slot="thumbnail"].is-active){border-color:var(--color-washi-900);opacity:1}@media(max-width:640px){:host([peek="2"]) ::slotted(*),:host([peek="3"]) ::slotted(*),:host([peek="4"]) ::slotted(*){flex:0 0 calc(80% - 8px)}}@media(prefers-reduced-motion:reduce){.cr-track{transition:none}.cr-dot{transition:background var(--duration-base)}:host([mode="fade"]) ::slotted(*){transition:none}}}';
+const checkboxCardCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.cc-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.cc{display:block;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none}.cc:focus-within .cc-body{outline:2px solid var(--color-kaki-400);outline-offset:2px}.cc-body{position:relative;border:1px solid var(--border-subtle);background:var(--bg-elevated);padding:var(--lib-space-lg);overflow:hidden;transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.cc:hover .cc-body{border-color:var(--border-default);background:var(--bg-surface)}.cc:active .cc-body{transform:scale(.985)}.cc-body:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgb(255,255,255,.4) 0%,transparent 50%);opacity:0;pointer-events:none;transition:opacity var(--duration-slow)}.cc-input:checked~.cc-body:before{opacity:1}.cc-body:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--color-kaki-400),transparent);opacity:0;transition:opacity var(--duration-slow)}.cc-input:checked~.cc-body:after{opacity:1}.cc-input:checked~.cc-body{border-color:var(--color-kaki-500);background:var(--color-kaki-50)}.cc-check{position:absolute;top:var(--lib-space-md);right:var(--lib-space-md);width:18px;height:18px;border:1px solid var(--border-default);background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2;pointer-events:none;transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out)}.cc-check svg{width:10px;height:10px;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:0;transform:scale(.5);transition:opacity var(--duration-base) var(--ease-bounce),transform var(--duration-base) var(--ease-bounce)}.cc-input:checked~.cc-body .cc-check{border-color:var(--color-kaki-500);background:var(--color-kaki-500)}.cc-input:checked~.cc-body .cc-check svg{opacity:1;transform:scale(1)}.cc-check-pill{border-radius:999px}.cc-icon{margin-bottom:var(--lib-space-md);display:flex;align-items:center}.cc-icon svg,.cc-icon img{width:28px;height:28px;color:var(--text-muted);transition:color var(--duration-base)}.cc-input:checked~.cc-body .cc-icon svg{color:var(--color-kaki-500)}.cc-title{font-family:var(--lib-font-display);font-size:1.2rem;font-weight:300;letter-spacing:var(--tracking-tight);color:var(--text-primary);line-height:1.2;margin-bottom:var(--lib-space-xs);padding-right:var(--lib-space-xl)}.cc-input:checked~.cc-body .cc-title{color:var(--color-kaki-600)}.cc-desc{font-size:var(--text-xs);letter-spacing:.06em;color:var(--text-secondary);line-height:1.7}.cc-input:checked~.cc-body .cc-desc{color:var(--text-secondary)}.cc-badge{display:inline-block;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;padding:1px 6px;border:1px solid var(--border-subtle);color:var(--text-muted);margin-bottom:var(--lib-space-sm);transition:border-color var(--duration-base),color var(--duration-base)}.cc-input:checked~.cc-body .cc-badge{border-color:#b85a1e4d;color:var(--color-kaki-500)}.cc-price{font-family:var(--lib-font-display);font-size:2rem;font-weight:300;letter-spacing:var(--tracking-tight);line-height:1;color:var(--text-primary);margin-top:var(--lib-space-md)}.cc-price sup{font-size:.9rem;vertical-align:super;color:var(--text-muted);font-family:var(--lib-font-mono);letter-spacing:.06em}.cc-price sub{font-size:.65rem;vertical-align:baseline;color:var(--text-muted);font-family:var(--lib-font-mono);letter-spacing:.08em}.cc-input:checked~.cc-body .cc-price{color:var(--color-kaki-600)}.cc-divider{height:1px;background:var(--border-subtle);margin:var(--lib-space-md) 0;transition:background var(--duration-base)}.cc-input:checked~.cc-body .cc-divider{background:#b85a1e33}.cc-features{list-style:none;display:flex;flex-direction:column;gap:var(--lib-space-sm)}.cc-features li{font-size:var(--text-xs);letter-spacing:.06em;color:var(--text-secondary);display:flex;align-items:center;gap:var(--lib-space-sm)}.cc-features li:before{content:"";width:12px;height:1px;background:var(--border-default);flex-shrink:0;transition:background var(--duration-base),width var(--duration-base)}.cc-input:checked~.cc-body .cc-features li:before{background:var(--color-kaki-400);width:14px}.cc-input:checked~.cc-body .cc-features li{color:var(--text-primary)}.cc-ripple{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.cc-ripple-dot{position:absolute;width:4px;height:4px;background:var(--color-kaki-400);border-radius:50%;transform:scale(0);opacity:.18;animation:cc-ripple .5s ease-out forwards}@keyframes cc-ripple{to{transform:scale(80);opacity:0}}:host([layout="horizontal"]) .cc-body{display:flex;align-items:center;gap:var(--lib-space-lg);padding:var(--lib-space-md) var(--lib-space-lg)}:host([layout="horizontal"]) .cc-icon{margin-bottom:0;flex-shrink:0}:host([layout="horizontal"]) .cc-content{flex:1;min-width:0}:host([layout="horizontal"]) .cc-title{margin-bottom:2px;font-size:1rem;padding-right:var(--lib-space-lg)}:host([layout="horizontal"]) .cc-check{top:50%;right:var(--lib-space-md);transform:translateY(-50%)}:host([layout="compact"]) .cc-body{padding:var(--lib-space-md) var(--lib-space-lg)}:host([layout="compact"]) .cc-title{font-size:1rem}:host([color="celadon"]) .cc-input:checked~.cc-body{border-color:var(--color-celadon-500);background:var(--color-celadon-50)}:host([color="celadon"]) .cc-input:checked~.cc-body:after{background:linear-gradient(90deg,transparent,var(--color-celadon-400),transparent)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-check{border-color:var(--color-celadon-500);background:var(--color-celadon-500)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-title{color:var(--color-celadon-500)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-icon svg{color:var(--color-celadon-500)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-badge{border-color:#3571644d;color:var(--color-celadon-500)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-features li:before{background:var(--color-celadon-400)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-divider{background:#35716433}:host([color="celadon"]) .cc-ripple-dot{background:var(--color-celadon-400)}:host([color="celadon"]) .cc:focus-within .cc-body{outline-color:var(--color-celadon-400)}:host([input-type="radio"]) .cc-check{border-radius:50%}:host([input-type="radio"]) .cc-input:checked~.cc-body .cc-check{background:var(--color-kaki-500);border-color:var(--color-kaki-500)}:host([dark]) .cc-body{background:#ffffff0a;border-color:#ffffff14}:host([dark]) .cc:hover .cc-body{border-color:#ffffff26;background:#ffffff0f}:host([dark]) .cc-check{background:#ffffff0f;border-color:#ffffff24}:host([dark]) .cc-title{color:#faf7f4bf}:host([dark]) .cc-desc{color:#faf7f447}:host([dark]) .cc-badge{border-color:#ffffff1a;color:#faf7f44d}:host([dark]) .cc-divider{background:#ffffff14}:host([dark]) .cc-features li{color:#faf7f44d}:host([dark]) .cc-features li:before{background:#ffffff26}:host([dark]) .cc-price{color:#faf7f4bf}:host([dark]) .cc-price sup,:host([dark]) .cc-price sub{color:#faf7f44d}:host([dark]) .cc-input:checked~.cc-body{border-color:var(--color-kaki-500);background:#b85a1e14}:host([dark]) .cc-input:checked~.cc-body .cc-check{border-color:var(--color-kaki-500);background:var(--color-kaki-500)}:host([dark]) .cc-input:checked~.cc-body .cc-title{color:var(--color-kaki-400)}:host([dark]) .cc-input:checked~.cc-body .cc-desc{color:#faf7f466}:host([dark]) .cc-input:checked~.cc-body .cc-badge{border-color:#b85a1e59;color:var(--color-kaki-400)}:host([dark]) .cc-input:checked~.cc-body .cc-divider{background:#b85a1e33}:host([dark]) .cc-input:checked~.cc-body .cc-features li{color:#faf7f48c}:host([dark]) .cc-input:checked~.cc-body .cc-features li:before{background:var(--color-kaki-400)}:host([dark]) .cc-input:checked~.cc-body .cc-price{color:var(--color-kaki-400)}:host([dark]) .cc-input:checked~.cc-body .cc-icon svg{color:var(--color-kaki-400)}:host([disabled]) .cc{pointer-events:none;opacity:.4}:host([disabled]) .cc-body{cursor:not-allowed}:host([error]) .cc-body{border-color:#c0392b66;background:#c0392b08}:host([error]) .cc:hover .cc-body{border-color:var(--color-error)}.cc-img-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:grayscale(.4);transition:filter var(--duration-slow)}.cc-input:checked~.cc-body .cc-img-thumb{filter:grayscale(0)}.cc-img-content{padding:var(--lib-space-md) var(--lib-space-lg) var(--lib-space-lg)}:host([image]) .cc-body{padding:0}:host([image]) .cc-check{top:var(--lib-space-sm);right:var(--lib-space-sm);background:#ffffffd9}:host([image]) .cc-input:checked~.cc-body .cc-check{background:var(--color-kaki-500);border-color:var(--color-kaki-500)}}';
 export {
-  carouselCss as default
+  checkboxCardCss as default
 };
 //# sourceMappingURL=index200.js.map

package/dist/index201.js

@@ -1,5 +1,60 @@
-const cursorCss = '@layer tokens,reset,components;@layer reset{:host{display:contents;pointer-events:none}*,*:before,*:after{box-sizing:border-box}}@layer components{.cur-dot{position:fixed;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);will-change:transform;transition:width .2s var(--ease-out),height .2s var(--ease-out),background .25s,border-radius .2s,opacity .3s}.cur-ring{position:fixed;border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);will-change:transform;transition:width .3s var(--ease-out),height .3s var(--ease-out),border-color .3s,border-width .2s,background .3s,opacity .3s}.cur-label{position:fixed;pointer-events:none;z-index:9999;font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-washi-50);background:var(--color-washi-900);padding:4px 8px;white-space:nowrap;opacity:0;transform:translate(14px,-50%);transition:opacity .2s;will-change:transform}.cur-label.is-visible{opacity:1}:host([curstate="hover"]) .cur-dot{width:10px;height:10px;background:var(--color-kaki-500)}:host([curstate="hover"]) .cur-ring{width:52px;height:52px;border-color:var(--color-kaki-400)!important;border-width:1.5px!important}:host([curstate="text"]) .cur-dot{width:2px;height:22px;border-radius:1px;background:var(--color-washi-700)}:host([curstate="text"]) .cur-ring{opacity:0}:host([curstate="press"]) .cur-dot{width:4px;height:4px;background:var(--color-kaki-600)}:host([curstate="press"]) .cur-ring{width:22px;height:22px;border-color:var(--color-kaki-500)!important;background:#b85a1e0f!important}:host([curstate="hidden"]) .cur-dot,:host([curstate="hidden"]) .cur-ring{opacity:0}:host([dark-zone]) .cur-ring{border-color:#faf7f440!important}@media(pointer:coarse),(max-width:768px){.cur-dot,.cur-ring,.cur-label{display:none}}}';
+import { html } from "lit";
+const removeSvg = html`
+  <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+    <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/>
+  </svg>`;
+function staticChip() {
+  return html`
+    <span class="chip" part="chip" role="note" tabindex="-1">
+      <slot name="icon"></slot>
+      <slot></slot>
+    </span>`;
+}
+function toggleChip(ctx) {
+  return html`
+    <button
+      class="chip-toggle"
+      part="chip"
+      role="checkbox"
+      aria-checked="${ctx.selected}"
+      aria-label="${ctx.ariaLabel}"
+      @click="${() => ctx._handleToggle()}"
+      @keydown="${(e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      ctx._handleToggle();
+    }
+  }}"
+    >
+      <slot name="icon"></slot>
+      <slot></slot>
+    </button>`;
+}
+function inputChip(ctx) {
+  return html`
+    <span class="chip-input" part="chip">
+      <slot name="avatar"></slot>
+      <slot name="icon"></slot>
+      <slot></slot>
+      <button
+        class="chip-remove"
+        part="remove"
+        type="button"
+        aria-label="Eliminar ${ctx.ariaLabel || ""}"
+        @click="${(e) => ctx._handleRemove(e)}"
+      >
+        ${removeSvg}
+      </button>
+    </span>`;
+}
+function chipTemplate(ctx) {
+  if (ctx.kind === "toggle") return toggleChip(ctx);
+  if (ctx.kind === "input") return inputChip(ctx);
+  return staticChip(
+    /*ctx*/
+  );
+}
 export {
-  cursorCss as default
+  chipTemplate
 };
 //# sourceMappingURL=index201.js.map

package/dist/index201.js.map

@@ -1 +1 @@
-{"version":3,"file":"index201.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index201.js","sources":["../src/components/molecules/chip/lib-chip.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibChip } from './lib-chip.component';\n\n/* SVG × para el botón de eliminar */\nconst removeSvg: TemplateResult = html`\n  <svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"/>\n  </svg>`;\n\n/* ── Familia STATIC ── */\nfunction staticChip(/*ctx: LibChip*/): TemplateResult {\n  return html`\n    <span class=\"chip\" part=\"chip\" role=\"note\" tabindex=\"-1\">\n      <slot name=\"icon\"></slot>\n      <slot></slot>\n    </span>`;\n}\n\n/* ── Familia TOGGLE ── */\nfunction toggleChip(ctx: LibChip): TemplateResult {\n  return html`\n    <button\n      class=\"chip-toggle\"\n      part=\"chip\"\n      role=\"checkbox\"\n      aria-checked=\"${ctx.selected}\"\n      aria-label=\"${ctx.ariaLabel}\"\n      @click=\"${(): void => ctx._handleToggle()}\"\n      @keydown=\"${(e: KeyboardEvent): void => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          ctx._handleToggle();\n        }\n      }}\"\n    >\n      <slot name=\"icon\"></slot>\n      <slot></slot>\n    </button>`;\n}\n\n/* ── Familia INPUT (removable) ── */\nfunction inputChip(ctx: LibChip): TemplateResult {\n  return html`\n    <span class=\"chip-input\" part=\"chip\">\n      <slot name=\"avatar\"></slot>\n      <slot name=\"icon\"></slot>\n      <slot></slot>\n      <button\n        class=\"chip-remove\"\n        part=\"remove\"\n        type=\"button\"\n        aria-label=\"Eliminar ${ctx.ariaLabel || ''}\"\n        @click=\"${(e: MouseEvent): void => ctx._handleRemove(e)}\"\n      >\n        ${removeSvg}\n      </button>\n    </span>`;\n}\n\nexport function chipTemplate(ctx: LibChip): TemplateResult {\n  if (ctx.kind === 'toggle') return toggleChip(ctx);\n  if (ctx.kind === 'input')  return inputChip(ctx);\n  return staticChip(/*ctx*/);\n}"],"names":[],"mappings":";AAIA,MAAM,YAA4B;AAAA;AAAA;AAAA;AAMlC,SAAS,aAA6C;AACpD,SAAO;AAAA;AAAA;AAAA;AAAA;AAKT;AAGA,SAAS,WAAW,KAA8B;AAChD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKa,IAAI,QAAQ;AAAA,oBACd,IAAI,SAAS;AAAA,gBACjB,MAAY,IAAI,eAAe;AAAA,kBAC7B,CAAC,MAA2B;AACtC,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAA;AACF,UAAI,cAAA;AAAA,IACN;AAAA,EACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAKP;AAGA,SAAS,UAAU,KAA8B;AAC/C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BASsB,IAAI,aAAa,EAAE;AAAA,kBAChC,CAAC,MAAwB,IAAI,cAAc,CAAC,CAAC;AAAA;AAAA,UAErD,SAAS;AAAA;AAAA;AAGnB;AAEO,SAAS,aAAa,KAA8B;AACzD,MAAI,IAAI,SAAS,SAAU,QAAO,WAAW,GAAG;AAChD,MAAI,IAAI,SAAS,QAAU,QAAO,UAAU,GAAG;AAC/C,SAAO;AAAA;AAAA,EAAA;AACT;"}