@dropi/ui 0.1.18 → 0.1.20

package/dist/cjs/dropi-media-player.cjs.entry.js

@@ -0,0 +1,102 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiMediaPlayerCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.player{background:var(--Gray-Gray-800, #1a2033);border-radius:var(--Border-2, 8px);overflow:hidden;display:flex;flex-direction:column}.player__video{width:100%;display:block;max-height:400px;object-fit:contain;background:#000}.player__controls{padding:var(--Size-3, 12px);display:flex;flex-direction:column;gap:var(--Size-2, 8px)}.player__title{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-300, #a0a9c0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player__seek-wrap{display:flex;align-items:center;gap:var(--Size-2, 8px)}.player__time{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6);white-space:nowrap;flex-shrink:0}.player__seek-track{flex:1;position:relative;height:4px;background:var(--Gray-Gray-600, #475066);border-radius:100px}.player__seek-fill{position:absolute;left:0;top:0;bottom:0;background:var(--Primary-Primary-500, #f49a3d);border-radius:100px;pointer-events:none}.player__seek{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;accent-color:var(--Primary-Primary-500, #f49a3d)}.player__buttons{display:flex;align-items:center;gap:var(--Size-2, 8px)}.player__btn{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;border-radius:var(--Border-1, 4px);transition:background 0.15s}.player__btn:hover{background:rgba(255,255,255,0.08)}.player__btn--play{width:36px;height:36px;background:var(--Primary-Primary-500, #f49a3d);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.player__btn--play:hover{background:var(--Primary-Primary-600, #e08526)}.player__volume{display:flex;align-items:center;gap:4px}.player__volume-slider{width:60px;accent-color:var(--Primary-Primary-500, #f49a3d);cursor:pointer}.player__spacer{flex:1}.player--audio .player__controls{padding:var(--Size-4, 16px)}`;
+
+const DropiMediaPlayer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiPlay = index.createEvent(this, "dropiPlay", 7);
+        this.dropiEnded = index.createEvent(this, "dropiEnded", 7);
+    }
+    get el() { return index.getElement(this); }
+    /** Media source URL */
+    src = '';
+    /** "audio" or "video" */
+    mediaType = 'audio';
+    /** Poster image (video only) */
+    poster = '';
+    /** Autoplay */
+    autoplay = false;
+    /** Loop */
+    loop = false;
+    /** Initial volume 0–1 */
+    initialVolume = 1;
+    /** Title shown above controls */
+    mediaTitle = '';
+    playing = false;
+    currentTime = 0;
+    duration = 0;
+    volume = 1;
+    muted = false;
+    loading = true;
+    mediaEl;
+    /** Emitted when playback starts/pauses. e.detail = playing */
+    dropiPlay;
+    /** Emitted when media ends */
+    dropiEnded;
+    componentDidLoad() {
+        if (this.mediaEl) {
+            this.mediaEl.volume = this.initialVolume;
+            this.volume = this.initialVolume;
+        }
+    }
+    togglePlay() {
+        if (!this.mediaEl)
+            return;
+        if (this.playing) {
+            this.mediaEl.pause();
+        }
+        else {
+            this.mediaEl.play();
+        }
+    }
+    handleTimeUpdate() {
+        this.currentTime = this.mediaEl.currentTime;
+    }
+    handleLoadedMetadata() {
+        this.duration = this.mediaEl.duration;
+        this.loading = false;
+    }
+    handleSeek(e) {
+        const val = Number(e.target.value);
+        this.mediaEl.currentTime = val;
+        this.currentTime = val;
+    }
+    handleVolume(e) {
+        const val = Number(e.target.value);
+        this.mediaEl.volume = val;
+        this.volume = val;
+        this.muted = val === 0;
+    }
+    toggleMute() {
+        this.muted = !this.muted;
+        this.mediaEl.muted = this.muted;
+    }
+    handleFullscreen() {
+        if (this.mediaType !== 'video')
+            return;
+        const vid = this.mediaEl;
+        if (document.fullscreenElement)
+            document.exitFullscreen();
+        else
+            vid.requestFullscreen?.();
+    }
+    formatTime(secs) {
+        if (isNaN(secs))
+            return '0:00';
+        const m = Math.floor(secs / 60);
+        const s = Math.floor(secs % 60);
+        return `${m}:${String(s).padStart(2, '0')}`;
+    }
+    render() {
+        const pct = this.duration ? (this.currentTime / this.duration) * 100 : 0;
+        return (index.h("div", { key: '76ee9c93a56b78e8ebdad1a77a59b56bbd1ae8f6', class: `player player--${this.mediaType}` }, this.mediaType === 'video' ? (index.h("video", { class: "player__video", ref: (el) => this.mediaEl = el, src: this.src, poster: this.poster, autoplay: this.autoplay, loop: this.loop, preload: "metadata", onPlay: () => { this.playing = true; this.dropiPlay.emit(true); }, onPause: () => { this.playing = false; this.dropiPlay.emit(false); }, onTimeUpdate: () => this.handleTimeUpdate(), onLoadedMetaData: () => this.handleLoadedMetadata(), onEnded: () => { this.playing = false; this.dropiEnded.emit(); }, onWaiting: () => this.loading = true, onCanPlay: () => this.loading = false })) : (index.h("audio", { ref: (el) => this.mediaEl = el, src: this.src, autoplay: this.autoplay, loop: this.loop, preload: "metadata", onPlay: () => { this.playing = true; this.dropiPlay.emit(true); }, onPause: () => { this.playing = false; this.dropiPlay.emit(false); }, onTimeUpdate: () => this.handleTimeUpdate(), onLoadedMetaData: () => this.handleLoadedMetadata(), onEnded: () => { this.playing = false; this.dropiEnded.emit(); } })), index.h("div", { key: '444cb9c86d3a69042d827ab4785e8c0995f82e6d', class: "player__controls" }, this.mediaTitle && (index.h("span", { key: '39bee7040cddfae5ce17e6ee62d0713ba0062ae4', class: "player__title" }, this.mediaTitle)), index.h("div", { key: '05ccbde97d88387d1b167495887877f0d3443cc4', class: "player__seek-wrap" }, index.h("span", { key: '1e8f81054b851975a0526224f5b2455687d6d1ba', class: "player__time" }, this.formatTime(this.currentTime)), index.h("div", { key: 'aecd083653f3384e47938ff00bcd0f913eab4e13', class: "player__seek-track" }, index.h("div", { key: '2bef10203f1c0d22e371e8e7ee223ec9aaf9b496', class: "player__seek-fill", style: { width: `${pct}%` } }), index.h("input", { key: '7d8b658dca7b663e01d86d69480113edc8849951', class: "player__seek", type: "range", min: 0, max: this.duration || 100, step: 0.1, value: this.currentTime, onInput: (e) => this.handleSeek(e) })), index.h("span", { key: '0127fa197a59db81f224db1a168b52fc4be154fe', class: "player__time" }, this.formatTime(this.duration))), index.h("div", { key: '171eff82a5f55544cb0ad601ae4ae07954e93c43', class: "player__buttons" }, index.h("button", { key: '0d207dcd555e040999e6434009b7762e9caf8359', class: "player__btn player__btn--play", onClick: () => this.togglePlay(), type: "button" }, this.loading
+            ? index.h("dropi-icon", { name: "Spinner", width: "20px", height: "20px", color: "Neutral-White" })
+            : index.h("dropi-icon", { name: this.playing ? 'Pause' : 'Play', width: "20px", height: "20px", color: "Neutral-White" })), index.h("div", { key: 'd8eeb92e14729c49e0b2ef459c44ed1f402ce9f8', class: "player__volume" }, index.h("button", { key: '4bdf9ca4d03e1e7a420b280f0106e67d50fe6285', class: "player__btn", onClick: () => this.toggleMute(), type: "button" }, index.h("dropi-icon", { key: '715e93fc8b50f42c07c545ace9dbbf757ac0742a', name: this.muted || this.volume === 0 ? 'Volume-off' : this.volume < 0.5 ? 'Volume-low' : 'Volume-high', width: "16px", height: "16px", color: "Gray-Gray-600" })), index.h("input", { key: 'd2a3f93696c8c1a42ce99c04c4fbf419e2f8b3e6', class: "player__volume-slider", type: "range", min: 0, max: 1, step: 0.05, value: this.muted ? 0 : this.volume, onInput: (e) => this.handleVolume(e) })), index.h("span", { key: '7dc77449676683256fbf746ff9e3679d0b8ed41d', class: "player__spacer" }), this.mediaType === 'video' && (index.h("button", { key: '442d58c35ca6e8649849e30f46d33274bbff577b', class: "player__btn", onClick: () => this.handleFullscreen(), type: "button" }, index.h("dropi-icon", { key: '89a88d82501bfa0af389a8bc3c17cb3eeca9af00', name: "Fullscreen", width: "16px", height: "16px", color: "Gray-Gray-600" })))))));
+    }
+};
+DropiMediaPlayer.style = dropiMediaPlayerCss();
+
+exports.dropi_media_player = DropiMediaPlayer;

