@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index283.js

@@ -1,100 +1,5 @@
-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;
-  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>
-  `;
-}
+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}}}';
 export {
-  selectTemplate
+  cardStyles as default
 };
 //# sourceMappingURL=index283.js.map

package/dist/index283.js.map

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

package/dist/index284.js

@@ -1,5 +1,36 @@
-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}}`;
+import { nothing, html } from "lit";
+function cardTemplate(props) {
+  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}"
+    >
+      <!-- Kanji watermark — aria-hidden, decorativo -->
+      ${props.kanji ? html`<span class="card-kanji" aria-hidden="true"
+            >${props.kanji}</span
+          >` : nothing}
+
+      <header class="card-header">
+        <slot name="tag"></slot>
+      </header>
+
+      <div class="card-content">
+        <slot name="title"></slot>
+        <div class="card-body">
+          <slot></slot>
+        </div>
+      </div>
+
+      <footer class="card-footer">
+        <slot name="footer"></slot>
+      </footer>
+    </article>
+  `;
+}
 export {
-  selectCss as default
+  cardTemplate
 };
 //# sourceMappingURL=index284.js.map

package/dist/index284.js.map

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

package/dist/index285.js

@@ -1,35 +1,14 @@
-import { nothing, html } from "lit";
-const DEFAULT_HEADING = {
-  default: "Default",
-  info: "Info",
-  warning: "Warning",
-  error: "Error",
-  success: "Success"
-};
-function alertTemplate(props) {
-  const displayHeading = props.heading || DEFAULT_HEADING[props.type];
+import { html } from "lit";
+function glassCardTemplate(_props) {
   return html`
-    <div class="alert" role="alert" aria-live="polite">
-
-      <div class="alert-content">
-        <p class="alert-title">${displayHeading}</p>
-        <div class="alert-body">
-          <slot></slot>
-        </div>
+    <div class="glass-card">
+      <div class="glass-card__slot">
+        <slot></slot>
       </div>
