@dropi/ui 0.1.19 → 0.1.20

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

@@ -0,0 +1,286 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-navbar
+ * Top navigation bar with logo, nav items, notification bell, and user avatar.
+ */
+export class DropiNavbar {
+    /** 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 (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
+            ? 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" })))));
+    }
+    static get is() { return "dropi-navbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-navbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-navbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "logoUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Logo URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-url",
+                "defaultValue": "''"
+            },
+            "logoAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Logo alt"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-alt",
+                "defaultValue": "'Logo'"
+            },
+            "items": {
+                "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"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Navigation items (array or JSON string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "activeId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active item ID"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-id",
+                "defaultValue": "''"
+            },
+            "userName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "user-name",
+                "defaultValue": "''"
+            },
+            "userAvatar": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User avatar URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "user-avatar",
+                "defaultValue": "''"
+            },
+            "notifications": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Notification count (0 = no badge)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "notifications",
+                "defaultValue": "0"
+            },
+            "showMenuToggle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show menu toggle (mobile)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-menu-toggle",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiNavItemClick",
+                "name": "dropiNavItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a nav item is clicked. e.detail = item id"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiNotificationsClick",
+                "name": "dropiNotificationsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when notification bell is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiUserClick",
+                "name": "dropiUserClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when avatar/user is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiMenuToggle",
+                "name": "dropiMenuToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when mobile menu toggle clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -12,27 +12,34 @@
 
 .otp__inputs {
   display: flex;
-  gap: var(--Size-2, 8px);
+  gap: var(--Size-4, 16px);
 }
 
 .otp__digit {
-  width: 48px;
+  width: 56px;
   height: 56px;
-  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
+  border: 1.5px solid var(--Gray-Gray-200, #d3d7de);
   border-radius: var(--Border-2, 8px);
   text-align: center;
-  font-size: var(--font-size-xl, 20px);
+  font-size: 22px;
   font-weight: var(--font-weight-bold, 700);
   font-family: inherit;
-  color: var(--Gray-Gray-800, #1a2033);
+  color: var(--Gray-Gray-800, #495057);
   outline: none;
-  transition: border-color 0.15s;
+  transition: border-color 0.15s ease;
   background: var(--Neutral-White, #fff);
 }
 
-.otp__digit:focus { border-color: var(--Info-Info-500, #50a5f1); }
-.otp__digit--filled { border-color: var(--Success-Success-500, #34c55a); color: var(--Success-Success-500, #34c55a); }
-.otp__digit--error { border-color: var(--Error-Error-500, #f46a6b); }
+.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;

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

@@ -71,14 +71,14 @@ export class DropiOtpSendCode {
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (h("div", { key: '9c8e1efcdb61bd8f6988826b769240354d42339e', class: "otp" }, this.showLabelContact && (h("p", { key: 'dd8ccef18ed569371c1bba5fc2a39a43b6daf1b9', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: 'a3fc70430e66b153cf12ed2c0240f2fb00ec4a47' }, " ", this.labelContact))), h("div", { key: '450a3a7923a363c1ebbbbd06ca1cc291eba3281c', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (h("input", { key: i, ref: (el) => {
+        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) => {
                 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 && (h("p", { key: '4c6f9131d4a5b197dea318d6309540823b4cdfeb', class: "otp__error" }, this.errorMessage)), h("div", { key: 'a6a32b9ee19bc1b0394d5c14fbc44ddf73536630', 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: '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")))));
     }
     static get is() { return "dropi-otp-send-code"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,9 +71,9 @@ export class DropiPaginator {
         const pages = this.pageNumbers;
         const isFirst = this.page <= 1;
         const isLast = this.page >= this.totalPages;
-        return (h("div", { key: '7a2b5b626be626d66d33cb7857d9243440559587', class: "paginator" }, this.showPageSizeSelector && (h("div", { key: 'e113aee78c554393e41ad1e2ec94daa24c65043e', class: "paginator-size" }, h("span", { key: 'ee5124c3b99a5d80b309df9d41daaf5c530a1313', class: "paginator-size-label" }, "Por p\u00E1gina:"), h("select", { key: '8c58fd97f11866a2467e4412be2cc18252d55d79', class: "paginator-size-select", onChange: (e) => this.onPageSizeChange(e) }, this.parsedOptions.map(opt => (h("option", { value: opt, selected: opt === this.pageSize }, opt)))))), h("div", { key: 'd727c882a91240cc9d777156c7b6cd2fac01ca67', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '7efb966e0f8a6e8270ec8fda44551072acb46152', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina" }, h("dropi-icon", { key: 'ac59bf489afc4622101bdeaa2b1eb9d8628041d4', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '0347c7803eed753d73fd0260330853995e74e734', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page - 1), "aria-label": "Anterior" }, h("dropi-icon", { key: '7097ac1ba68a1953c686022ea73f812437cc96cd', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: '786be5b0f0116c35c2685356607695e8f22328e0', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
+        return (h("div", { key: '23b6e4c63f01a484e61cea9fb6188382848cf675', class: "paginator" }, this.showPageSizeSelector && (h("div", { key: '0cfb3aea09339b51e65b2314b1da9915b384c92a', class: "paginator-size" }, h("span", { key: 'bef7700fdd17d4aaa5d800ad117f90b34e56381a', class: "paginator-size-label" }, "Por p\u00E1gina:"), h("select", { key: 'c25162f2ce42bbc00125a28d707e72fc214b4864', class: "paginator-size-select", onChange: (e) => this.onPageSizeChange(e) }, this.parsedOptions.map(opt => (h("option", { value: opt, selected: opt === this.pageSize }, opt)))))), h("div", { key: 'f8fd71442442725779786ea3f2334cccf82d237f', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '899e629c0922baa0b71646912e4eed6e6c44536b', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina" }, h("dropi-icon", { key: '0e847019e80d9e6c8d448b904691518a87a3afff', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '606e96d5e1495c17ac86d66d560116574f2aa962', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page - 1), "aria-label": "Anterior" }, h("dropi-icon", { key: '695bbfc36e42040c530b4338c9118d9b1da4c1ea', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: 'c3bc6d3c292f07b782aba6672715163d50907d93', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
             ? h("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
-            : 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 && (h("button", { key: 'e462ff2d53d1b1361e813701fb549505e0eada30', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page + 1), "aria-label": "Siguiente" }, !this.noLabels && h("span", { key: '1d40fa0b8b69c72c3e7eed4cd4732f009508e052', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: 'efcc1414a52a3946f38e2b7790bcbed2fce42328', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: 'ad08274cb7d624d141ee7c1599fb5662e5715aca', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina" }, h("dropi-icon", { key: '579969aa3a6c0bc538a2d68fc399e017a836136d', name: "Arrow-double-small-right", width: "16px", height: "16px", color: "Gray-Gray-600" }))))));
+            : 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 && (h("button", { key: '83b89c14ca3fc63679839a4bcb3b416412ebcb01', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page + 1), "aria-label": "Siguiente" }, !this.noLabels && h("span", { key: 'e896eb8dd2bbabd932014a100a138af89fdfd2f4', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '2f9ba001d0ca94f8330b910a6dd952d940c622c8', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '6531b71b3767ae872464605bad8ce8e1a5d609d1', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina" }, h("dropi-icon", { key: '9411fdbec9291cf3a3418152efc6ce951e6c4006', name: "Arrow-double-small-right", width: "16px", height: "16px", color: "Gray-Gray-600" }))))));
     }
     static get is() { return "dropi-paginator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,152 @@
+: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);
+}
+
+/* Dropdown */
+.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;
+}