@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

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

@@ -40,7 +40,7 @@ export class CoNumberField {
                 return;
             const num = parseFloat(raw);
             if (!isNaN(num)) {
-                this.emitValue(num);
+                this.emitValue(this.fromDisplay(num));
             }
         };
         this.handleClear = () => {
@@ -106,19 +106,31 @@ export class CoNumberField {
             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: '6c3e5ede75a2e025c330a6bdd0f49bfd7642222f', 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: '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)))));
+            } }, (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)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }
@@ -408,6 +420,25 @@ export class CoNumberField {
                 "reflect": false,
                 "attribute": "clearable",
                 "defaultValue": "false"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rate' | 'percent'",
+                    "resolved": "\"percent\" | \"rate\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Display format. With 'rate' | 'percent' the `value` stays a DECIMAL\n(e.g. 0.15) but the field shows/edits the PERCENT (15) with a \"%\" suffix.\nvalue/min/max/step are always in the underlying (decimal) unit.\nReflected so it survives lazy hydration when set via the Vue wrapper."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "format"
             }
         };
     }

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

@@ -6,10 +6,23 @@
   position: fixed;
   inset: 0;
   z-index: 1000;
+  /* Reset the [popover] UA defaults so the top-layer scrim fills the viewport
+     (the popover promotion is what lets it escape any ancestor containing
+     block from app-shell `filter`/`mask`). */
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  overflow: visible;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--co-overlay-bg, rgba(0, 0, 0, 0.4));
+  -webkit-backdrop-filter: blur(var(--co-overlay-blur, 2px));
+  backdrop-filter: blur(var(--co-overlay-blur, 2px));
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease;
@@ -18,4 +31,5 @@
 .co-overlay--open {
   opacity: 1;
   pointer-events: auto;
+  transition: opacity 0.12s ease;
 }

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

@@ -1,14 +1,193 @@
 import { h } from "@stencil/core";
