@dropi/ui 0.1.19 → 0.1.21

package/dist/collection/components/dropi-image-overlay/dropi-image-overlay.css

@@ -5,78 +5,123 @@
   inset: 0;
   background: rgba(0,0,0,0.92);
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   z-index: 9999;
-  gap: var(--Size-3, 12px);
+  animation: fade-in 0.3s ease-out;
 }
 
 .overlay__close {
   position: absolute;
-  top: var(--Size-4, 16px);
-  right: var(--Size-4, 16px);
-  background: rgba(255,255,255,0.1);
+  top: 24px;
+  right: 24px;
+  background: rgba(255, 255, 255, 0.1);
   border: none;
   border-radius: 50%;
-  width: 40px;
-  height: 40px;
+  width: 48px;
+  height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  z-index: 10010;
   transition: background 0.15s;
 }
-.overlay__close:hover { background: rgba(255,255,255,0.2); }
+.overlay__close:hover { background: rgba(255, 255, 255, 0.2); }
+
+.overlay__body {
+  display: flex;
+  width: 90%;
+  height: 80%;
+  max-width: 1200px;
+  gap: 32px;
+  align-items: center;
+}
+
+.overlay__body--single {
+  justify-content: center;
+}
+
+/* ── Thumbnails (Left Column) ─────────────────────────── */
+.overlay__thumbs {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+  overflow-y: auto;
+  padding-right: 8px;
+  width: 100px;
+  flex-shrink: 0;
+}
+
+/* Hide scrollbar but keep functionality */
+.overlay__thumbs::-webkit-scrollbar { width: 4px; }
+.overlay__thumbs::-webkit-scrollbar-thumb { background: var(--Gray-Gray-600); border-radius: 4px; }
+
+.overlay__thumb-box {
+  width: 80px;
+  height: 80px;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: border-color 0.2s;
+}
+
+.overlay__thumb-box--active {
+  border-color: var(--Primary-Primary-500, #f49a3d);
+}
 
-.overlay__main {
+.overlay__thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ── Main Content (Right Area) ─────────────────────────── */
+.overlay__content {
+  flex: 1;
+  height: 100%;
   position: relative;
   display: flex;
+  justify-content: center;
   align-items: center;
-  gap: var(--Size-3, 12px);
-  max-width: 90vw;
-  max-height: 75vh;
 }
 
-.overlay__image {
-  max-width: 80vw;
-  max-height: 72vh;
+.overlay__main-image {
+  max-width: 100%;
+  max-height: 100%;
   object-fit: contain;
-  border-radius: var(--Border-2, 8px);
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+  animation: scale-up 0.3s ease-out;
 }
 
 .overlay__nav {
-  background: rgba(255,255,255,0.1);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.1);
   border: none;
   border-radius: 50%;
-  width: 44px;
-  height: 44px;
+  width: 48px;
+  height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  flex-shrink: 0;
-  transition: background 0.15s;
+  transition: background 0.2s;
+  z-index: 5;
 }
-.overlay__nav:hover { background: rgba(255,255,255,0.2); }
 
-.overlay__thumbs {
-  display: flex;
-  gap: var(--Size-2, 8px);
-  flex-wrap: wrap;
-  justify-content: center;
-  max-width: 90vw;
+.overlay__nav:hover { background: rgba(255, 255, 255, 0.2); }
+.overlay__nav--prev { left: -24px; }
+.overlay__nav--next {
+  right: -24px;
+  background: var(--Neutral-White);
 }
+.overlay__nav--next:hover { background: var(--Neutral-White); }
 
-.overlay__thumb {
-  width: 56px;
-  height: 56px;
-  object-fit: cover;
-  border-radius: var(--Border-1, 4px);
-  cursor: pointer;
-  opacity: 0.5;
-  border: 2px solid transparent;
-  transition: opacity 0.15s, border-color 0.15s;
-}
-.overlay__thumb:hover { opacity: 0.8; }
-.overlay__thumb--active { opacity: 1; border-color: var(--Primary-Primary-500, #f49a3d); }
+@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes scale-up { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

package/dist/collection/components/dropi-image-overlay/dropi-image-overlay.js

@@ -38,7 +38,7 @@ export class DropiImageOverlay {
             return null;
         const imgs = this.parsedImages;
         const multi = imgs.length > 1;
-        return (h("div", { class: "overlay", onClick: () => this.close() }, h("button", { class: "overlay__close", onClick: (e) => { e.stopPropagation(); this.close(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", width: "24px", height: "24px", color: "Neutral-White" })), h("div", { class: "overlay__main", onClick: (e) => e.stopPropagation() }, multi && (h("button", { class: "overlay__nav overlay__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, h("dropi-icon", { name: "Dropdown-left", width: "24px", height: "24px", color: "Neutral-White" }))), h("img", { class: "overlay__image", src: imgs[this.current], alt: `imagen ${this.current + 1}`, onError: (e) => this.handleError(e) }), multi && (h("button", { class: "overlay__nav overlay__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, h("dropi-icon", { name: "Dropdown-Right", width: "24px", height: "24px", color: "Neutral-White" })))), multi && (h("div", { class: "overlay__thumbs", onClick: (e) => e.stopPropagation() }, imgs.map((src, i) => (h("img", { key: i, class: { 'overlay__thumb': true, 'overlay__thumb--active': i === this.current }, src: src, alt: `miniatura ${i + 1}`, onClick: () => this.current = i, onError: (e) => this.handleError(e) })))))));
+        return (h("div", { class: "overlay", onClick: () => this.close() }, h("button", { class: "overlay__close", onClick: (e) => { e.stopPropagation(); this.close(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-large", width: "24px", height: "24px", color: "Neutral-White" })), h("div", { class: { 'overlay__body': true, 'overlay__body--single': !multi }, onClick: (e) => e.stopPropagation() }, multi && (h("div", { class: "overlay__thumbs" }, imgs.map((src, i) => (h("div", { key: i, class: { 'overlay__thumb-box': true, 'overlay__thumb-box--active': i === this.current }, onClick: () => this.current = i }, h("img", { src: src, alt: `miniatura ${i + 1}`, class: "overlay__thumb-img", onError: (e) => this.handleError(e) })))))), h("div", { class: "overlay__content" }, multi && (h("button", { class: "overlay__nav overlay__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, h("dropi-icon", { name: "Dropdown-left", width: "18px", height: "18px", color: "Gray-Gray-500" }))), h("img", { class: "overlay__main-image", src: imgs[this.current], alt: `imagen ${this.current + 1}`, onError: (e) => this.handleError(e) }), multi && (h("button", { class: "overlay__nav overlay__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, h("dropi-icon", { name: "Dropdown-Right", width: "18px", height: "18px", color: "Gray-Gray-500" })))))));
     }
     static get is() { return "dropi-image-overlay"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-input/dropi-input.css

@@ -62,7 +62,7 @@
   padding: var(--Size-2, 8px);
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   font-size: var(--font-size-s, 12px);
   font-family: inherit;
   color: var(--Gray-Gray-700, #32394d);