@dropi/ui 0.1.20 → 0.1.22

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D5SAM1O2.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 dropiMediaPlayerCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.dropi-media-player{position:relative;width:100%;max-width:335px;height:auto;aspect-ratio:335 / 567;background-color:var(--Neutral-Black);border-radius:var(--Border-2, 8px);overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer}.dropi-media-player--mobile-vertical{max-width:335px;aspect-ratio:335 / 567}.dropi-media-player--mobile-compact{max-width:335px;aspect-ratio:335 / 337}.dropi-media-player--desktop{max-width:587px;aspect-ratio:587 / 567}.dropi-media-player__video{width:100%;height:100%;object-fit:cover}.dropi-media-player__center-play{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:400px;background-color:rgba(14, 17, 26, 0.6);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;transition:opacity 0.3s ease;pointer-events:auto}.dropi-media-player__center-play--hidden{opacity:0;pointer-events:none}.dropi-media-player__controls-bar{position:absolute;bottom:0;left:0;width:100%;height:72px;padding:24px;display:flex;flex-direction:row;align-items:center;gap:10px;background:linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);transition:opacity 0.3s ease;box-sizing:border-box}.dropi-media-player__controls-bar--hidden{opacity:0;pointer-events:none}.dropi-media-player__timestamp{font-family:'Inter', sans-serif;font-size:var(--font-size-xs, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Neutral-White);white-space:nowrap;flex-shrink:0}.dropi-media-player__progress{flex:1;padding:6px 0;cursor:pointer;position:relative}.dropi-media-player__progress-track{position:relative;width:100%;height:5px;border-radius:var(--Border-2, 8px);background-color:var(--Gray-Gray-700, #32394d)}.dropi-media-player__progress-fill{height:100%;background-color:var(--Neutral-White);border-radius:var(--Border-2, 8px);will-change:width}.dropi-media-player__progress-thumb{position:absolute;top:50%;transform:translate(-50%, -50%);width:12px;height:12px;border-radius:50%;background-color:var(--Neutral-White);pointer-events:none;will-change:left}.dropi-media-player__actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.dropi-media-player__btn{-webkit-appearance:none;appearance:none;background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--Neutral-White);transition:opacity 0.15s ease}.dropi-media-player__btn:hover{opacity:0.8}.dropi-media-player__btn--speed{font-family:'Inter', sans-serif;font-size:var(--font-size-sm, 14px);font-weight:var(--font-weight-medium, 500);color:var(--Neutral-White);min-width:20px}.dropi-media-player__speed-control{position:relative;display:flex;align-items:center}.dropi-media-player__speed-menu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--Gray-Gray-800, #1f2433);border-radius:var(--Border-2, 8px);padding:6px 0;min-width:44px;display:flex;flex-direction:column;z-index:20}.dropi-media-player__speed-option{-webkit-appearance:none;appearance:none;background:transparent;border:none;padding:6px 10px;font-family:'Inter', sans-serif;font-size:var(--font-size-s);font-weight:var(--font-weight-medium);color:var(--Neutral-White);cursor:pointer;text-align:center;white-space:nowrap;transition:opacity 0.15s ease}.dropi-media-player__speed-option--active{color:var(--Primary-Primary-500, #f49a3d)}.dropi-media-player__speed-option:hover{opacity:0.8}.dropi-media-player__volume-control{position:relative;display:flex;align-items:center}.dropi-media-player__volume-popup{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:32px;height:108px;display:flex;align-items:center;justify-content:center;background:var(--Gray-Gray-800, #1f2433);border-radius:var(--Border-2, 8px);overflow:visible;z-index:20}.dropi-media-player__volume-slider{-webkit-appearance:none;appearance:none;width:97px;height:8px;transform:rotate(-90deg);border-radius:4px;cursor:pointer;outline:none;flex-shrink:0}.dropi-media-player__volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--Neutral-White);cursor:pointer}.dropi-media-player__volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--Neutral-White);border:none;cursor:pointer}.dropi-media-player__volume-slider::-webkit-slider-runnable-track{border-radius:4px}.dropi-media-player__volume-slider::-moz-range-track{height:8px;background:var(--Gray-Gray-700, #32394d);border-radius:4px}.dropi-media-player__blur-bg{display:none;position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(21px);transform:scale(1.15);z-index:0}.dropi-media-player__blur-overlay{display:none;position:absolute;inset:0;background-color:rgba(0, 0, 0, 0.7);z-index:0}.dropi-media-player.is-fullscreen,.dropi-media-player:fullscreen{max-width:none;aspect-ratio:auto;width:100vw;height:100vh;border-radius:0}.dropi-media-player.is-fullscreen .dropi-media-player__blur-bg,.dropi-media-player:fullscreen .dropi-media-player__blur-bg,.dropi-media-player.is-fullscreen .dropi-media-player__blur-overlay,.dropi-media-player:fullscreen .dropi-media-player__blur-overlay{display:block}.dropi-media-player.is-fullscreen .dropi-media-player__video,.dropi-media-player:fullscreen .dropi-media-player__video{object-fit:contain;position:relative;z-index:1}.dropi-media-player.is-fullscreen .dropi-media-player__center-play,.dropi-media-player:fullscreen .dropi-media-player__center-play,.dropi-media-player.is-fullscreen .dropi-media-player__controls-bar,.dropi-media-player:fullscreen .dropi-media-player__controls-bar{z-index:2}`;
 
 const DropiMediaPlayer = class {
     constructor(hostRef) {
@@ -9,37 +9,49 @@ const DropiMediaPlayer = class {
         this.dropiEnded = createEvent(this, "dropiEnded", 7);
     }
     get el() { return getElement(this); }
-    /** Media source URL */
     src = '';
-    /** "audio" or "video" */
-    mediaType = 'audio';
-    /** Poster image (video only) */
+    mediaType = 'video';
     poster = '';
-    /** Autoplay */
     autoplay = false;
-    /** Loop */
     loop = false;
-    /** Initial volume 0–1 */
     initialVolume = 1;
-    /** Title shown above controls */
-    mediaTitle = '';
+    /** Format defines aspect ratio scales like Angular original */
+    format = 'mobile-vertical';
     playing = false;
-    currentTime = 0;
+    currentTimeStr = '00:00';
+    durationStr = '00:00';
     duration = 0;
     volume = 1;
     muted = false;
-    loading = true;
+    showControls = true;
+    isFullscreen = false;
+    progress = 0;
+    speed = 1;
+    showSpeedMenu = false;
+    showVolumeSlider = false;
     mediaEl;
-    /** Emitted when playback starts/pauses. e.detail = playing */
+    controlsTimeout;
+    speeds = [1, 2, 3];
     dropiPlay;
-    /** Emitted when media ends */
     dropiEnded;
     componentDidLoad() {
         if (this.mediaEl) {
-            this.mediaEl.volume = this.initialVolume;
-            this.volume = this.initialVolume;
+            const vol = this.initialVolume ?? 1;
+            if (isFinite(vol)) {
+                this.mediaEl.volume = vol;
+                this.muted = vol === 0;
+                this.volume = vol;
+            }
         }
+        document.addEventListener('fullscreenchange', this.handleFullscreenChange);
     }
+    disconnectedCallback() {
+        document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
+        clearTimeout(this.controlsTimeout);
+    }
+    handleFullscreenChange = () => {
+        this.isFullscreen = !!document.fullscreenElement;
+    };
     togglePlay() {
         if (!this.mediaEl)
             return;
@@ -47,52 +59,130 @@ const DropiMediaPlayer = class {
             this.mediaEl.pause();
         }
         else {
-            this.mediaEl.play();
+            const promise = this.mediaEl.play();
+            if (promise !== undefined) {
+                promise.catch((e) => { console.warn('Play error:', e); this.playing = false; });
+            }
         }
     }
     handleTimeUpdate() {
-        this.currentTime = this.mediaEl.currentTime;
+        if (!this.duration)
+            return;
+        this.progress = (this.mediaEl.currentTime / this.duration) * 100;
+        this.currentTimeStr = this.formatTime(this.mediaEl.currentTime);
     }
     handleLoadedMetadata() {
         this.duration = this.mediaEl.duration;
-        this.loading = false;
+        this.durationStr = this.formatTime(this.duration);
     }
     handleSeek(e) {
-        const val = Number(e.target.value);
-        this.mediaEl.currentTime = val;
-        this.currentTime = val;
+        if (!this.duration)
+            return;
+        const bar = e.currentTarget;
+        const rect = bar.getBoundingClientRect();
+        const pos = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        this.mediaEl.currentTime = pos * this.duration;
     }
     handleVolume(e) {
-        const val = Number(e.target.value);
+        const val = parseFloat(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?.();
+    toggleSpeedMenu() {
+        this.showSpeedMenu = !this.showSpeedMenu;
+        this.showVolumeSlider = false;
+    }
+    selectSpeed(s) {
+        this.speed = s;
+        if (this.mediaEl)
+            this.mediaEl.playbackRate = s;
+        this.showSpeedMenu = false;
+    }
+    toggleVolume() {
+        this.showVolumeSlider = !this.showVolumeSlider;
+        this.showSpeedMenu = false;
+    }
+    toggleFullscreen() {
+        if (!this.isFullscreen) {
+            this.el.shadowRoot.host.requestFullscreen?.();
+        }
+        else {
+            document.exitFullscreen?.();
+        }
+    }
+    onMouseMove() {
+        this.showControls = true;
+        if (this.playing)
+            this.startHideControlsTimer();
+    }
+    onMouseLeave() {
+        if (this.playing) {
+            this.showControls = false;
+            this.showVolumeSlider = false;
+            this.showSpeedMenu = false;
+        }
+    }
+    startHideControlsTimer() {
+        clearTimeout(this.controlsTimeout);
+        this.controlsTimeout = setTimeout(() => {
+            if (this.playing) {
+                this.showControls = false;
+                this.showVolumeSlider = false;
+                this.showSpeedMenu = false;
+            }
+        }, 5000);
+    }
+    handleDocClick(e) {
+        if (!this.el.contains(e.target)) {
+            this.showVolumeSlider = false;
+            this.showSpeedMenu = false;
+        }
     }
     formatTime(secs) {
         if (isNaN(secs))
-            return '0:00';
+            return '00:00';
         const m = Math.floor(secs / 60);
         const s = Math.floor(secs % 60);
-        return `${m}:${String(s).padStart(2, '0')}`;
+        return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+    }
+    get playButtonSize() {
+        if (this.format === 'desktop')
+            return 80;
+        if (this.format === 'mobile-compact')
+            return 40;
+        return 60;
+    }
+    get playIconSize() {
+        if (this.format === 'desktop')
+            return 32;
+        if (this.format === 'mobile-compact')
+            return 17;
+        return 26;
+    }
+    get volumeIcon() {
+        return (this.muted || this.volume === 0) ? 'Volumen-silent' : 'Volumen';
+    }
+    get volumeGradient() {
+        const pct = (this.muted ? 0 : this.volume) * 100;
+        return `linear-gradient(to right, #ffffff ${pct}%, #32394d ${pct}%)`;
     }
     render() {
-        const pct = this.duration ? (this.currentTime / this.duration) * 100 : 0;
-        return (h("div", { key: '76ee9c93a56b78e8ebdad1a77a59b56bbd1ae8f6', class: `player player--${this.mediaType}` }, this.mediaType === 'video' ? (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 })) : (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(); } })), h("div", { key: '444cb9c86d3a69042d827ab4785e8c0995f82e6d', class: "player__controls" }, this.mediaTitle && (h("span", { key: '39bee7040cddfae5ce17e6ee62d0713ba0062ae4', class: "player__title" }, this.mediaTitle)), h("div", { key: '05ccbde97d88387d1b167495887877f0d3443cc4', class: "player__seek-wrap" }, h("span", { key: '1e8f81054b851975a0526224f5b2455687d6d1ba', class: "player__time" }, this.formatTime(this.currentTime)), h("div", { key: 'aecd083653f3384e47938ff00bcd0f913eab4e13', class: "player__seek-track" }, h("div", { key: '2bef10203f1c0d22e371e8e7ee223ec9aaf9b496', class: "player__seek-fill", style: { width: `${pct}%` } }), 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) })), h("span", { key: '0127fa197a59db81f224db1a168b52fc4be154fe', class: "player__time" }, this.formatTime(this.duration))), h("div", { key: '171eff82a5f55544cb0ad601ae4ae07954e93c43', class: "player__buttons" }, h("button", { key: '0d207dcd555e040999e6434009b7762e9caf8359', class: "player__btn player__btn--play", onClick: () => this.togglePlay(), type: "button" }, this.loading
-            ? h("dropi-icon", { name: "Spinner", width: "20px", height: "20px", color: "Neutral-White" })
-            : h("dropi-icon", { name: this.playing ? 'Pause' : 'Play', width: "20px", height: "20px", color: "Neutral-White" })), h("div", { key: 'd8eeb92e14729c49e0b2ef459c44ed1f402ce9f8', class: "player__volume" }, h("button", { key: '4bdf9ca4d03e1e7a420b280f0106e67d50fe6285', class: "player__btn", onClick: () => this.toggleMute(), type: "button" }, 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" })), 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) })), h("span", { key: '7dc77449676683256fbf746ff9e3679d0b8ed41d', class: "player__spacer" }), this.mediaType === 'video' && (h("button", { key: '442d58c35ca6e8649849e30f46d33274bbff577b', class: "player__btn", onClick: () => this.handleFullscreen(), type: "button" }, h("dropi-icon", { key: '89a88d82501bfa0af389a8bc3c17cb3eeca9af00', name: "Fullscreen", width: "16px", height: "16px", color: "Gray-Gray-600" })))))));
+        if (this.mediaType === 'audio') {
+            return (h("audio", { src: this.src, autoplay: this.autoplay, loop: this.loop, controls: true, style: { width: '100%' } }));
+        }
+        return (h("div", { class: {
+                'dropi-media-player': true,
+                [`dropi-media-player--${this.format}`]: true,
+                'is-fullscreen': this.isFullscreen
+            }, onMouseMove: () => this.onMouseMove(), onMouseLeave: () => this.onMouseLeave() }, h("div", { class: "dropi-media-player__blur-bg", style: { backgroundImage: `url(${this.poster})` } }), h("div", { class: "dropi-media-player__blur-overlay" }), h("video", { class: "dropi-media-player__video", ref: (el) => this.mediaEl = el, src: this.src, poster: this.poster, onClick: () => this.togglePlay(), onPlay: () => { this.playing = true; this.startHideControlsTimer(); this.dropiPlay.emit(true); }, onPause: () => { this.playing = false; this.showControls = true; clearTimeout(this.controlsTimeout); this.dropiPlay.emit(false); }, onEnded: () => { this.playing = false; this.showControls = true; this.dropiEnded.emit(); }, onTimeUpdate: () => this.handleTimeUpdate(), onLoadedMetaData: () => this.handleLoadedMetadata() }), h("div", { class: {
+                'dropi-media-player__center-play': true,
+                'dropi-media-player__center-play--hidden': this.playing && !this.showControls
+            }, style: { width: `${this.playButtonSize}px`, height: `${this.playButtonSize}px` }, onClick: (e) => { e.stopPropagation(); this.togglePlay(); } }, this.playing ? (h("svg", { width: `${this.playIconSize}px`, height: `${this.playIconSize}px`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", style: { color: '#ffffff' } }, h("rect", { x: "6.5", y: "4", width: "3.5", height: "16", rx: "1.75" }), h("rect", { x: "14", y: "4", width: "3.5", height: "16", rx: "1.75" }))) : (h("dropi-icon", { name: "Play", color: "Neutral-White", width: `${this.playIconSize}px`, height: `${this.playIconSize}px` }))), h("div", { class: {
+                'dropi-media-player__controls-bar': true,
+                'dropi-media-player__controls-bar--hidden': !this.showControls
+            }, onClick: (e) => e.stopPropagation() }, h("span", { class: "dropi-media-player__timestamp" }, this.currentTimeStr, " / ", this.durationStr), h("div", { class: "dropi-media-player__progress", onClick: (e) => { e.stopPropagation(); this.handleSeek(e); } }, h("div", { class: "dropi-media-player__progress-track" }, h("div", { class: "dropi-media-player__progress-fill", style: { width: `${this.progress}%` } }), h("div", { class: "dropi-media-player__progress-thumb", style: { left: `${this.progress}%` } }))), h("div", { class: "dropi-media-player__actions" }, h("div", { class: "dropi-media-player__speed-control", onClick: (e) => e.stopPropagation() }, this.showSpeedMenu && (h("div", { class: "dropi-media-player__speed-menu" }, this.speeds.map(s => (h("button", { type: "button", class: { 'dropi-media-player__speed-option': true, 'dropi-media-player__speed-option--active': this.speed === s }, onClick: (e) => { e.stopPropagation(); this.selectSpeed(s); } }, "x", s))))), h("button", { class: "dropi-media-player__btn dropi-media-player__btn--speed", onClick: (e) => { e.stopPropagation(); this.toggleSpeedMenu(); }, type: "button" }, "x", this.speed)), h("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleFullscreen(); }, type: "button" }, h("dropi-icon", { name: this.isFullscreen ? 'Compress' : 'Expand', color: "Neutral-White", width: "20px", height: "20px" })), h("div", { class: "dropi-media-player__volume-control", onClick: (e) => e.stopPropagation() }, this.showVolumeSlider && (h("div", { class: "dropi-media-player__volume-popup" }, h("input", { type: "range", class: "dropi-media-player__volume-slider", min: "0", max: "1", step: "0.01", value: this.muted ? 0 : this.volume, style: { background: this.volumeGradient }, onInput: (e) => this.handleVolume(e) }))), h("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleVolume(); }, type: "button" }, h("dropi-icon", { name: this.volumeIcon, color: "Neutral-White", width: "20px", height: "20px" })))))));
     }
 };
 DropiMediaPlayer.style = dropiMediaPlayerCss();

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

@@ -1,43 +1,70 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, B as Build, h } from './index-D5SAM1O2.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-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 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, #ffffff);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:var(--font-weight-bold);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:var(--font-size-xxl);line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;display:flex;flex-direction:column;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-drawer-xxl{width:1214px;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)}@media (max-width: 768px){.modal-root--right .modal-panel.size-drawer-s,.modal-root--right .modal-panel.size-drawer-m,.modal-root--right .modal-panel.size-drawer-l,.modal-root--right .modal-panel.size-drawer-xxl,.modal-root--right .modal-panel.size-sidebar-half{width:100vw;min-width:unset}}.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) {
         registerInstance(this, hostRef);