+import { afterEventFor } from "./overlayAfterClose";
+import { getFocusableElements, resolveTabIndex } from "./focusTrap";
+/**
+ * Module-level body-scroll lock shared by every overlay instance.
+ * Ref-counted so stacked/nested overlays (e.g. a modal opened from a drawer)
+ * don't release the lock until the LAST one closes.
+ */
+let lockCount = 0;
+let savedOverflow = '';
+function lockBodyScroll() {
+    if (typeof document === 'undefined')
+        return;
+    if (lockCount === 0) {
+        savedOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+    }
+    lockCount++;
+}
+function unlockBodyScroll() {
+    if (typeof document === 'undefined')
+        return;
+    if (lockCount === 0)
+        return;
+    lockCount--;
+    if (lockCount === 0) {
+        document.body.style.overflow = savedOverflow;
+    }
+}
+function nextFrame(cb) {
+    if (typeof requestAnimationFrame === 'function')
+        requestAnimationFrame(cb);
+    else
+        cb();
+}
 export class CoOverlay {
     constructor() {
         /** Whether the overlay is visible */
         this.open = false;
+        /**
+         * Opt-in accessible focus trap. When true, opening the overlay records the
+         * previously-focused element, moves focus into the overlay, cycles Tab /
+         * Shift+Tab within the slotted content, and restores focus on close.
+         * Default false → existing consumers are unchanged.
+         */
+        this.trapFocus = false;
+        /**
+         * Opt-in: emit `coClose` when Escape is pressed while open.
+         * Default false → existing consumers are unchanged.
+         */
+        this.closeOnEscape = false;
+        /** Whether THIS instance currently holds a scroll lock (prevents double-count). */
+        this.hasLock = false;
         this.handleClick = () => {
             this.coClose.emit();
         };
+        this.handleTransitionEnd = (e) => {
+            if (e.target !== this.overlayEl)
+                return;
+            const ev = afterEventFor(e.propertyName, this.open, 'opacity');
+            if (ev === 'after-open')
+                this.coAfterOpen.emit();
+            else if (ev === 'after-close')
+                this.coAfterClose.emit();
+        };
+    }
+    onOpenChange(isOpen) {
+        if (isOpen)
+            this.acquireLock();
+        else
+            this.releaseLock();
+        this.syncPopover();
+        if (this.trapFocus) {
+            if (isOpen)
+                this.captureAndFocus();
+            else
+                this.restoreFocus();
+        }
+    }
+    componentDidLoad() {
+        // Handle the case where the overlay mounts already open.
+        if (this.open)
+            this.acquireLock();
+        this.syncPopover();
+        if (this.open && this.trapFocus)
+            this.captureAndFocus();
+    }
+    disconnectedCallback() {
+        // Safety: never leave the body locked if removed while open.
+        this.releaseLock();
+        // Safety: return focus if we were removed while trapping.
+        if (this.trapFocus)
+            this.restoreFocus();
+    }
+    acquireLock() {
+        if (this.hasLock)
+            return;
+        this.hasLock = true;
+        lockBodyScroll();
+    }
+    releaseLock() {
+        if (!this.hasLock)
+            return;
+        this.hasLock = false;
+        unlockBodyScroll();
+    }
+    /**
+     * Promote the scrim to the browser top layer so it covers the whole viewport
+     * regardless of ancestor `filter`/`mask`/`transform` (which would otherwise
+     * make `position: fixed` resolve against that ancestor, confining the scrim).
+     * The Popover API promotes WITHOUT moving the DOM node, so slots and Stencil
+     * reconciliation are untouched. No-ops gracefully where unsupported.
+     */
+    syncPopover() {
+        const el = this.overlayEl;
+        if (!el || typeof el.showPopover !== 'function')
+            return;
+        try {
+            const isShown = el.matches(':popover-open');
+            if (this.open && !isShown)
+                el.showPopover();
+            else if (!this.open && isShown)
+                el.hidePopover();
+        }
+        catch (_a) {
+            /* not connected yet, or already in the desired state */
+        }
+    }
+    /** Record the current focus and move it into the overlay (guarded by trapFocus). */
+    captureAndFocus() {
+        if (typeof document !== 'undefined') {
+            this.returnFocusEl = document.activeElement;
+        }
+        // Defer so slotted content / the open transition is ready to take focus.
+        nextFrame(() => {
+            var _a;
+            if (!this.open)
+                return;
+            const focusables = getFocusableElements(this.el);
+            if (focusables.length > 0)
+                focusables[0].focus();
+            else
+                (_a = this.overlayEl) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    }
+    /** Restore focus to the element that had it before the trap engaged. */
+    restoreFocus() {
+        const target = this.returnFocusEl;
+        this.returnFocusEl = null;
+        if (target && typeof target.focus === 'function')
+            target.focus();
+    }
+    /** Deepest active element, descending through nested shadow roots. */
+    deepActiveElement() {
+        if (typeof document === 'undefined')
+            return null;
+        let node = document.activeElement;
+        while (node && node.shadowRoot && node.shadowRoot.activeElement) {
+            node = node.shadowRoot.activeElement;
+        }
+        return node;
+    }
+    handleKeydown(e) {
+        if (!this.open)
+            return;
+        if (this.closeOnEscape && e.key === 'Escape') {
+            this.coClose.emit();
+            return;
+        }
+        if (this.trapFocus && e.key === 'Tab')
+            this.trapTab(e);
+    }
+    trapTab(e) {
+        var _a;
+        const focusables = getFocusableElements(this.el);
+        if (focusables.length === 0) {
+            // Nothing to move to — keep focus pinned to the overlay container.
+            e.preventDefault();
+            (_a = this.overlayEl) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        const activeIndex = focusables.indexOf(this.deepActiveElement());
+        const nextIndex = resolveTabIndex(focusables.length, activeIndex, e.shiftKey);
+        if (nextIndex < 0)
+            return;
+        e.preventDefault();
+        focusables[nextIndex].focus();
     }
     render() {
-        return (h("div", { key: '65b20d04a50324ef37a5a9f0ff726ead15d0d757', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", onClick: this.handleClick }, h("slot", { key: '64d6abebb8d812d4c638b14608ba2982aae43a19' })));
+        return (h("div", { key: 'e6a474574b171c1f4f0b55b9165aa22ee7faa7f1', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '05a95bc4822c57de49137f2e604f4dbb54f81f9e' })));
     }
     static get is() { return "co-overlay"; }
     static get encapsulation() { return "shadow"; }
@@ -43,6 +222,46 @@ export class CoOverlay {
                 "reflect": true,
                 "attribute": "open",
                 "defaultValue": "false"
+            },
+            "trapFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Opt-in accessible focus trap. When true, opening the overlay records the\npreviously-focused element, moves focus into the overlay, cycles Tab /\nShift+Tab within the slotted content, and restores focus on close.\nDefault false \u2192 existing consumers are unchanged."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "trap-focus",
+                "defaultValue": "false"
+            },
+            "closeOnEscape": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Opt-in: emit `coClose` when Escape is pressed while open.\nDefault false \u2192 existing consumers are unchanged."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "close-on-escape",
+                "defaultValue": "false"
             }
         };
     }
@@ -62,6 +281,52 @@ export class CoOverlay {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "coAfterClose",
+                "name": "coAfterClose",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Slide/fade-out animation finished (overlay fully closed)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coAfterOpen",
+                "name": "coAfterOpen",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Slide/fade-in animation finished (overlay fully open)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": "document",
+                "capture": false,
+                "passive": false
             }];
     }
 }

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

