@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index227.js.map

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

package/dist/index228.js

@@ -1,5 +1,5 @@
-const cardStyles = '@layer tokens,reset,components;@layer reset{:host{display:block;container-type:inline-size}*,*:before,*:after{box-sizing:border-box}}@layer components{.card{display:flex;flex-direction:column;background:var(--bg-elevated);border:1px solid var(--border-subtle);padding:var(--lib-space-lg);height:100%;position:relative;overflow:hidden;transition:box-shadow var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out),border-color var(--duration-slow) var(--ease-out)}@media(hover:hover){.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--border-default)}}.card-kanji{position:absolute;top:.75rem;right:.75rem;font-family:var(--lib-font-display, "Cormorant Garamond", serif);font-size:5rem;font-weight:300;line-height:1;color:#0000000a;-webkit-user-select:none;user-select:none;pointer-events:none;z-index:0}:host([variant="inverse"]) .card-kanji,:host([variant="featured"]) .card-kanji,:host([variant="kintsugi"]) .card-kanji,:host([variant="glitch"]) .card-kanji,:host([variant="celadon"]) .card-kanji{color:#ffffff0a}:host([variant="kintsugi"]) .card-kanji{color:#b85a1e14}.card-header,.card-content,.card-footer{position:relative;z-index:1}.card-header{margin-bottom:var(--lib-space-md);display:flex;align-items:center;gap:var(--lib-space-sm);min-height:var(--lib-space-md)}::slotted([slot="tag"]){font-family:var(--lib-font-mono);font-size:10px;text-transform:uppercase;letter-spacing:var(--tracking-widest);color:var(--text-muted)}.card-content{flex-grow:1;display:flex;flex-direction:column;gap:var(--lib-space-sm)}::slotted([slot="title"]){margin:0;font-family:var(--lib-font-display);font-size:var(--text-2xl);font-weight:var(--weight-light);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);color:var(--text-secondary)}.card-body{font-family:var(--lib-font-body);font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-washi-500)}.card-footer{margin-top:var(--lib-space-lg);padding-top:var(--lib-space-md);border-top:1px solid var(--border-subtle);display:flex;justify-content:space-between;align-items:center;font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);color:var(--text-muted);min-height:var(--lib-space-lg)}::slotted([slot="footer"]){display:contents}:host([variant="inverse"]) .card{background:var(--color-washi-900);border-color:var(--color-washi-800)}:host([variant="inverse"]) ::slotted([slot="title"]){color:var(--color-washi-50)}:host([variant="inverse"]) .card-body{color:var(--color-washi-400)}:host([variant="inverse"]) .card-footer{border-top-color:var(--color-washi-800);color:var(--color-washi-600)}:host([variant="inverse"]) ::slotted([slot="tag"]){color:var(--color-washi-500)}:host([variant="accent"]) .card{border-left:3px solid var(--card-accent-color, var(--color-kaki-400));padding-left:calc(var(--lib-space-lg) - 3px)}:host([variant="featured"]) .card{background:linear-gradient(135deg,#b85a1e14,#b85a1e05);border-color:transparent;border-left:2px solid var(--color-kaki-500, #B85A1E)}:host([variant="featured"]) .card:before{display:none}:host([variant="featured"]) ::slotted([slot="tag"]){color:#b85a1e4d}:host([variant="featured"]) ::slotted([slot="title"]){font-size:var(--text-3xl);color:var(--color-kaki-400, #D97234);line-height:1.1}:host([variant="featured"]) .card-body{color:#faf7f44d;font-size:var(--text-base)}:host([variant="featured"]) .card-footer{border-top-color:#ffffff0f;color:#faf7f433;margin-top:var(--lib-space-xl)}@keyframes kintsugi-seam{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes kintsugi-gold{0%{background-position:-200% 0}to{background-position:200% 0}}:host([variant="kintsugi"]) .card{background:var(--color-washi-950, #120E0A);border-color:transparent}:host([variant="kintsugi"]) .card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;padding:1px;background:var(--lib-kintsugi-border);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:0}:host([variant="kintsugi"]) .card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgb(184,90,30,.4) 15%,var(--color-kaki-400, #D97234) 35%,#F5D08A 50%,var(--color-kaki-400, #D97234) 65%,rgb(184,90,30,.4) 85%,transparent);background-size:200% 100%;animation:kintsugi-seam 5s linear infinite;pointer-events:none}:host([variant="kintsugi"]) ::slotted([slot="title"]){background:linear-gradient(90deg,var(--color-kaki-600, #8C4115),#F5D08A,var(--color-kaki-400, #D97234),#F5D08A,var(--color-kaki-600, #8C4115));background-size:200% 100%;animation:kintsugi-gold 4s linear infinite;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;color:transparent}:host([variant="kintsugi"]) ::slotted([slot="tag"]){color:#b85a1e59}:host([variant="kintsugi"]) .card-body{color:#faf7f440}:host([variant="kintsugi"]) .card-footer{border-top-color:#ffffff0f;color:#faf7f42e}@media(hover:hover){:host([variant="kintsugi"]) .card:hover{transform:none;box-shadow:0 0 32px #b85a1e1f;border-color:#b85a1e40}}@keyframes glitch-drift{0%,88%,to{transform:none;opacity:1}89%{transform:translate(-2px);opacity:.8}90%{transform:translate(2px);opacity:.9}91%{transform:none;opacity:1}}:host([variant="glitch"]) .card{background:var(--color-washi-950, #120E0A);border-color:#ffffff0f;animation:glitch-drift 7s steps(1) infinite}:host([variant="glitch"]) .card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--color-celadon-400, #4E9482);pointer-events:none}:host([variant="glitch"]) .card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(250,247,244,.012) 3px,rgb(250,247,244,.012) 4px);pointer-events:none;z-index:0}:host([variant="glitch"]) ::slotted([slot="tag"]){font-family:var(--lib-font-mono);color:var(--color-celadon-400, #4E9482);letter-spacing:.18em}:host([variant="glitch"]) ::slotted([slot="title"]){font-family:var(--lib-font-mono);font-size:var(--text-base);letter-spacing:.15em;text-transform:uppercase;color:var(--color-kaki-400, #D97234)}:host([variant="glitch"]) .card-body{font-family:var(--lib-font-mono);font-size:.65rem;letter-spacing:.08em;color:#faf7f433;line-height:1.9}:host([variant="glitch"]) .card-footer{border-top-color:#ffffff0f;color:#faf7f426}:host([variant="glitch"]) .card-kanji{color:#4e94820f}@media(hover:hover){:host([variant="glitch"]) .card:hover{transform:none;box-shadow:-2px 0 #d9723433,2px 0 #4e948226}}:host([variant="celadon"]) .card{background:var(--color-washi-950, #120E0A);border-color:#4e948226}:host([variant="celadon"]) .card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--color-celadon-400, #4E9482);pointer-events:none}:host([variant="celadon"]) ::slotted([slot="tag"]){color:#4e948280}:host([variant="celadon"]) ::slotted([slot="title"]){color:var(--color-celadon-400, #4E9482)}:host([variant="celadon"]) .card-body{color:#faf7f440}:host([variant="celadon"]) .card-footer{border-top-color:#ffffff0f;color:#faf7f42e}:host([variant="celadon"]) .card-kanji{color:#4e94820f}@media(hover:hover){:host([variant="celadon"]) .card:hover{transform:none;box-shadow:0 0 28px #4e94821a;border-color:#4e94824d}}:host([variant="washi"]) .card{background:var(--color-washi-50, #FAF7F4);border-color:var(--color-washi-200, #E5DDD3)}:host([variant="washi"]) .card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--color-washi-400, #B8A99A);pointer-events:none}:host([variant="washi"]) ::slotted([slot="tag"]){color:var(--color-washi-500, #9A8878)}:host([variant="washi"]) ::slotted([slot="title"]){color:var(--color-washi-800, #3D332A)}:host([variant="washi"]) .card-body{color:var(--color-washi-600, #7A6A5C)}:host([variant="washi"]) .card-footer{border-top-color:var(--color-washi-200, #E5DDD3);color:var(--color-washi-400, #B8A99A)}:host([variant="washi"]) .card-kanji{color:#0000000d}@media(hover:hover){:host([variant="washi"]) .card:hover{border-color:var(--color-washi-300, #D3C8BC);box-shadow:var(--shadow-md)}}:host([variant="brutal"]) .card{background:var(--color-washi-50);border:2px solid var(--color-ink-100);box-shadow:var(--lib-shadow-brutal);transition:transform var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default)}:host([variant="brutal"]) .card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-celadon-400);pointer-events:none}:host([variant="brutal"]) ::slotted([slot="tag"]){font-family:var(--lib-font-mono);color:var(--color-washi-500);letter-spacing:var(--tracking-widest)}:host([variant="brutal"]) ::slotted([slot="title"]){font-family:var(--lib-font-mono);font-size:var(--text-xl);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);color:var(--color-ink-100);text-transform:uppercase}:host([variant="brutal"]) .card-body{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.04em;line-height:var(--leading-relaxed);color:var(--color-washi-600)}:host([variant="brutal"]) .card-footer{border-top-color:var(--color-washi-300);color:var(--color-washi-500)}@media(hover:hover){:host([variant="brutal"]) .card:hover{transform:translate(4px,4px);box-shadow:none}}}';
+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}}`;
 export {
-  cardStyles as default
+  selectCss as default
 };
 //# sourceMappingURL=index228.js.map

package/dist/index229.js

@@ -1,36 +1,74 @@
 import { nothing, html } from "lit";
-function cardTemplate(props) {
+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`
-    <article
-      class="card"
-      role="${props.clickable ? "button" : nothing}"
-      tabindex="${props.clickable ? "0" : nothing}"
-      @click="${props.clickable ? props.onClick : nothing}"
-      style="${props.variant === "accent" && props.accentColor ? `--card-accent-color: ${props.accentColor}` : nothing}"
+    <div
+      class="tb-panel ${isActive ? "is-active" : ""}"
+      role="tabpanel"
+      id="panel-${item.id}"
+      aria-labelledby="tab-${item.id}"
     >
