@shibui-ui/ui 1.25.1 → 1.26.1

package/dist/index227.js

@@ -1,100 +1,103 @@
-import { nothing, html } from "lit";
-function selectTemplate(props) {
-  const {
-    label,
-    placeholder,
-    hint,
-    errorMessage,
-    required,
-    optional,
-    open,
-    error,
-    selectedLabel,
-    hasSelection,
-    multi,
-    selectedCount,
-    searchable,
-    searchQuery,
-    visibleCount,
-    onTriggerClick,
-    onSearchInput,
-    onConfirm
-  } = props;
-  const labelTpl = label ? html`
-        <label class="sel-label">
-          ${label}
-          ${required ? html`<span class="sel-label-req" aria-hidden="true">*</span>` : nothing}
-          ${optional ? html`<span class="sel-label-opt">(opcional)</span>` : nothing}
-        </label>` : nothing;
-  const hintTpl = error && errorMessage ? html`<span class="sel-hint is-error">${errorMessage}</span>` : hint ? html`<span class="sel-hint">${hint}</span>` : nothing;
-  const triggerValueTpl = multi ? selectedCount > 0 ? html`
-          <span class="sel-trigger-value">
-            ${selectedCount} seleccionada${selectedCount !== 1 ? "s" : ""}
-            <span class="sel-trigger-count">${selectedCount}</span>
-          </span>` : html`<span class="sel-trigger-value is-placeholder">${placeholder}</span>` : hasSelection ? html`<span class="sel-trigger-value">${selectedLabel}</span>` : html`<span class="sel-trigger-value is-placeholder">${placeholder}</span>`;
-  const searchTpl = searchable ? html`
-        <div class="sel-panel-search">
-          <span class="sel-panel-search-icon" aria-hidden="true"></span>
-          <input
-            type="text"
-            placeholder="Buscar…"
-            .value="${searchQuery}"
-            @input="${onSearchInput}"
-            autocomplete="off"
-            aria-label="Buscar opciones"
-          >
-        </div>` : nothing;
-  const footerTpl = multi ? html`
-        <div class="sel-panel-footer">
-          <span class="sel-panel-footer-text">
-            ${selectedCount} seleccionada${selectedCount !== 1 ? "s" : ""}
-          </span>
-          <button
-            class="sel-panel-footer-btn"
-            type="button"
-            @click="${onConfirm}"
-          >Confirmar</button>
-        </div>` : nothing;
-  const emptyTpl = searchable && searchQuery && visibleCount === 0 ? html`<div class="sel-panel-empty">Sin resultados</div>` : nothing;
+import { html, nothing } from "lit";
+import { classMap as e } from "./index352.js";
+function renderSep(separator) {
+  if (separator === "chevron") {
+    return html`
+      <span class="bc-sep" aria-hidden="true">
+        <lib-icon name="caret-right" size="xs"></lib-icon>
+      </span>
+    `;
+  }
+  return html`<span class="bc-sep" aria-hidden="true"></span>`;
+}
+function renderIcon(icon) {
+  if (!icon) return nothing;
+  return html`<span class="bc-icon"><lib-icon name="${icon}" size="xs"></lib-icon></span>`;
+}
+function renderLink(item, index, separator, onNavigate) {
+  return html`
+    <li class="bc-item">
+      <a
+        class="bc-link"
+        href="${item.href ?? "#"}"
+        @click="${(e2) => {
+    e2.preventDefault();
+    onNavigate(item, index);
+  }}"
+      >
+        ${renderIcon(item.icon)}
+        ${item.label ? html`${item.label}` : nothing}
+      </a>
+      ${renderSep(separator)}
+    </li>
+  `;
+}
+function renderCurrent(item) {
+  return html`
+    <li class="bc-item">
+      <span class="bc-current" aria-current="page">
+        ${renderIcon(item.icon)}
+        ${item.label ? html`${item.label}` : nothing}
+      </span>
+    </li>
+  `;
+}
+function renderEllipsis(separator, onExpand) {
+  return html`
+    <li class="bc-item">
+      <button
+        class="bc-ellipsis"
+        aria-label="Mostrar ruta completa"
+        @click="${onExpand}"
+      >…</button>
+      ${renderSep(separator)}
+    </li>
+  `;
+}
+function renderItems(p) {
+  const { items, separator, maxVisible, expanded, onExpand, onNavigate } = p;
+  const shouldCollapse = maxVisible > 0 && items.length > maxVisible && !expanded;
+  if (shouldCollapse) {
+    const first = items[0];
+    const last = items[items.length - 1];
+    if (!first || !last) return [];
+    return [
+      renderLink(first, 0, separator, onNavigate),
+      renderEllipsis(separator, onExpand),
+      last.href ? renderLink(last, items.length - 1, separator, onNavigate) : renderCurrent(last)
+    ];
+  }
+  return items.map((item, i) => {
+    const isLast = i === items.length - 1;
+    if (isLast || !item.href) return renderCurrent(item);
+    return renderLink(item, i, separator, onNavigate);
+  });
+}
+function breadcrumbTemplate(p) {
+  const bcClasses = {
+    "bc": true,
+    "bc-slash": p.separator === "slash",
+    "bc-chevron": p.separator === "chevron",
+    "bc-dot": p.separator === "dot",
+    "bc-line": p.separator === "line",
+    "bc-sm": p.size === "sm",
+    "bc-lg": p.size === "lg",
+    "bc-filled": p.surface === "filled",
+    "bc-pill": p.surface === "pill",
+    "bc-kaki": p.accent === "kaki",
+    "bc-celadon": p.accent === "celadon",
+    "bc-bold": p.accent === "bold",
+    "bc-dark": p.dark
+  };
   return html`
-    <div class="sel-field">
-
-      ${labelTpl}
-
-      <div class="sel-custom">
-        <button
-          class="sel-trigger"
-          type="button"
-          aria-haspopup="listbox"
-          aria-expanded="${open}"
-          @click="${onTriggerClick}"
-        >
-          ${triggerValueTpl}
-          <span class="sel-trigger-chevron" aria-hidden="true"></span>
-        </button>
-
-        <div
-          class="sel-panel"
-          role="listbox"
-          aria-multiselectable="${multi}"
-        >
-          ${searchTpl}
-
-          <div class="sel-panel-list">
-            <slot></slot>
-            ${emptyTpl}
-          </div>
-
-          ${footerTpl}
-        </div>
-      </div>
-
-      ${hintTpl}
-
-    </div>
+    <nav class="${e(bcClasses)}" aria-label="breadcrumb">
+      <ol class="bc-list">
+        ${renderItems(p)}
+      </ol>
+    </nav>
   `;
 }
 export {
-  selectTemplate
+  breadcrumbTemplate
 };
 //# sourceMappingURL=index227.js.map

package/dist/index227.js.map

@@ -1 +1 @@
-{"version":3,"file":"index227.js","sources":["../src/components/molecules/select/lib-select.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { SelectSize, SelectVariant } from './lib-select.types';\n\nexport interface SelectTemplateProps {\n  /* Field meta */\n  label:        string;\n  placeholder:  string;\n  hint:         string;\n  errorMessage: string;\n  required:     boolean;\n  optional:     boolean;\n\n  /* State */\n  open:         boolean;\n  disabled:     boolean;\n  error:        boolean;\n  dark:         boolean;\n\n  /* Appearance */\n  size:         SelectSize;\n  variant:      SelectVariant;\n\n  /* Single selection */\n  selectedLabel:       string;\n  hasSelection:        boolean;\n\n  /* Multi selection */\n  multi:               boolean;\n  selectedCount:       number;\n\n  /* Searchable */\n  searchable:          boolean;\n  searchQuery:         string;\n  visibleCount:        number;\n\n  /* Handlers */\n  onTriggerClick:      (e: Event) => void;\n  onSearchInput:       (e: Event) => void;\n  onConfirm:           () => void;\n}\n\n/**\n * Template para lib-select.\n * Las opciones son elementos slotted — lib-select-option hijos en el light DOM.\n */\nexport function selectTemplate(props: SelectTemplateProps): TemplateResult {\n  const {\n    label, placeholder, hint, errorMessage,\n    required, optional,\n    open, error,\n    selectedLabel, hasSelection,\n    multi, selectedCount,\n    searchable, searchQuery, visibleCount,\n    onTriggerClick, onSearchInput, onConfirm,\n  } = props;\n\n  /* ── Label section ── */\n  const labelTpl = label\n    ? html`\n        <label class=\"sel-label\">\n          ${label}\n          ${required ? html`<span class=\"sel-label-req\" aria-hidden=\"true\">*</span>` : nothing}\n          ${optional ? html`<span class=\"sel-label-opt\">(opcional)</span>` : nothing}\n        </label>`\n    : nothing;\n\n  /* ── Hint / error message ── */\n  const hintTpl = error && errorMessage\n    ? html`<span class=\"sel-hint is-error\">${errorMessage}</span>`\n    : hint\n      ? html`<span class=\"sel-hint\">${hint}</span>`\n      : nothing;\n\n  /* ── Trigger value display ── */\n  const triggerValueTpl = multi\n    ? selectedCount > 0\n      ? html`\n          <span class=\"sel-trigger-value\">\n            ${selectedCount} seleccionada${selectedCount !== 1 ? 's' : ''}\n            <span class=\"sel-trigger-count\">${selectedCount}</span>\n          </span>`\n      : html`<span class=\"sel-trigger-value is-placeholder\">${placeholder}</span>`\n    : hasSelection\n      ? html`<span class=\"sel-trigger-value\">${selectedLabel}</span>`\n      : html`<span class=\"sel-trigger-value is-placeholder\">${placeholder}</span>`;\n\n  /* ── Search row ── */\n  const searchTpl = searchable\n    ? html`\n        <div class=\"sel-panel-search\">\n          <span class=\"sel-panel-search-icon\" aria-hidden=\"true\"></span>\n          <input\n            type=\"text\"\n            placeholder=\"Buscar…\"\n            .value=\"${searchQuery}\"\n            @input=\"${onSearchInput}\"\n            autocomplete=\"off\"\n            aria-label=\"Buscar opciones\"\n          >\n        </div>`\n    : nothing;\n\n  /* ── Panel footer for multi ── */\n  const footerTpl = multi\n    ? html`\n        <div class=\"sel-panel-footer\">\n          <span class=\"sel-panel-footer-text\">\n            ${selectedCount} seleccionada${selectedCount !== 1 ? 's' : ''}\n          </span>\n          <button\n            class=\"sel-panel-footer-btn\"\n            type=\"button\"\n            @click=\"${onConfirm}\"\n          >Confirmar</button>\n        </div>`\n    : nothing;\n\n  /* ── Empty state when search yields 0 results ── */\n  const emptyTpl = searchable && searchQuery && visibleCount === 0\n    ? html`<div class=\"sel-panel-empty\">Sin resultados</div>`\n    : nothing;\n\n  return html`\n    <div class=\"sel-field\">\n\n      ${labelTpl}\n\n      <div class=\"sel-custom\">\n        <button\n          class=\"sel-trigger\"\n          type=\"button\"\n          aria-haspopup=\"listbox\"\n          aria-expanded=\"${open}\"\n          @click=\"${onTriggerClick}\"\n        >\n          ${triggerValueTpl}\n          <span class=\"sel-trigger-chevron\" aria-hidden=\"true\"></span>\n        </button>\n\n        <div\n          class=\"sel-panel\"\n          role=\"listbox\"\n          aria-multiselectable=\"${multi}\"\n        >\n          ${searchTpl}\n\n          <div class=\"sel-panel-list\">\n            <slot></slot>\n            ${emptyTpl}\n          </div>\n\n          ${footerTpl}\n        </div>\n      </div>\n\n      ${hintTpl}\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AA6CO,SAAS,eAAe,OAA4C;AACzE,QAAM;AAAA,IACJ;AAAA,IAAO;AAAA,IAAa;AAAA,IAAM;AAAA,IAC1B;AAAA,IAAU;AAAA,IACV;AAAA,IAAM;AAAA,IACN;AAAA,IAAe;AAAA,IACf;AAAA,IAAO;AAAA,IACP;AAAA,IAAY;AAAA,IAAa;AAAA,IACzB;AAAA,IAAgB;AAAA,IAAe;AAAA,EAAA,IAC7B;AAGJ,QAAM,WAAW,QACb;AAAA;AAAA,YAEM,KAAK;AAAA,YACL,WAAW,gEAAgE,OAAO;AAAA,YAClF,WAAW,sDAAsD,OAAO;AAAA,oBAE9E;AAGJ,QAAM,UAAU,SAAS,eACrB,uCAAuC,YAAY,YACnD,OACE,8BAA8B,IAAI,YAClC;AAGN,QAAM,kBAAkB,QACpB,gBAAgB,IACd;AAAA;AAAA,cAEM,aAAa,gBAAgB,kBAAkB,IAAI,MAAM,EAAE;AAAA,8CAC3B,aAAa;AAAA,qBAEnD,sDAAsD,WAAW,YACnE,eACE,uCAAuC,aAAa,YACpD,sDAAsD,WAAW;AAGvE,QAAM,YAAY,aACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMgB,WAAW;AAAA,sBACX,aAAa;AAAA;AAAA;AAAA;AAAA,kBAK7B;AAGJ,QAAM,YAAY,QACd;AAAA;AAAA;AAAA,cAGQ,aAAa,gBAAgB,kBAAkB,IAAI,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKnD,SAAS;AAAA;AAAA,kBAGzB;AAGJ,QAAM,WAAW,cAAc,eAAe,iBAAiB,IAC3D,0DACA;AAEJ,SAAO;AAAA;AAAA;AAAA,QAGD,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAOW,IAAI;AAAA,oBACX,cAAc;AAAA;AAAA,YAEtB,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAOO,KAAK;AAAA;AAAA,YAE3B,SAAS;AAAA;AAAA;AAAA;AAAA,cAIP,QAAQ;AAAA;AAAA;AAAA,YAGV,SAAS;AAAA;AAAA;AAAA;AAAA,QAIb,OAAO;AAAA;AAAA;AAAA;AAIf;"}
+{"version":3,"file":"index227.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/index228.js

@@ -1,5 +1,5 @@
-const selectCss = `@layer tokens,reset,components;@layer reset{:host{display:block;position:relative;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.sel-field{display:flex;flex-direction:column;gap:var(--lib-space-xs);width:100%}.sel-label{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-secondary);display:flex;align-items:center;gap:var(--lib-space-xs);-webkit-user-select:none;user-select:none}.sel-label-req{color:var(--color-error);font-size:14px;line-height:1}.sel-label-opt{font-size:9px;letter-spacing:var(--tracking-wide);color:var(--text-muted);text-transform:uppercase}.sel-hint{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}.sel-hint.is-error{color:var(--color-error);display:flex;align-items:center;gap:var(--lib-space-xs)}.sel-hint.is-ok{color:var(--color-celadon-500);display:flex;align-items:center;gap:var(--lib-space-xs)}.sel-custom{position:relative;width:100%}.sel-trigger{display:flex;align-items:center;gap:var(--lib-space-sm);width:100%;padding:var(--lib-space-sm) var(--lib-space-md);font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-none);cursor:pointer;text-align:left;outline:none;transition:border-color var(--duration-base) var(--ease-default),background var(--duration-base) var(--ease-default),box-shadow var(--duration-base) var(--ease-default);-webkit-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.sel-trigger:hover:not([disabled]){background:var(--bg-surface);border-color:var(--border-strong)}.sel-trigger:focus-visible{border-color:var(--color-washi-800);box-shadow:0 0 0 3px #1a140e14;outline:none}:host([open]) .sel-trigger{border-color:var(--color-washi-800);box-shadow:0 0 0 3px #1a140e14}:host([disabled]) .sel-trigger{opacity:.38;cursor:not-allowed;pointer-events:none;background:var(--bg-surface)}:host([error]) .sel-trigger{border-color:var(--color-error-border, #C44030);background:var(--color-error-light, #F5DDD9);color:var(--color-error)}:host([error][open]) .sel-trigger{box-shadow:0 0 0 3px #8c2a1a1f}.sel-trigger-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:var(--lib-space-sm);line-height:var(--leading-snug)}.sel-trigger-value.is-placeholder{color:var(--text-muted)}.sel-trigger-count{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);background:var(--color-washi-900);color:var(--color-washi-50);padding:1px 6px;border-radius:var(--radius-full);flex-shrink:0}.sel-trigger-chevron{flex-shrink:0;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--text-muted);transition:transform var(--duration-slow) var(--ease-default);pointer-events:none}:host([open]) .sel-trigger-chevron{transform:rotate(180deg);border-top-color:var(--text-primary)}:host([variant="filled"]) .sel-trigger{background:var(--bg-surface);border-color:transparent}:host([variant="filled"]) .sel-trigger:hover:not([disabled]){background:var(--color-washi-200);border-color:transparent}:host([variant="filled"][open]) .sel-trigger{background:var(--bg-elevated);border-color:var(--color-washi-800)}:host([variant="ghost"]) .sel-trigger{background:transparent;border:none;border-bottom:1px solid var(--border-default);border-radius:0;padding-left:0}:host([variant="ghost"]) .sel-trigger:hover:not([disabled]){background:transparent;border-bottom-color:var(--border-strong)}:host([variant="ghost"][open]) .sel-trigger{box-shadow:0 1px 0 0 var(--color-washi-800);border-bottom-color:var(--color-washi-800)}:host([size="sm"]) .sel-trigger{padding:var(--lib-space-xs) var(--lib-space-sm);font-size:var(--text-xs)}:host([size="sm"]) .sel-label{font-size:10px}:host([size="lg"]) .sel-trigger{padding:var(--lib-space-md) var(--lib-space-lg);font-size:var(--text-base)}.sel-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;min-width:100%;z-index:var(--z-toast, 300);background:var(--bg-elevated);border:1px solid var(--border-default);box-shadow:0 8px 24px #1a140e1f,0 2px 6px #1a140e12;opacity:0;transform:translateY(-6px) scaleY(.97);transform-origin:top center;pointer-events:none;transition:opacity .16s var(--ease-default),transform .2s var(--ease-default)}:host([open]) .sel-panel{opacity:1;transform:translateY(0) scaleY(1);pointer-events:auto}.sel-panel-search{display:flex;align-items:center;gap:var(--lib-space-sm);padding:var(--lib-space-sm) var(--lib-space-md);border-bottom:1px solid var(--border-subtle);color:var(--text-muted)}.sel-panel-search-icon{font-size:14px;flex-shrink:0;display:flex;align-items:center;color:var(--text-muted)}.sel-panel-search-icon:before{content:"";display:block;width:14px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 256 256'%3E%3Cpath fill='%239A8878' d='M229.66 218.34l-50.07-50.07a88.19 88.19 0 1 0-11.31 11.31l50.06 50.07a8 8 0 0 0 11.32-11.31ZM40 112a72 72 0 1 1 72 72 72.08 72.08 0 0 1-72-72Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain}.sel-panel-search input{flex:1;font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-primary);background:transparent;border:none;outline:none}.sel-panel-search input::placeholder{color:var(--text-muted)}.sel-panel-list{max-height:240px;overflow-y:auto;overscroll-behavior:contain}.sel-panel-list::-webkit-scrollbar{width:4px}.sel-panel-list::-webkit-scrollbar-track{background:transparent}.sel-panel-list::-webkit-scrollbar-thumb{background:var(--color-washi-300);border-radius:2px}.sel-group-label{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);padding:var(--lib-space-sm) var(--lib-space-md) var(--lib-space-xs)}.sel-sep{height:1px;background:var(--border-subtle);margin:var(--lib-space-xs) 0}.sel-option{display:flex;align-items:center;gap:var(--lib-space-sm);padding:var(--lib-space-sm) var(--lib-space-md);cursor:pointer;transition:background var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default);position:relative}.sel-option:hover{background:var(--bg-surface)}.sel-option.is-selected{background:var(--color-washi-100)}.sel-option.is-focused{background:var(--bg-surface)}.sel-option.is-disabled{opacity:.38;cursor:not-allowed;pointer-events:none}.sel-option.is-hidden{display:none}.sel-option-icon{font-size:16px;color:var(--text-muted);flex-shrink:0;display:flex}.sel-option:hover .sel-option-icon,.sel-option.is-selected .sel-option-icon{color:var(--text-secondary)}.sel-option-body{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.sel-option-label{font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-snug)}.sel-option-desc{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}.sel-option:hover .sel-option-label,.sel-option.is-selected .sel-option-label{color:var(--text-primary)}.sel-dot{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}.sel-option-check{margin-left:auto;flex-shrink:0;width:14px;height:14px;opacity:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 256 256'%3E%3Cpath fill='%23221C16' d='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain}.sel-option.is-selected .sel-option-check{opacity:1}.sel-panel-footer{padding:var(--lib-space-sm) var(--lib-space-md);border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:var(--lib-space-sm)}.sel-panel-footer-text{font-family:var(--lib-font-mono);font-size:10px;color:var(--text-muted);letter-spacing:var(--tracking-wide)}.sel-panel-footer-btn{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);text-transform:uppercase;background:var(--color-washi-900);color:var(--color-washi-50);border:none;padding:var(--lib-space-xs) var(--lib-space-md);cursor:pointer;transition:background var(--duration-base) var(--ease-default)}.sel-panel-footer-btn:hover{background:var(--color-washi-800)}.sel-panel-empty{padding:var(--lib-space-lg) var(--lib-space-md);text-align:center;font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);color:var(--text-muted);text-transform:uppercase}:host([dark]) .sel-label{color:#574a43}:host([dark]) .sel-hint{color:#3c302a}:host([dark]) .sel-trigger{background:#100704;border-color:#231813;color:#998c84}:host([dark]) .sel-trigger:hover:not([disabled]){background:#150a06;border-color:#372b26}:host([dark][open]) .sel-trigger{border-color:#6d6059;box-shadow:0 0 0 3px #ffffff0d}:host([dark]) .sel-trigger-chevron{border-top-color:#433831}:host([dark][open]) .sel-trigger-chevron{border-top-color:#998c84}:host([dark]) .sel-trigger-value.is-placeholder{color:#3c302a}:host([dark]) .sel-panel{background:#0c0402;border-color:#1e130e}:host([dark]) .sel-panel-search{border-color:#190f0a}:host([dark]) .sel-panel-search input{color:#a99b93}:host([dark]) .sel-group-label{color:#312620}:host([dark]) .sel-sep{background:#190f0a}:host([dark]) .sel-option:hover{background:#150a06}:host([dark]) .sel-option.is-selected{background:#190f0a}:host([dark]) .sel-option-label{color:#7b6f67}:host([dark]) .sel-option:hover .sel-option-label{color:#b9aba2}:host([dark]) .sel-option.is-selected .sel-option-label{color:#c8bbb2}:host([dark]) .sel-option-desc{color:#362b25}:host([dark]) .sel-option-check{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 256 256'%3E%3Cpath fill='%23FAF7F4' d='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E")}:host([dark]) .sel-panel-footer{border-color:#190f0a}:host([dark]) .sel-panel-footer-text{color:#362b25}}`;
+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 {
-  selectCss as default
+  componentCss as default
 };
 //# sourceMappingURL=index228.js.map

package/dist/index229.js

@@ -1,74 +1,5 @@
-import { nothing, html } from "lit";
-import { unsafeHTML as o } from "./index352.js";
-function renderBadge(item) {
-  return item.badge != null ? html`<span class="tb-badge">${item.badge}</span>` : nothing;
-}
-function renderTab(item, context) {
-  const isActive = context.active === item.id;
-  const isDisabled = item.disabled === true;
-  return html`
-    ${item.group ? html`<div class="tb-label">${item.group}</div>` : nothing}
-    <button
-      id="tab-${item.id}"
-      class="tb-tab ${isActive ? "is-active" : ""} ${isDisabled ? "is-disabled" : ""}"
-      role="tab"
-      aria-selected="${isActive}"
-      aria-controls="panel-${item.id}"
-      tabindex="${isActive ? "0" : "-1"}"
-      data-id="${item.id}"
-      data-label="${item.label}"
-      ?disabled="${isDisabled}"
-      @click="${(e) => context._handleClick(e)}"
-    >
-      ${item.icon ? html`${o(item.icon)}` : nothing}
-      ${item.label}
-      ${renderBadge(item)}
-    </button>
-  `;
-}
-function renderPanel(item, context) {
-  const isActive = context.active === item.id;
-  return html`
-    <div
-      class="tb-panel ${isActive ? "is-active" : ""}"
-      role="tabpanel"
-      id="panel-${item.id}"
-      aria-labelledby="tab-${item.id}"
-    >
-      <slot name="${item.id}"></slot>
-    </div>
-  `;
-}
-function tabsTemplate(context) {
-  const tabs = context.items ?? [];
-  const showInk = !["pill", "card", "outline", "vertical"].includes(context.variant);
-  return html`
-    <div class="tb" part="root">
-
-      <!-- Tab list -->
-      <div
-        class="tb-list"
-        part="list"
-        role="tablist"
-        aria-label="${context.ariaLabel || nothing}"
-        
-        @keydown="${(e) => context._handleKey(e)}"
-      >
-        ${tabs.map((item) => renderTab(item, context))}
-      </div>
-
-      <!-- Ink bar (posicionada por JS, solo para variantes underline) -->
-      ${showInk ? html`<div class="tb-ink" part="ink" style="left:${context._inkLeft}px;width:${context._inkWidth}px;"></div>` : nothing}
-
-      <!-- Panels -->
-      <div class="tb-panels" part="panels">
-        ${tabs.map((item) => renderPanel(item, context))}
-      </div>
-
-    </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 {
-  tabsTemplate
+  groupCss as default
 };
 //# sourceMappingURL=index229.js.map

package/dist/index229.js.map

@@ -1 +1 @@
-{"version":3,"file":"index229.js","sources":["../src/components/molecules/tabs/lib-tabs.html.ts"],"sourcesContent":["import { html, TemplateResult, nothing } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport type { LibTabs } from './lib-tabs.component';\nimport type { TabItem, TabsVariant } from './lib-tabs.types';\n\n/* ── Badge ── */\nfunction renderBadge(item: TabItem): TemplateResult | typeof nothing {\n  return item.badge != null\n    ? html`<span class=\"tb-badge\">${item.badge}</span>`\n    : nothing;\n}\n\n/* ── Tab button ── */\nfunction renderTab(item: TabItem, context: LibTabs): TemplateResult {\n  const isActive   = context.active === item.id;\n  const isDisabled = item.disabled === true;\n\n  return html`\n    ${item.group\n      ? html`<div class=\"tb-label\">${item.group}</div>`\n      : nothing}\n    <button\n      id=\"tab-${item.id}\"\n      class=\"tb-tab ${isActive ? 'is-active' : ''} ${isDisabled ? 'is-disabled' : ''}\"\n      role=\"tab\"\n      aria-selected=\"${isActive}\"\n      aria-controls=\"panel-${item.id}\"\n      tabindex=\"${isActive ? '0' : '-1'}\"\n      data-id=\"${item.id}\"\n      data-label=\"${item.label}\"\n      ?disabled=\"${isDisabled}\"\n      @click=\"${(e:Event):void=> context._handleClick(e as CustomEvent)}\"\n    >\n      ${item.icon ? html`${unsafeHTML(item.icon)}` : nothing}\n      ${item.label}\n      ${renderBadge(item)}\n    </button>\n  `;\n}\n\n/* ── Panel ── */\nfunction renderPanel(item: TabItem, context: LibTabs): TemplateResult {\n  const isActive = context.active === item.id;\n  return html`\n    <div\n      class=\"tb-panel ${isActive ? 'is-active' : ''}\"\n      role=\"tabpanel\"\n      id=\"panel-${item.id}\"\n      aria-labelledby=\"tab-${item.id}\"\n    >\n      <slot name=\"${item.id}\"></slot>\n    </div>\n  `;\n}\n\n/* ── Main template ── */\nexport function tabsTemplate(context: LibTabs): TemplateResult {\n  const tabs = (context.items ?? []) as TabItem[];\n\n  /* La ink bar solo aplica en underline (y sus modificadores kintsugi/glitch) */\n  const showInk = !(['pill', 'card', 'outline', 'vertical'] as TabsVariant[]).includes(context.variant);\n\n  return html`\n    <div class=\"tb\" part=\"root\">\n\n      <!-- Tab list -->\n      <div\n        class=\"tb-list\"\n        part=\"list\"\n        role=\"tablist\"\n        aria-label=\"${context.ariaLabel || nothing}\"\n        \n        @keydown=\"${(e: KeyboardEvent): void => context._handleKey(e)}\"\n      >\n        ${tabs.map(item => renderTab(item, context))}\n      </div>\n\n      <!-- Ink bar (posicionada por JS, solo para variantes underline) -->\n      ${showInk\n        ? html`<div class=\"tb-ink\" part=\"ink\" style=\"left:${context._inkLeft}px;width:${context._inkWidth}px;\"></div>`\n        : nothing}\n\n      <!-- Panels -->\n      <div class=\"tb-panels\" part=\"panels\">\n        ${tabs.map(item => renderPanel(item, context))}\n      </div>\n\n    </div>\n  `;\n}"],"names":["unsafeHTML"],"mappings":";;AAMA,SAAS,YAAY,MAAgD;AACnE,SAAO,KAAK,SAAS,OACjB,8BAA8B,KAAK,KAAK,YACxC;AACN;AAGA,SAAS,UAAU,MAAe,SAAkC;AAClE,QAAM,WAAa,QAAQ,WAAW,KAAK;AAC3C,QAAM,aAAa,KAAK,aAAa;AAErC,SAAO;AAAA,MACH,KAAK,QACH,6BAA6B,KAAK,KAAK,WACvC,OAAO;AAAA;AAAA,gBAEC,KAAK,EAAE;AAAA,sBACD,WAAW,cAAc,EAAE,IAAI,aAAa,gBAAgB,EAAE;AAAA;AAAA,uBAE7D,QAAQ;AAAA,6BACF,KAAK,EAAE;AAAA,kBAClB,WAAW,MAAM,IAAI;AAAA,iBACtB,KAAK,EAAE;AAAA,oBACJ,KAAK,KAAK;AAAA,mBACX,UAAU;AAAA,gBACb,CAAC,MAAgB,QAAQ,aAAa,CAAgB,CAAC;AAAA;AAAA,QAE/D,KAAK,OAAO,OAAOA,EAAW,KAAK,IAAI,CAAC,KAAK,OAAO;AAAA,QACpD,KAAK,KAAK;AAAA,QACV,YAAY,IAAI,CAAC;AAAA;AAAA;AAGzB;AAGA,SAAS,YAAY,MAAe,SAAkC;AACpE,QAAM,WAAW,QAAQ,WAAW,KAAK;AACzC,SAAO;AAAA;AAAA,wBAEe,WAAW,cAAc,EAAE;AAAA;AAAA,kBAEjC,KAAK,EAAE;AAAA,6BACI,KAAK,EAAE;AAAA;AAAA,oBAEhB,KAAK,EAAE;AAAA;AAAA;AAG3B;AAGO,SAAS,aAAa,SAAkC;AAC7D,QAAM,OAAQ,QAAQ,SAAS,CAAA;AAG/B,QAAM,UAAU,CAAE,CAAC,QAAQ,QAAQ,WAAW,UAAU,EAAoB,SAAS,QAAQ,OAAO;AAEpG,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQa,QAAQ,aAAa,OAAO;AAAA;AAAA,oBAE9B,CAAC,MAA2B,QAAQ,WAAW,CAAC,CAAC;AAAA;AAAA,UAE3D,KAAK,IAAI,CAAA,SAAQ,UAAU,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,QAI5C,UACE,kDAAkD,QAAQ,QAAQ,YAAY,QAAQ,SAAS,gBAC/F,OAAO;AAAA;AAAA;AAAA;AAAA,UAIP,KAAK,IAAI,CAAA,SAAQ,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAKtD;"}
+{"version":3,"file":"index229.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index230.js

@@ -1,5 +1,77 @@
-const tabsCss = '@layer tokens,reset,components;@layer reset{:host{display:block;position:relative}*,*:before,*:after{box-sizing:border-box}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer}}@layer components{.tb{position:relative}.tb-list{display:flex;align-items:flex-end;position:relative;gap:0}.tb-tab{position:relative;display:inline-flex;align-items:center;gap:var(--lib-space-xs);padding:var(--lib-space-md) var(--lib-space-xl);height:44px;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-washi-400);background:none;border:none;cursor:pointer;white-space:nowrap;transition:color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out);outline:none;flex-shrink:0;-webkit-user-select:none;user-select:none}.tb-tab:hover{color:var(--color-washi-700)}.tb-tab.is-active{color:var(--color-washi-900)}.tb-tab:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:-2px}.tb-tab.is-disabled{opacity:.35;pointer-events:none}.tb-tab svg{width:13px;height:13px;stroke:currentcolor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.tb-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;font-size:9px;font-family:var(--lib-font-mono);letter-spacing:0;background:var(--color-washi-200);color:var(--color-washi-600);border-radius:999px;transition:background var(--duration-base),color var(--duration-base)}.tb-tab.is-active .tb-badge{background:var(--color-kaki-500);color:#fff}.tb-label{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-washi-400);padding:0 var(--lib-space-xl) var(--lib-space-md)}.tb-label+.tb-label,.tb-label:not(:first-child){margin-top:var(--lib-space-2xl)}:host([size="sm"]) .tb-tab{height:36px;padding:var(--lib-space-xs) var(--lib-space-lg);font-size:10px}:host([size="lg"]) .tb-tab{height:52px;padding:var(--lib-space-lg) var(--lib-space-2xl);letter-spacing:.18em}.tb-panels{position:relative}.tb-panel{display:none}.tb-panel.is-active{display:block;animation:tb-in var(--duration-slow) var(--ease-out) both}@keyframes tb-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}:host([variant="underline"]) .tb-list{border-bottom:1px solid var(--color-washi-200);gap:var(--lib-space-xs)}:host([variant="underline"]) .tb-panels{padding-top:var(--lib-space-2xl)}:host([variant="underline"]) .tb-tab.is-active{color:var(--color-kaki-600)}.tb-ink{position:absolute;bottom:0;height:2px;background:var(--color-kaki-500);transition:left var(--duration-slow) var(--ease-bounce),width var(--duration-slow) var(--ease-bounce);pointer-events:none;z-index:2}:host([variant="underline"][color="celadon"]) .tb-tab.is-active{color:var(--color-celadon-500)}:host([variant="underline"][color="celadon"]) .tb-ink{background:var(--color-celadon-500)}:host([variant="underline"][color="celadon"]) .tb-tab.is-active .tb-badge{background:var(--color-celadon-500)}:host([variant="pill"]) .tb-list{gap:var(--lib-space-xs);padding:var(--lib-space-xs);background:var(--color-washi-100);border:1px solid var(--color-washi-200);display:inline-flex}:host([variant="pill"]) .tb-tab{border-radius:2px;height:36px;padding:var(--lib-space-xs) var(--lib-space-lg)}:host([variant="pill"]) .tb-tab.is-active{background:#fff;color:var(--color-washi-900);box-shadow:0 1px 4px #1a140e1a}:host([variant="pill"]) .tb-panels{padding-top:var(--lib-space-2xl)}:host([variant="pill"]) .tb-ink{display:none}:host([variant="pill"][color="kaki"]) .tb-tab.is-active{background:var(--color-kaki-500);color:#fff}:host([variant="pill"][color="kaki"]) .tb-tab.is-active .tb-badge{background:#ffffff4d;color:#fff}:host([variant="pill"][color="celadon"]) .tb-tab.is-active{background:var(--color-celadon-500);color:#fff}:host([variant="pill"][round]) .tb-list{border-radius:999px}:host([variant="pill"][round]) .tb-tab{border-radius:999px}:host([variant="card"]) .tb-list{gap:2px;align-items:flex-end}:host([variant="card"]) .tb-tab{border:1px solid transparent;border-bottom:none;background:var(--color-washi-100);color:var(--color-washi-400);height:40px;margin-bottom:-1px;padding:0 var(--lib-space-xl);border-radius:2px 2px 0 0}:host([variant="card"]) .tb-tab:hover{background:var(--color-washi-50);color:var(--color-washi-700)}:host([variant="card"]) .tb-tab.is-active{background:#fff;color:var(--color-washi-900);border-color:var(--color-washi-200);border-bottom-color:#fff;z-index:1;height:44px}:host([variant="card"]) .tb-panels{border:1px solid var(--color-washi-200);background:#fff;padding:var(--lib-space-2xl)}:host([variant="card"]) .tb-ink{display:none}:host([variant="outline"]) .tb-list{border-bottom:1px solid var(--color-washi-200);gap:var(--lib-space-xs)}:host([variant="outline"]) .tb-tab{border:1px solid transparent;border-bottom:none;margin-bottom:-1px}:host([variant="outline"]) .tb-tab.is-active{border-color:var(--color-washi-200);border-bottom-color:var(--color-washi-50);background:var(--color-washi-50);color:var(--color-washi-900)}:host([variant="outline"]) .tb-panels{padding-top:var(--lib-space-2xl)}:host([variant="outline"]) .tb-ink{display:none}:host([variant="vertical"]) .tb{display:grid;grid-template-columns:180px 1fr;gap:0;align-items:start}:host([variant="vertical"]) .tb-list{flex-direction:column;align-items:stretch;border-right:1px solid var(--color-washi-200);border-bottom:none;gap:0;padding:var(--lib-space-xs) 0;grid-column:1;grid-row:1}:host([variant="vertical"]) .tb-ink{display:none}:host([variant="vertical"]) .tb-panels{padding:var(--lib-space-xs) 0 var(--lib-space-xs) var(--lib-space-2xl);grid-column:2;grid-row:1}:host([variant="vertical"]) .tb-tab{height:auto;padding:var(--lib-space-md) var(--lib-space-xl);text-align:left;border-left:2px solid transparent;border-radius:0;justify-content:flex-start}:host([variant="vertical"]) .tb-tab:hover{border-left-color:var(--color-washi-300)}:host([variant="vertical"]) .tb-tab.is-active{border-left-color:var(--color-kaki-500);color:var(--color-kaki-600);background:var(--color-kaki-50)}:host([variant="vertical"]) .tb-panel.is-active{animation:tb-in-h var(--duration-slow) var(--ease-out) both}@keyframes tb-in-h{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:none}}:host([variant="vertical"]) .tb-label{padding:0 var(--lib-space-xl) var(--lib-space-md)}:host([dark]){background:var(--color-washi-950)}:host([dark]) .tb-tab{color:#faf7f440}:host([dark]) .tb-tab:hover{color:#faf7f499}:host([dark]) .tb-tab:focus-visible{outline-color:var(--color-kaki-400)}:host([dark]) .tb-badge{background:#ffffff1a;color:#faf7f466}:host([dark]) .tb-tab.is-active .tb-badge{background:var(--color-kaki-500);color:#fff}:host([dark]) .tb-panels{color:#faf7f499}:host([dark]) .tb-label{color:#faf7f42e}:host([dark][variant="underline"]) .tb-list{border-bottom-color:#ffffff14}:host([dark][variant="underline"]) .tb-tab.is-active{color:var(--color-kaki-400)}:host([dark][variant="underline"]) .tb-ink{background:var(--color-kaki-400)}:host([dark][variant="pill"]) .tb-list{background:#ffffff0a;border-color:#ffffff12}:host([dark][variant="pill"]) .tb-tab.is-active{background:#ffffff17;color:#faf7f4cc;box-shadow:0 1px 4px #0000004d}:host([dark][variant="pill"][color="kaki"]) .tb-tab.is-active{background:var(--color-kaki-500);color:#fff}:host([dark][variant="card"]) .tb-tab{background:#ffffff08;border-color:transparent}:host([dark][variant="card"]) .tb-tab.is-active{background:#ffffff12;border-color:#ffffff14;border-bottom-color:var(--color-washi-950);color:#faf7f4bf}:host([dark][variant="card"]) .tb-panels{background:#ffffff0a;border-color:#ffffff14}:host([dark][variant="vertical"]) .tb-list{border-right-color:#ffffff14}:host([dark][variant="vertical"]) .tb-tab.is-active{border-left-color:var(--color-kaki-500);color:var(--color-kaki-400);background:#b85a1e1a}@keyframes kintsugi-ink{0%{background-position:0% 0}to{background-position:200% 0}}:host([kintsugi][variant="underline"]) .tb-ink{background:linear-gradient(90deg,var(--color-kaki-600) 0%,var(--color-kaki-400) 25%,#F5D08A 50%,var(--color-kaki-400) 75%,var(--color-kaki-600) 100%);background-size:200% 100%;animation:kintsugi-ink 3s linear infinite}:host([kintsugi]) .tb-tab.is-active{color:var(--color-kaki-600)}:host([kintsugi]) .tb-tab.is-active .tb-badge{background:var(--color-kaki-500);color:#fff}:host([kintsugi][variant="pill"]) .tb-tab.is-active{background:linear-gradient(90deg,var(--color-kaki-600),var(--color-kaki-400),#F5D08A,var(--color-kaki-400),var(--color-kaki-600));background-size:200% 100%;animation:kintsugi-ink 3s linear infinite;color:#fff}:host([kintsugi][dark][variant="underline"]) .tb-ink{background:linear-gradient(90deg,#b85a1e66,#d97234b3,#f5d08ae6,#d97234b3,#b85a1e66);background-size:200% 100%;animation:kintsugi-ink 3.5s linear infinite}:host([kintsugi][dark]) .tb-tab.is-active{color:var(--color-kaki-400)}@keyframes tb-glitch-x{0%,88%,to{transform:translate(0)}89%{transform:translate(-2px)}90%{transform:translate(2px)}91%{transform:translate(0)}}@keyframes tb-glitch-r{0%,88%,to{opacity:0}89%{opacity:.6;transform:translate(-2px);clip-path:inset(20% 0 50% 0)}90%{opacity:.4;transform:translate(1px);clip-path:inset(55% 0 10% 0)}91%{opacity:0}}@keyframes tb-glitch-b{0%,88%,to{opacity:0}89%{opacity:.5;transform:translate(2px);clip-path:inset(50% 0 20% 0)}90%{opacity:.3;transform:translate(-1px);clip-path:inset(10% 0 60% 0)}91%{opacity:0}}@keyframes tb-glitch-flicker{0%,85%,to{opacity:1}89%{opacity:.7}89.5%{opacity:1}90%{opacity:.5}90.5%{opacity:1}}:host([glitch]) .tb-tab.is-active{animation:tb-glitch-x 6s steps(1) infinite,tb-glitch-flicker 6s steps(1) infinite;position:relative}:host([glitch]) .tb-tab.is-active:before,:host([glitch]) .tb-tab.is-active:after{content:attr(data-label);position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:inherit;letter-spacing:inherit;text-transform:uppercase;pointer-events:none;padding:inherit}:host([glitch]) .tb-tab.is-active:before{color:#d97234b3;animation:tb-glitch-r 6s steps(1) infinite}:host([glitch]) .tb-tab.is-active:after{color:#4e948299;animation:tb-glitch-b 6s steps(1) infinite;animation-delay:60ms}:host([glitch][variant="underline"]) .tb-ink{background:var(--color-washi-900);animation:tb-glitch-flicker 6s steps(1) infinite!important}:host([glitch][dark]) .tb-tab.is-active:before{color:#d97234cc}:host([glitch][dark]) .tb-tab.is-active:after{color:#4e9482b3}:host([glitch][dark][variant="underline"]) .tb-ink{background:#faf7f499}:host([scroll]) .tb-list{overflow:auto hidden;scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap}:host([scroll]) .tb-list::-webkit-scrollbar{display:none}:host([full]) .tb-list{display:grid;grid-auto-columns:1fr;grid-auto-flow:column}:host([full]) .tb-tab{justify-content:center}}';
+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 {
-  tabsCss as default
+  buttonGroupTemplate,
+  buttonSplitTemplate
 };
 //# sourceMappingURL=index230.js.map

package/dist/index230.js.map

@@ -1 +1 @@
-{"version":3,"file":"index230.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index230.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/index231.js

@@ -1,5 +1,77 @@
-const treeSelectCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{:host{display:block;position:relative}:host([disabled]){opacity:.38;pointer-events:none;cursor:not-allowed}.ts-wrap{position:relative;display:inline-flex;flex-direction:column;min-width:260px;width:100%}.ts-trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--lib-space-sm);padding:calc(var(--lib-spacing-unit) * 3) var(--lib-space-md);background:var(--bg-elevated);border:1px solid var(--border-default);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-base) var(--ease-default);border-radius:var(--lib-radius-md)}.ts-trigger:hover{border-color:var(--border-strong)}:host([open]) .ts-trigger{border-color:var(--color-washi-800);box-shadow:0 0 0 3px var(--color-ink-10)}.ts-trigger-label{font-family:var(--lib-font-body);font-size:var(--text-base);color:var(--text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ts-trigger-label.is-placeholder{color:var(--text-muted)}.ts-trigger-count{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);color:var(--bg-elevated);background:var(--color-kaki-500);padding:2px 6px;border-radius:var(--radius-full);flex-shrink:0;line-height:1.4}.ts-trigger-chevron{flex-shrink:0;color:var(--text-muted);transition:transform var(--duration-slow) var(--ease-out)}:host([open]) .ts-trigger-chevron{transform:rotate(180deg)}.ts-dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;min-width:260px;background:var(--bg-elevated);border:1px solid var(--border-default);box-shadow:var(--shadow-lg);z-index:var(--z-overlay);display:flex;flex-direction:column;max-height:340px;border-radius:var(--lib-radius-md);opacity:0;transform:translateY(-6px) scaleY(.97);transform-origin:top;pointer-events:none;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}:host([open]) .ts-dropdown{opacity:1;transform:none;pointer-events:auto}.ts-search-wrap{padding:calc(var(--lib-spacing-unit) * 3) var(--lib-space-md);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;gap:calc(var(--lib-spacing-unit) * 3);flex-shrink:0}.ts-search-icon{color:var(--text-muted);flex-shrink:0}.ts-search{flex:1;border:none;outline:none;background:transparent;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-primary)}.ts-search::placeholder{color:var(--text-muted)}.ts-tree{overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--color-washi-300) transparent}.ts-node{display:flex;flex-direction:column}.ts-node-row{display:flex;align-items:center;padding:var(--lib-space-sm) var(--lib-space-md);cursor:pointer;min-height:34px;transition:background var(--duration-fast);gap:0;position:relative}.ts-node-row:hover{background:var(--color-washi-100)}.ts-node-row.is-selected{background:var(--color-kaki-50)}.ts-node-row.is-selected:hover{background:var(--color-kaki-100)}.ts-indent{display:flex;align-items:stretch;flex-shrink:0}.ts-indent-unit{width:20px;position:relative;flex-shrink:0}.ts-indent-unit:before{content:"";position:absolute;left:9px;top:-50%;bottom:-50%;width:1px;background:var(--border-subtle)}.ts-indent-unit.ts-indent-no-line:before{display:none}.ts-indent-unit.ts-indent-last:after{content:"";position:absolute;left:9px;top:50%;width:11px;height:1px;background:var(--border-subtle)}.ts-indent-unit.ts-indent-last-child:before{bottom:50%}.ts-toggle{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-default);background:var(--bg-elevated);margin-right:var(--lib-space-sm);position:relative;cursor:pointer;transition:border-color var(--duration-fast),background var(--duration-fast)}.ts-toggle:hover{border-color:var(--border-strong);background:var(--color-washi-100)}.ts-toggle-icon{width:8px;height:8px;color:var(--text-muted);transition:transform var(--duration-slow) var(--ease-out);flex-shrink:0}.ts-node.is-expanded>.ts-node-row .ts-toggle-icon{transform:rotate(90deg)}.ts-toggle-spacer{width:18px;flex-shrink:0;margin-right:var(--lib-space-sm)}.ts-checkbox{width:14px;height:14px;flex-shrink:0;border:1px solid var(--border-default);background:var(--bg-elevated);margin-right:calc(var(--lib-spacing-unit) * 3);display:flex;align-items:center;justify-content:center;transition:border-color var(--duration-base),background var(--duration-base);position:relative;border-radius:var(--lib-radius-sm)}.ts-node-row.is-selected .ts-checkbox{background:var(--color-kaki-500);border-color:var(--color-kaki-500)}.ts-node-row.is-indeterminate .ts-checkbox{background:var(--bg-elevated);border-color:var(--color-kaki-400)}.ts-checkbox-check{display:none;width:8px;height:8px;color:var(--color-white);flex-shrink:0;stroke:var(--color-white)}.ts-node-row.is-selected .ts-checkbox-check{display:block}.ts-checkbox-dash{display:none;width:8px;height:1.5px;background:var(--color-kaki-400);flex-shrink:0}.ts-node-row.is-indeterminate .ts-checkbox-dash{display:block}:host(:not([multi])) .ts-checkbox{display:none}.ts-node-label{font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color var(--duration-fast)}.ts-node-row.is-selected .ts-node-label{color:var(--color-kaki-600)}.ts-node-label mark{background:var(--color-kaki-100);color:var(--color-kaki-600);border-radius:1px;padding:0 1px}.ts-node-badge{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);margin-left:var(--lib-space-sm);flex-shrink:0}.ts-node-row.is-selected .ts-node-badge{color:var(--color-kaki-400)}.ts-children{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--duration-slow) var(--ease-out)}.ts-node.is-expanded>.ts-children{grid-template-rows:1fr}.ts-children-inner{overflow:hidden}.ts-footer{border-top:1px solid var(--border-subtle);padding:calc(var(--lib-spacing-unit) * 3) var(--lib-space-md);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--bg-surface)}.ts-footer-info{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}.ts-footer-actions{display:flex;gap:var(--lib-space-md)}.ts-btn{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);text-transform:uppercase;border:none;background:transparent;cursor:pointer;padding:var(--lib-space-xs) var(--lib-space-sm);color:var(--text-muted);transition:color var(--duration-base)}.ts-btn:hover{color:var(--text-primary)}.ts-btn-confirm{background:var(--color-washi-900);color:var(--color-washi-50);padding:var(--lib-space-xs) var(--lib-space-md);transition:background var(--duration-base)}.ts-btn-confirm:hover{background:var(--color-kaki-500)}.ts-empty{padding:var(--lib-space-xl) var(--lib-space-md);text-align:center;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted)}.ts-tags{display:flex;flex-wrap:wrap;gap:var(--lib-space-sm);margin-top:calc(var(--lib-spacing-unit) * 3);min-height:26px}.ts-tag{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:2px calc(var(--lib-spacing-unit) * 3);background:var(--color-kaki-50);border:1px solid var(--color-kaki-200);color:var(--color-kaki-600);display:flex;align-items:center;gap:var(--lib-space-sm);cursor:default;transition:background var(--duration-fast)}.ts-tag:hover{background:var(--color-kaki-100)}.ts-tag-remove{cursor:pointer;color:var(--color-kaki-400);line-height:1;font-size:11px;transition:color var(--duration-fast)}.ts-tag-remove:hover{color:var(--color-kaki-600)}:host([inline]){display:flex;flex-direction:column}.ts-inline{border:1px solid var(--border-subtle);background:var(--bg-elevated);max-height:360px;display:flex;flex-direction:column;border-radius:var(--lib-radius-md)}.ts-inline .ts-tree{flex:1}.ts-inline .ts-search-wrap,.ts-inline .ts-footer{flex-shrink:0}}';
+import { html } from "lit";
+const checkSvg = html`
+  <svg viewBox="0 0 12 12">
+    <polyline points="2,6 5,9 10,3"/>
+  </svg>`;
+function checkboxCardTemplate(ctx) {
+  const checkClass = [
+    "cc-check",
+    ctx.inputType === "radio" || ctx.checkShape === "pill" ? "cc-check-pill" : ""
+  ].filter(Boolean).join(" ");
+  return html`
+    <label
+      class="cc"
+      part="label"
+      @click="${(e) => ctx._handleClick(e)}"
+    >
+      <!-- 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)}"
+      />
+
+      <div class="cc-body" part="body">
+
+        <!-- Checkmark -->
+        <div class="${checkClass}" part="check">${checkSvg}</div>
+
+        <!-- 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>
+
+        <!-- Slot: precio -->
+        <slot name="price"></slot>
+
+        <!-- Slot: divider -->
+        <slot name="divider"></slot>
+
+        <!-- Slot: features -->
+        <slot name="features"></slot>
+
+        <!-- Slot: imagen -->
+        <slot name="image"></slot>
+
+        <!-- Slot: contenido libre (default) -->
+        <slot></slot>
+
+        <!-- Ripple layer -->
+        <div class="cc-ripple" part="ripple"></div>
+
+      </div>
+    </label>
+  `;
+}
 export {
-  treeSelectCss as default
+  checkboxCardTemplate
 };
 //# sourceMappingURL=index231.js.map

package/dist/index231.js.map

@@ -1 +1 @@
-{"version":3,"file":"index231.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index231.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;"}