package/dist/cjs/dropi-modal.cjs.entry.js

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.js');
 
-const dropiModalCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:1100}.modal-root--open{opacity:1;pointer-events:auto}.modal-root--closing{opacity:1;pointer-events:none}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-5, 24px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.modal-header{display:flex;align-items:center;gap:4px}.modal-title{color:var(--Gray-Gray-700,#32394d);font-size:var(--Size-5, 24px);font-weight:700;flex:1;text-align:left}.modal-close{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--Size-1, 4px);width:100%}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);min-width:470px;width:100%}.modal-panel.size-m .modal-footer,.modal-panel.size-s .modal-footer{justify-content:center}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}`;
+const dropiModalCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:1100}.modal-root--open{opacity:1;pointer-events:auto}.modal-root--closing{opacity:1;pointer-events:none}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-6, 32px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.modal-header{display:flex;align-items:center;gap:4px}.modal-title{color:var(--Gray-Gray-700,#32394d);font-size:var(--Size-5, 24px);font-weight:700;flex:1;text-align:left}.modal-close{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:24px;line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:flex-start;gap:var(--Size-1, 4px);width:100%}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);min-width:470px;width:100%}::slotted(.button-container)>*{width:100%}::slotted(.button-container) dropi-button{width:100%}.modal-panel.size-m .modal-footer,.modal-panel.size-s .modal-footer{justify-content:center}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}`;
 
 const DropiModal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiShow = index.createEvent(this, "dropiShow");
-        this.dropiHide = index.createEvent(this, "dropiHide");
-        this.visibleChange = index.createEvent(this, "visibleChange");
+        this.dropiShow = index.createEvent(this, "dropiShow", 5);
+        this.dropiHide = index.createEvent(this, "dropiHide", 5);
+        this.visibleChange = index.createEvent(this, "visibleChange", 5);
     }
     visible = false;
     header = '';
@@ -64,8 +64,9 @@ const DropiModal = class {
             this.dropiShow.emit();
         }));
         this.addKeyHandler();
