@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

package/dist/collection/components/co-option-list/optionListLogic.js

@@ -0,0 +1,100 @@
+// optionListLogic.ts — lógica pura de co-option-list (patrón commandSearchLogic).
+export function parseItems(raw) {
+    let parsed = raw;
+    if (typeof raw === 'string') {
+        try {
+            parsed = JSON.parse(raw);
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    return Array.isArray(parsed) ? parsed : [];
+}
+export function parseValue(raw) {
+    if (!raw)
+        return [];
+    try {
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) ? parsed : [raw];
+    }
+    catch (_a) {
+        return [raw];
+    }
+}
+/**
+ * Selected-first contra el snapshot tomado al abrir (patrón co-ref-field):
+ * idle → bloque seleccionado en orden de snapshot (sintetizando desde
+ * snapshotDisplay los que la página actual no contiene) + resto en orden de
+ * server; buscando → solo resultados reales, seleccionados primero.
+ *
+ * Invariante: todo id en `snapshotIds` DEBE tener una entrada correspondiente
+ * en `snapshotDisplay` (armado por el caller desde selectedItems ∪ items al
+ * tomar el snapshot). Un id sin display-item asociado se cae silenciosamente
+ * de la lista en modo idle (el `byId.get(d._id) ?? d` sintetiza desde el
+ * display-item mismo, pero no hay nada que sintetizar si el id nunca entró a
+ * snapshotDisplay en primer lugar).
+ */
+export function orderItems(items, snapshotIds, snapshotDisplay, searching) {
+    var _a;
+    if (snapshotIds.size === 0)
+        return items;
+    const byId = new Map(items.map((i) => [i._id, i]));
+    const selectedBlock = [];
+    if (!searching) {
+        for (const d of snapshotDisplay)
+            selectedBlock.push((_a = byId.get(d._id)) !== null && _a !== void 0 ? _a : d);
+    }
+    else {
+        for (const i of items)
+            if (snapshotIds.has(i._id))
+                selectedBlock.push(i);
+    }
+    const rest = items.filter((i) => !snapshotIds.has(i._id));
+    return [...selectedBlock, ...rest];
+}
+/** Aplana a filas de render insertando un header cuando `group` cambia
+ *  (groupItems de co-command-search). `index` cuenta solo items. */
+export function buildRows(items) {
+    const rows = [];
+    let lastGroup;
+    let index = 0;
+    for (const it of items) {
+        if (it.group && it.group !== lastGroup)
+            rows.push({ kind: 'header', label: it.group });
+        lastGroup = it.group;
+        rows.push({ kind: 'item', item: it, index });
+        index++;
+    }
+    return rows;
+}
+/** Siguiente highlight: wrap, salta disabled. -1 = sin items navegables. */
+export function nextActiveIndex(current, delta, items) {
+    const positions = [];
+    items.forEach((it, idx) => {
+        if (!it.disabled)
+            positions.push(idx);
+    });
+    if (positions.length === 0)
+        return -1;
+    const at = positions.indexOf(current);
+    if (at === -1)
+        return delta === 1 ? positions[0] : positions[positions.length - 1];
+    return positions[(at + delta + positions.length) % positions.length];
+}
+/** `total > 0` tiene precedencia (deriva remaining); si no, vale `hasMoreProp`. */
+export function deriveMore(count, total, hasMoreProp) {
+    if (total > 0)
+        return { hasMore: count < total, remaining: Math.max(0, total - count) };
+    return { hasMore: hasMoreProp, remaining: 0 };
+}
+// Misma matemática que la virtualización de co-autocomplete / co-combobox.
+export const VIRTUAL_ITEM_HEIGHT = 34;
+export const VIRTUAL_VIEWPORT_ITEMS = 8;
+export const VIRTUAL_OVERSCAN = 3;
+export function virtualSlice(scrollTop, count) {
+    const totalHeight = count * VIRTUAL_ITEM_HEIGHT;
+    const startIdx = Math.max(0, Math.floor(scrollTop / VIRTUAL_ITEM_HEIGHT) - VIRTUAL_OVERSCAN);
+    const endIdx = Math.min(count, startIdx + VIRTUAL_VIEWPORT_ITEMS + VIRTUAL_OVERSCAN * 2);
+    return { totalHeight, startIdx, endIdx, offsetY: startIdx * VIRTUAL_ITEM_HEIGHT };
+}

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: 'da8d1cc91e1e1a6ae1b9c1bc9fea2aefb0e8170a', 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: '884c740ff55fc6c9d34ddbb996fad1f7ea058344' })));
     }
     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: '79bbf7064e2f72b992bc9c24bd3666071ef1cc7b', class: "co-page-header", part: "page-header" }, h("div", { key: '35aed98b3aaca45ffb20c9338e901f9d65f71fe0', class: "co-page-header__left" }, this.icon && (h("span", { key: '58c1c53d14b98c1731cd544c82a0e874a3da4e42', class: "co-page-header__icon" }, h("co-icon", { key: '882f34bd6a6cb1812f9e4f62cb35aed21a017212', name: this.icon, size: 24 }))), h("span", { key: '3bea48bca6b9d8ba5a539ed74bf505ae9c6cdd22', class: "co-page-header__title" }, h("slot", { key: 'ba1007a022068edbe53fa3903162564b23784f6e' }, this.heading))), h("div", { key: 'eb8127421713990cc25714a63ca0c450b22b3171', class: "co-page-header__actions" }, h("slot", { key: '631718ea4e974d946a185772c50abcf1b6128199', 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: 'a716785bef2a754a09c502f13fcae90f7a8cb00e', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: 'ec550e1d699292885133c96effcb791541f649aa', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: '61c864be67e0283a00db014b1cd2bb734c249a2d', required: this.required }))), h("div", { key: 'e019c16551cc205bf27e03cc7a4f91fb95ec07e7', class: "co-phone-field__container" }, h("button", { key: '58a0958e3e3240bcd68edcde4d2dc1de72ecaf33', 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: 'ee75fbf56e703a88b6026244588d2da0f4ed1478', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '05b173aded9b5fd4cf2173c453c70d94ddb8dd00', class: "co-phone-field__chevron" }, h("co-icon", { key: 'd7a543b4bedd61d7e6fdf88ae56cbf350fea31be', name: "caret-down", size: 14 }))), h("input", { key: '31e21dbce76c374dc8dd0c80919b7af0d8641375', 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: '8b5689485bba266776b988564a2b14602a80d9d4', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: 'f4453a595520c177e5f1ef184737c3b25bf84939', class: "co-phone-field__search" }, h("input", { key: '5f85ac03bbd7dff3f8d9130ab1f0a4c23b5d327d', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: '97051407520f0ba0514c746064e813b033ae1594', 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: '6d19085b7a08978c42f05713de48c1bdf0b19dba', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: '612cf27d01f0afda0fa75d58206114160dd61bcb', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '910b4584c3a2df48e30d11894bba7fd8fbb7e03c', 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);