@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/esm/co-number-field.entry.js

@@ -1,40 +1,66 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-B0lqrhFo.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
+import { R as RequiredMark } from './requiredMark-CEbXKHcU.js';
 
-const coNumberFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-number-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-number-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-number-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-number-field__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-number-field--disabled .co-number-field__label,.co-number-field--disabled .co-number-field__secondary-label{color:var(--co-semantic-text-disabled)}.co-number-field__row{display:flex;align-items:center;gap:0;background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;overflow:hidden;box-sizing:border-box;transition:border-color 0.15s ease, box-shadow 0.15s ease}.co-number-field--focused .co-number-field__row{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-number-field--disabled .co-number-field__row{background:var(--co-semantic-surface-disabled);border-color:transparent}.co-number-field--error .co-number-field__row{border-color:var(--co-semantic-status-error)}.co-number-field--success .co-number-field__row{border-color:var(--co-semantic-status-success)}.co-number-field--warning .co-number-field__row{border-color:var(--co-color-status-review)}.co-number-field--info .co-number-field__row{border-color:var(--co-semantic-status-info)}.co-number-field__btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border:none;background:transparent;color:var(--co-semantic-text-default);cursor:pointer;padding:0;transition:background 0.1s ease}.co-number-field__btn:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-number-field__btn:active:not(:disabled){background:var(--co-semantic-surface-muted)}.co-number-field__btn:disabled{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-number-field__btn--minus{border-right:1px solid var(--co-semantic-border-subtle)}.co-number-field__btn--plus{border-left:1px solid var(--co-semantic-border-subtle)}.co-number-field__input{flex:1;min-width:0;border:none;background:transparent;text-align:center;color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;line-height:1;padding:var(--co-spacing-sm2) var(--co-spacing-sm2);outline:none;-moz-appearance:textfield}.co-number-field__input::placeholder{color:var(--co-semantic-text-muted)}.co-number-field__input::-webkit-outer-spin-button,.co-number-field__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.co-number-field--disabled .co-number-field__input{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-number-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-number-field__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-number-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-number-field__helper--error .co-number-field__helper-icon,.co-number-field__helper--error .co-number-field__helper-text{color:var(--co-semantic-status-error)}.co-number-field__helper--success .co-number-field__helper-icon,.co-number-field__helper--success .co-number-field__helper-text{color:var(--co-semantic-status-success)}.co-number-field__helper--warning .co-number-field__helper-icon,.co-number-field__helper--warning .co-number-field__helper-text{color:var(--co-color-status-review)}.co-number-field__helper--info .co-number-field__helper-icon,.co-number-field__helper--info .co-number-field__helper-text{color:var(--co-semantic-status-info)}`;
+const coNumberFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-number-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-number-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-number-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-number-field__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-number-field--disabled .co-number-field__label,.co-number-field--disabled .co-number-field__secondary-label{color:var(--co-semantic-text-disabled)}.co-number-field__row{display:flex;align-items:center;gap:0;background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;overflow:hidden;box-sizing:border-box;transition:border-color 0.15s ease, box-shadow 0.15s ease}.co-number-field--s .co-number-field__row{min-height:28px}.co-number-field--s .co-number-field__btn{width:28px;height:28px}.co-number-field--sm .co-number-field__row{min-height:32px}.co-number-field--sm .co-number-field__btn{width:32px;height:32px}.co-number-field--lg .co-number-field__row{min-height:48px}.co-number-field--lg .co-number-field__btn{width:48px;height:48px}.co-number-field--focused .co-number-field__row{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-number-field--disabled .co-number-field__row{background:var(--co-semantic-surface-disabled);border-color:transparent}.co-number-field--error .co-number-field__row{border-color:var(--co-semantic-status-error)}.co-number-field--success .co-number-field__row{border-color:var(--co-semantic-status-success)}.co-number-field--warning .co-number-field__row{border-color:var(--co-color-status-review)}.co-number-field--info .co-number-field__row{border-color:var(--co-semantic-status-info)}.co-number-field__btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border:none;background:transparent;color:var(--co-semantic-text-default);cursor:pointer;padding:0;transition:background 0.1s ease}.co-number-field__btn:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-number-field__btn:active:not(:disabled){background:var(--co-semantic-surface-muted)}.co-number-field__btn:disabled{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-number-field__btn--minus{border-right:1px solid var(--co-semantic-border-subtle)}.co-number-field__btn--plus{border-left:1px solid var(--co-semantic-border-subtle)}.co-number-field__clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:100%;padding:0;border:none;background:transparent;color:var(--co-semantic-text-muted);cursor:pointer;transition:color 0.15s ease}.co-number-field__clear:hover{color:var(--co-semantic-text-default)}.co-number-field__input{flex:1;min-width:0;border:none;background:transparent;text-align:center;color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;line-height:1;padding:var(--co-spacing-sm2) var(--co-spacing-sm2);outline:none;-moz-appearance:textfield}.co-number-field__input::placeholder{color:var(--co-semantic-text-muted)}.co-number-field__affix{flex-shrink:0;padding-right:var(--co-spacing-sm2);color:var(--co-semantic-text-muted);font-size:inherit;font-weight:400;line-height:1;pointer-events:none;user-select:none}.co-number-field__input::-webkit-outer-spin-button,.co-number-field__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.co-number-field--disabled .co-number-field__input{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-number-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-number-field__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-number-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-number-field__helper--error .co-number-field__helper-icon,.co-number-field__helper--error .co-number-field__helper-text{color:var(--co-semantic-status-error)}.co-number-field__helper--success .co-number-field__helper-icon,.co-number-field__helper--success .co-number-field__helper-text{color:var(--co-semantic-status-success)}.co-number-field__helper--warning .co-number-field__helper-icon,.co-number-field__helper--warning .co-number-field__helper-text{color:var(--co-color-status-review)}.co-number-field__helper--info .co-number-field__helper-icon,.co-number-field__helper--info .co-number-field__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-number-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-number-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-number-field__label{white-space:normal}:host([layout='horizontal']) .co-number-field>:not(.co-number-field__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}@supports not (background: color-mix(in srgb, red, transparent)){.co-number-field__row{background:var(--co-semantic-surface-secondary)}}`;
 
 const CoNumberField = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.coChange = createEvent(this, "coChange", 7);
+        this.coClear = createEvent(this, "coClear", 7);
+        /** Whether the field is required (renders a required marker on the label). */
+        this.required = false;
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
         this.status = 'default';
         this.value = 0;
         this.step = 1;
         this.disabled = false;
         this.placeholder = '0';
+        this.size = 'md';
+        /** Show clear button when the field has a value */
+        this.clearable = false;
         this.focused = false;
         this.handleDecrement = () => {
             if (!this.canDecrement)
                 return;
-            this.emitValue(this.value - this.step);
+            this.emitValue(this.current - this.step);
         };
         this.handleIncrement = () => {
             if (!this.canIncrement)
                 return;
-            this.emitValue(this.value + this.step);
+            this.emitValue(this.current + this.step);
         };
         this.handleInput = (e) => {
             const raw = e.target.value;
-            if (raw === '' || raw === '-')
+            if (raw === '') {
+                // Deleting all content clears the field (parity with the clear button),
+                // but only when clearing is enabled — otherwise keep prior behavior.
+                if (this.clearable) {
+                    this.value = null;
+                    this.coChange.emit(null);
+                }
+                return;
+            }
+            if (raw === '-')
                 return;
             const num = parseFloat(raw);
             if (!isNaN(num)) {
-                this.emitValue(num);
+                this.emitValue(this.fromDisplay(num));
             }
         };
+        this.handleClear = () => {
+            var _a;
+            this.value = null;
+            this.coClear.emit();
+            this.coChange.emit(null);
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
         this.handleBlur = () => {
             this.focused = false;
-            // Re-clamp on blur
-            this.emitValue(this.value);
+            // Re-clamp on blur, but keep an empty field empty.
+            if (!this.isEmpty)
+                this.emitValue(this.value);
         };
         this.handleFocus = () => {
             this.focused = true;
@@ -50,6 +76,15 @@ const CoNumberField = class {
             }
         };
     }
+    /** True when there is no numeric value (cleared / empty). */
+    get isEmpty() {
+        return this.value === null || this.value === undefined || Number.isNaN(this.value);
+    }
+    /** Numeric value to step from, treating an empty field as min (or 0). */
+    get current() {
+        var _a;
+        return this.isEmpty ? ((_a = this.min) !== null && _a !== void 0 ? _a : 0) : this.value;
+    }
     get statusIcon() {
         const map = {
             error: 'warning-circle', success: 'check-circle', warning: 'warning', info: 'info',
@@ -60,14 +95,14 @@ const CoNumberField = class {
         if (this.disabled)
             return false;
         if (this.min !== undefined)
-            return this.value > this.min;
+            return this.current > this.min;
         return true;
     }
     get canIncrement() {
         if (this.disabled)
             return false;
         if (this.max !== undefined)
-            return this.value < this.max;
+            return this.current < this.max;
         return true;
     }
     clamp(v) {
@@ -77,18 +112,31 @@ const CoNumberField = class {
             return this.max;
         return v;
     }
+    /** Whether the value↔display conversion (×100) is active. */
+    get scaled() {
+        return this.format === 'rate' || this.format === 'percent';
+    }
+    /** Stored decimal → shown number (0.15 → 15). toFixed avoids FP artifacts. */
+    toDisplay(v) {
+        return this.scaled ? Number((v * 100).toFixed(6)) : v;
+    }
+    /** Typed number → stored decimal (15 → 0.15). */
+    fromDisplay(n) {
+        return this.scaled ? n / 100 : n;
+    }
     emitValue(next) {
         const clamped = this.clamp(next);
         this.value = clamped;
         this.coChange.emit(clamped);
     }
     render() {
-        return (h("div", { key: '9f90d445ff118b9927d1947d05d72efdbdc33bcc', class: {
+        return (h("div", { key: '56f049b125c4b28824da9980446b6152c5e8c34e', class: {
                 'co-number-field': true,
                 'co-number-field--disabled': this.disabled,
                 'co-number-field--focused': this.focused,
+                [`co-number-field--${this.size}`]: true,
                 [`co-number-field--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'c1104f3441b2e126bcf3f279de265b182b00b248', class: "co-number-field__labels" }, this.label && h("label", { key: '25e03a8bf88964c3ea1305d0a7af2b892b1e14dd', class: "co-number-field__label" }, this.label), this.secondaryLabel && h("span", { key: '4e8e2668b6eaf159e09ca1ca61514b52fc951908', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'ac29df6c61cb2a5d54e896b1ede50f5fed27d42d', class: "co-number-field__row" }, h("button", { key: '390b456584b531c390479b843e13b095ba63dd7e', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '24a61a2fa7c89b3d932dcce7d5f8f6bcb13492b5', name: "minus", size: 16 })), h("input", { key: '013a70c99e5a1012d503c185e48199a2bd91c732', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: String(this.value), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), h("button", { key: '3f553d6a9a844a857da479e9fa69648b14eb4057', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: '86615e73f7ffad75d7b3270f662c018e6ff9090b', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '9027cece2ec51e6683d8ceb293e36a2f13b9e663', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '66d7cca5a530272a4cf7f15a7689fc699f0dffe5', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'e3069cfe059f0ac02e407c589627a36f1471c937', class: "co-number-field__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'd3f6c497870029283454a4d63b200a27177184e6', class: "co-number-field__labels" }, this.label && h("label", { key: '6b82e4e85e29a15c4f046fbe1d2b31c64033fb1b', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: 'd693455773f18e4cabba3877101ea25fcb3722bb', required: this.required })), this.secondaryLabel && h("span", { key: 'f10989ce282441f76b91a7b7ef82f6b71112f15c', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'b823d6cf7f93bb93376926c43798412e2f88aba2', class: "co-number-field__row" }, h("button", { key: 'c6e249efe8ae029b173e565bc8340311e35780b1', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: 'fb389e8a57d6c5dc9876f4e2afc1ad64755fae3d', name: "minus", size: 16 })), h("input", { key: 'e1dfa2b5817667a6f8a139007eb177d9b871824c', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: this.isEmpty ? '' : String(this.toDisplay(this.value)), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), this.scaled && !this.isEmpty && (h("span", { key: '9d1fc8d04c53ac7a7776704a8085465464ee8a50', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: 'aa1f118276413e287b62464377aeecadaedbb9b6', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '606f25ab748be9a5c79680889c9d9f6029cbe921', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: 'edd378d01cc079a623250143bb2ded5107019e62', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: '3011737898ecc6e89d654840089e89fc3ef0ae36', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '2d31e1e4e17ec0cd98c0e74e2cc2a253558990e5', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '3e0c5b98a63d08a6dc85444f5d23194f79f8b703', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: '8b9b2f4fcb5d2832f9bf2e3088d62652cbe6759d', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/co-page-header.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-B0lqrhFo.js';
+import { r as registerInstance, h } from './index-CYsftTKf.js';
 
 const coPageHeaderCss = () => `:host{display:block}.co-page-header{display:flex;align-items:center;justify-content:space-between;padding:var(--co-spacing-lg) var(--co-spacing-xl);font-family:var(--co-font-family-primary);border-bottom:1px solid var(--co-semantic-border-subtle);background:var(--co-semantic-surface-page);min-height:72px;box-sizing:border-box}.co-page-header__left{display:flex;align-items:center;gap:var(--co-spacing-md)}.co-page-header__icon{display:flex;color:var(--co-semantic-text-muted)}.co-page-header__title{font-size:var(--co-font-size-18);font-weight:600;color:var(--co-semantic-text-default)}.co-page-header__actions{display:flex;align-items:center;gap:var(--co-spacing-md)}.co-page-header__actions:empty{display:none}`;
 
@@ -7,7 +7,7 @@ const CoPageHeader = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '1a1d93d47a677a42f201b9433604c20e952b36df', class: "co-page-header", part: "page-header" }, h("div", { key: '2c634b9ba352ba4bf0097f81aa51331f8d0fd4d1', class: "co-page-header__left" }, this.icon && (h("span", { key: 'e88bb93d1cbb37ee1c3f4e57a00c72156377a434', class: "co-page-header__icon" }, h("co-icon", { key: '01282c4e2c61789c8f1b95b9a15e7e683cbaf0a7', name: this.icon, size: 24 }))), h("span", { key: '4d3f7b4f86cf178c9a11c91e0da17c3293a911ff', class: "co-page-header__title" }, h("slot", { key: '2291559692047e954b3984f738d6751c9b39ed76' }, this.heading))), h("div", { key: '780971b9a144f8daa53619df25fe69325b12d9da', class: "co-page-header__actions" }, h("slot", { key: 'dc2a010be24395703942b658af059299a92c7fea', name: "actions" }))));
+        return (h("div", { key: '94082a258b3c20350f34f90b90391d4cf461ad2a', class: "co-page-header", part: "page-header" }, h("div", { key: '72cb04b8ac9e97020df05332026ff1127530e0ef', class: "co-page-header__left" }, this.icon && (h("span", { key: 'dde04074f7fa038302ad6fb6e26b0d0ac14df708', class: "co-page-header__icon" }, h("co-icon", { key: '39543a724220ce8b0d67691aa9e96a5d107c70bb', name: this.icon, size: 24 }))), h("span", { key: '690582a7cd3feacd28142229a98f06afd1d5016e', class: "co-page-header__title" }, h("slot", { key: 'e5a836f061981b1126eff7b725ffc1047abadffd' }, this.heading))), h("div", { key: '80353c45ac8266f79b620561f79f1e724f877be8', class: "co-page-header__actions" }, h("slot", { key: '652ec6bc870096944d8795c873f3a5d0d41b3d89', name: "actions" }))));
     }
 };
 CoPageHeader.style = coPageHeaderCss();

package/dist/esm/co-phone-field.entry.js

@@ -0,0 +1,376 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
+import { R as RequiredMark } from './requiredMark-CEbXKHcU.js';
+import { r as rankByMatch, h as highlightMatch } from './normalizeText-CQY6Ul7q.js';
+
+/**
+ * Dial codes sorted by name. Covers the full ITU-T E.164 assignment.
+ * The iso2 key matches country-flag-icons' 3x2/{ISO2} naming.
+ */
+const DIAL_CODES = [
+    { iso2: 'AF', dialCode: '+93', name: 'Afghanistan' },
+    { iso2: 'AL', dialCode: '+355', name: 'Albania' },
+    { iso2: 'DZ', dialCode: '+213', name: 'Algeria' },
+    { iso2: 'AD', dialCode: '+376', name: 'Andorra' },
+    { iso2: 'AO', dialCode: '+244', name: 'Angola' },
+    { iso2: 'AG', dialCode: '+1268', name: 'Antigua and Barbuda' },
+    { iso2: 'AR', dialCode: '+54', name: 'Argentina' },
+    { iso2: 'AM', dialCode: '+374', name: 'Armenia' },
+    { iso2: 'AU', dialCode: '+61', name: 'Australia' },
+    { iso2: 'AT', dialCode: '+43', name: 'Austria' },
+    { iso2: 'AZ', dialCode: '+994', name: 'Azerbaijan' },
+    { iso2: 'BS', dialCode: '+1242', name: 'Bahamas' },
+    { iso2: 'BH', dialCode: '+973', name: 'Bahrain' },
+    { iso2: 'BD', dialCode: '+880', name: 'Bangladesh' },
+    { iso2: 'BB', dialCode: '+1246', name: 'Barbados' },
+    { iso2: 'BY', dialCode: '+375', name: 'Belarus' },
+    { iso2: 'BE', dialCode: '+32', name: 'Belgium' },
+    { iso2: 'BZ', dialCode: '+501', name: 'Belize' },
+    { iso2: 'BJ', dialCode: '+229', name: 'Benin' },
+    { iso2: 'BT', dialCode: '+975', name: 'Bhutan' },
+    { iso2: 'BO', dialCode: '+591', name: 'Bolivia' },
+    { iso2: 'BA', dialCode: '+387', name: 'Bosnia and Herzegovina' },
+    { iso2: 'BW', dialCode: '+267', name: 'Botswana' },
+    { iso2: 'BR', dialCode: '+55', name: 'Brazil' },
+    { iso2: 'BN', dialCode: '+673', name: 'Brunei' },
+    { iso2: 'BG', dialCode: '+359', name: 'Bulgaria' },
+    { iso2: 'BF', dialCode: '+226', name: 'Burkina Faso' },
+    { iso2: 'BI', dialCode: '+257', name: 'Burundi' },
+    { iso2: 'KH', dialCode: '+855', name: 'Cambodia' },
+    { iso2: 'CM', dialCode: '+237', name: 'Cameroon' },
+    { iso2: 'CA', dialCode: '+1', name: 'Canada' },
+    { iso2: 'CV', dialCode: '+238', name: 'Cape Verde' },
+    { iso2: 'CF', dialCode: '+236', name: 'Central African Republic' },
+    { iso2: 'TD', dialCode: '+235', name: 'Chad' },
+    { iso2: 'CL', dialCode: '+56', name: 'Chile' },
+    { iso2: 'CN', dialCode: '+86', name: 'China' },
+    { iso2: 'CO', dialCode: '+57', name: 'Colombia' },
+    { iso2: 'KM', dialCode: '+269', name: 'Comoros' },
+    { iso2: 'CD', dialCode: '+243', name: 'Congo (DRC)' },
+    { iso2: 'CG', dialCode: '+242', name: 'Congo (Republic)' },
+    { iso2: 'CR', dialCode: '+506', name: 'Costa Rica' },
+    { iso2: 'CI', dialCode: '+225', name: 'Côte d\'Ivoire' },
+    { iso2: 'HR', dialCode: '+385', name: 'Croatia' },
+    { iso2: 'CU', dialCode: '+53', name: 'Cuba' },
+    { iso2: 'CY', dialCode: '+357', name: 'Cyprus' },
+    { iso2: 'CZ', dialCode: '+420', name: 'Czech Republic' },
+    { iso2: 'DK', dialCode: '+45', name: 'Denmark' },
+    { iso2: 'DJ', dialCode: '+253', name: 'Djibouti' },
+    { iso2: 'DM', dialCode: '+1767', name: 'Dominica' },
+    { iso2: 'DO', dialCode: '+1809', name: 'Dominican Republic' },
+    { iso2: 'EC', dialCode: '+593', name: 'Ecuador' },
+    { iso2: 'EG', dialCode: '+20', name: 'Egypt' },
+    { iso2: 'SV', dialCode: '+503', name: 'El Salvador' },
+    { iso2: 'GQ', dialCode: '+240', name: 'Equatorial Guinea' },
+    { iso2: 'ER', dialCode: '+291', name: 'Eritrea' },
+    { iso2: 'EE', dialCode: '+372', name: 'Estonia' },
+    { iso2: 'SZ', dialCode: '+268', name: 'Eswatini' },
+    { iso2: 'ET', dialCode: '+251', name: 'Ethiopia' },
+    { iso2: 'FJ', dialCode: '+679', name: 'Fiji' },
+    { iso2: 'FI', dialCode: '+358', name: 'Finland' },
+    { iso2: 'FR', dialCode: '+33', name: 'France' },
+    { iso2: 'GA', dialCode: '+241', name: 'Gabon' },
+    { iso2: 'GM', dialCode: '+220', name: 'Gambia' },
+    { iso2: 'GE', dialCode: '+995', name: 'Georgia' },
+    { iso2: 'DE', dialCode: '+49', name: 'Germany' },
+    { iso2: 'GH', dialCode: '+233', name: 'Ghana' },
+    { iso2: 'GR', dialCode: '+30', name: 'Greece' },
+    { iso2: 'GD', dialCode: '+1473', name: 'Grenada' },
+    { iso2: 'GT', dialCode: '+502', name: 'Guatemala' },
+    { iso2: 'GN', dialCode: '+224', name: 'Guinea' },
+    { iso2: 'GW', dialCode: '+245', name: 'Guinea-Bissau' },
+    { iso2: 'GY', dialCode: '+592', name: 'Guyana' },
+    { iso2: 'HT', dialCode: '+509', name: 'Haiti' },
+    { iso2: 'HN', dialCode: '+504', name: 'Honduras' },
+    { iso2: 'HU', dialCode: '+36', name: 'Hungary' },
+    { iso2: 'IS', dialCode: '+354', name: 'Iceland' },
+    { iso2: 'IN', dialCode: '+91', name: 'India' },
+    { iso2: 'ID', dialCode: '+62', name: 'Indonesia' },
+    { iso2: 'IR', dialCode: '+98', name: 'Iran' },
+    { iso2: 'IQ', dialCode: '+964', name: 'Iraq' },
+    { iso2: 'IE', dialCode: '+353', name: 'Ireland' },
+    { iso2: 'IL', dialCode: '+972', name: 'Israel' },
+    { iso2: 'IT', dialCode: '+39', name: 'Italy' },
+    { iso2: 'JM', dialCode: '+1876', name: 'Jamaica' },
+    { iso2: 'JP', dialCode: '+81', name: 'Japan' },
+    { iso2: 'JO', dialCode: '+962', name: 'Jordan' },
+    { iso2: 'KZ', dialCode: '+7', name: 'Kazakhstan' },
+    { iso2: 'KE', dialCode: '+254', name: 'Kenya' },
+    { iso2: 'KI', dialCode: '+686', name: 'Kiribati' },
+    { iso2: 'KW', dialCode: '+965', name: 'Kuwait' },
+    { iso2: 'KG', dialCode: '+996', name: 'Kyrgyzstan' },
+    { iso2: 'LA', dialCode: '+856', name: 'Laos' },
+    { iso2: 'LV', dialCode: '+371', name: 'Latvia' },
+    { iso2: 'LB', dialCode: '+961', name: 'Lebanon' },
+    { iso2: 'LS', dialCode: '+266', name: 'Lesotho' },
+    { iso2: 'LR', dialCode: '+231', name: 'Liberia' },
+    { iso2: 'LY', dialCode: '+218', name: 'Libya' },
+    { iso2: 'LI', dialCode: '+423', name: 'Liechtenstein' },
+    { iso2: 'LT', dialCode: '+370', name: 'Lithuania' },
+    { iso2: 'LU', dialCode: '+352', name: 'Luxembourg' },
+    { iso2: 'MG', dialCode: '+261', name: 'Madagascar' },
+    { iso2: 'MW', dialCode: '+265', name: 'Malawi' },
+    { iso2: 'MY', dialCode: '+60', name: 'Malaysia' },
+    { iso2: 'MV', dialCode: '+960', name: 'Maldives' },
+    { iso2: 'ML', dialCode: '+223', name: 'Mali' },
+    { iso2: 'MT', dialCode: '+356', name: 'Malta' },
+    { iso2: 'MH', dialCode: '+692', name: 'Marshall Islands' },
+    { iso2: 'MR', dialCode: '+222', name: 'Mauritania' },
+    { iso2: 'MU', dialCode: '+230', name: 'Mauritius' },
+    { iso2: 'MX', dialCode: '+52', name: 'Mexico' },
+    { iso2: 'FM', dialCode: '+691', name: 'Micronesia' },
+    { iso2: 'MD', dialCode: '+373', name: 'Moldova' },
+    { iso2: 'MC', dialCode: '+377', name: 'Monaco' },
+    { iso2: 'MN', dialCode: '+976', name: 'Mongolia' },
+    { iso2: 'ME', dialCode: '+382', name: 'Montenegro' },
+    { iso2: 'MA', dialCode: '+212', name: 'Morocco' },
+    { iso2: 'MZ', dialCode: '+258', name: 'Mozambique' },
+    { iso2: 'MM', dialCode: '+95', name: 'Myanmar' },
+    { iso2: 'NA', dialCode: '+264', name: 'Namibia' },
+    { iso2: 'NR', dialCode: '+674', name: 'Nauru' },
+    { iso2: 'NP', dialCode: '+977', name: 'Nepal' },
+    { iso2: 'NL', dialCode: '+31', name: 'Netherlands' },
+    { iso2: 'NZ', dialCode: '+64', name: 'New Zealand' },
+    { iso2: 'NI', dialCode: '+505', name: 'Nicaragua' },
+    { iso2: 'NE', dialCode: '+227', name: 'Niger' },
+    { iso2: 'NG', dialCode: '+234', name: 'Nigeria' },
+    { iso2: 'KP', dialCode: '+850', name: 'North Korea' },
+    { iso2: 'MK', dialCode: '+389', name: 'North Macedonia' },
+    { iso2: 'NO', dialCode: '+47', name: 'Norway' },
+    { iso2: 'OM', dialCode: '+968', name: 'Oman' },
+    { iso2: 'PK', dialCode: '+92', name: 'Pakistan' },
+    { iso2: 'PW', dialCode: '+680', name: 'Palau' },
+    { iso2: 'PS', dialCode: '+970', name: 'Palestine' },
+    { iso2: 'PA', dialCode: '+507', name: 'Panama' },
+    { iso2: 'PG', dialCode: '+675', name: 'Papua New Guinea' },
+    { iso2: 'PY', dialCode: '+595', name: 'Paraguay' },
+    { iso2: 'PE', dialCode: '+51', name: 'Peru' },
+    { iso2: 'PH', dialCode: '+63', name: 'Philippines' },
+    { iso2: 'PL', dialCode: '+48', name: 'Poland' },
+    { iso2: 'PT', dialCode: '+351', name: 'Portugal' },
+    { iso2: 'QA', dialCode: '+974', name: 'Qatar' },
+    { iso2: 'RO', dialCode: '+40', name: 'Romania' },
+    { iso2: 'RU', dialCode: '+7', name: 'Russia' },
+    { iso2: 'RW', dialCode: '+250', name: 'Rwanda' },
+    { iso2: 'KN', dialCode: '+1869', name: 'Saint Kitts and Nevis' },
+    { iso2: 'LC', dialCode: '+1758', name: 'Saint Lucia' },
+    { iso2: 'VC', dialCode: '+1784', name: 'Saint Vincent and the Grenadines' },
+    { iso2: 'WS', dialCode: '+685', name: 'Samoa' },
+    { iso2: 'SM', dialCode: '+378', name: 'San Marino' },
+    { iso2: 'ST', dialCode: '+239', name: 'São Tomé and Príncipe' },
+    { iso2: 'SA', dialCode: '+966', name: 'Saudi Arabia' },
+    { iso2: 'SN', dialCode: '+221', name: 'Senegal' },
+    { iso2: 'RS', dialCode: '+381', name: 'Serbia' },
+    { iso2: 'SC', dialCode: '+248', name: 'Seychelles' },
+    { iso2: 'SL', dialCode: '+232', name: 'Sierra Leone' },
+    { iso2: 'SG', dialCode: '+65', name: 'Singapore' },
+    { iso2: 'SK', dialCode: '+421', name: 'Slovakia' },
+    { iso2: 'SI', dialCode: '+386', name: 'Slovenia' },
+    { iso2: 'SB', dialCode: '+677', name: 'Solomon Islands' },
+    { iso2: 'SO', dialCode: '+252', name: 'Somalia' },
+    { iso2: 'ZA', dialCode: '+27', name: 'South Africa' },
+    { iso2: 'KR', dialCode: '+82', name: 'South Korea' },
+    { iso2: 'SS', dialCode: '+211', name: 'South Sudan' },
+    { iso2: 'ES', dialCode: '+34', name: 'Spain' },
+    { iso2: 'LK', dialCode: '+94', name: 'Sri Lanka' },
+    { iso2: 'SD', dialCode: '+249', name: 'Sudan' },
+    { iso2: 'SR', dialCode: '+597', name: 'Suriname' },
+    { iso2: 'SE', dialCode: '+46', name: 'Sweden' },
+    { iso2: 'CH', dialCode: '+41', name: 'Switzerland' },
+    { iso2: 'SY', dialCode: '+963', name: 'Syria' },
+    { iso2: 'TW', dialCode: '+886', name: 'Taiwan' },
+    { iso2: 'TJ', dialCode: '+992', name: 'Tajikistan' },
+    { iso2: 'TZ', dialCode: '+255', name: 'Tanzania' },
+    { iso2: 'TH', dialCode: '+66', name: 'Thailand' },
+    { iso2: 'TL', dialCode: '+670', name: 'Timor-Leste' },
+    { iso2: 'TG', dialCode: '+228', name: 'Togo' },
+    { iso2: 'TO', dialCode: '+676', name: 'Tonga' },
+    { iso2: 'TT', dialCode: '+1868', name: 'Trinidad and Tobago' },
+    { iso2: 'TN', dialCode: '+216', name: 'Tunisia' },
+    { iso2: 'TR', dialCode: '+90', name: 'Turkey' },
+    { iso2: 'TM', dialCode: '+993', name: 'Turkmenistan' },
+    { iso2: 'TV', dialCode: '+688', name: 'Tuvalu' },
+    { iso2: 'UG', dialCode: '+256', name: 'Uganda' },
+    { iso2: 'UA', dialCode: '+380', name: 'Ukraine' },
+    { iso2: 'AE', dialCode: '+971', name: 'United Arab Emirates' },
+    { iso2: 'GB', dialCode: '+44', name: 'United Kingdom' },
+    { iso2: 'US', dialCode: '+1', name: 'United States' },
+    { iso2: 'UY', dialCode: '+598', name: 'Uruguay' },
+    { iso2: 'UZ', dialCode: '+998', name: 'Uzbekistan' },
+    { iso2: 'VU', dialCode: '+678', name: 'Vanuatu' },
+    { iso2: 'VA', dialCode: '+379', name: 'Vatican City' },
+    { iso2: 'VE', dialCode: '+58', name: 'Venezuela' },
+    { iso2: 'VN', dialCode: '+84', name: 'Vietnam' },
+    { iso2: 'YE', dialCode: '+967', name: 'Yemen' },
+    { iso2: 'ZM', dialCode: '+260', name: 'Zambia' },
+    { iso2: 'ZW', dialCode: '+263', name: 'Zimbabwe' },
+];
+/** ISO2 code → DialCode entry lookup. */
+const DIAL_CODE_MAP = Object.fromEntries(DIAL_CODES.map((d) => [d.iso2, d]));
+
+const coPhoneFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-phone-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative;font-family:var(--co-font-family-primary)}.co-phone-field--disabled{opacity:0.5;pointer-events:none}.co-phone-field__label{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);padding:0 var(--co-spacing-xs)}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-phone-field__container{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;min-height:40px;box-sizing:border-box}.co-phone-field--s .co-phone-field__container{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-phone-field--sm .co-phone-field__container{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-phone-field--lg .co-phone-field__container{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-phone-field--error .co-phone-field__container{border-color:var(--co-color-status-error)}.co-phone-field__container:focus-within{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 15%, transparent)}.co-phone-field__selector{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0;background:none;border:none;border-right:1px solid var(--co-semantic-border-subtle);padding-right:var(--co-spacing-sm);margin-right:var(--co-spacing-sm);cursor:pointer;font-size:inherit;font-family:inherit;color:var(--co-semantic-text-default);white-space:nowrap}.co-phone-field__selector:hover{opacity:0.8}.co-phone-field__flag{width:20px;height:15px;border-radius:2px;object-fit:cover}.co-phone-field__dial-code{font-size:inherit;color:var(--co-semantic-text-secondary);font-weight:500}.co-phone-field__chevron{display:flex;align-items:center;color:var(--co-semantic-text-muted)}.co-phone-field__input{flex:1;min-width:0;padding:0;border:none;outline:none;font-size:inherit;font-family:inherit;font-weight:400;letter-spacing:inherit;color:var(--co-semantic-text-default);background:transparent;line-height:1}.co-phone-field__input::placeholder{color:var(--co-semantic-text-muted)}.co-phone-field__dropdown{position:absolute;top:100%;left:0;right:0;z-index:100;margin-top:var(--co-spacing-xs);background:var(--co-semantic-surface-page, #fff);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);max-height:280px;display:flex;flex-direction:column;overflow:hidden}.co-phone-field__search{padding:var(--co-spacing-sm);border-bottom:1px solid var(--co-semantic-border-subtle)}.co-phone-field__search-input{width:100%;padding:var(--co-spacing-xs) var(--co-spacing-sm);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xxs);font-size:var(--co-font-size-14);font-family:var(--co-font-family-primary);outline:none;background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);box-sizing:border-box}.co-phone-field__search-input:focus{border-color:var(--co-semantic-border-focus)}.co-phone-field__options{overflow-y:auto;flex:1}.co-phone-field__option{display:flex;align-items:center;gap:var(--co-spacing-sm);width:100%;padding:var(--co-spacing-sm) var(--co-spacing-md);border:none;background:none;cursor:pointer;font-size:var(--co-font-size-14);font-family:var(--co-font-family-primary);color:var(--co-semantic-text-default);text-align:left}.co-phone-field__option:hover{background:var(--co-semantic-surface-hover)}.co-phone-field__option--selected{background:color-mix(in srgb, var(--co-semantic-border-focus) 8%, transparent);font-weight:500}.co-phone-field__option-flag{width:20px;height:15px;border-radius:2px;object-fit:cover;flex-shrink:0}.co-phone-field__match{font-weight:700}.co-phone-field__option-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-phone-field__option-code{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);white-space:nowrap}.co-phone-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs);font-size:var(--co-font-size-14);color:var(--co-semantic-text-muted)}.co-phone-field__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-phone-field--error .co-phone-field__helper{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-phone-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-phone-field__label{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-phone-field__label{white-space:normal}:host([layout='horizontal']) .co-phone-field>:not(.co-phone-field__label){grid-column:2;min-width:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-phone-field__container{background:var(--co-semantic-surface-secondary)}}`;
+
+const CoPhoneField = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coChange = createEvent(this, "coChange", 7);
+        /** Placeholder for the number input. */
+        this.placeholder = '';
+        /** Current full value (dialCode + number). */
+        this.value = '';
+        /** Disable the entire field. */
+        this.disabled = false;
+        /** Required indicator. */
+        this.required = false;
+        /** Validation status. */
+        this.status = 'default';
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /** Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
+        this.size = 'md';
+        /** Default country ISO2 code (e.g. "CO", "US"). Optional — if not set, starts empty. */
+        this.defaultCountry = '';
+        this.selectedIso2 = '';
+        this.numberPart = '';
+        this.isOpen = false;
+        this.searchQuery = '';
+        this.handleOutsideClick = (e) => {
+            if (!this.isOpen)
+                return;
+            const path = e.composedPath();
+            const shadowRoot = this.host.shadowRoot;
+            if (!shadowRoot)
+                return;
+            const dropdown = shadowRoot.querySelector('.co-phone-field__dropdown');
+            const selector = shadowRoot.querySelector('.co-phone-field__selector');
+            if (dropdown && path.includes(dropdown))
+                return;
+            if (selector && path.includes(selector))
+                return;
+            this.isOpen = false;
+            this.searchQuery = '';
+        };
+    }
+    get selectedEntry() {
+        var _a;
+        if (!this.selectedIso2)
+            return null;
+        return (_a = DIAL_CODE_MAP[this.selectedIso2]) !== null && _a !== void 0 ? _a : null;
+    }
+    get filteredCountries() {
+        if (!this.searchQuery.trim())
+            return DIAL_CODES;
+        return rankByMatch(DIAL_CODES, this.searchQuery, (d) => [d.name, d.dialCode, d.iso2]);
+    }
+    /** Country name with the matched substring wrapped for highlighting. */
+    renderName(name) {
+        const seg = this.searchQuery.trim() ? highlightMatch(name, this.searchQuery) : null;
+        if (!seg)
+            return name;
+        return [seg.pre, h("span", { class: "co-phone-field__match" }, seg.match), seg.post];
+    }
+    onValueChange(newVal) {
+        if (!newVal) {
+            this.numberPart = '';
+            return;
+        }
+        // Try to parse dial code from value.
+        const match = this.findDialCodeInValue(newVal);
+        if (match) {
+            this.selectedIso2 = match.iso2;
+            this.numberPart = newVal.slice(match.dialCode.length).trim();
+        }
+        else {
+            this.numberPart = newVal;
+        }
+    }
+    onDefaultCountryChange(iso2) {
+        if (DIAL_CODE_MAP[iso2] && !this.value) {
+            this.selectedIso2 = iso2;
+        }
+    }
+    componentWillLoad() {
+        if (this.defaultCountry && DIAL_CODE_MAP[this.defaultCountry]) {
+            this.selectedIso2 = this.defaultCountry;
+        }
+        if (this.value) {
+            this.onValueChange(this.value);
+        }
+    }
+    get hasCountry() {
+        return !!this.selectedIso2 && !!this.selectedEntry;
+    }
+    get statusIcon() {
+        const map = {
+            error: 'warning-circle',
+            success: 'check-circle',
+            warning: 'warning',
+            info: 'info',
+        };
+        return map[this.status] || null;
+    }
+    findDialCodeInValue(val) {
+        if (!val.startsWith('+'))
+            return null;
+        // Try longest matching dial code first (max 5 digits after +).
+        for (let len = 5; len >= 1; len--) {
+            const prefix = val.slice(0, len + 1); // includes '+'
+            const entry = DIAL_CODES.find((d) => d.dialCode === prefix);
+            if (entry)
+                return entry;
+        }
+        return null;
+    }
+    emitValue() {
+        var _a, _b;
+        const dialCode = (_b = (_a = this.selectedEntry) === null || _a === void 0 ? void 0 : _a.dialCode) !== null && _b !== void 0 ? _b : '';
+        const full = this.numberPart
+            ? `${dialCode}${this.numberPart}`
+            : '';
+        this.value = full;
+        this.coChange.emit(full);
+    }
+    handleCountrySelect(entry) {
+        this.selectedIso2 = entry.iso2;
+        this.isOpen = false;
+        this.searchQuery = '';
+        this.emitValue();
+    }
+    handleNumberInput(e) {
+        const input = e.target;
+        this.numberPart = input.value;
+        this.emitValue();
+    }
+    handleToggleDropdown() {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+        if (!this.isOpen)
+            this.searchQuery = '';
+    }
+    handleSearchInput(e) {
+        this.searchQuery = e.target.value;
+    }
+    connectedCallback() {
+        document.addEventListener('click', this.handleOutsideClick, true);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleOutsideClick, true);
+    }
+    render() {
+        const entry = this.selectedEntry;
+        const statusClass = this.status !== 'default' ? `co-phone-field--${this.status}` : '';
+        return (h("div", { key: '2b0e81ff34e0fc215d538133304ee2fdc57a91c0', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: '7630372c42ddefe001e05bdb31ce25b59beda0ca', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'c1b30a0d84adb6c127a5a8ef57e4d9764ac95fba', required: this.required }))), h("div", { key: '8e03e67dcee1e18b675e2738f5b6daaecb784c95', class: "co-phone-field__container" }, h("button", { key: 'ba6a5fa8800b01cf19683f3d3750330b5ba615f8', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: '88a511099354fb3a5a87094ad42e9815442d645f', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: 'a90e81ed45d444462832bae8a557bfca650e9cf9', class: "co-phone-field__chevron" }, h("co-icon", { key: '6af34f6d60d89d2f361ed624c9d03a4a97154d70', name: "caret-down", size: 14 }))), h("input", { key: '64d0070a7acd9305fabcdcf251e295467800ca8c', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (h("div", { key: 'bcd1d824b74774f1164bdd985d13154436529264', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: '0d381b0c4bf154c3a360f2c8c18bd983183ed271', class: "co-phone-field__search" }, h("input", { key: '054fa9f9c5b9086e084f0f46382c8b8f5b282b21', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: '3fad42562f19a689bc3f9ea630c93e07fd9bcb32', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: 'b9d4d6ab05c36a90aac5ba349f00ec3462ada032', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: 'c886b12e93267c884d33aa5145d69e71f0efac6a', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '21be6a8deca13c7ea80ffe55069762ccf16458fd', class: "co-phone-field__helper-text" }, this.helperText)))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }],
+        "defaultCountry": [{
+                "onDefaultCountryChange": 0
+            }]
+    }; }
+};
+CoPhoneField.style = coPhoneFieldCss();
+
+export { CoPhoneField as co_phone_field };