-        this.dropiShow = createEvent(this, "dropiShow", 5);
-        this.dropiHide = createEvent(this, "dropiHide", 5);
+        this.onShow = createEvent(this, "onShow", 5);
+        this.onHide = createEvent(this, "onHide", 5);
         this.visibleChange = createEvent(this, "visibleChange", 5);
     }
     visible = false;
-    header = '';
+    header = null;
     showCloseIcon = true;
     dismissable = true;
+    dismissableMask = true;
+    dismissible = true;
     closeOnEscape = true;
     modal = true;
+    closable = true;
+    blockScroll = true;
     showHeader = true;
+    showFooter = true;
     position = 'center';
     size = 'm';
-    dropiShow;
-    dropiHide;
+    styleClass = null;
+    maxWidth = null;
+    /** Auto-manage z-index stack (matches Angular `autoZIndex`) */
+    autoZIndex = true;
+    /** Base z-index value when autoZIndex is false (matches Angular `baseZIndex`) */
+    baseZIndex = 1100;
+    /** CSS transition duration, e.g. '0.15s' (matches Angular `transitionOptions`) */
+    transitionOptions = '0.15s';
+    /** Enable a before-close hook (matches Angular `enableBeforeClose`) */
+    enableBeforeClose = false;
+    /** No-op — kept for API parity with Angular (matches Angular `draggable`) */
+    draggable = false;
+    /** No-op — kept for API parity with Angular (matches Angular `resizable`) */
+    resizable = false;
+    onShow;
+    onHide;
     visibleChange;
     isOpen = false;
     isClosing = false;
     mounted = false;
     closeTimer = null;
     keyHandler = null;