-      <!-- Kanji watermark — aria-hidden, decorativo -->
-      ${props.kanji ? html`<span class="card-kanji" aria-hidden="true"
-            >${props.kanji}</span
-          >` : nothing}
+      <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>
 
-      <header class="card-header">
-        <slot name="tag"></slot>
-      </header>
+      <!-- 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}
 
-      <div class="card-content">
-        <slot name="title"></slot>
-        <div class="card-body">
-          <slot></slot>
-        </div>
+      <!-- Panels -->
+      <div class="tb-panels" part="panels">
+        ${tabs.map((item) => renderPanel(item, context))}
       </div>
 
-      <footer class="card-footer">
-        <slot name="footer"></slot>
-      </footer>
-    </article>
+    </div>
   `;
 }
 export {
-  cardTemplate
+  tabsTemplate
 };
 //# sourceMappingURL=index229.js.map

package/dist/index229.js.map

@@ -1 +1 @@
-{"version":3,"file":"index229.js","sources":["../src/components/atoms/card/lib-card.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from \"lit\";\nimport type { LibCardVariant } from \"./lib-card.component\";\n\nexport interface CardTemplateProps {\n  variant: LibCardVariant;\n  accentColor: string | undefined;\n  kanji: string;\n  clickable: boolean;\n  onClick: (e: MouseEvent) => void;\n}\n\n/**\n * Plantilla base para el componente lib-card.\n * Contenedor editorial con slots: tag, title, default (body), footer.\n * Soporta marca de agua kanji opcional en la esquina superior derecha.\n */\nexport function cardTemplate(props: CardTemplateProps): TemplateResult {\n  return html`\n    <article\n      class=\"card\"\n      role=\"${props.clickable ? \"button\" : nothing}\"\n      tabindex=\"${props.clickable ? \"0\" : nothing}\"\n      @click=\"${props.clickable ? props.onClick : nothing}\"\n      style=\"${props.variant === \"accent\" && props.accentColor\n        ? `--card-accent-color: ${props.accentColor}`\n        : nothing}\"\n    >\n      <!-- Kanji watermark — aria-hidden, decorativo -->\n      ${props.kanji\n        ? html`<span class=\"card-kanji\" aria-hidden=\"true\"\n            >${props.kanji}</span\n          >`\n        : nothing}\n\n      <header class=\"card-header\">\n        <slot name=\"tag\"></slot>\n      </header>\n\n      <div class=\"card-content\">\n        <slot name=\"title\"></slot>\n        <div class=\"card-body\">\n          <slot></slot>\n        </div>\n      </div>\n\n      <footer class=\"card-footer\">\n        <slot name=\"footer\"></slot>\n      </footer>\n    </article>\n  `;\n}\n"],"names":[],"mappings":";AAgBO,SAAS,aAAa,OAA0C;AACrE,SAAO;AAAA;AAAA;AAAA,cAGK,MAAM,YAAY,WAAW,OAAO;AAAA,kBAChC,MAAM,YAAY,MAAM,OAAO;AAAA,gBACjC,MAAM,YAAY,MAAM,UAAU,OAAO;AAAA,eAC1C,MAAM,YAAY,YAAY,MAAM,cACzC,wBAAwB,MAAM,WAAW,KACzC,OAAO;AAAA;AAAA;AAAA,QAGT,MAAM,QACJ;AAAA,eACK,MAAM,KAAK;AAAA,eAEhB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBjB;"}
+{"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;"}

