@shibui-ui/ui 1.25.1 → 1.26.1

package/dist/index243.js

@@ -1,85 +1,5 @@
-import { html } from "lit";
-const closeSvg = html`
-  <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
-       stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
-    <path d="M1 1l10 10M11 1L1 11"/>
-  </svg>
-`;
-const dangerSvg = html`
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
-       stroke="var(--color-error)" stroke-width="1.5"
-       stroke-linecap="round" stroke-linejoin="round">
-    <path d="M8 2L14.5 13H1.5L8 2z"/>
-    <path d="M8 6v3M8 11v.5"/>
-  </svg>
-`;
-const warningSvg = html`
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
-       stroke="var(--color-warning)" stroke-width="1.5"
-       stroke-linecap="round" stroke-linejoin="round">
-    <circle cx="8" cy="8" r="6"/>
-    <path d="M8 5v3M8 10v.5"/>
-  </svg>
-`;
-function dialogTemplate(props) {
-  const {
-    eyebrow,
-    dlgTitle,
-    variant,
-    size,
-    layout,
-    footerMeta,
-    onClose
-  } = props;
-  const layoutCls = layout === "drawer-right" ? "dlg-drawer-right" : layout === "drawer-bottom" ? "dlg-drawer-bottom" : "";
-  const alertCls = layout === "alert" ? "dlg-alert" : "";
-  const sizeCls = `dlg-${size}`;
-  const dlgCls = `dlg ${sizeCls} ${layoutCls} ${alertCls}`.trim();
-  const hasIcon = variant === "danger" || variant === "warning";
-  const headerIcon = hasIcon ? html`<div class="dlg-header-icon">
-        ${variant === "danger" ? dangerSvg : warningSvg}
-      </div>` : null;
-  return html`
-    <dialog
-      class="${dlgCls}"
-      @cancel="${(e) => {
-    e.preventDefault();
-    onClose();
-  }}"
-      @click="${(e) => {
-    if (e.target.tagName === "DIALOG") onClose();
-  }}"
-    >
-      <!-- HEADER -->
-      <div class="dlg-header">
-        ${headerIcon}
-        <div class="dlg-header-text" style="${hasIcon ? "margin-left: var(--lib-space-md)" : ""}">
-          ${eyebrow ? html`<p class="dlg-eyebrow">${eyebrow}</p>` : null}
-          <slot name="header">
-            <h2 class="dlg-title">${dlgTitle}</h2>
-          </slot>
-        </div>
-        <button
-          class="dlg-close"
-          aria-label="Cerrar"
-          @click="${() => onClose()}"
-        >${closeSvg}</button>
-      </div>
-
-      <!-- BODY -->
-      <div class="dlg-body">
-        <slot></slot>
-      </div>
-
-      <!-- FOOTER -->
-      <div class="dlg-footer">
-        ${footerMeta ? html`<span class="dlg-footer-meta">${footerMeta}</span>` : null}
-        <slot name="footer"></slot>
-      </div>
-    </dialog>
-  `;
-}
+const uploaderCss = "@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}:host{display:block}}@layer components{.fu-root{display:flex;flex-direction:column;width:100%}.fu-zone{position:relative;border:1.5px dashed var(--border-default);background:var(--bg-elevated);padding:var(--lib-space-xl) var(--lib-space-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--lib-space-md);text-align:center;cursor:pointer;transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out),transform var(--duration-fast);width:100%}.fu-zone input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;width:100%;height:100%}.fu-zone:hover{border-color:var(--border-strong);background:var(--bg-surface)}.fu-zone.is-dragover{border-color:var(--color-kaki-400);background:var(--color-kaki-50);transform:scale(1.005)}.fu-zone.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.fu-zone-icon{font-size:40px;color:var(--text-muted);line-height:1;display:flex;transition:color var(--duration-base),transform var(--duration-slow) var(--ease-bounce)}.fu-zone:hover .fu-zone-icon,.fu-zone.is-dragover .fu-zone-icon{color:var(--color-kaki-400);transform:translateY(-3px) scale(1.08)}.fu-zone-title{font-family:var(--lib-font-display);font-size:var(--text-xl);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);color:var(--text-primary)}.fu-zone-sub{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);color:var(--text-muted);text-transform:uppercase}.fu-zone-sub span{color:var(--color-kaki-500);text-decoration:underline;text-underline-offset:2px}.fu-zone-hint{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);margin-top:var(--lib-space-xs)}.fu-zone-sm{position:relative;border:1px dashed var(--border-default);background:var(--bg-elevated);padding:var(--lib-space-md) var(--lib-space-md);display:flex;align-items:center;gap:var(--lib-space-md);cursor:pointer;transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out);width:100%}.fu-zone-sm input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;width:100%;height:100%}.fu-zone-sm:hover,.fu-zone-sm.is-dragover{border-color:var(--color-kaki-400);background:var(--color-kaki-50)}.fu-zone-sm.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.fu-zone-sm-icon{font-size:22px;color:var(--text-muted);flex-shrink:0;display:flex;transition:color var(--duration-base)}.fu-zone-sm:hover .fu-zone-sm-icon,.fu-zone-sm.is-dragover .fu-zone-sm-icon{color:var(--color-kaki-400)}.fu-zone-sm-text{display:flex;flex-direction:column;gap:2px}.fu-zone-sm-title{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);color:var(--text-secondary);text-transform:uppercase}.fu-zone-sm-sub{font-family:var(--lib-font-mono);font-size:10px;color:var(--text-muted);letter-spacing:var(--tracking-wide)}.fu-zone-img{position:relative;border:1.5px dashed var(--border-default);background:var(--bg-surface);width:100%;aspect-ratio:16 / 7;overflow:hidden;cursor:pointer;transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--lib-space-sm)}.fu-zone-img input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;width:100%;height:100%}.fu-zone-img:hover{border-color:var(--border-strong)}.fu-zone-img.is-dragover{border-color:var(--color-kaki-400);background:var(--color-kaki-50)}.fu-zone-img.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.fu-zone-img-placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--lib-space-sm);pointer-events:none}.fu-zone-img-preview{position:absolute;top:0;right:0;bottom:0;left:0;object-fit:cover;width:100%;height:100%;display:none}.fu-zone-img.has-preview .fu-zone-img-preview{display:block}.fu-zone-img.has-preview .fu-zone-img-placeholder{display:none}.fu-zone-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#221c1680;display:flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);opacity:0;transition:opacity var(--duration-base);pointer-events:none}.fu-zone-img.has-preview:hover .fu-zone-img-overlay{opacity:1}.fu-zone-img-overlay-text{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-white)}.fu-progress-bar{height:2px;background:var(--border-subtle);width:100%;overflow:hidden;margin-top:-1px}.fu-progress-fill{height:100%;background:var(--color-kaki-400);transition:width 80ms linear}.fu-list{display:flex;flex-direction:column;gap:1px;width:100%}.fu-file{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--lib-space-md);padding:var(--lib-space-md) var(--lib-space-md);background:var(--bg-elevated);border:1px solid var(--border-subtle);position:relative;overflow:hidden;transition:background var(--duration-base);animation:fu-slide-in .25s var(--ease-out)}.fu-file:hover{background:var(--bg-surface)}.fu-file-prog-bg{position:absolute;left:0;top:0;bottom:0;background:var(--color-kaki-50);transition:width 80ms linear;pointer-events:none;z-index:0}.fu-file>*{position:relative;z-index:1}.fu-file-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border-subtle);flex-shrink:0;transition:color var(--duration-base),background var(--duration-base)}.fu-file.is-done .fu-file-icon{color:var(--color-celadon-500);background:var(--color-celadon-50);border-color:var(--color-celadon-100)}.fu-file.is-error .fu-file-icon{color:var(--color-error);background:#fff8f7;border-color:#f5c4bc}.fu-ext{font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}.fu-file-thumb{width:36px;height:36px;object-fit:cover;flex-shrink:0;border:1px solid var(--border-subtle);display:block}.fu-file-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.fu-file-name{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fu-file-info{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);display:flex;align-items:center;gap:var(--lib-space-sm)}.fu-file-info-sep{width:3px;height:3px;border-radius:var(--radius-full);background:var(--color-washi-300);flex-shrink:0}.fu-file-actions{display:flex;align-items:center;gap:var(--lib-space-sm);flex-shrink:0}.fu-file-pct{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--color-kaki-500);min-width:28px;text-align:right}.fu-status-done{color:var(--color-celadon-500);font-size:18px;display:flex}.fu-status-error{color:var(--color-error);font-size:18px;display:flex}.fu-file-remove{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-muted);background:transparent;border:none;cursor:pointer;border-radius:var(--radius-full);transition:background var(--duration-fast),color var(--duration-fast);flex-shrink:0}.fu-file-remove:hover{background:var(--color-washi-200);color:var(--text-primary)}.fu-file.is-error .fu-file-remove:hover{background:#fff8f7;color:var(--color-error)}.fu-summary{display:flex;align-items:center;justify-content:space-between;padding:var(--lib-space-sm) var(--lib-space-md);background:var(--bg-surface);border:1px solid var(--border-subtle);border-top:none}.fu-summary-text{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}.fu-summary-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-sm) var(--lib-space-md);cursor:pointer;transition:background var(--duration-base)}.fu-summary-btn:hover{background:var(--color-washi-800)}.fu-summary-btn:disabled{opacity:.38;cursor:not-allowed}.fu-spinner{width:16px;height:16px;border:2px solid var(--color-washi-200);border-top-color:var(--color-kaki-400);border-radius:var(--radius-full);animation:fu-spin .7s linear infinite;flex-shrink:0}@keyframes fu-slide-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes fu-spin{to{transform:rotate(360deg)}}}";
 export {
-  dialogTemplate
+  uploaderCss as default
 };
 //# sourceMappingURL=index243.js.map