-    visibleChanged(val) {
-        val ? this.openModal() : this.startClose();
+    visibleChanged(val, oldVal) {
+        const isVisible = val === true || String(val) === 'true';
+        const wasVisible = oldVal === true || String(oldVal) === 'true';
+        if (isVisible === wasVisible)
+            return;
+        console.log('[DropiModal] visibleChanged:', isVisible);
+        isVisible ? this.openModal() : (this.mounted && this.startClose());
     }
     componentDidLoad() {
-        if (this.visible)
+        const isVisible = this.visible === true || String(this.visible) === 'true';
+        if (isVisible)
             this.openModal();
     }
     disconnectedCallback() {
         this.removeKeyHandler();
         if (this.closeTimer)
             clearTimeout(this.closeTimer);
-        document.body.style.overflow = '';
+        if (typeof document !== 'undefined') {
+            document.body.classList.remove('dropi-modal-open');
+        }
     }
     async hide() {
         this.visible = false;
@@ -59,11 +86,11 @@ const DropiModal = class {
         this.isOpen = false;
         requestAnimationFrame(() => requestAnimationFrame(() => {
             this.isOpen = true;
-            this.dropiShow.emit();
+            this.onShow.emit();
         }));
         this.addKeyHandler();
-        if (this.modal && document.body && document.body.style) {
-            document.body.style.setProperty('overflow', 'hidden');
+        if ((this.modal ?? true) && Build.isBrowser && document.body) {
+            document.body.classList.add('dropi-modal-open');
         }
     }
     startClose() {
@@ -77,10 +104,11 @@ const DropiModal = class {
         this.closeTimer = setTimeout(() => {
             this.mounted = false;
             this.isClosing = false;
-            if (document.body && document.body.style) {
-                document.body.style.setProperty('overflow', '');
+            this.closeTimer = null;
+            if ((this.modal ?? true) && Build.isBrowser && document.body) {
+                document.body.classList.remove('dropi-modal-open');
             }
-            this.dropiHide.emit();
+            this.onHide.emit();
         }, 200);
     }
     addKeyHandler() {
@@ -99,9 +127,7 @@ const DropiModal = class {
         }
     }
     render() {
-        if (!this.mounted)
-            return null;
-        return (h("div", { class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, this.modal && h("div", { class: "modal-mask", onClick: () => this.dismissable && this.hide() }), h("div", { class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (h("div", { class: "modal-header" }, this.header && h("span", { class: "modal-title" }, this.header), h("slot", { name: "header" }), this.showCloseIcon && (h("button", { class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), h("div", { class: "modal-content" }, h("slot", null)), h("div", { class: "modal-footer" }, h("slot", { name: "footer" })))));
+        return (h("div", { key: '6f790289cbdcb0cb92040abc471e8dc592f3d0ab', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}`, style: { display: this.mounted || this.isClosing ? 'flex' : 'none' } }, (this.modal ?? true) && h("div", { key: '6667d2df75ac67352346f454452a360a6506473a', class: "modal-mask", onClick: () => this.dismissable && this.hide() }), h("div", { key: '3a5485798cec9e986f411631aee819f10716e441', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (h("div", { key: '795afcb76540a52beefd1ca4c0fb80d88156ef98', class: "modal-header" }, this.header && h("span", { key: '3df861b36deca9caaf6c64c54b89dc897f5b9453', class: "modal-title" }, this.header), h("slot", { key: 'b6b1913314b2c05daa299d273ff7b495d4f72c39', name: "header" }), this.showCloseIcon && (h("button", { key: '529dd7e8787a09fc588e28c0c77f0f27c304659f', class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), h("div", { key: 'eeeae841372a788a34cee76b38de7689a7a296fc', class: "modal-content" }, h("slot", { key: '83c67fb239b5579169368b5b2ba6c2ee22564a73' })), this.showFooter && h("div", { key: 'd86cd40508a7b6ea3c9cd4583aaa5a69646bb549', class: "modal-footer" }, h("slot", { key: 'f70503acd5f2b5e672700cec46e4e9705d944e22', name: "footer" })))));
     }
     static get watchers() { return {
         "visible": [{

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

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.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 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, #ffffff);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, #ffffff);font-size:var(--font-size-xxs);font-weight:var(--font-weight-bold);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, #ffffff);font-size:9px;font-weight:var(--font-weight-bold);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, #ffffff);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) {
         registerInstance(this, hostRef);
-        this.dropiNavItemClick = createEvent(this, "dropiNavItemClick", 7);
+        this.clickLoadItem = createEvent(this, "clickLoadItem", 7);
         this.dropiNotificationsClick = createEvent(this, "dropiNotificationsClick", 7);
         this.dropiUserClick = createEvent(this, "dropiUserClick", 7);
         this.dropiMenuToggle = createEvent(this, "dropiMenuToggle", 7);
@@ -14,8 +14,10 @@ const DropiNavbar = class {
     logoUrl = '';
     /** Logo alt */
     logoAlt = 'Logo';
-    /** Navigation items (array or JSON string) */
-    items = [];
+    /** Navigation data (matches Angular `data: DropiTableRow[]`) */
+    data = [];
+    /** Title (matches Angular `title`) */
+    title = '';
     /** Active item ID */
     activeId = '';
     /** User name */
@@ -26,23 +28,23 @@ const DropiNavbar = class {
     notifications = 0;
     /** Show menu toggle (mobile) */
     showMenuToggle = true;
-    /** Emitted when a nav item is clicked. e.detail = item id */
-    dropiNavItemClick;
+    /** Emitted when a nav item is clicked (matches Angular `clickLoadItem`) */
+    clickLoadItem;
     /** 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;
+    get parsedData() {
+        const val = this.data;
         return typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
     render() {
-        const items = this.parsedItems;
-        return (h("nav", { key: '014281e03d0d6d2619add2319c3df90a5b6246a5', class: "navbar" }, h("div", { key: '4c1ac832042995edbe98e03d9ffd722879d7667c', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: 'b244829263b1fa8f10365be75f8e6a86780b23bb', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: '082a2ec0c22c31d0e50c6c4268deb91db91a4a0a', name: "Menu", width: "20px", height: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: 'bb999a5b53a2e667715b8b8152e68f567bf6735d', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt }))), items.length > 0 && (h("ul", { key: '0d8fc800d7e8eb42ba7971c323dcd7366c564c6f', class: "navbar__items" }, items.map(item => (h("li", null, h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.dropiNavItemClick.emit(item.id), type: "button" }, item.icon && h("dropi-icon", { name: item.icon, width: "16px", height: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), h("span", null, item.label), item.badge != null && String(item.badge) !== '0' && (h("span", { class: "navbar__badge" }, item.badge)))))))), h("div", { key: 'ce34e9989a27f875880cc674f68cd1348ba830ea', class: "navbar__right" }, h("button", { key: '8786409d275d115e363d4675d51d33a004881287', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: '6d8475c54109cf3535464029d906779a1ef5613d', name: "Bell", width: "20px", height: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: 'f38458c5cf0e805cf7bc20ca6d9c2f59570c2813', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: 'aa82799088ef91868967988a48b51d5426175733', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
+        const items = this.parsedData;
+        return (h("nav", { key: '15c337396dbe445ac7a13d7e0f2d99f88b4de439', class: "navbar" }, h("div", { key: '922a217dfe53f3f34dd6746033996bcd71dadfb2', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: 'db80ad1fd6f47807196c81ae60bf9cea8bb16e77', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: 'c35615cbfd5dc807def32957062ea25b059664b5', name: "Menu", width: "20px", height: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: 'ffc532e501bc7bc0a5625c865955a43c84857a58', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && h("span", { key: '7fb10d4a5e42030a7701bf0933587ecdaf5ab20b', class: "navbar__title" }, this.title)), items.length > 0 && (h("ul", { key: '338118e694ca0a46d94fee60211302efe8bbee51', class: "navbar__items" }, items.map(item => (h("li", null, h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && h("dropi-icon", { name: item.icon, width: "16px", height: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), h("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (h("span", { class: "navbar__badge" }, item.badge)))))))), h("div", { key: 'f2ac52b78963fa9165b6614a7abaa6fe822b2a89', class: "navbar__right" }, h("button", { key: '4e78c3fbc69899f8b1f0206dc27372c3c0d15c31', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: 'a94bbd4aa73b7be9a735b31b92d882c53616f8e6', name: "Bell", width: "20px", height: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: 'c2157fca16e1c3f992562027d4dfeb348ef7ad23', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: 'ba2cb25cda984ba8ea180ff8edb3d3ffc955ab27', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
             ? h("img", { class: "navbar__avatar", src: this.userAvatar, alt: this.userName })
-            : h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && h("span", { key: '512bb7945572d2a2c117d8fa27d82d1d53b78120', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: 'feac223f33239f1b1d2add2139aef3408a73de44', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })))));
+            : h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && h("span", { key: '11b4c378a089644e63d6186fe40e31ca7b4ab924', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: 'c2a140081f5ad014b73d35f45476cc1ac41391b5', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })))));
     }
 };
 DropiNavbar.style = dropiNavbarCss();

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

@@ -1,13 +1,13 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.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 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, #1f2433);outline:none;transition:border-color 0.15s ease;background:var(--Neutral-White, #ffffff)}.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) {
         registerInstance(this, hostRef);
-        this.dropiCodeCompleted = createEvent(this, "dropiCodeCompleted", 7);
+        this.codeCompleted = createEvent(this, "codeCompleted", 7);
         this.dropiResend = createEvent(this, "dropiResend", 7);
     }
     /** Delivery method label */
@@ -15,7 +15,7 @@ const DropiOtpSendCode = class {
     /** Contact info (email/phone to show in label) */
     labelContact = '';
     /** Show contact label */
-    showLabelContact = true;
+    showLabelContact = false;
     /** Error message to display */
     errorMessage = '';
     digits = Array(OTP_LENGTH).fill('');
@@ -26,7 +26,7 @@ const DropiOtpSendCode = class {
     inputs = [];
     timer;
     /** Emitted when all 6 digits are entered. e.detail = the complete code string */
-    dropiCodeCompleted;
+    codeCompleted;
     /** Emitted when resend is requested */
     dropiResend;
     componentDidLoad() { this.startCountdown(); }
@@ -45,20 +45,20 @@ const DropiOtpSendCode = class {
     }
     handleInput(e, index) {
         const val = e.target.value.replace(/\D/g, '').slice(-1);
-        const newDigits = [...this.digits];
+        const newDigits = [...(this.digits ?? Array(OTP_LENGTH).fill(''))];
         newDigits[index] = val;
         this.digits = newDigits;
-        const newStates = [...this.digitStates];
+        const newStates = [...(this.digitStates ?? Array(OTP_LENGTH).fill('idle'))];
         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(''));
+            this.codeCompleted.emit(newDigits.join(''));
         }
     }
     handleKeyDown(e, index) {
-        if (e.key === 'Backspace' && !this.digits[index] && index > 0) {
+        if (e.key === 'Backspace' && !(this.digits ?? [])[index] && index > 0) {
             this.inputs[index - 1]?.focus();
         }
     }
@@ -71,18 +71,18 @@ const DropiOtpSendCode = class {
         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(''));
+            this.codeCompleted.emit(newDigits.join(''));
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (h("div", { key: '385270734b7b0d6be9e4c8fb4767feae951eef2a', class: "otp" }, this.showLabelContact && (h("p", { key: '6b837aa51683c913c14f001781b037dfc802c3f7', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: 'ea75ddf873d4380e100477ac4e939a4e2e1b2ef3' }, " ", this.labelContact))), h("div", { key: 'ecdd5b47d1acbee3a6d5a67bbe189471d1af234c', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (h("input", { key: i, ref: (el) => {
+        return (h("div", { key: '3cfe0d64890b2c90f500c662fe8572f9630d614b', class: "otp" }, this.showLabelContact && (h("p", { key: 'd791c408a5393ae82e00e758b67530d4b21381ac', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '3d6ca9c3a00a71ba99800a94f1b95d3247d75522' }, " ", this.labelContact))), h("div", { key: '22d172d48ae8748fa27aaead4c65145d848ae4f2', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (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--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 && (h("p", { key: '99bb12e401d9b7758ae6996c9f1b156f49ada55e', class: "otp__error" }, this.errorMessage)), h("div", { key: '61e80ca8a938025ad49c453255a23b3b44880e7e', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
+            }, 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 && (h("p", { key: 'c6434be80f44e6f8a277bdff49503f67db5cdca7', class: "otp__error" }, this.errorMessage)), h("div", { key: '281e56d25ec3b01136aae2220605037d4dff4e16', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
     }
 };
 DropiOtpSendCode.style = dropiOtpSendCodeCss();