package/dist/index23.js

@@ -1,9 +1,8 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { generateUniqueId } from "./index213.js";
-import buttonCss from "./index232.js";
+import { property, state, customElement } from "lit/decorators.js";
+import { dividerTemplate } from "./index304.js";
+import dividerCss from "./index305.js";
 import sharedTokens from "./index196.js";
-import { buttonTemplate } from "./index233.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,112 +13,69 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibButton = class extends LitElement {
+let LibDivider = class extends LitElement {
   constructor() {
-    super();
-    this.variant = "primary";
-    this.size = "md";
-    this.disabled = false;
-    this.glass = false;
-    this.spotlight = false;
-    this._onMouseMove = (e) => {
-      var _a;
-      if (!this.spotlight) return;
-      const btn = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".btn");
-      if (!btn) return;
-      const rect = btn.getBoundingClientRect();
-      const x = (e.clientX - rect.left) / rect.width * 100;
-      const y = (e.clientY - rect.top) / rect.height * 100;
-      this.style.setProperty("--lib-spotlight-x", `${x}%`);
-      this.style.setProperty("--lib-spotlight-y", `${y}%`);
-    };
-    this._onMouseLeave = () => {
-      this.style.setProperty("--lib-spotlight-x", "50%");
-      this.style.setProperty("--lib-spotlight-y", "50%");
-    };
-    this.type = "button";
-    this.customPadding = null;
-    this.ariaLabel = null;
-    this._buttonId = generateUniqueId("lib-button-");
+    super(...arguments);
+    this.orientation = "horizontal";
+    this.styleVariant = "hairline";
+    this.color = "default";
+    this.align = "center";
+    this.ornament = "none";
+    this.labelStyle = "mono";
+    this._hasSlotContent = false;
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("mousemove", this._onMouseMove);
-    this.addEventListener("mouseleave", this._onMouseLeave);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("mousemove", this._onMouseMove);
-    this.removeEventListener("mouseleave", this._onMouseLeave);
+  _handleSlotChange(e) {
+    const slot = e.target;
+    const nodes = slot.assignedNodes({ flatten: true });
+    this._hasSlotContent = nodes.some(
+      (n) => {
+        var _a;
+        return n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && ((_a = n.textContent) == null ? void 0 : _a.trim()) !== "";
+      }
+    );
   }
-  /**
-   * Implementación del renderizado siguiendo la regla de tipado explícito.
-   */
   render() {
-    return buttonTemplate({
-      buttonId: this._buttonId,
-      type: this.type,
-      disabled: this.disabled,
-      ariaLabel: this.ariaLabel ?? void 0,
-      handleClick: this._handleClick.bind(this),
-      variant: this.variant,
-      size: this.size,
-      glass: this.glass,
-      spotlight: this.spotlight,
-      customPadding: this.customPadding ?? void 0
+    return dividerTemplate({
+      orientation: this.orientation,
+      style: this.styleVariant,
+      color: this.color,
+      align: this.align,
+      ornament: this.ornament,
+      labelStyle: this.labelStyle,
+      hasSlotContent: this._hasSlotContent,
+      onSlotChange: this._handleSlotChange.bind(this)
     });
   }
-  _handleClick(event) {
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
-    this.dispatchEvent(
-      new CustomEvent("ui-lib-click", {
-        detail: { originalEvent: event, timestamp: Date.now() },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
 };
-LibButton.styles = [
-  css`
-      ${unsafeCSS(sharedTokens)}
-    `,
-  css`
-      ${unsafeCSS(buttonCss)}
-    `
+LibDivider.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(dividerCss)}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
-], LibButton.prototype, "variant", 2);
+], LibDivider.prototype, "orientation", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibButton.prototype, "size", 2);
+  property({ type: String, reflect: true, attribute: "style-variant" })
+], LibDivider.prototype, "styleVariant", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibButton.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibButton.prototype, "glass", 2);
+  property({ type: String, reflect: true })
+], LibDivider.prototype, "color", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibButton.prototype, "spotlight", 2);
+  property({ type: String, reflect: true })
+], LibDivider.prototype, "align", 2);
 __decorateClass([
-  property({ type: String })
-], LibButton.prototype, "type", 2);
+  property({ type: String, reflect: true })
+], LibDivider.prototype, "ornament", 2);
 __decorateClass([
-  property({ type: String, attribute: "custom-padding" })
-], LibButton.prototype, "customPadding", 2);
+  property({ type: String, reflect: true, attribute: "label-style" })
+], LibDivider.prototype, "labelStyle", 2);
 __decorateClass([
-  property({ type: String, attribute: "aria-label" })
-], LibButton.prototype, "ariaLabel", 2);
-LibButton = __decorateClass([
-  customElement("lib-button")
-], LibButton);
+  state()
+], LibDivider.prototype, "_hasSlotContent", 2);
+LibDivider = __decorateClass([
+  customElement("lib-divider")
+], LibDivider);
 export {
-  LibButton
+  LibDivider
 };
 //# sourceMappingURL=index23.js.map