@@ -0,0 +1,53 @@
+// focusTrap.ts
+//
+// Focus-trap helpers for co-overlay. The Tab-cycling decision is a PURE function
+// (`resolveTabIndex`) so it can be unit-tested in a node env, mirroring the
+// `overlayAfterClose` split. The DOM query lives here too but is only invoked by
+// the component at runtime.
+/** CSS selector matching natively tabbable elements. */
+export const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'area[href]',
+    'button:not([disabled])',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'iframe',
+    'audio[controls]',
+    'video[controls]',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+/**
+ * Decide which focusable index a Tab / Shift+Tab keystroke should move to.
+ *
+ * @param count       number of focusable elements inside the trap
+ * @param activeIndex index of the currently focused element, or -1 when focus
+ *                    is outside the trap (e.g. it escaped to the body)
+ * @param shiftKey    whether Shift is held (backward tabbing)
+ * @returns the index to focus, or -1 when there is nothing to trap
+ *
+ * Pure — no DOM — so the wrap-around edge cases stay unit-testable.
+ */
+export function resolveTabIndex(count, activeIndex, shiftKey) {
+    if (count <= 0)
+        return -1;
+    if (shiftKey) {
+        // Backward: from the first element (or from outside) wrap to the last.
+        return activeIndex <= 0 ? count - 1 : activeIndex - 1;
+    }
+    // Forward: from the last element (or from outside) wrap to the first.
+    return activeIndex === -1 || activeIndex >= count - 1 ? 0 : activeIndex + 1;
+}
+/**
+ * Collect the tabbable elements slotted into the overlay's light DOM, skipping
+ * hidden / aria-hidden ones. (Focusables nested inside further shadow roots are
+ * out of scope — the common dialog/modal content lives in the slotted subtree.)
+ */
+export function getFocusableElements(root) {
+    const nodes = Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR));
+    return nodes.filter((el) => !el.hasAttribute('disabled') &&
+        el.getAttribute('aria-hidden') !== 'true' &&
+        // offsetParent is null for display:none; getClientRects covers position:fixed.
+        (el.offsetParent !== null || el.getClientRects().length > 0));
+}

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