-
-      ${props.closable ? html`
-            <button
-              class="alert-close"
-              type="button"
-              aria-label="Cerrar alerta"
-              @click="${props.handleClose}"
-            >×</button>` : nothing}
-
     </div>
   `;
 }
 export {
-  alertTemplate
+  glassCardTemplate
 };
 //# sourceMappingURL=index285.js.map

package/dist/index285.js.map

@@ -1 +1 @@
-{"version":3,"file":"index285.js","sources":["../src/components/molecules/lib-alert/lib-alert.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { AlertTemplateProps, AlertType } from './lib-alert.types';\n\n/** Auto-generated heading per type if none is provided. */\nconst DEFAULT_HEADING: Record<AlertType, string> = {\n  default: 'Default',\n  info:    'Info',\n  warning: 'Warning',\n  error:   'Error',\n  success: 'Success',\n};\n\n/**\n * Template para lib-alert.\n * Estructura: borde izquierdo · [heading DM Mono] · slot (cuerpo) · [botón cerrar]\n */\nexport function alertTemplate(props: AlertTemplateProps): TemplateResult {\n  const displayHeading = props.heading || DEFAULT_HEADING[props.type];\n\n  return html`\n    <div class=\"alert\" role=\"alert\" aria-live=\"polite\">\n\n      <div class=\"alert-content\">\n        <p class=\"alert-title\">${displayHeading}</p>\n        <div class=\"alert-body\">\n          <slot></slot>\n        </div>\n      </div>\n\n      ${props.closable\n        ? html`\n            <button\n              class=\"alert-close\"\n              type=\"button\"\n              aria-label=\"Cerrar alerta\"\n              @click=\"${props.handleClose}\"\n            >×</button>`\n        : nothing}\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,kBAA6C;AAAA,EACjD,SAAS;AAAA,EACT,MAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAS;AAAA,EACT,SAAS;AACX;AAMO,SAAS,cAAc,OAA2C;AACvE,QAAM,iBAAiB,MAAM,WAAW,gBAAgB,MAAM,IAAI;AAElE,SAAO;AAAA;AAAA;AAAA;AAAA,iCAIwB,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMvC,MAAM,WACJ;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKc,MAAM,WAAW;AAAA,2BAE/B,OAAO;AAAA;AAAA;AAAA;AAIjB;"}
+{"version":3,"file":"index285.js","sources":["../src/components/atoms/card/glass-card/lib-glass-card.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { GlassCardTemplateProps } from './lib-glass-card.types';\n\n/**\n * Template del glass card.\n *\n * Estructura de capas (de abajo a arriba):\n *   1. .glass-card       — backdrop-filter + background tintado\n *   2. ::before (CSS)    — reflexión de luz (--lib-glass-shine)\n *   3. .glass-card__slot — slot del contenido, z-index: 1\n */\nexport function glassCardTemplate(_props: GlassCardTemplateProps): TemplateResult {\n  return html`\n    <div class=\"glass-card\">\n      <div class=\"glass-card__slot\">\n        <slot></slot>\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAWO,SAAS,kBAAkB,QAAgD;AAChF,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOT;"}

package/dist/index286.js

@@ -1,5 +1,5 @@
-const alertCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.alert{padding:var(--lib-space-md) var(--lib-space-lg);border-left:2px solid;display:flex;gap:var(--lib-space-md);align-items:flex-start;width:100%;transition:opacity var(--duration-base) var(--ease-default),transform var(--duration-base) var(--ease-default)}.alert-content{flex:1;min-width:0}.alert-title{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;margin-bottom:var(--lib-space-xs);line-height:var(--leading-snug)}.alert-body{font-family:var(--lib-font-body);font-size:var(--text-sm);line-height:var(--leading-relaxed)}.alert-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:transparent;border:none;cursor:pointer;padding:0;opacity:.5;color:inherit;transition:opacity var(--duration-fast) var(--ease-default);font-size:16px;line-height:1;font-family:var(--lib-font-mono)}.alert-close:hover{opacity:1}:host([type="default"]) .alert,.alert{background:var(--bg-surface);border-color:var(--border-strong)}:host([type="default"]) .alert-title{color:var(--text-secondary)}:host([type="default"]) .alert-body{color:var(--text-secondary)}:host([type="info"]) .alert{background:var(--color-celadon-50);border-color:var(--color-celadon-400)}:host([type="info"]) .alert-title{color:var(--color-celadon-600)}:host([type="info"]) .alert-body{color:var(--color-celadon-500)}:host([type="warning"]) .alert{background:#fffbf0;border-color:var(--color-warning)}:host([type="warning"]) .alert-title{color:var(--color-warning)}:host([type="warning"]) .alert-body{color:#6b5010}:host([type="error"]) .alert{background:#fff8f7;border-color:var(--color-error)}:host([type="error"]) .alert-title{color:var(--color-error)}:host([type="error"]) .alert-body{color:#6b2015}:host([type="success"]) .alert{background:#f5faf6;border-color:var(--color-success)}:host([type="success"]) .alert-title{color:var(--color-success)}:host([type="success"]) .alert-body{color:#1e4a2a}:host([glass]) .alert{background:var(--lib-glass-bg);-webkit-backdrop-filter:var(--lib-glass-filter);backdrop-filter:var(--lib-glass-filter);border:var(--lib-glass-border);border-left-width:2px;box-shadow:var(--lib-glass-shadow);position:relative;overflow:hidden}:host([glass]) .alert:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--lib-glass-shine);pointer-events:none}:host([glass]) .alert-title,:host([glass]) .alert-body{color:var(--lib-glass-text);text-shadow:var(--lib-glass-text-shadow);position:relative;z-index:1}:host([glass]) .alert-close{color:var(--lib-glass-text);position:relative;z-index:1}}';
+const glassCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.glass-card{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--lib-glass-bg);-webkit-backdrop-filter:var(--lib-glass-filter);backdrop-filter:var(--lib-glass-filter);border:var(--lib-glass-border);box-shadow:var(--lib-glass-shadow);transition:box-shadow var(--duration-slow) var(--ease-default),transform var(--duration-slow) var(--ease-default)}.glass-card:hover{box-shadow:var(--lib-glass-shadow-hover);transform:translateY(-2px)}.glass-card: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}.glass-card__slot{position:relative;z-index:1}:host([variant="water"]) .glass-card{background:var(--lib-glass-bg-water)}:host([variant="kaki"]) .glass-card{background:var(--lib-glass-bg-kaki)}:host([intensity="low"]) .glass-card{background:oklch(98% .01 60deg / var(--lib-glass-opacity-low));-webkit-backdrop-filter:blur(var(--lib-glass-blur-low)) saturate(var(--lib-glass-saturate-amount));backdrop-filter:blur(var(--lib-glass-blur-low)) saturate(var(--lib-glass-saturate-amount))}:host([intensity="high"]) .glass-card{background:oklch(98% .01 60deg / var(--lib-glass-opacity-high));-webkit-backdrop-filter:blur(var(--lib-glass-blur-high)) saturate(var(--lib-glass-saturate-amount));backdrop-filter:blur(var(--lib-glass-blur-high)) saturate(var(--lib-glass-saturate-amount))}:host([variant="water"][intensity="low"]) .glass-card{background:oklch(55% .06 210deg / var(--lib-glass-opacity-low))}:host([variant="water"][intensity="high"]) .glass-card{background:oklch(55% .06 210deg / var(--lib-glass-opacity-high))}:host([variant="kaki"][intensity="low"]) .glass-card{background:oklch(45% .05 45deg / var(--lib-glass-opacity-low))}:host([variant="kaki"][intensity="high"]) .glass-card{background:oklch(45% .05 45deg / var(--lib-glass-opacity-high))}}';
 export {
-  alertCss as default
+  glassCss as default
 };
 //# sourceMappingURL=index286.js.map