package/dist/index23.js.map

@@ -1 +1 @@
-{"version":3,"file":"index23.js","sources":["../src/components/atoms/button/lib-button.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { generateUniqueId } from '../../../core/a11y';\nimport type { LibSize, UiClickEventDetail } from '../../../types';\nimport type { LibButtonVariant } from './lib-button.types';\nimport buttonCss from './lib-button.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport { buttonTemplate } from './lib-button.html';\n\n/**\n * @tag lib-button\n * @element lib-button\n * @fires ui-lib-click - Evento personalizado disparado al hacer clic.\n * @event lib-click\n * @csspart button - El elemento <button> nativo.\n */\n@customElement('lib-button')\nexport class LibButton extends LitElement {\n  static override styles = [\n    css`\n      ${unsafeCSS(sharedTokens)}\n    `,\n    css`\n      ${unsafeCSS(buttonCss)}\n    `\n  ];\n\n  private _buttonId: string;\n\n  constructor() {\n    super();\n    this._buttonId = generateUniqueId('lib-button-');\n  }\n\n  /**\n * @type {\"primary\" | \"secondary\" | \"ghost\" | \"accent\" | \"danger\" | \"kintsugi\" | \"brutal\"}\n */\n  @property({ type: String, reflect: true })\n  variant: LibButtonVariant = 'primary';\n\n  /**\n * @type {\"sm\" | \"md\" | \"lg\" | \"xl\"}\n */\n  @property({ type: String, reflect: true })\n  size: LibSize = 'md';\n\n  /**\n * @type {boolean}\n */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n/**\n * @type {boolean}\n */\n  @property({ type: Boolean, reflect: true })\n  glass = false;\n\n  /**\n * @type {boolean}\n */\n  @property({ type: Boolean, reflect: true })\n  spotlight = false;\n\n  private _onMouseMove = (e: MouseEvent): void => {\n    if (!this.spotlight) return;\n    const btn = this.shadowRoot?.querySelector('.btn');\n    if (!btn) return;\n    const rect = btn.getBoundingClientRect();\n    const x = ((e.clientX - rect.left) / rect.width) * 100;\n    const y = ((e.clientY - rect.top) / rect.height) * 100;\n    this.style.setProperty('--lib-spotlight-x', `${x}%`);\n    this.style.setProperty('--lib-spotlight-y', `${y}%`);\n  };\n\n  private _onMouseLeave = (): void => {\n    this.style.setProperty('--lib-spotlight-x', '50%');\n    this.style.setProperty('--lib-spotlight-y', '50%');\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('mousemove', this._onMouseMove);\n    this.addEventListener('mouseleave', this._onMouseLeave);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('mousemove', this._onMouseMove);\n    this.removeEventListener('mouseleave', this._onMouseLeave);\n  }\n\n  /**\n * @type {'button' | 'submit' | 'reset'}\n */\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n * @type {string | null}\n */\n  @property({ type: String, attribute: 'custom-padding' })\n  customPadding: string | null = null;\n\n  /**\n * @type {string | null}\n */\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel: string | null = null;\n\n  /**\n   * Implementación del renderizado siguiendo la regla de tipado explícito.\n   */\n  override render(): TemplateResult {\n    return buttonTemplate({\n      buttonId: this._buttonId,\n      type: this.type,\n      disabled: this.disabled,\n      ariaLabel: this.ariaLabel ?? undefined,\n      handleClick: this._handleClick.bind(this),\n      variant: this.variant,\n      size: this.size,\n      glass: this.glass,\n      spotlight: this.spotlight,\n      customPadding: this.customPadding ?? undefined,\n    });\n  }\n\n  private _handleClick(event: Event): void {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<UiClickEventDetail>('ui-lib-click', {\n        detail: { originalEvent: event, timestamp: Date.now() },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-button': LibButton;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiBO,IAAM,YAAN,cAAwB,WAAW;AAAA,EAYxC,cAAc;AACZ,UAAA;AAQF,SAAA,UAA4B;AAM5B,SAAA,OAAgB;AAMhB,SAAA,WAAW;AAMX,SAAA,QAAQ;AAMR,SAAA,YAAY;AAEZ,SAAQ,eAAe,CAAC,MAAwB;;AAC9C,UAAI,CAAC,KAAK,UAAW;AACrB,YAAM,OAAM,UAAK,eAAL,mBAAiB,cAAc;AAC3C,UAAI,CAAC,IAAK;AACV,YAAM,OAAO,IAAI,sBAAA;AACjB,YAAM,KAAM,EAAE,UAAU,KAAK,QAAQ,KAAK,QAAS;AACnD,YAAM,KAAM,EAAE,UAAU,KAAK,OAAO,KAAK,SAAU;AACnD,WAAK,MAAM,YAAY,qBAAqB,GAAG,CAAC,GAAG;AACnD,WAAK,MAAM,YAAY,qBAAqB,GAAG,CAAC,GAAG;AAAA,IACrD;AAEA,SAAQ,gBAAgB,MAAY;AAClC,WAAK,MAAM,YAAY,qBAAqB,KAAK;AACjD,WAAK,MAAM,YAAY,qBAAqB,KAAK;AAAA,IACnD;AAkBA,SAAA,OAAsC;AAMtC,SAAA,gBAA+B;AAM/B,SAAS,YAA2B;AA7ElC,SAAK,YAAY,iBAAiB,aAAa;AAAA,EACjD;AAAA,EAgDS,oBAA0B;AACjC,UAAM,kBAAA;AACN,SAAK,iBAAiB,aAAa,KAAK,YAAY;AACpD,SAAK,iBAAiB,cAAc,KAAK,aAAa;AAAA,EACxD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA;AACN,SAAK,oBAAoB,aAAa,KAAK,YAAY;AACvD,SAAK,oBAAoB,cAAc,KAAK,aAAa;AAAA,EAC3D;AAAA;AAAA;AAAA;AAAA,EAuBS,SAAyB;AAChC,WAAO,eAAe;AAAA,MACpB,UAAU,KAAK;AAAA,MACf,MAAM,KAAK;AAAA,MACX,UAAU,KAAK;AAAA,MACf,WAAW,KAAK,aAAa;AAAA,MAC7B,aAAa,KAAK,aAAa,KAAK,IAAI;AAAA,MACxC,SAAS,KAAK;AAAA,MACd,MAAM,KAAK;AAAA,MACX,OAAO,KAAK;AAAA,MACZ,WAAW,KAAK;AAAA,MAChB,eAAe,KAAK,iBAAiB;AAAA,IAAA,CACtC;AAAA,EACH;AAAA,EAEQ,aAAa,OAAoB;AACvC,QAAI,KAAK,UAAU;AACjB,YAAM,eAAA;AACN,YAAM,gBAAA;AACN;AAAA,IACF;AAEA,SAAK;AAAA,MACH,IAAI,YAAgC,gBAAgB;AAAA,QAClD,QAAQ,EAAE,eAAe,OAAO,WAAW,KAAK,MAAI;AAAA,QACpD,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AACF;AA9Ha,UACK,SAAS;AAAA,EACvB;AAAA,QACI,UAAU,YAAY,CAAC;AAAA;AAAA,EAE3B;AAAA,QACI,UAAU,SAAS,CAAC;AAAA;AAE1B;AAaA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GApB9B,UAqBX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA1B9B,UA2BX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAhC/B,UAiCX,WAAA,YAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAtC/B,UAuCX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA5C/B,UA6CX,WAAA,aAAA,CAAA;AAkCA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9Ef,UA+EX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB;AAAA,GApF5C,UAqFX,WAAA,iBAAA,CAAA;AAMS,gBAAA;AAAA,EADR,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GA1FxC,UA2FF,WAAA,aAAA,CAAA;AA3FE,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}
+{"version":3,"file":"index23.js","sources":["../src/components/atoms/divider/lib-divider.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type {\n  LibDividerStyle,\n  LibDividerColor,\n  LibDividerAlign,\n  LibDividerOrnament,\n  LibDividerLabelStyle,\n  LibDividerOrientation,\n} from './lib-divider.component.html';\nimport { dividerTemplate } from './lib-divider.component.html';\nimport dividerCss from './lib-divider.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-divider\n *\n * Separador visual de contenido. Cinco estilos de línea, cuatro pesos,\n * variantes cromáticas, labels con tres tipografías y ornamentos.\n * Horizontal y vertical.\n *\n * @slot - Texto o elemento entre las dos líneas (label).\n *\n * @example — línea simple\n * <lib-divider></lib-divider>\n *\n * @example — con label\n * <lib-divider>O</lib-divider>\n *\n * @example — con ornamento diamond y gradiente\n * <lib-divider style-variant=\"gradient\" ornament=\"diamond\"></lib-divider>\n *\n * @example — kaki con dot\n * <lib-divider color=\"kaki\" ornament=\"dot\"></lib-divider>\n *\n * @example — vertical en nav\n * <lib-divider orientation=\"vertical\" style=\"height:14px\"></lib-divider>\n */\n@customElement('lib-divider')\nexport class LibDivider extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(dividerCss)}`,\n  ];\n\n  /** Dirección del separador */\n  @property({ type: String, reflect: true })\n  orientation: LibDividerOrientation = 'horizontal';\n\n  /**\n   * Estilo de la línea.\n   * Nota: el atributo es `style-variant` para no colisionar\n   * con el atributo nativo `style` del DOM.\n   */\n  @property({ type: String, reflect: true, attribute: 'style-variant' })\n  styleVariant: LibDividerStyle = 'hairline';\n\n  /** Color de acento de la línea */\n  @property({ type: String, reflect: true })\n  color: LibDividerColor = 'default';\n\n  /**\n   * Alineación del label u ornamento.\n   * `left` y `right` acortan el segmento opuesto a 24px.\n   */\n  @property({ type: String, reflect: true })\n  align: LibDividerAlign = 'center';\n\n  /**\n   * Ornamento visual entre las líneas.\n   * Toma prioridad sobre el contenido del slot si ambos están presentes.\n   */\n  @property({ type: String, reflect: true })\n  ornament: LibDividerOrnament = 'none';\n\n  /** Tipografía del label slotado */\n  @property({ type: String, reflect: true, attribute: 'label-style' })\n  labelStyle: LibDividerLabelStyle = 'mono';\n\n  /** Detectado via slotchange — true si el slot tiene nodos de texto o elementos */\n  @state()\n  private _hasSlotContent = false;\n\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    this._hasSlotContent = nodes.some(\n      n => n.nodeType === Node.ELEMENT_NODE ||\n           (n.nodeType === Node.TEXT_NODE && n.textContent?.trim() !== '')\n    );\n  }\n\n  override render(): TemplateResult {\n    return dividerTemplate({\n      orientation: this.orientation,\n      style: this.styleVariant,\n      color: this.color,\n      align: this.align,\n      ornament: this.ornament,\n      labelStyle: this.labelStyle,\n      hasSlotContent: this._hasSlotContent,\n      onSlotChange: this._handleSlotChange.bind(this),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-divider': LibDivider;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuCO,IAAM,aAAN,cAAyB,WAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,cAAqC;AAQrC,SAAA,eAAgC;AAIhC,SAAA,QAAyB;AAOzB,SAAA,QAAyB;AAOzB,SAAA,WAA+B;AAI/B,SAAA,aAAmC;AAInC,SAAQ,kBAAkB;AAAA,EAAA;AAAA,EAElB,kBAAkB,GAAgB;AACxC,UAAM,OAAO,EAAE;AACf,UAAM,QAAQ,KAAK,cAAc,EAAE,SAAS,MAAM;AAClD,SAAK,kBAAkB,MAAM;AAAA,MAC3B,CAAA,MAAA;;AAAK,iBAAE,aAAa,KAAK,gBACnB,EAAE,aAAa,KAAK,eAAa,OAAE,gBAAF,mBAAe,YAAW;AAAA;AAAA,IAAA;AAAA,EAErE;AAAA,EAES,SAAyB;AAChC,WAAO,gBAAgB;AAAA,MACrB,aAAa,KAAK;AAAA,MAClB,OAAO,KAAK;AAAA,MACZ,OAAO,KAAK;AAAA,MACZ,OAAO,KAAK;AAAA,MACZ,UAAU,KAAK;AAAA,MACf,YAAY,KAAK;AAAA,MACjB,gBAAgB,KAAK;AAAA,MACrB,cAAc,KAAK,kBAAkB,KAAK,IAAI;AAAA,IAAA,CAC/C;AAAA,EACH;AACF;AAjEa,WACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,UAAU,CAAC;AAC7B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAP9B,WAQX,WAAA,eAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,iBAAiB;AAAA,GAf1D,WAgBX,WAAA,gBAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAnB9B,WAoBX,WAAA,SAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA1B9B,WA2BX,WAAA,SAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAjC9B,WAkCX,WAAA,YAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,eAAe;AAAA,GArCxD,WAsCX,WAAA,cAAA,CAAA;AAIQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAzCI,WA0CH,WAAA,mBAAA,CAAA;AA1CG,aAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,UAAA;"}

package/dist/index230.js

@@ -1,5 +1,5 @@
-const labelStyles = ":host{display:inline-block;margin-bottom:var(--lib-space-xs, 4px)}label{display:flex;align-items:center;gap:4px;font-family:var(--lib-font-family);font-size:var(--lib-font-size-sm);font-weight:600;color:var(--lib-color-text);cursor:pointer}.required-indicator{color:var(--lib-color-danger);font-weight:700}";
+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}}';
 export {
-  labelStyles as default
+  tabsCss as default
 };
 //# sourceMappingURL=index230.js.map

package/dist/index231.js

@@ -1,5 +1,5 @@
-const iconStyles = ":host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:0}.icon-wrapper{display:flex;width:var(--lib-icon-size, 1em);height:var(--lib-icon-size, 1em);color:currentcolor}svg{display:block;width:100%!important;height:100%!important;fill:currentcolor}.variant-primary{color:var(--lib-color-primary)}.variant-secondary{color:var(--lib-color-secondary)}.variant-success{color:var(--lib-color-success)}.variant-danger{color:var(--lib-color-danger)}";
+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}}';
 export {
-  iconStyles as default
+  treeSelectCss as default
 };
 //# sourceMappingURL=index231.js.map

