npm - @shibui-ui/ui - Versions diffs - 1.25.0 → 1.25.1 - Mend

@shibui-ui/ui 1.25.0 → 1.25.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (177) hide show

package/dist/index243.js CHANGED Viewed

@@ -1,5 +1,85 @@
-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)}}}";
+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>
+  `;
+}
 export {
-  uploaderCss as default
+  dialogTemplate
 };
 //# sourceMappingURL=index243.js.map

package/dist/index243.js.map CHANGED Viewed

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

package/dist/index244.js CHANGED Viewed

@@ -1,263 +1,5 @@
-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>
-  `;
-}
+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}}}';
 export {
-  fileUploaderTemplate
+  dialogCss as default
 };
 //# sourceMappingURL=index244.js.map

package/dist/index244.js.map CHANGED Viewed

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

package/dist/index245.js CHANGED Viewed

@@ -1,20 +1,97 @@
-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);
-  }
+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>
+  `;
 }
 export {
-  headerTemplate
+  drawerTemplate
 };
 //# sourceMappingURL=index245.js.map

package/dist/index245.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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~~;"}
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;"}