package/dist/index287.js

@@ -1,54 +1,19 @@
 import { html } from "lit";
-const chevronSvg = html`
-  <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-    <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/>
-  </svg>`;
-function dropdownTemplate(ctx) {
+function spotlightCardTemplate(props) {
   return html`
-    <div class="dd" part="root">
-
-      <!-- ── Trigger ── -->
-      <button
-        class="dd-trigger"
-        part="trigger"
-        aria-haspopup="true"
-        aria-expanded="${ctx.open}"
-        aria-label="${ctx.ariaLabel || ctx.label}"
-        @click="${() => ctx._toggle()}"
-        @keydown="${(e) => ctx._handleTriggerKey(e)}"
-      >
-        <slot name="trigger">${ctx.label}</slot>
-        <span class="dd-chevron" part="chevron">${chevronSvg}</span>
-      </button>
-
-      <!-- ── Panel ── -->
-      <div
-        class="dd-menu"
-        part="menu"
-        role="menu"
-        style="${ctx.minWidth ? `--dd-min-width:${ctx.minWidth}` : ""}"
-        @keydown="${(e) => ctx._handleMenuKey(e)}"
-      >
-        <!-- Header opcional (búsqueda, título) -->
-        <div class="dd-header-wrap" part="header-wrap"
-          style="${ctx._hasSlot("header") ? "" : "display:none"}">
-          <slot name="header"></slot>
-        </div>
-
-        <!-- Contenido: items, separadores, grupos -->
+    <div
+      class="spotlight"
+      @mousemove=${props.onMouseMove}
+      @mouseleave=${props.onMouseLeave}
+    >
+      <div class="spotlight__layer"></div>
+      <div class="spotlight__slot">
         <slot></slot>
-
-        <!-- Footer opcional (acciones, confirmación) -->
-        <div class="dd-footer-wrap" part="footer-wrap"
-          style="${ctx._hasSlot("footer") ? "" : "display:none"}">
-          <slot name="footer"></slot>
-        </div>
       </div>
-
     </div>
   `;
 }
 export {
-  dropdownTemplate
+  spotlightCardTemplate
 };
 //# sourceMappingURL=index287.js.map

package/dist/index287.js.map

@@ -1 +1 @@
-{"version":3,"file":"index287.js","sources":["../src/components/molecules/dropdown/lib-dropdown.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibDropdown } from './lib-dropdown.component';\n\n/* Chevron SVG inline — no depende de Phosphor ni ninguna lib */\nconst chevronSvg: TemplateResult = html`\n  <svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z\"/>\n  </svg>`;\n\nexport function dropdownTemplate(ctx: LibDropdown): TemplateResult {\n  return html`\n    <div class=\"dd\" part=\"root\">\n\n      <!-- ── Trigger ── -->\n      <button\n        class=\"dd-trigger\"\n        part=\"trigger\"\n        aria-haspopup=\"true\"\n        aria-expanded=\"${ctx.open}\"\n        aria-label=\"${ctx.ariaLabel || ctx.label}\"\n        @click=\"${(): void => ctx._toggle()}\"\n        @keydown=\"${(e: KeyboardEvent): void => ctx._handleTriggerKey(e)}\"\n      >\n        <slot name=\"trigger\">${ctx.label}</slot>\n        <span class=\"dd-chevron\" part=\"chevron\">${chevronSvg}</span>\n      </button>\n\n      <!-- ── Panel ── -->\n      <div\n        class=\"dd-menu\"\n        part=\"menu\"\n        role=\"menu\"\n        style=\"${ctx.minWidth ? `--dd-min-width:${ctx.minWidth}` : ''}\"\n        @keydown=\"${(e: KeyboardEvent): void => ctx._handleMenuKey(e)}\"\n      >\n        <!-- Header opcional (búsqueda, título) -->\n        <div class=\"dd-header-wrap\" part=\"header-wrap\"\n          style=\"${ctx._hasSlot('header') ? '' : 'display:none'}\">\n          <slot name=\"header\"></slot>\n        </div>\n\n        <!-- Contenido: items, separadores, grupos -->\n        <slot></slot>\n\n        <!-- Footer opcional (acciones, confirmación) -->\n        <div class=\"dd-footer-wrap\" part=\"footer-wrap\"\n          style=\"${ctx._hasSlot('footer') ? '' : 'display:none'}\">\n          <slot name=\"footer\"></slot>\n        </div>\n      </div>\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,aAA6B;AAAA;AAAA;AAAA;AAK5B,SAAS,iBAAiB,KAAkC;AACjE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQgB,IAAI,IAAI;AAAA,sBACX,IAAI,aAAa,IAAI,KAAK;AAAA,kBAC9B,MAAY,IAAI,SAAS;AAAA,oBACvB,CAAC,MAA2B,IAAI,kBAAkB,CAAC,CAAC;AAAA;AAAA,+BAEzC,IAAI,KAAK;AAAA,kDACU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQ3C,IAAI,WAAW,kBAAkB,IAAI,QAAQ,KAAK,EAAE;AAAA,oBACjD,CAAC,MAA2B,IAAI,eAAe,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,mBAIlD,IAAI,SAAS,QAAQ,IAAI,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAS5C,IAAI,SAAS,QAAQ,IAAI,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/D;"}
+{"version":3,"file":"index287.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;"}

package/dist/index288.js

@@ -1,5 +1,5 @@
-const dropdownCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block;position:relative}*,*:before,*:after{box-sizing:border-box}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer}}@layer components{.dd{position:relative;display:inline-block;-webkit-user-select:none;user-select:none}.dd-trigger{display:inline-flex;align-items:center;gap:var(--lib-space-sm);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;cursor:pointer;background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-default);padding:calc(var(--lib-space-sm) + var(--lib-space-xs)) var(--lib-space-md);white-space:nowrap;transition:background var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out)}.dd-trigger:hover{background:var(--bg-surface);border-color:var(--border-strong)}:host([open]) .dd-trigger{background:var(--bg-surface);border-color:var(--color-washi-700)}.dd-trigger:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:2px}.dd-chevron{display:flex;align-items:center;flex-shrink:0;color:var(--text-muted);transition:transform var(--duration-slow) var(--ease-out);line-height:1}.dd-chevron svg{width:12px;height:12px}:host([open]) .dd-chevron{transform:rotate(180deg)}:host([variant="ghost"]) .dd-trigger{background:transparent;border-color:transparent;color:var(--text-secondary)}:host([variant="ghost"]) .dd-trigger:hover{background:var(--bg-surface);border-color:transparent}:host([variant="ghost"][open]) .dd-trigger{background:var(--bg-surface);border-color:transparent}:host([variant="filled"]) .dd-trigger{background:var(--color-washi-900);border-color:var(--color-washi-900);color:var(--color-washi-50)}:host([variant="filled"]) .dd-trigger:hover{background:var(--color-washi-800);border-color:var(--color-washi-800)}:host([variant="filled"]) .dd-chevron{color:var(--color-washi-400)}:host([variant="kaki"]) .dd-trigger{background:var(--color-kaki-500);border-color:var(--color-kaki-500);color:#fff}:host([variant="kaki"]) .dd-trigger:hover{background:var(--color-kaki-600);border-color:var(--color-kaki-600)}:host([variant="kaki"]) .dd-chevron{color:#fff9}.dd-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:300;min-width:var(--dd-min-width, 200px);background:var(--bg-elevated);border:1px solid var(--border-default);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(-6px) scaleY(.97);transform-origin:top center;pointer-events:none;transition:opacity .16s var(--ease-out),transform .2s var(--ease-out)}:host([open]) .dd-menu{opacity:1;transform:translateY(0) scaleY(1);pointer-events:auto}:host([align="right"]) .dd-menu{left:auto;right:0}::slotted(.dd-item){display:flex!important;align-items:center;gap:.75rem;width:100%;padding:.75rem var(--lib-space-md);font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-secondary);background:transparent;border:none;cursor:pointer;text-align:left;text-decoration:none;white-space:nowrap;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}::slotted(.dd-item:hover){background:var(--bg-surface);color:var(--text-primary)}::slotted(.dd-item.is-active){color:var(--text-primary);background:var(--color-washi-100)}::slotted(.dd-item.is-disabled){opacity:.38;cursor:not-allowed;pointer-events:none}::slotted(.dd-item.is-danger){color:var(--color-error)}::slotted(.dd-item.is-danger:hover){background:var(--color-error-light);color:var(--color-error)}::slotted(.dd-sep){display:block!important;height:1px;background:var(--border-subtle);margin:var(--lib-space-xs) 0;border:none}::slotted(.dd-group-label){display:block!important;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);padding:.75rem var(--lib-space-md) var(--lib-space-xs)}.dd-header-wrap{border-bottom:1px solid var(--border-subtle)}.dd-footer-wrap{border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:flex-end;gap:var(--lib-space-sm);padding:var(--lib-space-sm) var(--lib-space-md)}.dd-scroll-wrap{max-height:220px;overflow-y:auto;overscroll-behavior:contain}.dd-scroll-wrap::-webkit-scrollbar{width:4px}.dd-scroll-wrap::-webkit-scrollbar-track{background:transparent}.dd-scroll-wrap::-webkit-scrollbar-thumb{background:var(--color-washi-300);border-radius:2px}:host([dark]) .dd-menu{background:var(--color-washi-900);border-color:var(--color-washi-800)}:host([dark]) .dd-header-wrap{border-color:var(--color-washi-800)}:host([dark]) .dd-footer-wrap{border-color:var(--color-washi-800)}:host([dark]) ::slotted(.dd-item){color:var(--color-washi-400)}:host([dark]) ::slotted(.dd-item:hover){background:var(--color-washi-800);color:var(--color-washi-100)}:host([dark]) ::slotted(.dd-item.is-active){background:var(--color-washi-800);color:var(--color-washi-100)}:host([dark]) ::slotted(.dd-item.is-danger){color:#e87a6a}:host([dark]) ::slotted(.dd-item.is-danger:hover){background:#8c2a1a4d;color:#e87a6a}:host([dark]) ::slotted(.dd-sep){background:var(--color-washi-800)}:host([dark]) ::slotted(.dd-group-label){color:var(--color-washi-600)}}';
+const spotlightCss = '@layer tokens,reset,components;@layer reset{:host{display:block;--lib-spotlight-x: 50%;--lib-spotlight-y: 50%}*,*:before,*:after{box-sizing:border-box}}@layer components{.spotlight{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:#0b181c;border:1px solid oklch(100% 0 0deg / .08);cursor:crosshair;transition:border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-base) var(--ease-default)}.spotlight:hover{border-color:#ffffff26;box-shadow:0 8px 32px #0006}:host([kintsugi]) .spotlight{background:#190f0a}:host([kintsugi]) .spotlight:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;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:2}.spotlight__layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:inherit;background:var(--lib-spotlight-gradient);opacity:0;transition:opacity var(--duration-base) var(--ease-default);z-index:1}.spotlight:hover .spotlight__layer{opacity:1}:host([spotlight="water"]) .spotlight__layer{background:var(--lib-spotlight-gradient-water)}:host([spotlight="white"]) .spotlight__layer{background:var(--lib-spotlight-gradient-white)}.spotlight__slot{position:relative;z-index:3}}';
 export {
-  dropdownCss as default
+  spotlightCss as default
 };
 //# sourceMappingURL=index288.js.map

package/dist/index289.js

@@ -1,36 +1,5 @@
-import { html, nothing } from "lit";
-function emptyStateTemplate(props) {
-  const illustrationZone = props.kanji ? html`
-        <div class="es-illustration">
-          <span class="es-kanji">${props.kanji}</span>
-        </div>
-      ` : html`
-        <div class="es-illustration">
-          <div class="es-icon-wrap">
-            <slot name="illustration"></slot>
-          </div>
-        </div>
-      `;
-  return html`
-    <div class="es
-      ${props.layout === "inline" ? "es-inline" : ""}
-      ${props.size === "sm" ? "es-sm" : ""}
-      ${props.tone !== "neutral" ? `es-${props.tone}` : ""}
-      ${props.bordered ? "es-bordered" : ""}
-      ${props.ghost ? "es-ghost" : ""}
-    ">
-      ${illustrationZone}
-      <div class="es-body">
-        ${props.heading ? html`<h3 class="es-title">${props.heading}</h3>` : nothing}
-        ${props.description ? html`<p class="es-desc">${props.description}</p>` : nothing}
-        <div class="es-actions">
-          <slot name="actions"></slot>
-        </div>
-      </div>
-    </div>
-  `;
-}
+const gridCss = "@layer tokens,reset,components;@layer tokens{:host{display:block;--cg-cols: repeat(auto-fill, minmax(280px, 1fr));--cg-gap: 1.5px;--cg-bg: rgb(255, 255, 255, .04);--cg-border: rgb(255, 255, 255, .04)}}@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{.grid{display:grid;grid-template-columns:var(--cg-cols);gap:var(--cg-gap);background:var(--cg-bg);border:1px solid var(--cg-border)}::slotted(lib-component-card[featured]){grid-column:span 2}@media(max-width:700px){::slotted(lib-component-card[featured]){grid-column:span 1}}@media(max-width:600px){.grid{grid-template-columns:1fr}}}";
 export {
-  emptyStateTemplate
+  gridCss as default
 };
 //# sourceMappingURL=index289.js.map

package/dist/index289.js.map

@@ -1 +1 @@
-{"version":3,"file":"index289.js","sources":["../src/components/molecules/empty-state/lib-empty-state.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibEmptyStateTone   = 'neutral' | 'kaki' | 'celadon' | 'error';\nexport type LibEmptyStateLayout = 'default' | 'inline';\nexport type LibEmptyStateSize   = 'sm' | 'md';\n\nexport interface EmptyStateTemplateProps {\n  heading:     string;\n  description: string;\n  kanji:       string;\n  tone:        LibEmptyStateTone;\n  layout:      LibEmptyStateLayout;\n  size:        LibEmptyStateSize;\n  bordered:    boolean;\n  ghost:       boolean;\n}\n\n/**\n * Template para lib-empty-state.\n *\n * Estructura (ambos layouts):\n *   div.es\n *     div.es-illustration     ← kanji | icon-wrap[slot=illustration]\n *     div.es-body\n *       h3.es-title\n *       p.es-desc\n *       div.es-actions\n *         slot[name=actions]\n *\n * La zona de ilustración se omite si no hay kanji ni slot.\n * El CSS diferencia .es-inline (row) de .es (column).\n */\nexport function emptyStateTemplate(props: EmptyStateTemplateProps): TemplateResult {\n  const illustrationZone = props.kanji\n    ? html`\n        <div class=\"es-illustration\">\n          <span class=\"es-kanji\">${props.kanji}</span>\n        </div>\n      `\n    : html`\n        <div class=\"es-illustration\">\n          <div class=\"es-icon-wrap\">\n            <slot name=\"illustration\"></slot>\n          </div>\n        </div>\n      `;\n\n  return html`\n    <div class=\"es\n      ${props.layout  === 'inline'  ? 'es-inline'  : ''}\n      ${props.size    === 'sm'      ? 'es-sm'      : ''}\n      ${props.tone    !== 'neutral' ? `es-${props.tone}` : ''}\n      ${props.bordered              ? 'es-bordered' : ''}\n      ${props.ghost                 ? 'es-ghost'   : ''}\n    \">\n      ${illustrationZone}\n      <div class=\"es-body\">\n        ${props.heading\n          ? html`<h3 class=\"es-title\">${props.heading}</h3>`\n          : nothing}\n        ${props.description\n          ? html`<p class=\"es-desc\">${props.description}</p>`\n          : nothing}\n        <div class=\"es-actions\">\n          <slot name=\"actions\"></slot>\n        </div>\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAgCO,SAAS,mBAAmB,OAAgD;AACjF,QAAM,mBAAmB,MAAM,QAC3B;AAAA;AAAA,mCAE6B,MAAM,KAAK;AAAA;AAAA,UAGxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQJ,SAAO;AAAA;AAAA,QAED,MAAM,WAAY,WAAY,cAAe,EAAE;AAAA,QAC/C,MAAM,SAAY,OAAY,UAAe,EAAE;AAAA,QAC/C,MAAM,SAAY,YAAY,MAAM,MAAM,IAAI,KAAK,EAAE;AAAA,QACrD,MAAM,WAAwB,gBAAgB,EAAE;AAAA,QAChD,MAAM,QAAwB,aAAe,EAAE;AAAA;AAAA,QAE/C,gBAAgB;AAAA;AAAA,UAEd,MAAM,UACJ,4BAA4B,MAAM,OAAO,UACzC,OAAO;AAAA,UACT,MAAM,cACJ,0BAA0B,MAAM,WAAW,SAC3C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnB;"}
+{"version":3,"file":"index289.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}