package/dist/index243.js.map

@@ -1 +1 @@
-{"version":3,"file":"index243.js","sources":["../src/components/organisms/dialog/lib-dialog.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { DialogTemplateProps } from './lib-dialog.types';\n\n/* SVG del botón de cierre — reutilizable */\nconst closeSvg = html`\n  <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n       stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n    <path d=\"M1 1l10 10M11 1L1 11\"/>\n  </svg>\n`;\n\n/* Icono para variante danger */\nconst dangerSvg = html`\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n       stroke=\"var(--color-error)\" stroke-width=\"1.5\"\n       stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <path d=\"M8 2L14.5 13H1.5L8 2z\"/>\n    <path d=\"M8 6v3M8 11v.5\"/>\n  </svg>\n`;\n\n/* Icono para variante warning */\nconst warningSvg = html`\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n       stroke=\"var(--color-warning)\" stroke-width=\"1.5\"\n       stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <circle cx=\"8\" cy=\"8\" r=\"6\"/>\n    <path d=\"M8 5v3M8 10v.5\"/>\n  </svg>\n`;\n\nexport function dialogTemplate(props: DialogTemplateProps): TemplateResult {\n  const {\n    eyebrow, dlgTitle, variant, size,\n    layout, footerMeta, onClose,\n  } = props;\n\n  /* ── Clases del <dialog> ── */\n  const layoutCls =\n    layout === 'drawer-right'  ? 'dlg-drawer-right'  :\n    layout === 'drawer-bottom' ? 'dlg-drawer-bottom' :\n    '';\n  const alertCls = layout === 'alert' ? 'dlg-alert' : '';\n  const sizeCls  = `dlg-${size}`;\n  const dlgCls   = `dlg ${sizeCls} ${layoutCls} ${alertCls}`.trim();\n\n  /* ── Icono de header (solo danger / warning) ── */\n  const hasIcon = variant === 'danger' || variant === 'warning';\n  const headerIcon = hasIcon\n    ? html`<div class=\"dlg-header-icon\">\n        ${ variant === 'danger' ? dangerSvg : warningSvg }\n      </div>`\n    : null;\n\n  return html`\n    <dialog\n      class=\"${dlgCls}\"\n      @cancel=\"${(e: Event): void => { e.preventDefault(); onClose(); }}\"\n      @click=\"${(e: MouseEvent): void => {\n        /* Cierre al click sobre el backdrop (target === dialog) */\n        if ((e.target as HTMLElement).tagName === 'DIALOG') onClose();\n      }}\"\n    >\n      <!-- HEADER -->\n      <div class=\"dlg-header\">\n        ${headerIcon}\n        <div class=\"dlg-header-text\" style=\"${hasIcon ? 'margin-left: var(--lib-space-md)' : ''}\">\n          ${eyebrow ? html`<p class=\"dlg-eyebrow\">${eyebrow}</p>` : null}\n          <slot name=\"header\">\n            <h2 class=\"dlg-title\">${dlgTitle}</h2>\n          </slot>\n        </div>\n        <button\n          class=\"dlg-close\"\n          aria-label=\"Cerrar\"\n          @click=\"${(): void => onClose()}\"\n        >${closeSvg}</button>\n      </div>\n\n      <!-- BODY -->\n      <div class=\"dlg-body\">\n        <slot></slot>\n      </div>\n\n      <!-- FOOTER -->\n      <div class=\"dlg-footer\">\n        ${footerMeta ? html`<span class=\"dlg-footer-meta\">${footerMeta}</span>` : null}\n        <slot name=\"footer\"></slot>\n      </div>\n    </dialog>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUlB,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASZ,SAAS,eAAe,OAA4C;AACzE,QAAM;AAAA,IACJ;AAAA,IAAS;AAAA,IAAU;AAAA,IAAS;AAAA,IAC5B;AAAA,IAAQ;AAAA,IAAY;AAAA,EAAA,IAClB;AAGJ,QAAM,YACJ,WAAW,iBAAkB,qBAC7B,WAAW,kBAAkB,sBAC7B;AACF,QAAM,WAAW,WAAW,UAAU,cAAc;AACpD,QAAM,UAAW,OAAO,IAAI;AAC5B,QAAM,SAAW,OAAO,OAAO,IAAI,SAAS,IAAI,QAAQ,GAAG,KAAA;AAG3D,QAAM,UAAU,YAAY,YAAY,YAAY;AACpD,QAAM,aAAa,UACf;AAAA,UACK,YAAY,WAAW,YAAY,UAAW;AAAA,gBAEnD;AAEJ,SAAO;AAAA;AAAA,eAEM,MAAM;AAAA,iBACJ,CAAC,MAAmB;AAAE,MAAE,eAAA;AAAkB,YAAA;AAAA,EAAW,CAAC;AAAA,gBACvD,CAAC,MAAwB;AAEjC,QAAK,EAAE,OAAuB,YAAY,SAAU,SAAA;AAAA,EACtD,CAAC;AAAA;AAAA;AAAA;AAAA,UAIG,UAAU;AAAA,8CAC0B,UAAU,qCAAqC,EAAE;AAAA,YACnF,UAAU,8BAA8B,OAAO,SAAS,IAAI;AAAA;AAAA,oCAEpC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMxB,MAAY,SAAS;AAAA,WAC9B,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAUT,aAAa,qCAAqC,UAAU,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAKtF;"}
+{"version":3,"file":"index243.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index244.js

@@ -1,5 +1,263 @@
-const dialogCss = '@layer tokens,reset,components;@layer reset{:host{display:contents}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{dialog::backdrop{background:#120e0a00;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background .3s,backdrop-filter .3s}dialog.is-open::backdrop{background:#120e0a8c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}dialog.dlg{position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;padding:0;border:1px solid var(--border-default);background:var(--bg-elevated);box-shadow:var(--shadow-xl);max-height:calc(100vh - var(--lib-space-xl));display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(12px) scale(.97);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-bounce)}dialog.dlg[open]{opacity:1;transform:translateY(0) scale(1)}dialog.dlg.is-closing{opacity:0;transform:translateY(6px) scale(.98);transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}.dlg-sm{width:min(400px,calc(100vw - var(--lib-space-md)))}.dlg-md{width:min(540px,calc(100vw - var(--lib-space-md)))}.dlg-lg{width:min(720px,calc(100vw - var(--lib-space-md)))}.dlg-xl{width:min(960px,calc(100vw - var(--lib-space-md)))}.dlg-full{width:100vw;height:100vh;max-height:100vh;margin:0}.dlg-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--lib-space-md);padding:var(--lib-space-xl) var(--lib-space-xl) var(--lib-space-lg);border-bottom:1px solid var(--border-subtle);flex-shrink:0}.dlg-header-text{flex:1}.dlg-header-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-subtle);flex-shrink:0;margin-top:2px}.dlg-eyebrow{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--lib-space-xs)}.dlg-title{font-family:var(--lib-font-display);font-size:var(--text-xl);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);line-height:1.2;color:var(--text-primary)}.dlg-title em{font-style:italic;color:var(--text-accent)}.dlg-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-subtle);background:transparent;cursor:pointer;color:var(--text-muted);flex-shrink:0;transition:border-color var(--duration-fast),color var(--duration-fast),background var(--duration-fast)}.dlg-close:hover{border-color:var(--border-default);color:var(--text-primary);background:var(--bg-surface)}.dlg-close svg{display:block;pointer-events:none}.dlg-body{padding:var(--lib-space-xl);overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--color-washi-300) transparent;font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed)}.dlg-footer{padding:var(--lib-space-lg) var(--lib-space-xl);border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:flex-end;gap:var(--lib-space-sm);flex-shrink:0;background:var(--bg-surface)}.dlg-footer-meta{margin-right:auto;font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}.dlg-divider{border:none;border-top:1px solid var(--border-subtle);margin:var(--lib-space-lg) 0}:host([variant="danger"]) .dlg-header{border-bottom-color:var(--color-error-border, #E8B4AE);background:var(--color-error-bg, #FDF0EE)}:host([variant="danger"]) .dlg-title{color:var(--color-error)}:host([variant="danger"]) .dlg-eyebrow{color:var(--color-error);opacity:.6}:host([variant="danger"]) .dlg-header-icon{border-color:var(--color-error-border, #E8B4AE)}:host([variant="danger"]) .dlg-close{border-color:var(--color-error-border, #E8B4AE)}:host([variant="warning"]) .dlg-header{border-bottom-color:var(--color-warning-border, #E8D0AE);background:var(--color-warning-bg, #FDF5EC)}:host([variant="warning"]) .dlg-title{color:var(--color-warning)}:host([variant="warning"]) .dlg-eyebrow{color:var(--color-warning);opacity:.6}:host([variant="warning"]) .dlg-header-icon{border-color:var(--color-warning-border, #E8D0AE)}:host([variant="warning"]) .dlg-close{border-color:var(--color-warning-border, #E8D0AE)}:host([variant="dark"]) dialog.dlg{background:var(--color-washi-950);border-color:#190f0a}:host([variant="dark"]) .dlg-header{border-bottom-color:#150a06}:host([variant="dark"]) .dlg-title{color:#faf7f4d9}:host([variant="dark"]) .dlg-eyebrow{color:#3c302a}:host([variant="dark"]) .dlg-close{border-color:#1e130e;color:#433831}:host([variant="dark"]) .dlg-close:hover{border-color:#372b26;color:#faf7f499;background:#100704}:host([variant="dark"]) .dlg-body{color:#6d6059}:host([variant="dark"]) .dlg-footer{background:#070201;border-top-color:#150a06}:host([variant="dark"]) .dlg-footer-meta{color:#312620}:host([variant="dark"]) .dlg-divider{border-top-color:#150a06}:host([layout="drawer-right"]) dialog.dlg{inset:0 0 0 auto;margin:0;height:100vh;max-height:100vh;border-top:none;border-bottom:none;border-right:none;opacity:0;transform:translate(40px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}:host([layout="drawer-right"]) dialog.dlg[open]{opacity:1;transform:translate(0)}:host([layout="drawer-right"]) dialog.dlg.is-closing{opacity:0;transform:translate(40px)}:host([layout="drawer-bottom"]) dialog.dlg{inset:auto 0 0;margin:0;width:100%;max-width:100%;border-left:none;border-right:none;border-bottom:none;opacity:0;transform:translateY(40px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}:host([layout="drawer-bottom"]) dialog.dlg[open]{opacity:1;transform:translateY(0)}:host([layout="drawer-bottom"]) dialog.dlg.is-closing{opacity:0;transform:translateY(40px)}:host([layout="alert"]) .dlg-header{padding:var(--lib-space-lg) var(--lib-space-lg) var(--lib-space-md)}:host([layout="alert"]) .dlg-body{padding:0 var(--lib-space-lg) var(--lib-space-lg)}:host([layout="alert"]) .dlg-footer{padding:var(--lib-space-md) var(--lib-space-lg)}:host([layout="alert"]) .dlg-title{font-family:var(--lib-font-body);font-size:var(--text-md)}@media(max-width:768px){.dlg-sm,.dlg-md,.dlg-lg,.dlg-xl{width:calc(100vw - var(--lib-space-md));margin:auto}}}';
+import { nothing, html } from "lit";
+import { map as o } from "./index264.js";
+import { styleMap as o$1 } from "./index267.js";
+function renderFileEntry(entry, onRemove) {
+  var _a;
+  const isUploading = entry.status === "uploading";
+  const isDone = entry.status === "done";
+  const isError = entry.status === "error";
+  const rowCls = [
+    "fu-file",
+    isDone ? "is-done" : "",
+    isError ? "is-error" : "",
+    isUploading ? "is-uploading" : ""
+  ].filter(Boolean).join(" ");
+  const ext = ((_a = entry.file.name.split(".").pop()) == null ? void 0 : _a.toLowerCase()) ?? "";
+  const isImg = ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext);
+  const fileSize = entry.file.size < 1024 * 1024 ? `${(entry.file.size / 1024).toFixed(0)} KB` : `${(entry.file.size / (1024 * 1024)).toFixed(1)} MB`;
+  return html`
+    <div class="${rowCls}">
+      <!-- Progress background -->
+      <div
+        class="fu-file-prog-bg"
+        style="${o$1({ width: isUploading ? `${entry.progress}%` : isDone ? "100%" : "0%" })}"
+      ></div>
+
+      <!-- Thumbnail o icono -->
+      ${isImg && entry.previewUrl ? html`<img class="fu-file-thumb" src="${entry.previewUrl}" alt="${entry.file.name}">` : html`
+            <div class="fu-file-icon">
+              ${isDone ? html`<lib-icon name="check-circle" weight="fill" size="sm"></lib-icon>` : isError ? html`<lib-icon name="warning-circle" weight="fill" size="sm"></lib-icon>` : html`<span class="fu-ext">${ext || "—"}</span>`}
+            </div>`}
+
+      <!-- Meta -->
+      <div class="fu-file-meta">
+        <span class="fu-file-name">${entry.file.name}</span>
+        <span class="fu-file-info">
+          <span>${fileSize}</span>
+          ${isError ? html`
+                <span class="fu-file-info-sep"></span>
+                <span style="color:var(--color-error)">${entry.errorMessage ?? "Error al subir"}</span>` : nothing}
+          ${isDone ? html`
+                <span class="fu-file-info-sep"></span>
+                <span style="color:var(--color-celadon-500)">Completado</span>` : nothing}
+        </span>
+      </div>
+
+      <!-- Acciones -->
+      <div class="fu-file-actions">
+        ${isUploading ? html`
+              <span class="fu-file-pct">${entry.progress}%</span>
+              <span class="fu-spinner"></span>` : isDone ? html`<span class="fu-status-done"><lib-icon name="check-circle" weight="fill" size="sm"></lib-icon></span>` : isError ? html`<span class="fu-status-error"><lib-icon name="warning" weight="fill" size="sm"></lib-icon></span>` : nothing}
+
+        <button
+          class="fu-file-remove"
+          aria-label="Eliminar ${entry.file.name}"
+          @click="${(e) => {
+    e.stopPropagation();
+    onRemove(entry.id);
+  }}"
+        >
+          <lib-icon name="x" size="xs"></lib-icon>
+        </button>
+      </div>
+    </div>
+  `;
+}
+function fileUploaderTemplate(props) {
+  var _a, _b;
+  const {
+    zone,
+    title,
+    /*subtitle*/
+    hint,
+    multiple,
+    accept,
+    disabled,
+    isDragover,
+    entries,
+    imagePreviewUrl,
+    onDragover,
+    onDragleave,
+    onDrop,
+    onInputChange,
+    onRemove,
+    onUploadAll,
+    onClearAll,
+    onResetImage
+  } = props;
+  const doneCount = entries.filter((e) => e.status === "done").length;
+  const uploadingCount = entries.filter((e) => e.status === "uploading").length;
+  const allDone = entries.length > 0 && doneCount === entries.length;
+  const anyUploading = uploadingCount > 0;
+  if (zone === "default") {
+    return html`
+      <div class="fu-root">
+        <!-- Drop zone -->
+        <div
+          class="fu-zone ${isDragover ? "is-dragover" : ""} ${disabled ? "is-disabled" : ""}"
+          @dragover="${(e) => {
+      if (!disabled) onDragover(e);
+    }}"
+          @dragleave="${() => {
+      if (!disabled) onDragleave();
+    }}"
+          @drop="${(e) => {
+      if (!disabled) onDrop(e);
+    }}"
+        >
+          <!-- input real cubriendo toda la zona -->
+          <input
+            type="file"
+            ?multiple="${multiple}"
+            accept="${accept}"
+            ?disabled="${disabled}"
+            @change="${onInputChange}"
+            aria-label="${title}"
+          >
+
+          <div class="fu-zone-icon">
+            <lib-icon name="cloud-arrow-up" weight="thin" size="xl"></lib-icon>
+          </div>
+
+          <div>
+            <p class="fu-zone-title">${title}</p>
+            <p class="fu-zone-sub" style="margin-top:var(--lib-space-sm)">
+              o <span>busca en tu equipo</span>
+            </p>
+          </div>
+
+          <p class="fu-zone-hint">${hint}</p>
+        </div>
+
+        <!-- Lista de archivos -->
+        ${entries.length > 0 ? html`
+          <div class="fu-list">
+            ${o(entries, (entry) => renderFileEntry(entry, onRemove))}
+          </div>
+
+          <!-- Footer summary -->
+          <div class="fu-summary">
+            <span class="fu-summary-text">
+              ${allDone ? `${doneCount} archivo${doneCount !== 1 ? "s" : ""} subido${doneCount !== 1 ? "s" : ""}` : anyUploading ? `Subiendo ${uploadingCount} archivo${uploadingCount !== 1 ? "s" : ""}…` : `${entries.length} archivo${entries.length !== 1 ? "s" : ""} seleccionado${entries.length !== 1 ? "s" : ""}`}
+            </span>
+            <div style="display:flex;gap:var(--lib-space-sm)">
+              <button
+                class="fu-summary-btn"
+                style="background:transparent;color:var(--text-muted);border:1px solid var(--border-default)"
+                ?disabled="${anyUploading}"
+                @click="${onClearAll}"
+              >Limpiar</button>
+              <button
+                class="fu-summary-btn"
+                ?disabled="${anyUploading || allDone}"
+                @click="${onUploadAll}"
+              >
+                ${anyUploading ? "Subiendo…" : "Subir todo"}
+              </button>
+            </div>
+          </div>
+        ` : nothing}
+      </div>
+    `;
+  }
+  if (zone === "compact") {
+    return html`
+      <div class="fu-root">
+        <div
+          class="fu-zone-sm ${isDragover ? "is-dragover" : ""} ${disabled ? "is-disabled" : ""}"
+          @dragover="${(e) => {
+      if (!disabled) onDragover(e);
+    }}"
+          @dragleave="${() => {
+      if (!disabled) onDragleave();
+    }}"
+          @drop="${(e) => {
+      if (!disabled) onDrop(e);
+    }}"
+        >
+          <input
+            type="file"
+            ?multiple="${multiple}"
+            accept="${accept}"
+            ?disabled="${disabled}"
+            @change="${onInputChange}"
+            aria-label="${title}"
+          >
+
+          <span class="fu-zone-sm-icon">
+            <lib-icon name="paperclip" size="md"></lib-icon>
+          </span>
+
+          <div class="fu-zone-sm-text">
+            <span class="fu-zone-sm-title">${title}</span>
+            <span class="fu-zone-sm-sub">${hint}</span>
+          </div>
+        </div>
+
+        ${entries.length > 0 ? html`
+          <div class="fu-list" style="margin-top:1px">
+            ${o(entries, (entry) => renderFileEntry(entry, onRemove))}
+          </div>
+        ` : nothing}
+      </div>
+    `;
+  }
+  return html`
+    <div class="fu-root">
+      <div
+        class="fu-zone-img ${isDragover ? "is-dragover" : ""} ${imagePreviewUrl ? "has-preview" : ""} ${disabled ? "is-disabled" : ""}"
+        @dragover="${(e) => {
+    if (!disabled) onDragover(e);
+  }}"
+        @dragleave="${() => {
+    if (!disabled) onDragleave();
+  }}"
+        @drop="${(e) => {
+    if (!disabled) onDrop(e);
+  }}"
+      >
+        <input
+          type="file"
+          accept="image/*"
+          ?disabled="${disabled || !!imagePreviewUrl}"
+          @change="${onInputChange}"
+          aria-label="${title}"
+        >
+
+        <!-- Placeholder (sin imagen) -->
+        <div class="fu-zone-img-placeholder">
+          <lib-icon name="image" weight="thin" size="xl" style="color:var(--text-muted)"></lib-icon>
+          <p class="fu-zone-sub">${title}</p>
+          <p class="fu-zone-hint">${hint}</p>
+        </div>
+
+        <!-- Preview (con imagen) -->
+        ${imagePreviewUrl ? html`<img class="fu-zone-img-preview" src="${imagePreviewUrl}" alt="Preview">` : nothing}
+
+        <!-- Overlay de reemplazo -->
+        ${imagePreviewUrl ? html`
+              <div class="fu-zone-img-overlay">
+                <lib-icon name="camera" size="md" style="color:#fff"></lib-icon>
+                <span class="fu-zone-img-overlay-text">Cambiar imagen</span>
+              </div>` : nothing}
+      </div>
+
+      <!-- Barra de progreso debajo de la zona imagen -->
+      ${entries.length > 0 && ((_a = entries[0]) == null ? void 0 : _a.status) === "uploading" ? html`
+            <div class="fu-progress-bar">
+              <div class="fu-progress-fill" style="width:${((_b = entries[0]) == null ? void 0 : _b.progress) ?? 0}%"></div>
+            </div>` : nothing}
+
+      ${imagePreviewUrl ? html`
+            <div style="display:flex;justify-content:flex-end;margin-top:var(--lib-space-sm)">
+              <button class="fu-file-remove" style="width:auto;padding:0 var(--lib-space-sm);border-radius:0;border:1px solid var(--border-default);font-family:var(--lib-font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase" @click="${onResetImage}">
+                Eliminar
+              </button>
+            </div>` : nothing}
+    </div>
+  `;
+}
 export {
-  dialogCss as default
+  fileUploaderTemplate
 };
 //# sourceMappingURL=index244.js.map

package/dist/index244.js.map

@@ -1 +1 @@
-{"version":3,"file":"index244.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index244.js","sources":["../src/components/molecules/file-uploader/lib-file-uploader.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { map } from 'lit/directives/map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type { FileEntry, FileUploaderTemplateProps } from './lib-file-uploader.types';\n\n/* ================================================================\n   FILE ENTRY — una fila en la lista\n   ================================================================ */\n\nfunction renderFileEntry(\n  entry: FileEntry,\n  onRemove: (id: string) => void,\n): TemplateResult {\n  const isUploading = entry.status === 'uploading';\n  const isDone      = entry.status === 'done';\n  const isError     = entry.status === 'error';\n\n  const rowCls = [\n    'fu-file',\n    isDone    ? 'is-done'      : '',\n    isError   ? 'is-error'     : '',\n    isUploading ? 'is-uploading' : '',\n  ].filter(Boolean).join(' ');\n\n  /* Icono o thumbnail para imágenes */\n  const ext = entry.file.name.split('.').pop()?.toLowerCase() ?? '';\n  const isImg = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext);\n\n  const fileSize = entry.file.size < 1024 * 1024\n    ? `${(entry.file.size / 1024).toFixed(0)} KB`\n    : `${(entry.file.size / (1024 * 1024)).toFixed(1)} MB`;\n\n  return html`\n    <div class=\"${rowCls}\">\n      <!-- Progress background -->\n      <div\n        class=\"fu-file-prog-bg\"\n        style=\"${styleMap({ width: isUploading ? `${entry.progress}%` : isDone ? '100%' : '0%' })}\"\n      ></div>\n\n      <!-- Thumbnail o icono -->\n      ${isImg && entry.previewUrl\n        ? html`<img class=\"fu-file-thumb\" src=\"${entry.previewUrl}\" alt=\"${entry.file.name}\">`\n        : html`\n            <div class=\"fu-file-icon\">\n              ${isDone\n                ? html`<lib-icon name=\"check-circle\" weight=\"fill\" size=\"sm\"></lib-icon>`\n                : isError\n                  ? html`<lib-icon name=\"warning-circle\" weight=\"fill\" size=\"sm\"></lib-icon>`\n                  : html`<span class=\"fu-ext\">${ext || '—'}</span>`}\n            </div>`}\n\n      <!-- Meta -->\n      <div class=\"fu-file-meta\">\n        <span class=\"fu-file-name\">${entry.file.name}</span>\n        <span class=\"fu-file-info\">\n          <span>${fileSize}</span>\n          ${isError\n            ? html`\n                <span class=\"fu-file-info-sep\"></span>\n                <span style=\"color:var(--color-error)\">${entry.errorMessage ?? 'Error al subir'}</span>`\n            : nothing}\n          ${isDone\n            ? html`\n                <span class=\"fu-file-info-sep\"></span>\n                <span style=\"color:var(--color-celadon-500)\">Completado</span>`\n            : nothing}\n        </span>\n      </div>\n\n      <!-- Acciones -->\n      <div class=\"fu-file-actions\">\n        ${isUploading\n          ? html`\n              <span class=\"fu-file-pct\">${entry.progress}%</span>\n              <span class=\"fu-spinner\"></span>`\n          : isDone\n            ? html`<span class=\"fu-status-done\"><lib-icon name=\"check-circle\" weight=\"fill\" size=\"sm\"></lib-icon></span>`\n            : isError\n              ? html`<span class=\"fu-status-error\"><lib-icon name=\"warning\" weight=\"fill\" size=\"sm\"></lib-icon></span>`\n              : nothing}\n\n        <button\n          class=\"fu-file-remove\"\n          aria-label=\"Eliminar ${entry.file.name}\"\n          @click=\"${(e: Event): void => { e.stopPropagation(); onRemove(entry.id); }}\"\n        >\n          <lib-icon name=\"x\" size=\"xs\"></lib-icon>\n        </button>\n      </div>\n    </div>\n  `;\n}\n\n/* ================================================================\n   TEMPLATE PRINCIPAL\n   ================================================================ */\n\nexport function fileUploaderTemplate(props: FileUploaderTemplateProps): TemplateResult {\n  const {\n    zone, title, /*subtitle*/ hint, multiple, accept, disabled,\n    isDragover, entries, imagePreviewUrl,\n    onDragover, onDragleave, onDrop, onInputChange, onRemove,\n    onUploadAll, onClearAll, onResetImage,\n  } = props;\n\n  const doneCount     = entries.filter(e => e.status === 'done').length;\n  const uploadingCount = entries.filter(e => e.status === 'uploading').length;\n  const allDone       = entries.length > 0 && doneCount === entries.length;\n  const anyUploading  = uploadingCount > 0;\n\n  /* ────────────────────────────────────\n     VARIANTE: default (zona grande)\n     ──────────────────────────────────── */\n  if (zone === 'default') {\n    return html`\n      <div class=\"fu-root\">\n        <!-- Drop zone -->\n        <div\n          class=\"fu-zone ${isDragover ? 'is-dragover' : ''} ${disabled ? 'is-disabled' : ''}\"\n          @dragover=\"${(e: DragEvent): void => { if (!disabled) onDragover(e); }}\"\n          @dragleave=\"${(): void => { if (!disabled) onDragleave(); }}\"\n          @drop=\"${(e: DragEvent): void => { if (!disabled) onDrop(e); }}\"\n        >\n          <!-- input real cubriendo toda la zona -->\n          <input\n            type=\"file\"\n            ?multiple=\"${multiple}\"\n            accept=\"${accept}\"\n            ?disabled=\"${disabled}\"\n            @change=\"${onInputChange}\"\n            aria-label=\"${title}\"\n          >\n\n          <div class=\"fu-zone-icon\">\n            <lib-icon name=\"cloud-arrow-up\" weight=\"thin\" size=\"xl\"></lib-icon>\n          </div>\n\n          <div>\n            <p class=\"fu-zone-title\">${title}</p>\n            <p class=\"fu-zone-sub\" style=\"margin-top:var(--lib-space-sm)\">\n              o <span>busca en tu equipo</span>\n            </p>\n          </div>\n\n          <p class=\"fu-zone-hint\">${hint}</p>\n        </div>\n\n        <!-- Lista de archivos -->\n        ${entries.length > 0 ? html`\n          <div class=\"fu-list\">\n            ${map(entries, (entry: FileEntry) => renderFileEntry(entry, onRemove))}\n          </div>\n\n          <!-- Footer summary -->\n          <div class=\"fu-summary\">\n            <span class=\"fu-summary-text\">\n              ${allDone\n                ? `${doneCount} archivo${doneCount !== 1 ? 's' : ''} subido${doneCount !== 1 ? 's' : ''}`\n                : anyUploading\n                  ? `Subiendo ${uploadingCount} archivo${uploadingCount !== 1 ? 's' : ''}…`\n                  : `${entries.length} archivo${entries.length !== 1 ? 's' : ''} seleccionado${entries.length !== 1 ? 's' : ''}`}\n            </span>\n            <div style=\"display:flex;gap:var(--lib-space-sm)\">\n              <button\n                class=\"fu-summary-btn\"\n                style=\"background:transparent;color:var(--text-muted);border:1px solid var(--border-default)\"\n                ?disabled=\"${anyUploading}\"\n                @click=\"${onClearAll}\"\n              >Limpiar</button>\n              <button\n                class=\"fu-summary-btn\"\n                ?disabled=\"${anyUploading || allDone}\"\n                @click=\"${onUploadAll}\"\n              >\n                ${anyUploading ? 'Subiendo…' : 'Subir todo'}\n              </button>\n            </div>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n\n  /* ────────────────────────────────────\n     VARIANTE: compact (horizontal)\n     ──────────────────────────────────── */\n  if (zone === 'compact') {\n    return html`\n      <div class=\"fu-root\">\n        <div\n          class=\"fu-zone-sm ${isDragover ? 'is-dragover' : ''} ${disabled ? 'is-disabled' : ''}\"\n          @dragover=\"${(e: DragEvent): void => { if (!disabled) onDragover(e); }}\"\n          @dragleave=\"${(): void => { if (!disabled) onDragleave(); }}\"\n          @drop=\"${(e: DragEvent): void => { if (!disabled) onDrop(e); }}\"\n        >\n          <input\n            type=\"file\"\n            ?multiple=\"${multiple}\"\n            accept=\"${accept}\"\n            ?disabled=\"${disabled}\"\n            @change=\"${onInputChange}\"\n            aria-label=\"${title}\"\n          >\n\n          <span class=\"fu-zone-sm-icon\">\n            <lib-icon name=\"paperclip\" size=\"md\"></lib-icon>\n          </span>\n\n          <div class=\"fu-zone-sm-text\">\n            <span class=\"fu-zone-sm-title\">${title}</span>\n            <span class=\"fu-zone-sm-sub\">${hint}</span>\n          </div>\n        </div>\n\n        ${entries.length > 0 ? html`\n          <div class=\"fu-list\" style=\"margin-top:1px\">\n            ${map(entries, (entry: FileEntry) => renderFileEntry(entry, onRemove))}\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n\n  /* ────────────────────────────────────\n     VARIANTE: image (preview inline)\n     ──────────────────────────────────── */\n  return html`\n    <div class=\"fu-root\">\n      <div\n        class=\"fu-zone-img ${isDragover ? 'is-dragover' : ''} ${imagePreviewUrl ? 'has-preview' : ''} ${disabled ? 'is-disabled' : ''}\"\n        @dragover=\"${(e: DragEvent): void => { if (!disabled) onDragover(e); }}\"\n        @dragleave=\"${(): void => { if (!disabled) onDragleave(); }}\"\n        @drop=\"${(e: DragEvent): void => { if (!disabled) onDrop(e); }}\"\n      >\n        <input\n          type=\"file\"\n          accept=\"image/*\"\n          ?disabled=\"${disabled || !!imagePreviewUrl}\"\n          @change=\"${onInputChange}\"\n          aria-label=\"${title}\"\n        >\n\n        <!-- Placeholder (sin imagen) -->\n        <div class=\"fu-zone-img-placeholder\">\n          <lib-icon name=\"image\" weight=\"thin\" size=\"xl\" style=\"color:var(--text-muted)\"></lib-icon>\n          <p class=\"fu-zone-sub\">${title}</p>\n          <p class=\"fu-zone-hint\">${hint}</p>\n        </div>\n\n        <!-- Preview (con imagen) -->\n        ${imagePreviewUrl\n          ? html`<img class=\"fu-zone-img-preview\" src=\"${imagePreviewUrl}\" alt=\"Preview\">`\n          : nothing}\n\n        <!-- Overlay de reemplazo -->\n        ${imagePreviewUrl\n          ? html`\n              <div class=\"fu-zone-img-overlay\">\n                <lib-icon name=\"camera\" size=\"md\" style=\"color:#fff\"></lib-icon>\n                <span class=\"fu-zone-img-overlay-text\">Cambiar imagen</span>\n              </div>`\n          : nothing}\n      </div>\n\n      <!-- Barra de progreso debajo de la zona imagen -->\n      ${entries.length > 0 && entries[0]?.status === 'uploading'\n        ? html`\n            <div class=\"fu-progress-bar\">\n              <div class=\"fu-progress-fill\" style=\"width:${entries[0]?.progress ?? 0}%\"></div>\n            </div>`\n        : nothing}\n\n      ${imagePreviewUrl\n        ? html`\n            <div style=\"display:flex;justify-content:flex-end;margin-top:var(--lib-space-sm)\">\n              <button class=\"fu-file-remove\" style=\"width:auto;padding:0 var(--lib-space-sm);border-radius:0;border:1px solid var(--border-default);font-family:var(--lib-font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase\" @click=\"${onResetImage}\">\n                Eliminar\n              </button>\n            </div>`\n        : nothing}\n    </div>\n  `;\n}"],"names":["styleMap","map"],"mappings":"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"}

package/dist/index245.js

@@ -1,97 +1,20 @@
-import { html, nothing } from "lit";
-const iconClose = html`
-  <svg viewBox="0 0 14 14" aria-hidden="true">
-    <line x1="2" y1="2" x2="12" y2="12"/>
-    <line x1="12" y1="2" x2="2" y2="12"/>
-  </svg>`;
-function drawerTemplate(ctx) {
-  const isHorizontal = ctx.placement === "right" || ctx.placement === "left";
-  const isGlitch = ctx.variant === "glitch" || ctx.variant === "glitch-dark";
-  const placementClass = `dr-${ctx.placement}`;
-  return html`
-    <!-- Backdrop — click fuera cierra -->
-    <div
-      class="dr-backdrop"
-      part="backdrop"
-      @click="${(e) => {
-    if (e.target.classList.contains("dr-backdrop")) ctx._close();
-  }}"
-    >
-      <!-- Panel -->
-      <div
-        class="dr ${placementClass}"
-        part="panel"
-        role="dialog"
-        aria-modal="true"
-        aria-label="${ctx.drawerLabel}"
-        tabindex="-1"
-      >
-        <!-- RGB ghost layers (glitch variants únicamente) -->
-        ${isGlitch ? html`
-          <div class="dr-rgb-r" aria-hidden="true"></div>
-          <div class="dr-rgb-b" aria-hidden="true"></div>
-        ` : nothing}
-
-        <!-- Handle bar — solo top / bottom -->
-        ${!isHorizontal ? html`
-          <div class="dr-handle" part="handle">
-            <div class="dr-handle-bar"></div>
-          </div>
-        ` : nothing}
-
-        <!-- Header -->
-        <div class="dr-header" part="header">
-          <div class="dr-title-block">
-
-            <!-- Eyebrow — slot o prop -->
-            ${ctx.eyebrow ? html`
-              <div class="dr-eyebrow" part="eyebrow">
-                <slot name="eyebrow">${ctx.eyebrow}</slot>
-              </div>
-            ` : html`
-              <slot name="eyebrow">
-                <div class="dr-eyebrow" part="eyebrow" style="display:none"></div>
-              </slot>
-            `}
-
-            <!-- Title — slot o prop -->
-            <div class="dr-title" part="title" id="dr-title-${ctx._uid}">
-              <slot name="title">${ctx.label}</slot>
-            </div>
-
-            <!-- Subtitle — slot o prop -->
-            ${ctx.subtitle ? html`
-              <div class="dr-subtitle" part="subtitle">
-                <slot name="subtitle">${ctx.subtitle}</slot>
-              </div>
-            ` : html`<slot name="subtitle"></slot>`}
-
-          </div>
-
-          <!-- Botón cerrar -->
-          <button
-            class="dr-close"
-            part="close-btn"
-            aria-label="Cerrar"
-            @click="${() => ctx._close()}"
-          >${iconClose}</button>
-        </div>
-
-        <!-- Body — slot default -->
-        <div class="dr-body" part="body">
-          <slot></slot>
-        </div>
-
-        <!-- Footer — slot footer (oculto si vacío via CSS) -->
-        <div class="dr-footer" part="footer">
-          <slot name="footer"></slot>
-        </div>
-
-      </div>
-    </div>
-  `;
+import { renderClassic } from "./index354.js";
+import { renderCentered } from "./index355.js";
+import { renderMega } from "./index356.js";
+import { renderAppBar } from "./index357.js";
+function headerTemplate(ctx) {
+  switch (ctx.variant) {
+    case "centered":
+      return renderCentered(ctx);
+    case "mega":
+      return renderMega(ctx);
+    case "app-bar":
+      return renderAppBar(ctx);
+    default:
+      return renderClassic(ctx);
+  }
 }
 export {
-  drawerTemplate
+  headerTemplate
 };
 //# sourceMappingURL=index245.js.map

package/dist/index245.js.map

@@ -1 +1 @@
-{"version":3,"file":"index245.js","sources":["../src/components/organisms/drawer/lib-drawer.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibDrawer } from './lib-drawer.component';\n\n/* ── SVG close (X) ── */\nconst iconClose: TemplateResult = html`\n  <svg viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n    <line x1=\"2\" y1=\"2\" x2=\"12\" y2=\"12\"/>\n    <line x1=\"12\" y1=\"2\" x2=\"2\" y2=\"12\"/>\n  </svg>`;\n\nexport function drawerTemplate(ctx: LibDrawer): TemplateResult {\n  const isHorizontal = ctx.placement === 'right' || ctx.placement === 'left';\n  const isGlitch     = ctx.variant === 'glitch' || ctx.variant === 'glitch-dark';\n\n  /* Clase CSS del panel según placement */\n  const placementClass = `dr-${ctx.placement}`;\n\n  return html`\n    <!-- Backdrop — click fuera cierra -->\n    <div\n      class=\"dr-backdrop\"\n      part=\"backdrop\"\n      @click=\"${(e: MouseEvent): void => {\n        if ((e.target as HTMLElement).classList.contains('dr-backdrop')) ctx._close();\n      }}\"\n    >\n      <!-- Panel -->\n      <div\n        class=\"dr ${placementClass}\"\n        part=\"panel\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=\"${ctx.drawerLabel}\"\n        tabindex=\"-1\"\n      >\n        <!-- RGB ghost layers (glitch variants únicamente) -->\n        ${isGlitch ? html`\n          <div class=\"dr-rgb-r\" aria-hidden=\"true\"></div>\n          <div class=\"dr-rgb-b\" aria-hidden=\"true\"></div>\n        ` : nothing}\n\n        <!-- Handle bar — solo top / bottom -->\n        ${!isHorizontal ? html`\n          <div class=\"dr-handle\" part=\"handle\">\n            <div class=\"dr-handle-bar\"></div>\n          </div>\n        ` : nothing}\n\n        <!-- Header -->\n        <div class=\"dr-header\" part=\"header\">\n          <div class=\"dr-title-block\">\n\n            <!-- Eyebrow — slot o prop -->\n            ${ctx.eyebrow ? html`\n              <div class=\"dr-eyebrow\" part=\"eyebrow\">\n                <slot name=\"eyebrow\">${ctx.eyebrow}</slot>\n              </div>\n            ` : html`\n              <slot name=\"eyebrow\">\n                <div class=\"dr-eyebrow\" part=\"eyebrow\" style=\"display:none\"></div>\n              </slot>\n            `}\n\n            <!-- Title — slot o prop -->\n            <div class=\"dr-title\" part=\"title\" id=\"dr-title-${ctx._uid}\">\n              <slot name=\"title\">${ctx.label}</slot>\n            </div>\n\n            <!-- Subtitle — slot o prop -->\n            ${ctx.subtitle ? html`\n              <div class=\"dr-subtitle\" part=\"subtitle\">\n                <slot name=\"subtitle\">${ctx.subtitle}</slot>\n              </div>\n            ` : html`<slot name=\"subtitle\"></slot>`}\n\n          </div>\n\n          <!-- Botón cerrar -->\n          <button\n            class=\"dr-close\"\n            part=\"close-btn\"\n            aria-label=\"Cerrar\"\n            @click=\"${(): void => ctx._close()}\"\n          >${iconClose}</button>\n        </div>\n\n        <!-- Body — slot default -->\n        <div class=\"dr-body\" part=\"body\">\n          <slot></slot>\n        </div>\n\n        <!-- Footer — slot footer (oculto si vacío via CSS) -->\n        <div class=\"dr-footer\" part=\"footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,YAA4B;AAAA;AAAA;AAAA;AAAA;AAM3B,SAAS,eAAe,KAAgC;AAC7D,QAAM,eAAe,IAAI,cAAc,WAAW,IAAI,cAAc;AACpE,QAAM,WAAe,IAAI,YAAY,YAAY,IAAI,YAAY;AAGjE,QAAM,iBAAiB,MAAM,IAAI,SAAS;AAE1C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKO,CAAC,MAAwB;AACjC,QAAK,EAAE,OAAuB,UAAU,SAAS,aAAa,OAAO,OAAA;AAAA,EACvE,CAAC;AAAA;AAAA;AAAA;AAAA,oBAIa,cAAc;AAAA;AAAA;AAAA;AAAA,sBAIZ,IAAI,WAAW;AAAA;AAAA;AAAA;AAAA,UAI3B,WAAW;AAAA;AAAA;AAAA,YAGT,OAAO;AAAA;AAAA;AAAA,UAGT,CAAC,eAAe;AAAA;AAAA;AAAA;AAAA,YAId,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOL,IAAI,UAAU;AAAA;AAAA,uCAEW,IAAI,OAAO;AAAA;AAAA,gBAElC;AAAA;AAAA;AAAA;AAAA,aAIH;AAAA;AAAA;AAAA,8DAGiD,IAAI,IAAI;AAAA,mCACnC,IAAI,KAAK;AAAA;AAAA;AAAA;AAAA,cAI9B,IAAI,WAAW;AAAA;AAAA,wCAEW,IAAI,QAAQ;AAAA;AAAA,gBAEpC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAS7B,MAAY,IAAI,QAAQ;AAAA,aACjC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBtB;"}
+{"version":3,"file":"index245.js","sources":["../src/components/molecules/header/lib-header.html.ts"],"sourcesContent":["import { TemplateResult } from 'lit';\nimport type { LibHeader } from './lib-header.component';\n\nimport { renderClassic  } from './templates/header-classic.html';\nimport { renderCentered } from './templates/header-centered.html';\nimport { renderMega     } from './templates/header-mega.html';\nimport { renderAppBar   } from './templates/header-app-bar.html';\n\n/**\n * Dispatcher principal del componente lib-header.\n *\n * No contiene lógica de presentación propia.\n * Cada variante vive en su propio fichero dentro de /templates.\n *\n * Variantes → fichero\n * ───────────────────────────────────────────────────────────\n * classic · dark · transparent · kintsugi\n * glitch · minimal · shrink              → header-classic.html.ts\n * centered                               → header-centered.html.ts\n * mega                                   → header-mega.html.ts\n * app-bar                                → header-app-bar.html.ts\n *\n * Helpers compartidos (logo, links, actions, SVGs) → header-shared.html.ts\n * Móvil (hamburger + drawer)                       → header-mobile.html.ts\n */\nexport function headerTemplate(ctx: LibHeader): TemplateResult {\n  switch (ctx.variant) {\n    case 'centered': return renderCentered(ctx);\n    case 'mega':     return renderMega(ctx);\n    case 'app-bar':  return renderAppBar(ctx);\n    default:         return renderClassic(ctx);\n  }\n}"],"names":[],"mappings":";;;;AAyBO,SAAS,eAAe,KAAgC;AAC7D,UAAQ,IAAI,SAAA;AAAA,IACV,KAAK;AAAY,aAAO,eAAe,GAAG;AAAA,IAC1C,KAAK;AAAY,aAAO,WAAW,GAAG;AAAA,IACtC,KAAK;AAAY,aAAO,aAAa,GAAG;AAAA,IACxC;AAAiB,aAAO,cAAc,GAAG;AAAA,EAAA;AAE7C;"}