@dropi/ui 0.1.20 → 0.1.22

package/dist/collection/components/dropi-modal/dropi-modal.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Build } from "@stencil/core";
 /**
  * @component dropi-modal
  * Modal/dialog with backdrop, close button, and header/content/footer slots.
@@ -6,34 +6,61 @@ import { h } from "@stencil/core";
  */
 export class DropiModal {
     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;
@@ -55,11 +82,11 @@ export class DropiModal {
         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() {
@@ -73,10 +100,11 @@ export class DropiModal {
         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() {
@@ -95,9 +123,7 @@ export class DropiModal {
         }
     }
     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 is() { return "dropi-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -114,11 +140,11 @@ export class DropiModal {
     static get properties() {
         return {
             "visible": {
-                "type": "boolean",
+                "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
@@ -137,7 +163,7 @@ export class DropiModal {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
+                    "original": "string | null",
                     "resolved": "string",
                     "references": {}
                 },
@@ -151,7 +177,7 @@ export class DropiModal {
                 "setter": false,
                 "reflect": false,
                 "attribute": "header",
-                "defaultValue": "''"
+                "defaultValue": "null"
             },
             "showCloseIcon": {
                 "type": "boolean",
@@ -193,6 +219,46 @@ export class DropiModal {
                 "attribute": "dismissable",
                 "defaultValue": "true"
             },
+            "dismissableMask": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissable-mask",
+                "defaultValue": "true"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "true"
+            },
             "closeOnEscape": {
                 "type": "boolean",
                 "mutable": false,
@@ -233,6 +299,46 @@ export class DropiModal {
                 "attribute": "modal",
                 "defaultValue": "true"
             },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "true"
+            },
+            "blockScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "block-scroll",
+                "defaultValue": "true"
+            },
             "showHeader": {
                 "type": "boolean",
                 "mutable": false,
@@ -253,6 +359,26 @@ export class DropiModal {
                 "attribute": "show-header",
                 "defaultValue": "true"
             },
+            "showFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-footer",
+                "defaultValue": "true"
+            },
             "position": {
                 "type": "string",
                 "mutable": false,
@@ -304,6 +430,166 @@ export class DropiModal {
                 "reflect": false,
                 "attribute": "size",
                 "defaultValue": "'m'"
+            },
+            "styleClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "style-class",
+                "defaultValue": "null"
+            },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "null"
+            },
+            "autoZIndex": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-manage z-index stack (matches Angular `autoZIndex`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-z-index",
+                "defaultValue": "true"
+            },
+            "baseZIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Base z-index value when autoZIndex is false (matches Angular `baseZIndex`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "base-z-index",
+                "defaultValue": "1100"
+            },
+            "transitionOptions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS transition duration, e.g. '0.15s' (matches Angular `transitionOptions`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "transition-options",
+                "defaultValue": "'0.15s'"
+            },
+            "enableBeforeClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable a before-close hook (matches Angular `enableBeforeClose`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-before-close",
+                "defaultValue": "false"
+            },
+            "draggable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "No-op \u2014 kept for API parity with Angular (matches Angular `draggable`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "draggable",
+                "defaultValue": "false"
+            },
+            "resizable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "No-op \u2014 kept for API parity with Angular (matches Angular `resizable`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resizable",
+                "defaultValue": "false"
             }
         };
     }
@@ -316,8 +602,8 @@ export class DropiModal {
     }
     static get events() {
         return [{
-                "method": "dropiShow",
-                "name": "dropiShow",
+                "method": "onShow",
+                "name": "onShow",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": false,
@@ -331,8 +617,8 @@ export class DropiModal {
                     "references": {}
                 }
             }, {
-                "method": "dropiHide",
-                "name": "dropiHide",
+                "method": "onHide",
+                "name": "onHide",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": false,

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

@@ -6,7 +6,7 @@
   align-items: center;
   height: 56px;
   padding: 0 var(--Size-4, 16px);
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   border-bottom: 1px solid var(--Gray-Gray-100, #eceef4);
   gap: var(--Size-4, 16px);
   position: relative;
@@ -72,9 +72,9 @@
 
 .navbar__badge {
   background: var(--Error-Error-500, #f46a6b);
-  color: var(--Neutral-White, #fff);
-  font-size: 10px;
-  font-weight: 700;
+  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;
@@ -110,9 +110,9 @@
   top: 2px;
   right: 2px;
   background: var(--Error-Error-500, #f46a6b);
-  color: var(--Neutral-White, #fff);
+  color: var(--Neutral-White, #ffffff);
   font-size: 9px;
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
   min-width: 14px;
   height: 14px;
   border-radius: 100px;
@@ -148,7 +148,7 @@
   height: 28px;
   border-radius: 50%;
   background: var(--Primary-Primary-500, #f49a3d);
-  color: var(--Neutral-White, #fff);
+  color: var(--Neutral-White, #ffffff);
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/collection/components/dropi-navbar/dropi-navbar.js

@@ -8,8 +8,10 @@ export class DropiNavbar {
     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 */
@@ -20,23 +22,23 @@ export class DropiNavbar {
     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" })))));
     }
     static get is() { return "dropi-navbar"; }
     static get encapsulation() { return "shadow"; }
@@ -92,32 +94,46 @@ export class DropiNavbar {
                 "attribute": "logo-alt",
                 "defaultValue": "'Logo'"
             },
-            "items": {
+            "data": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "NavItem[] | string",
-                    "resolved": "NavItem[] | string",
-                    "references": {
-                        "NavItem": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-navbar/dropi-navbar.tsx",
-                            "id": "src/components/dropi-navbar/dropi-navbar.tsx::NavItem"
-                        }
-                    }
+                    "original": "any[] | string",
+                    "resolved": "any[] | string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Navigation items (array or JSON string)"
+                    "text": "Navigation data (matches Angular `data: DropiTableRow[]`)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "items",
+                "attribute": "data",
                 "defaultValue": "[]"
             },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title (matches Angular `title`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title",
+                "defaultValue": "''"
+            },
             "activeId": {
                 "type": "string",
                 "mutable": false,
@@ -222,18 +238,18 @@ export class DropiNavbar {
     }
     static get events() {
         return [{
-                "method": "dropiNavItemClick",
-                "name": "dropiNavItemClick",
+                "method": "clickLoadItem",
+                "name": "clickLoadItem",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when a nav item is clicked. e.detail = item id"
+                    "text": "Emitted when a nav item is clicked (matches Angular `clickLoadItem`)"
                 },
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 }
             }, {

package/dist/collection/components/dropi-otp-send-code/dropi-otp-send-code.css

@@ -24,10 +24,10 @@
   font-size: 22px;
   font-weight: var(--font-weight-bold, 700);
   font-family: inherit;
-  color: var(--Gray-Gray-800, #495057);
+  color: var(--Gray-Gray-800, #1f2433);
   outline: none;
   transition: border-color 0.15s ease;
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
 }
 
 .otp__digit:focus {