package/dist/index232.js

@@ -1,5 +1,15 @@
-const buttonCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}}@layer components{.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);font-family:var(--lib-font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;white-space:nowrap;line-height:1;padding:var(--lib-space-sm) var(--lib-space-md);width:100%;border:var(--lib-border-width) solid transparent;border-radius:var(--radius-none);background:transparent;cursor:pointer;outline:none;text-decoration:none;position:relative;overflow:hidden;transition:background var(--duration-base) var(--ease-default),color var(--duration-base) var(--ease-default),border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-base) var(--ease-default),transform var(--duration-fast) var(--ease-default)}.btn ::slotted(*){position:relative;z-index:1}.btn:active:not(:disabled){transform:translateY(1px)}:host([size="sm"]) .btn{padding:var(--lib-space-xs) var(--lib-space-sm);font-size:10px}:host([size="lg"]) .btn{padding:var(--lib-space-md) var(--lib-space-lg);font-size:var(--text-sm);letter-spacing:var(--tracking-widest)}:host([disabled]) .btn{opacity:.38;cursor:not-allowed;pointer-events:none}:host([variant="primary"]) .btn{background:var(--color-washi-900);color:var(--color-washi-50)}:host([variant="primary"]) .btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--color-kaki-400);transform:scaleX(0);transform-origin:left;transition:transform var(--duration-slow) var(--ease-out);z-index:0}:host([variant="primary"]) .btn:hover{box-shadow:var(--shadow-md)}:host([variant="primary"]) .btn:hover:after{transform:scaleX(1)}:host([variant="secondary"]) .btn{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}:host([variant="secondary"]) .btn:hover{background:var(--color-washi-900);color:var(--color-washi-50);border-color:var(--color-washi-900)}:host([variant="ghost"]) .btn{background:transparent;color:var(--text-secondary)}:host([variant="ghost"]) .btn:hover{color:var(--text-primary);background:var(--color-ink-10)}:host([variant="accent"]) .btn{background:var(--color-kaki-400);color:var(--color-white)}:host([variant="accent"]) .btn:hover{background:var(--color-kaki-500);box-shadow:var(--shadow-md)}:host([variant="danger"]) .btn{background:transparent;color:var(--color-error);border-color:var(--color-error)}:host([variant="danger"]) .btn:hover{background:var(--color-error);color:var(--color-white)}:host([glass]) .btn{border-radius:var(--radius-md);-webkit-backdrop-filter:var(--lib-glass-filter);backdrop-filter:var(--lib-glass-filter);background:var(--lib-glass-bg);border:var(--lib-glass-border);box-shadow:var(--lib-glass-shadow);color:var(--lib-glass-text);text-shadow:var(--lib-glass-text-shadow)}:host([glass]) .btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:var(--lib-glass-shine);pointer-events:none;z-index:0}:host([glass]) .btn:hover{box-shadow:var(--lib-glass-shadow-hover);transform:translateY(-1px)}:host([glass][variant="primary"]) .btn{background:var(--lib-glass-bg-water);border-color:#ffffff40}:host([glass][variant="accent"]) .btn{background:var(--lib-glass-bg-kaki);border-color:#6d4d3e59}:host([glass][variant="primary"]) .btn:after{display:none}:host([variant="kintsugi"]) .btn{background:var(--color-washi-950);color:var(--color-washi-50);border-color:transparent}:host([variant="kintsugi"]) .btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;padding:1px;background:var(--lib-kintsugi-border);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:0}@media(hover:hover){:host([variant="kintsugi"]) .btn:hover{background:var(--color-washi-900)}}:host([variant="brutal"]) .btn{background:var(--color-washi-50);color:var(--color-ink-100);border:2px solid var(--color-ink-100);box-shadow:var(--lib-shadow-brutal);border-radius:0;transition:transform var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default)}@media(hover:hover){:host([variant="brutal"]) .btn:hover{transform:translate(4px,4px);box-shadow:none}}:host([variant="brutal"]) .btn:active{transform:translate(4px,4px);box-shadow:none}.spotlight-layer{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--lib-spotlight-gradient-white);transition:var(--lib-spotlight-transition);pointer-events:none;z-index:0}:host([variant="brutal"]) .spotlight-layer,:host([variant="secondary"]) .spotlight-layer,:host([variant="ghost"]) .spotlight-layer{background:var(--lib-spotlight-gradient)}}';
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function* o(o2, f) {
+  if (void 0 !== o2) {
+    let i = 0;
+    for (const t of o2) yield f(t, i++);
+  }
+}
 export {
-  buttonCss as default
+  o as map
 };
 //# sourceMappingURL=index232.js.map

package/dist/index232.js.map

@@ -1 +1 @@
-{"version":3,"file":"index232.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index232.js","sources":["../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/map.js"],"sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nfunction*o(o,f){if(void 0!==o){let i=0;for(const t of o)yield f(t,i++)}}export{o as map};\n//# sourceMappingURL=map.js.map\n"],"names":["o"],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,UAAS,EAAEA,IAAE,GAAE;AAAC,MAAG,WAASA,IAAE;AAAC,QAAI,IAAE;AAAE,eAAU,KAAKA,GAAE,OAAM,EAAE,GAAE,GAAG;AAAA,EAAC;AAAC;","x_google_ignoreList":[0]}

package/dist/index233.js

@@ -1,23 +1,12 @@
-import { nothing, html } from "lit";
-function buttonTemplate(props) {
+import { html } from "lit";
+function accordionTemplate(props) {
   return html`
-    <button
-      id="${props.buttonId}"
-      type="${props.type}"
-      ?disabled="${props.disabled}"
-      aria-label="${props.ariaLabel ?? nothing}"
-      style="${props.customPadding ? `padding: ${props.customPadding}` : nothing}"
-      @click="${props.handleClick}"
-      class="btn"
-    >
-      ${props.spotlight ? html`<span class="spotlight-layer" aria-hidden="true"></span>` : nothing}
-      <slot name="prefix"></slot>
+    <div class="accordion__root" @accordion-toggle=${props.onToggle}>
       <slot></slot>
-      <slot name="suffix"></slot>
-    </button>
+    </div>
   `;
 }
 export {
-  buttonTemplate
+  accordionTemplate
 };
 //# sourceMappingURL=index233.js.map

package/dist/index233.js.map

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

package/dist/index234.js

@@ -1,5 +1,5 @@
-const styles = ":host{display:inline-block;touch-action:none}.magnetic-wrapper{display:inline-block;will-change:transform;transition:transform .3s cubic-bezier(.23,1,.32,1)}";
+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}}}';
 export {
-  styles as default
+  accordionCss as default
 };
 //# sourceMappingURL=index234.js.map