-        if (this.modal)
-            document.body.style.overflow = 'hidden';
+        if (this.modal && document.body && document.body.style) {
+            document.body.style.setProperty('overflow', 'hidden');
+        }
     }
     startClose() {
         if (this.isClosing)
@@ -78,7 +79,9 @@ const DropiModal = class {
         this.closeTimer = setTimeout(() => {
             this.mounted = false;
             this.isClosing = false;
-            document.body.style.overflow = '';
+            if (document.body && document.body.style) {
+                document.body.style.setProperty('overflow', '');
+            }
             this.dropiHide.emit();
         }, 200);
     }
@@ -100,7 +103,7 @@ const DropiModal = class {
     render() {
         if (!this.mounted)
             return null;
-        return (index.h("div", { class: { 'modal-root': true, [`modal-root--${this.position}`]: true, 'modal-root--open': this.isOpen, 'modal-root--closing': this.isClosing } }, this.modal && index.h("div", { class: "modal-mask", onClick: () => this.dismissable && this.hide() }), index.h("div", { class: { 'modal-panel': true, [`size-${this.size}`]: !!this.size }, role: "dialog", "aria-modal": "true" }, this.showHeader && (index.h("div", { class: "modal-header" }, this.header && index.h("span", { class: "modal-title" }, this.header), index.h("slot", { name: "header" }), this.showCloseIcon && (index.h("button", { class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, index.h("dropi-icon", { name: "Close-small", width: "24px", height: "24px", color: "Gray-Gray-400" }))))), index.h("div", { class: "modal-content" }, index.h("slot", null)), index.h("div", { class: "modal-footer" }, index.h("slot", { name: "footer" })))));
+        return (index.h("div", { class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, this.modal && index.h("div", { class: "modal-mask", onClick: () => this.dismissable && this.hide() }), index.h("div", { class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (index.h("div", { class: "modal-header" }, this.header && index.h("span", { class: "modal-title" }, this.header), index.h("slot", { name: "header" }), this.showCloseIcon && (index.h("button", { class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), index.h("div", { class: "modal-content" }, index.h("slot", null)), index.h("div", { class: "modal-footer" }, index.h("slot", { name: "footer" })))));
     }
     static get watchers() { return {
         "visible": [{

package/dist/cjs/dropi-navbar.cjs.entry.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiNavbarCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.navbar{display:flex;align-items:center;height:56px;padding:0 var(--Size-4, 16px);background:var(--Neutral-White, #fff);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);gap:var(--Size-4, 16px);position:relative}.navbar__left{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.navbar__menu-btn{background:none;border:none;padding:6px;cursor:pointer;border-radius:var(--Border-1, 4px);display:flex;align-items:center;transition:background 0.15s}.navbar__menu-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__logo{height:28px;object-fit:contain}.navbar__items{flex:1;list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--Size-1, 4px)}.navbar__item{display:flex;align-items:center;gap:var(--Size-1, 4px);padding:6px var(--Size-3, 12px);background:none;border:none;border-radius:var(--Border-1, 4px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-600, #475066);cursor:pointer;transition:background 0.15s, color 0.15s;white-space:nowrap}.navbar__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__item--active{background:var(--Primary-Primary-50, #fff5eb);color:var(--Primary-Primary-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.navbar__badge{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #fff);font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 4px}.navbar__right{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.navbar__icon-btn{position:relative;background:none;border:none;padding:6px;cursor:pointer;border-radius:var(--Border-1, 4px);display:flex;align-items:center;transition:background 0.15s}.navbar__icon-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__notif-badge{position:absolute;top:2px;right:2px;background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #fff);font-size:9px;font-weight:700;min-width:14px;height:14px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 3px}.navbar__user-btn{display:flex;align-items:center;gap:var(--Size-1, 4px);background:none;border:none;padding:4px 8px;border-radius:var(--Border-1, 4px);cursor:pointer;transition:background 0.15s;font-family:inherit}.navbar__user-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}.navbar__avatar-placeholder{width:28px;height:28px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700)}.navbar__user-name{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
+
+const DropiNavbar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiNavItemClick = index.createEvent(this, "dropiNavItemClick", 7);
+        this.dropiNotificationsClick = index.createEvent(this, "dropiNotificationsClick", 7);
+        this.dropiUserClick = index.createEvent(this, "dropiUserClick", 7);
+        this.dropiMenuToggle = index.createEvent(this, "dropiMenuToggle", 7);
+    }
+    /** Logo URL */
+    logoUrl = '';
+    /** Logo alt */
+    logoAlt = 'Logo';
+    /** Navigation items (array or JSON string) */
+    items = [];
+    /** Active item ID */
+    activeId = '';
+    /** User name */
+    userName = '';
+    /** User avatar URL */
+    userAvatar = '';
+    /** Notification count (0 = no badge) */
+    notifications = 0;
+    /** Show menu toggle (mobile) */
+    showMenuToggle = true;
+    /** Emitted when a nav item is clicked. e.detail = item id */
+    dropiNavItemClick;
+    /** Emitted when notification bell is clicked */
+    dropiNotificationsClick;
+    /** Emitted when avatar/user is clicked */
+    dropiUserClick;
+    /** Emitted when mobile menu toggle clicked */
+    dropiMenuToggle;
+    get parsedItems() {
+        const val = this.items;
+        return typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    render() {
+        const items = this.parsedItems;
+        return (index.h("nav", { key: '014281e03d0d6d2619add2319c3df90a5b6246a5', class: "navbar" }, index.h("div", { key: '4c1ac832042995edbe98e03d9ffd722879d7667c', class: "navbar__left" }, this.showMenuToggle && (index.h("button", { key: 'b244829263b1fa8f10365be75f8e6a86780b23bb', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, index.h("dropi-icon", { key: '082a2ec0c22c31d0e50c6c4268deb91db91a4a0a', name: "Menu", width: "20px", height: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (index.h("img", { key: 'bb999a5b53a2e667715b8b8152e68f567bf6735d', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt }))), items.length > 0 && (index.h("ul", { key: '0d8fc800d7e8eb42ba7971c323dcd7366c564c6f', class: "navbar__items" }, items.map(item => (index.h("li", null, index.h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.dropiNavItemClick.emit(item.id), type: "button" }, item.icon && index.h("dropi-icon", { name: item.icon, width: "16px", height: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), index.h("span", null, item.label), item.badge != null && String(item.badge) !== '0' && (index.h("span", { class: "navbar__badge" }, item.badge)))))))), index.h("div", { key: 'ce34e9989a27f875880cc674f68cd1348ba830ea', class: "navbar__right" }, index.h("button", { key: '8786409d275d115e363d4675d51d33a004881287', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, index.h("dropi-icon", { key: '6d8475c54109cf3535464029d906779a1ef5613d', name: "Bell", width: "20px", height: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (index.h("span", { key: 'f38458c5cf0e805cf7bc20ca6d9c2f59570c2813', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), index.h("button", { key: 'aa82799088ef91868967988a48b51d5426175733', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
+            ? index.h("img", { class: "navbar__avatar", src: this.userAvatar, alt: this.userName })
+            : index.h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && index.h("span", { key: '512bb7945572d2a2c117d8fa27d82d1d53b78120', class: "navbar__user-name" }, this.userName), index.h("dropi-icon", { key: 'feac223f33239f1b1d2add2139aef3408a73de44', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })))));
+    }
+};
+DropiNavbar.style = dropiNavbarCss();
+
+exports.dropi_navbar = DropiNavbar;

package/dist/cjs/dropi-otp-send-code.cjs.entry.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiOtpSendCodeCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.otp{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.otp__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066);text-align:center;margin:0}.otp__inputs{display:flex;gap:var(--Size-4, 16px)}.otp__digit{width:56px;height:56px;border:1.5px solid var(--Gray-Gray-200, #d3d7de);border-radius:var(--Border-2, 8px);text-align:center;font-size:22px;font-weight:var(--font-weight-bold, 700);font-family:inherit;color:var(--Gray-Gray-800, #495057);outline:none;transition:border-color 0.15s ease;background:var(--Neutral-White, #fff)}.otp__digit:focus{border:2px solid var(--Primary-Primary-500, #f49a3d)}.otp__digit--filled{border:1px solid var(--Success-Success-500, #0abb87);color:var(--Neutral-Neutral-900, #0e111a)}.otp__digit--error{border:1px solid var(--Error-Error-500, #f46a6b)}.otp__error{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b);text-align:center}.otp__resend{text-align:center}.otp__countdown{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6)}.otp__resend-btn{background:none;border:none;padding:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);cursor:pointer;text-decoration:underline}`;
+
+const OTP_LENGTH = 6;
+const RESEND_SECONDS = 30;
+const DropiOtpSendCode = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiCodeCompleted = index.createEvent(this, "dropiCodeCompleted", 7);
+        this.dropiResend = index.createEvent(this, "dropiResend", 7);
+    }
+    /** Delivery method label */
+    engine = 'email';
+    /** Contact info (email/phone to show in label) */
+    labelContact = '';
+    /** Show contact label */
+    showLabelContact = true;
+    /** Error message to display */
+    errorMessage = '';
+    digits = Array(OTP_LENGTH).fill('');
+    digitStates = Array(OTP_LENGTH).fill('idle');
+    countdown = RESEND_SECONDS;
+    canResend = false;
+    error = false;
+    inputs = [];
+    timer;
+    /** Emitted when all 6 digits are entered. e.detail = the complete code string */
+    dropiCodeCompleted;
+    /** Emitted when resend is requested */
+    dropiResend;
+    componentDidLoad() { this.startCountdown(); }
+    disconnectedCallback() { clearInterval(this.timer); }
+    startCountdown() {
+        this.countdown = RESEND_SECONDS;
+        this.canResend = false;
+        clearInterval(this.timer);
+        this.timer = setInterval(() => {
+            this.countdown--;
+            if (this.countdown <= 0) {
+                clearInterval(this.timer);
+                this.canResend = true;
+            }
+        }, 1000);
+    }
+    handleInput(e, index) {
+        const val = e.target.value.replace(/\D/g, '').slice(-1);
+        const newDigits = [...this.digits];
+        newDigits[index] = val;
+        this.digits = newDigits;
+        const newStates = [...this.digitStates];
+        newStates[index] = val ? 'filled' : 'idle';
+        this.digitStates = newStates;
+        if (val && index < OTP_LENGTH - 1)
+            this.inputs[index + 1]?.focus();
+        if (newDigits.every(d => d !== '')) {
+            this.dropiCodeCompleted.emit(newDigits.join(''));
+        }
+    }
+    handleKeyDown(e, index) {
+        if (e.key === 'Backspace' && !this.digits[index] && index > 0) {
+            this.inputs[index - 1]?.focus();
+        }
+    }
+    handlePaste(e) {
+        e.preventDefault();
+        const text = e.clipboardData?.getData('text')?.replace(/\D/g, '').slice(0, OTP_LENGTH) || '';
+        const newDigits = Array(OTP_LENGTH).fill('');
+        text.split('').forEach((c, i) => { newDigits[i] = c; });
+        this.digits = newDigits;
+        this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');
+        this.inputs[Math.min(text.length, OTP_LENGTH - 1)]?.focus();
+        if (newDigits.every(d => d !== ''))
+            this.dropiCodeCompleted.emit(newDigits.join(''));
+    }
+    render() {
+        const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
+        return (index.h("div", { key: '385270734b7b0d6be9e4c8fb4767feae951eef2a', class: "otp" }, this.showLabelContact && (index.h("p", { key: '6b837aa51683c913c14f001781b037dfc802c3f7', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && index.h("strong", { key: 'ea75ddf873d4380e100477ac4e939a4e2e1b2ef3' }, " ", this.labelContact))), index.h("div", { key: 'ecdd5b47d1acbee3a6d5a67bbe189471d1af234c', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (index.h("input", { key: i, ref: (el) => {
+                if (el)
+                    this.inputs[i] = el;
+            }, class: {
+                'otp__digit': true,
+                'otp__digit--filled': this.digitStates[i] === 'filled',
+                'otp__digit--error': this.error,
+            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i], onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (index.h("p", { key: '99bb12e401d9b7758ae6996c9f1b156f49ada55e', class: "otp__error" }, this.errorMessage)), index.h("div", { key: '61e80ca8a938025ad49c453255a23b3b44880e7e', class: "otp__resend" }, this.canResend ? (index.h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (index.h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
+    }
+};
+DropiOtpSendCode.style = dropiOtpSendCodeCss();
+
+exports.dropi_otp_send_code = DropiOtpSendCode;

package/dist/cjs/dropi-paginator.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.js');
 
-const dropiPaginatorCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.paginator{display:flex;align-items:center;justify-content:flex-end;gap:var(--Size-4, 16px);flex-wrap:wrap}.paginator-pages{display:flex;align-items:center;gap:var(--Size-1, 4px)}.paginator-btn{min-width:32px;height:32px;padding:0 var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s ease, border-color 0.15s ease}.paginator-btn:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-300, #a3abbf)}.paginator-btn:disabled{opacity:0.4;cursor:not-allowed}.paginator-btn--active{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff);font-weight:var(--font-weight-bold, 700)}.paginator-btn--active:hover{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.paginator-btn--arrow{border-color:transparent;background:transparent}.paginator-btn--arrow:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2)}.paginator-ellipsis{color:var(--Gray-Gray-400, #858ea6);padding:0 4px;font-size:var(--font-size-s, 12px);display:flex;align-items:center}.paginator-size{display:flex;align-items:center;gap:var(--Size-2, 8px)}.paginator-size-label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c)}.paginator-size-select{height:32px;padding:0 var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;outline:none}`;
+const dropiPaginatorCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.paginator{display:flex;align-items:center;justify-content:flex-end;gap:var(--Size-4, 16px);flex-wrap:wrap}.paginator-pages{display:flex;align-items:center;gap:var(--Size-1, 4px)}.paginator-btn{width:32px;height:32px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s ease}.paginator-btn:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.paginator-btn:disabled{opacity:0.4;cursor:not-allowed}.paginator-btn--active{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff);font-weight:var(--font-weight-bold, 700)}.paginator-btn--active:hover{background:var(--Primary-Primary-500, #f49a3d)}.paginator-btn--arrow{width:auto;padding:0 var(--Size-2, 8px);border-radius:var(--Border-1, 4px);gap:4px}.paginator-btn--arrow:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.paginator-label{font-size:var(--font-size-s, 12px);color:inherit}.paginator-ellipsis{color:var(--Gray-Gray-400, #858ea6);padding:0 4px;font-size:var(--font-size-s, 12px);display:flex;align-items:center}.paginator-size{display:flex;align-items:center;gap:var(--Size-2, 8px)}.paginator-size-label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c)}.paginator-size-select{height:32px;padding:0 var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;outline:none}`;
 
 const DropiPaginator = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiPageChange = index.createEvent(this, "dropiPageChange");
+        this.dropiPageChange = index.createEvent(this, "dropiPageChange", 7);
     }
     /** Total number of items */
     total = 0;
@@ -17,6 +17,8 @@ const DropiPaginator = class {
     page = 1;
     /** Max page buttons to show at once */
     maxPages = 5;
+    /** Hide "Anterior"/"Siguiente" text labels, show only arrows */
+    noLabels = false;
     /** Whether to show the items-per-page selector */
     showPageSizeSelector = false;
     /** Options for items per page */
@@ -74,9 +76,9 @@ const DropiPaginator = class {
         const pages = this.pageNumbers;
         const isFirst = this.page <= 1;
         const isLast = this.page >= this.totalPages;
-        return (index.h("div", { key: '3fbb545d6ff0b345da7698e51bfdee51a13de49e', class: "paginator" }, this.showPageSizeSelector && (index.h("div", { key: '7ae643988a60f2016dce24b53bb9f5ac13414cf0', class: "paginator-size" }, index.h("span", { key: 'fee6db32b0d13e6c455174f1c57fb35401e65c10', class: "paginator-size-label" }, "Por p\u00E1gina:"), index.h("select", { key: '0e37733de81c70ac274c8e89af65f0f94115ecb5', class: "paginator-size-select", onChange: (e) => this.onPageSizeChange(e) }, this.parsedOptions.map(opt => (index.h("option", { value: opt, selected: opt === this.pageSize }, opt)))))), index.h("div", { key: 'fb70589d0fd3d8072190099fe187359439707dc1', class: "paginator-pages" }, index.h("button", { key: '6348dda14005ed8dcd3e96d788715bbd5a9d432e', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, disabled: isFirst, onClick: () => this.goTo(this.page - 1), "aria-label": "Anterior" }, index.h("dropi-icon", { key: '2b2c17304b3c246a660b71f5ab5feedfb93ba044', name: "Dropdown-left", width: "16px", height: "16px", color: isFirst ? 'Gray-Gray-300' : 'Gray-Gray-600' })), pages.map((p, i) => p === '...'
+        return (index.h("div", { key: '23b6e4c63f01a484e61cea9fb6188382848cf675', class: "paginator" }, this.showPageSizeSelector && (index.h("div", { key: '0cfb3aea09339b51e65b2314b1da9915b384c92a', class: "paginator-size" }, index.h("span", { key: 'bef7700fdd17d4aaa5d800ad117f90b34e56381a', class: "paginator-size-label" }, "Por p\u00E1gina:"), index.h("select", { key: 'c25162f2ce42bbc00125a28d707e72fc214b4864', class: "paginator-size-select", onChange: (e) => this.onPageSizeChange(e) }, this.parsedOptions.map(opt => (index.h("option", { value: opt, selected: opt === this.pageSize }, opt)))))), index.h("div", { key: 'f8fd71442442725779786ea3f2334cccf82d237f', class: "paginator-pages" }, !isFirst && !this.noLabels && (index.h("button", { key: '899e629c0922baa0b71646912e4eed6e6c44536b', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina" }, index.h("dropi-icon", { key: '0e847019e80d9e6c8d448b904691518a87a3afff', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (index.h("button", { key: '606e96d5e1495c17ac86d66d560116574f2aa962', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page - 1), "aria-label": "Anterior" }, index.h("dropi-icon", { key: '695bbfc36e42040c530b4338c9118d9b1da4c1ea', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && index.h("span", { key: 'c3bc6d3c292f07b782aba6672715163d50907d93', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
             ? index.h("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
-            : index.h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.page }, onClick: () => this.goTo(p), "aria-current": p === this.page ? 'page' : undefined }, p)), index.h("button", { key: 'fea38306411fd4a73f35231ff632d8846301dd5f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, disabled: isLast, onClick: () => this.goTo(this.page + 1), "aria-label": "Siguiente" }, index.h("dropi-icon", { key: 'f7ed587cb578ef0b9872f290cdc17eebe2f9efeb', name: "Dropdown-Right", width: "16px", height: "16px", color: isLast ? 'Gray-Gray-300' : 'Gray-Gray-600' })))));
+            : index.h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.page }, onClick: () => this.goTo(p), "aria-current": p === this.page ? 'page' : undefined }, p)), !isLast && (index.h("button", { key: '83b89c14ca3fc63679839a4bcb3b416412ebcb01', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page + 1), "aria-label": "Siguiente" }, !this.noLabels && index.h("span", { key: 'e896eb8dd2bbabd932014a100a138af89fdfd2f4', class: "paginator-label" }, "Siguiente"), index.h("dropi-icon", { key: '2f9ba001d0ca94f8330b910a6dd952d940c622c8', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (index.h("button", { key: '6531b71b3767ae872464605bad8ce8e1a5d609d1', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina" }, index.h("dropi-icon", { key: '9411fdbec9291cf3a3418152efc6ce951e6c4006', name: "Arrow-double-small-right", width: "16px", height: "16px", color: "Gray-Gray-600" }))))));
     }
     static get watchers() { return {
         "pageSizeOptions": [{

package/dist/cjs/dropi-phone-input.cjs.entry.js

@@ -0,0 +1,84 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiPhoneInputCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.phone-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.phone-row{display:flex;align-items:center;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);height:40px;overflow:hidden;transition:border-color 0.2s}.phone-row:focus-within{border-color:var(--Info-Info-500, #50a5f1)}.phone-row--error{border-color:var(--Error-Error-500, #f46a6b)}.phone-row--disabled{background:var(--Gray-Gray-50, #f7f8fa);opacity:0.6;pointer-events:none}.phone-selector{display:flex;align-items:center;gap:4px;padding:0 var(--Size-2, 8px);background:none;border:none;cursor:pointer;height:100%;flex-shrink:0}.phone-selector:disabled{cursor:default}.phone-selector__flag{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033);letter-spacing:0.5px}.phone-selector__dial{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.phone-divider{width:1px;height:20px;background:var(--Gray-Gray-200, #c3c9d9);flex-shrink:0}.phone-input{flex:1;height:100%;padding:0 var(--Size-2, 8px);border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.phone-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.phone-error{margin:4px 0 0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b)}.phone-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--Neutral-White, #fff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 4px 16px rgba(0,0,0,0.08);z-index:200;max-height:240px;overflow-y:auto}.phone-dropdown__search-wrap{padding:var(--Size-2, 8px);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);position:sticky;top:0;background:var(--Neutral-White, #fff)}.phone-dropdown__search{width:100%;height:32px;padding:0 var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);outline:none}.phone-dropdown__search:focus{border-color:var(--Info-Info-500, #50a5f1)}.phone-dropdown__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.phone-dropdown__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.phone-dropdown__item--active{background:var(--Primary-Primary-50, #fff5eb)}.phone-dropdown__code{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033);width:28px;flex-shrink:0}.phone-dropdown__name{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.phone-dropdown__dial{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6);flex-shrink:0}.phone-dropdown__empty{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6);text-align:center}`;
+
+const COUNTRIES = [
+    { name: 'Colombia', code: 'CO', dial: '+57', maxLength: 10 },
+    { name: 'Ecuador', code: 'EC', dial: '+593', maxLength: 9 },
+    { name: 'México', code: 'MX', dial: '+52', maxLength: 10 },
+    { name: 'Perú', code: 'PE', dial: '+51', maxLength: 9 },
+    { name: 'Chile', code: 'CL', dial: '+56', maxLength: 9 },
+    { name: 'Argentina', code: 'AR', dial: '+54', maxLength: 10 },
+    { name: 'Venezuela', code: 'VE', dial: '+58', maxLength: 10 },
+    { name: 'Brasil', code: 'BR', dial: '+55', maxLength: 11 },
+    { name: 'Estados Unidos', code: 'US', dial: '+1', maxLength: 10 },
+    { name: 'España', code: 'ES', dial: '+34', maxLength: 9 },
+];
+const DropiPhoneInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiCodeChange = index.createEvent(this, "dropiCodeChange", 7);
+        this.dropiPhoneChange = index.createEvent(this, "dropiPhoneChange", 7);
+    }
+    /** Initial country dial code (e.g. "+57") */
+    codArea = '+57';
+    /** Phone number value */
+    value = '';
+    /** Input placeholder */
+    placeholder = 'Número de teléfono';
+    /** Disabled state */
+    disabled = false;
+    /** Show error state */
+    isValid = true;
+    /** Error message */
+    errorMessage = 'Número inválido';
+    /** Label */
+    label = '';
+    open = false;
+    search = '';
+    /** Emitted when country dial code changes. e.detail = dial code string */
+    dropiCodeChange;
+    /** Emitted when phone number changes. e.detail = phone number string */
+    dropiPhoneChange;
+    codAreaChanged() {
+        this.value = '';
+    }
+    get selectedCountry() {
+        return COUNTRIES.find(c => c.dial === this.codArea) ?? COUNTRIES[0];
+    }
+    get filtered() {
+        if (!this.search)
+            return COUNTRIES;
+        const q = this.search.toLowerCase();
+        return COUNTRIES.filter(c => c.name.toLowerCase().includes(q) || c.dial.includes(q));
+    }
+    selectCountry(c) {
+        this.codArea = c.dial;
+        this.open = false;
+        this.search = '';
+        this.dropiCodeChange.emit(c.dial);
+    }
+    handleInput(e) {
+        const raw = e.target.value.replace(/\D/g, '');
+        this.value = raw.slice(0, this.selectedCountry.maxLength);
+        e.target.value = this.value;
+        this.dropiPhoneChange.emit(this.value);
+    }
+    render() {
+        const country = this.selectedCountry;
+        return (index.h("div", { key: '8a22ead8fdf5d8916dd6d5376600ded1528f23e3', class: "phone-wrap" }, this.label && index.h("label", { key: '5d531f606de5691eeb608a3a32b71bd1b7925ae1', class: "phone-label" }, this.label), index.h("div", { key: '97d858e4dd57114e63bb460970ea5e0a22e3a4a7', class: { 'phone-row': true, 'phone-row--error': !this.isValid, 'phone-row--disabled': this.disabled } }, index.h("button", { key: '2f18bc35a7698d9c5f24dad68458ff27161c1b9d', type: "button", class: "phone-selector", disabled: this.disabled, onClick: () => {
+                if (!this.disabled)
+                    this.open = !this.open;
+            }, "aria-haspopup": "listbox", "aria-expanded": this.open }, index.h("span", { key: 'e0e5c9c22eab18335ce75ba273bf98934ad2fec0', class: "phone-selector__flag" }, country.code), index.h("span", { key: '9494233c07ed5f5fe6f6ad71f1f9d4c2b94be249', class: "phone-selector__dial" }, country.dial), index.h("dropi-icon", { key: '721e47d92b5dc9f973a5ce08b383a87371fdb736', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), index.h("div", { key: '93183e161f42b12cd42daa488c49318b2c378351', class: "phone-divider" }), index.h("input", { key: 'd9b4254f760cf967b2e0ca27946968d2cfc0ca86', class: "phone-input", type: "tel", inputmode: "numeric", placeholder: this.placeholder, value: this.value, disabled: this.disabled, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) })), !this.isValid && (index.h("p", { key: '62a89722bdab5c9b3a67c444543679acfc91f4e9', class: "phone-error" }, this.errorMessage)), this.open && (index.h("div", { key: 'd51d4d3a43eb6d823dd9039d534f97e6a456b343', class: "phone-dropdown" }, index.h("div", { key: 'd3f5912e02d62fdbec2b8a859b49c80b94047a2c', class: "phone-dropdown__search-wrap" }, index.h("input", { key: '2349669feca48b0760277a4288420f2680eb41c4', class: "phone-dropdown__search", type: "text", placeholder: "Buscar pa\u00EDs...", value: this.search, onInput: (e) => this.search = e.target.value })), this.filtered.length === 0 ? (index.h("div", { class: "phone-dropdown__empty" }, "Sin resultados")) : (this.filtered.map(c => (index.h("div", { class: { 'phone-dropdown__item': true, 'phone-dropdown__item--active': c.dial === this.codArea }, onMouseDown: (e) => { e.preventDefault(); this.selectCountry(c); } }, index.h("span", { class: "phone-dropdown__code" }, c.code), index.h("span", { class: "phone-dropdown__name" }, c.name), index.h("span", { class: "phone-dropdown__dial" }, c.dial)))))))));
+    }
+    static get watchers() { return {
+        "codArea": [{
+                "codAreaChanged": 0
+            }]
+    }; }
+};
+DropiPhoneInput.style = dropiPhoneInputCss();
+
+exports.dropi_phone_input = DropiPhoneInput;

package/dist/cjs/dropi-radio-button.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.js');
 
 const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;align-self:center;vertical-align:middle;margin:0}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}`;
 
 const DropiRadioButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiChange = index.createEvent(this, "dropiChange");
+        this.dropiChange = index.createEvent(this, "dropiChange", 7);
     }
     /** Label text displayed next to the radio */
     label = '';
@@ -33,7 +33,7 @@ const DropiRadioButton = class {
         this.dropiChange.emit(e);
     }
     render() {
-        return (index.h("div", { key: 'fd1153aa79130eeb865c0289b7e323bdf2459a8c', class: "dropi-radio-button" }, index.h("label", { key: 'b4fbe10ac36213905779f0976e2e80b549323a52', htmlFor: this.inputId }, index.h("input", { key: '8f9b74ed53912bdff637b879a50faf4d83b7d62b', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (index.h("div", { key: '50ae300b1dc5972c7c8979f7711edd5f59109653', class: "dropi-radio-button" }, index.h("label", { key: 'c91a4ee63c63fe9ae437f344fa1b249db227a4cb', htmlFor: this.inputId }, index.h("input", { key: 'ad993a1748315909539f512c09176713693a99d9', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/cjs/dropi-radio-selection-list.cjs.entry.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiRadioSelectionListCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.rsl__search{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);margin-bottom:var(--Size-2, 8px)}.rsl__search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.rsl__list{display:flex;flex-direction:column;gap:var(--Size-2, 8px)}.rsl__item{display:flex;align-items:flex-start;gap:var(--Size-3, 12px);padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);cursor:pointer;transition:border-color 0.15s, background 0.15s}.rsl__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.rsl__item--selected{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-50, #fff5eb)}.rsl__radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--Gray-Gray-300, #a3abbf);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;transition:border-color 0.15s}.rsl__radio--checked{border-color:var(--Primary-Primary-500, #f49a3d)}.rsl__radio-dot{width:8px;height:8px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.rsl__content{display:flex;flex-direction:column;gap:2px}.rsl__name{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.rsl__desc{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}`;
+
+const DropiRadioSelectionList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiChange = index.createEvent(this, "dropiChange", 7);
+        this.dropiSearch = index.createEvent(this, "dropiSearch", 7);
+    }
+    /** Options array or JSON string */
+    options = [];
+    /** Selected option id */
+    selectedOption = '';
+    /** Show search box */
+    showFilter = false;
+    /** Search placeholder */
+    filterPlaceholder = 'Buscar...';
+    /** Show description below name */
+    typeLayout = 'default';
+    filterText = '';
+    parsedOptions = [];
+    /** Emitted on selection change. e.detail = selected option id */
+    dropiChange;
+    /** Emitted on search. e.detail = search text */
+    dropiSearch;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() { this.optionsChanged(this.options); }
+    get filtered() {
+        if (!this.filterText)
+            return this.parsedOptions;
+        const q = this.filterText.toLowerCase();
+        return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
+    }
+    render() {
+        return (index.h("div", { key: '162776e2e2c09a26761b276a078d526308d205fd', class: "rsl" }, this.showFilter && (index.h("div", { key: 'ea0d6f907ff1ff79ce672b0cbb75572f48d6c44b', class: "rsl__search" }, index.h("dropi-icon", { key: 'c7dc88e18883942492f778f53932fd99cbd1a9bc', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), index.h("input", { key: '07ea27e2502f8aeaedb24ab4cfdb42c1573f6125', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+                this.filterText = e.target.value;
+                this.dropiSearch.emit(this.filterText);
+            } }))), index.h("div", { key: '95a4463b79a0795c8c0e7a30047f4ccd5f1d656d', class: "rsl__list" }, this.filtered.map(opt => {
+            const isSelected = opt.id === this.selectedOption;
+            return (index.h("div", { class: { 'rsl__item': true, 'rsl__item--selected': isSelected }, key: opt.id, onClick: () => { this.selectedOption = opt.id; this.dropiChange.emit(opt.id); } }, index.h("div", { class: { 'rsl__radio': true, 'rsl__radio--checked': isSelected } }, isSelected && index.h("div", { class: "rsl__radio-dot" })), index.h("div", { class: "rsl__content" }, index.h("span", { class: "rsl__name" }, opt.name), this.typeLayout === 'description' && opt.description && (index.h("span", { class: "rsl__desc" }, opt.description)))));
+        }))));
+    }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }]
+    }; }
+};
+DropiRadioSelectionList.style = dropiRadioSelectionListCss();
+
+exports.dropi_radio_selection_list = DropiRadioSelectionList;

package/dist/cjs/dropi-read-more.cjs.entry.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiReadMoreCss = () => `:host{display:block}.read-more__text{margin:0 0 4px;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-800, #1a2033);line-height:1.5}.read-more__toggle{background:none;border:none;padding:0;margin:0;font-size:var(--font-size-s, 12px);font-family:inherit;font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);cursor:pointer;text-decoration:underline}.read-more__toggle:hover{color:var(--Primary-Primary-600, #d4872e)}`;
+
+const DropiReadMore = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Full text to display */
+    text = '';
+    /** Maximum number of words before truncating */
+    maxWords = 20;
+    /** Allow collapsing back after expanding */
+    showSeeLess = true;
+    expanded = false;
+    get words() {
+        return (this.text || '').split(/\s+/).filter(Boolean);
+    }
+    get needsTruncation() {
+        return this.words.length > this.maxWords;
+    }
+    get displayText() {
+        if (!this.needsTruncation || this.expanded)
+            return this.text;
+        return this.words.slice(0, this.maxWords).join(' ') + '…';
+    }
+    render() {
+        const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);
+        return (index.h("div", { key: '82c3554cc4488391be3b70c5e3bbb5a38a957ec8', class: "read-more" }, index.h("p", { key: '48287caef84486c77d8e8f36080c59c32c90cd00', class: "read-more__text" }, this.displayText), showToggle && (index.h("button", { key: 'b808d8cf10d65381e16cdda460db8ceb4d8467c0', class: "read-more__toggle", onClick: () => this.expanded = !this.expanded }, this.expanded ? 'Ver menos' : 'Ver más'))));
+    }
+};
+DropiReadMore.style = dropiReadMoreCss();
+
+exports.dropi_read_more = DropiReadMore;