@@ -0,0 +1,8 @@
+/** Decide which after-animation event a `transitionend` should emit.
+ *  `watched` is the authoritative CSS property (so multi-prop transitions
+ *  — e.g. transform + opacity — fire the after-event exactly once). */
+export function afterEventFor(propertyName, isOpen, watched) {
+    if (propertyName !== watched)
+        return null;
+    return isOpen ? 'after-open' : 'after-close';
+}

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: '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" }))));
+        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" }))));
     }
     static get is() { return "co-page-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,7 +48,9 @@
   align-items: center;
   gap: var(--co-spacing-sm2);
   padding: var(--co-spacing-sm2) var(--co-spacing-md);
-  background: var(--co-semantic-surface-secondary);
+  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;
@@ -56,6 +58,27 @@
   box-sizing: border-box;
 }
 
+/* ── Size variants (mirror co-input: s 28 / sm 32 / md 40 / lg 48) ── */
+.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);
+}
+
+/* md is the default (40px) — no override needed */
+
+.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);
 }
@@ -94,7 +117,8 @@
 }
 
 .co-phone-field__dial-code {
-  font-size: var(--co-font-size-14);
+  /* Inherits from the container so the size variants cascade (14px at md). */
+  font-size: inherit;
   color: var(--co-semantic-text-secondary);
   font-weight: 500;
 }
@@ -263,3 +287,7 @@
   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); }
+}

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

@@ -25,6 +25,8 @@ export class CoPhoneField {
         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 = '';
@@ -157,7 +159,7 @@ export class CoPhoneField {
     render() {
         const entry = this.selectedEntry;
         const statusClass = this.status !== 'default' ? `co-phone-field--${this.status}` : '';
-        return (h("div", { key: '61e58d6f39daa5130148bb229fed15e3402a4987', class: `co-phone-field ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: 'cc24f2c92d24fa66828268158193b9dd64d050ae', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'ff8ab5e5247eb30dff31dfcdd3c9ac2ac3bc8dfb', required: this.required }))), h("div", { key: '1b766042a786a1f22409951c97aabc6c7ab82f44', class: "co-phone-field__container" }, h("button", { key: 'db0a2cf11103634f0402e6c7a6c6aa1121bc403b', 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: '5ad781fe48f4e3f5c88a0cd9f4a92e69cebaf393', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '69d004f8325baca6373bd6e9550fde42ce2b7fbe', class: "co-phone-field__chevron" }, h("co-icon", { key: 'd2a2f07e9d3aa20a2eb3ad3408c06e6d3efc2e22', name: "caret-down", size: 14 }))), h("input", { key: '258f24c54235fc4a38ef5c2cf42d68f5a80b73a8', 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: 'c13b342deec9b8f6cc8c3da73858a9329de1e5c3', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: '1f791495027ada8c1486e58b539867eb10554281', class: "co-phone-field__search" }, h("input", { key: '3ff02dd2e24efc501443c281ce93a96d4f4a3d7a', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: '05109209b87485b0c1d84711eb7c1628d09a75f4', 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: 'deb3306ebdd5cf47f68f9e3c62f8a3e7570692a6', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: '5bc8a04b4d0690dcae07eb2f9296ff80da52a9a6', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '9d32dcb09ef84562bde2ccd0341dfca85a982000', class: "co-phone-field__helper-text" }, this.helperText)))));
+        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)))));
     }
     static get is() { return "co-phone-field"; }
     static get encapsulation() { return "shadow"; }
@@ -331,6 +333,26 @@ export class CoPhoneField {
                 "attribute": "layout",
                 "defaultValue": "'vertical'"
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
             "defaultCountry": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/co-popover/co-popover.css

@@ -25,8 +25,17 @@
 /* ── Panel ──────────────────────────────────────────────── */
 .co-popover__panel {
   position: fixed;
+  /* Reset the [popover] UA defaults (inset:0; margin:auto; fit-content sizing;
+     padding/border) so our JS-driven top/left + width win in the top layer. */
+  inset: auto;
   top: 0;
   left: 0;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
   z-index: 10000;
   visibility: hidden;
   background: var(--co-semantic-surface-page, #fff);