package/dist/index235.js

@@ -1,19 +1,21 @@
 import { html } from "lit";
-function spotlightCardTemplate(props) {
+function bentoGridTemplate(ctx) {
   return html`
     <div
-      class="spotlight"
-      @mousemove=${props.onMouseMove}
-      @mouseleave=${props.onMouseLeave}
+      class="bento-grid"
+      part="grid"
+      role="presentation"
+      style="
+        --_columns: ${ctx.columns};
+        --_gap: var(--lib-space-${ctx.gap});
+        --_row-height: ${ctx.rowHeight};
+      "
     >
-      <div class="spotlight__layer"></div>
-      <div class="spotlight__slot">
-        <slot></slot>
-      </div>
+      <slot></slot>
     </div>
   `;
 }
 export {
-  spotlightCardTemplate
+  bentoGridTemplate
 };
 //# sourceMappingURL=index235.js.map

package/dist/index235.js.map

@@ -1 +1 @@
-{"version":3,"file":"index235.js","sources":["../src/components/atoms/card/spotlight-card/lib-spotlight-card.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { SpotlightCardTemplateProps } from './lib-spotlight-card.types';\n\n/**\n * Template del spotlight card.\n *\n * Arquitectura de capas (de abajo a arriba):\n *   1. .spotlight__layer  — gradiente radial reactivo al cursor (z-index 1)\n *   2. ::after (CSS)      — hilo kintsugi en el borde, solo si [kintsugi] (z-index 2)\n *   3. .spotlight__slot   — contenido slotado (z-index 3)\n *\n * El gradiente del spotlight se actualiza vía CSS custom properties\n * --lib-spotlight-x / --lib-spotlight-y actualizadas en el mousemove handler.\n */\nexport function spotlightCardTemplate(props: SpotlightCardTemplateProps): TemplateResult {\n  return html`\n    <div\n      class=\"spotlight\"\n      @mousemove=${props.onMouseMove}\n      @mouseleave=${props.onMouseLeave}\n    >\n      <div class=\"spotlight__layer\"></div>\n      <div class=\"spotlight__slot\">\n        <slot></slot>\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAcO,SAAS,sBAAsB,OAAmD;AACvF,SAAO;AAAA;AAAA;AAAA,mBAGU,MAAM,WAAW;AAAA,oBAChB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQtC;"}
+{"version":3,"file":"index235.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;"}