@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

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

@@ -14,12 +14,12 @@ export class CoNavbar {
         this.rounded = false;
     }
     render() {
-        return (h("div", { key: 'bf36fdff69c691f99a420fc9e782df9b75517052', class: {
+        return (h("div", { key: 'ec767e2bc0b048666ee78670729a851ab99b2ddb', class: {
                 'co-navbar': true,
                 [`co-navbar--${this.variant}`]: true,
                 [`co-navbar--${this.size}`]: true,
                 'co-navbar--rounded': this.rounded,
-            }, part: "navbar", role: "toolbar" }, h("slot", { key: '62f1bc0ba7c1cd61727cd01f7d540643fbe44575' })));
+            }, part: "navbar", role: "toolbar" }, h("slot", { key: '72fab32c330d1688e9f34b8d712b17f35d5aa513' })));
     }
     static get is() { return "co-navbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-number-field/co-number-field.css

@@ -60,6 +60,14 @@
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
+/* ── Size variants (mirror co-input: s 28 / sm 32 / md 40 / lg 48) ── */
+.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);
@@ -112,6 +120,26 @@
   border-left: 1px solid var(--co-semantic-border-subtle);
 }
 
+/* ── Clear button ───────────────────────────────────────────── */
+.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);
+}
+
 /* ── Input ──────────────────────────────────────────────────── */
 .co-number-field__input {
   flex: 1;
@@ -176,3 +204,45 @@
 
 .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); }
+
+/* ── Horizontal layout: label left; control + helper stacked right ──
+   Set --co-field-label-width on a container to align labels across fields. */
+: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)');
+}

package/dist/collection/components/co-number-field/co-number-field.js

@@ -1,35 +1,60 @@
 import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
 export class CoNumberField {
     constructor() {
+        /** 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.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;
@@ -45,6 +70,15 @@ export class CoNumberField {
             }
         };
     }
+    /** 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',
@@ -55,14 +89,14 @@ export class CoNumberField {
         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) {
@@ -78,12 +112,13 @@ export class CoNumberField {
         this.coChange.emit(clamped);
     }
     render() {
-        return (h("div", { key: '9f90d445ff118b9927d1947d05d72efdbdc33bcc', class: {
+        return (h("div", { key: '6c3e5ede75a2e025c330a6bdd0f49bfd7642222f', 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: 'd5157ffa7731d38668d70ef2245ee5f950f59393', class: "co-number-field__labels" }, this.label && h("label", { key: 'e9ecc51032f92c1f599b4790ee186402d86d4c18', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '627e98d1f9b8786f842778d6006211f42b2ca500', required: this.required })), this.secondaryLabel && h("span", { key: 'ca6a7dea5e8c2f6b2e097ba84a5bb691fc87e09d', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: '0a72931f013e988bc383c1f92435add49edb1381', class: "co-number-field__row" }, h("button", { key: '6e5a27347ee3b2784de029214daa386bb8903894', 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: '7cecf82f04ed32ff66e144dd31a6b1902dbd1cb5', name: "minus", size: 16 })), h("input", { key: '0c37512501cb9ab2aeff6924d3064c038c6f8696', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: this.isEmpty ? '' : String(this.value), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '36225c2e660a2fba12ece5f96d878c35da8a7697', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '903d40fef1429d5098c5515087867a23cbceb584', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: '8b4d787655ceb69fe0d7e1b023cd9e4f91ba2174', 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: '7e786b1eb699103670ea3e4d2a5b234221c64100', name: "plus", size: 16 }))), this.helperText && (h("div", { key: 'ef12fdcb24ca9ade4ef43b25afc2d76561d5b7f7', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '1a5ce842cb1d01c3d392ea66f6d78b43b689ae65', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'e3581ef5219df87b5d5cb188bc2afd459f06f776', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }
@@ -118,6 +153,26 @@ export class CoNumberField {
                 "reflect": false,
                 "attribute": "label"
             },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is required (renders a required marker on the label)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
             "secondaryLabel": {
                 "type": "string",
                 "mutable": false,
@@ -156,6 +211,26 @@ export class CoNumberField {
                 "reflect": false,
                 "attribute": "helper-text"
             },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label layout: vertical (label above) or horizontal (label beside)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            },
             "status": {
                 "type": "string",
                 "mutable": false,
@@ -180,8 +255,8 @@ export class CoNumberField {
                 "type": "number",
                 "mutable": true,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "number | null",
+                    "resolved": "null | number",
                     "references": {}
                 },
                 "required": false,
@@ -293,6 +368,46 @@ export class CoNumberField {
                 "reflect": false,
                 "attribute": "placeholder",
                 "defaultValue": "'0'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show clear button when the field has a value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "false"
             }
         };
     }
@@ -313,8 +428,23 @@ export class CoNumberField {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "number | null",
+                    "resolved": "null | number",
+                    "references": {}
+                }
+            }, {
+                "method": "coClear",
+                "name": "coClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the clear button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
                     "references": {}
                 }
             }];

package/dist/collection/components/co-overlay/co-overlay.js

@@ -8,7 +8,7 @@ export class CoOverlay {
         };
     }
     render() {
-        return (h("div", { key: '8f2a8e4ca27d43e10f797265a4b25fea1ef92445', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", onClick: this.handleClick }, h("slot", { key: '6099310206111ba414b3e9f35edf8ba598d6ef4e' })));
+        return (h("div", { key: '65b20d04a50324ef37a5a9f0ff726ead15d0d757', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", onClick: this.handleClick }, h("slot", { key: '64d6abebb8d812d4c638b14608ba2982aae43a19' })));
     }
     static get is() { return "co-overlay"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-page-header/co-page-header.js

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class CoPageHeader {
     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: 'bb91fd19e0570998c5017cd5de3b6388c2e53a12', class: "co-page-header", part: "page-header" }, h("div", { key: 'efcaed2b33a7038f8a08deabde95c5891afa5f74', class: "co-page-header__left" }, this.icon && (h("span", { key: 'ef332057fc621d14195977fdec57c6d398646159', class: "co-page-header__icon" }, h("co-icon", { key: '1fffba2e767a51530c9489c7672532d9a653302d', name: this.icon, size: 24 }))), h("span", { key: 'cbc7c3d8a3088e5b4ea30af142c887a3ada7bed9', class: "co-page-header__title" }, h("slot", { key: '57a2fa4a291f96e31ba97bbdcc1104ca2dd1e275' }, this.heading))), h("div", { key: '11be9907895d13091a7e264aca84a383c3dcebcf', class: "co-page-header__actions" }, h("slot", { key: 'dd00a986940145d4afcb4f0fbd23a2edc02523e3', name: "actions" }))));
     }
     static get is() { return "co-page-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-phone-field/co-phone-field.css

@@ -0,0 +1,265 @@
+: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: var(--co-semantic-surface-secondary);
+  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--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: var(--co-font-size-14);
+  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);
+}
+
+/* Dropdown */
+.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);
+}
+
+/* ── Horizontal layout: label left; control + helper stacked right ──
+   Set --co-field-label-width on a container to align labels across fields. */
+: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;
+}