@prolibu-suite/cobalt-core 0.3.0 → 0.4.0

package/dist/collection/components/co-menu-item/co-menu-item.js

@@ -17,6 +17,12 @@ export class CoMenuItem {
     constructor() {
         /** Tighter row metrics (32px instead of 36px). */
         this.dense = false;
+        /** Marks the row as selected — paints an at-rest gray-100 background. Used by
+         *  single-select menus (sort/type). */
+        this.selected = false;
+        /** Renders a trailing check (size 15) after the label. Pair with `selected`
+         *  to mark the chosen option in a single-select menu. */
+        this.trailingCheck = false;
         /** Visually disabled — pointer events ignored, opacity reduced. */
         this.disabled = false;
         /** `danger` shifts text + icon to the destructive color. Use for Delete, etc. */
@@ -120,14 +126,16 @@ export class CoMenuItem {
         this.closeTimer = window.setTimeout(() => { this.submenuOpen = false; }, 260);
     }
     render() {
+        var _a;
         const row = (h("button", { ref: (el) => (this.rowEl = el), class: {
                 'co-menu-item': true,
                 'co-menu-item--dense': this.dense,
+                'co-menu-item--selected': this.selected,
                 'co-menu-item--disabled': this.disabled,
                 'co-menu-item--danger': this.variant === 'danger',
                 'co-menu-item--submenu': this.hasSubmenu,
                 'co-menu-item--submenu-open': this.hasSubmenu && this.submenuOpen,
-            }, type: "button", role: "menuitem", "aria-haspopup": this.hasSubmenu ? 'menu' : undefined, "aria-expanded": this.hasSubmenu ? (this.submenuOpen ? 'true' : 'false') : undefined, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeydown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.icon && (h("span", { class: "co-menu-item__icon" }, h("co-icon", { name: this.icon, size: 16 }))), h("span", { class: "co-menu-item__label" }, this.label, h("slot", { name: "label" })), h("span", { class: "co-menu-item__suffix" }, h("slot", { name: "suffix" }), this.hasSubmenu && h("co-icon", { name: "caret-right", size: 14 }))));
+            }, type: "button", role: "menuitem", "aria-haspopup": this.hasSubmenu ? 'menu' : undefined, "aria-expanded": this.hasSubmenu ? (this.submenuOpen ? 'true' : 'false') : undefined, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeydown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.icon && (h("span", { class: "co-menu-item__icon" }, h("co-icon", { name: this.icon, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16 }))), h("span", { class: "co-menu-item__label" }, this.label, h("slot", { name: "label" })), this.trailingCheck && (h("span", { class: "co-menu-item__check" }, h("co-icon", { name: "check", size: 15 }))), h("span", { class: "co-menu-item__suffix" }, h("slot", { name: "suffix" }), this.hasSubmenu && h("co-icon", { name: "caret-right", size: 14 }))));
         if (!this.hasSubmenu) {
             // Leaf — the default slot is unused for leaves; ignore it.
             return h("div", { class: "co-menu-item__wrap" }, row);
@@ -162,13 +170,32 @@ export class CoMenuItem {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Icon name (Phosphor) rendered before the label."
+                    "text": "Icon name (Phosphor) rendered before the label. Optional \u2014 rows may be\nlabel-only."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "icon"
             },
+            "iconSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the leading icon size (px). Defaults to 16."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -208,6 +235,46 @@ export class CoMenuItem {
                 "attribute": "dense",
                 "defaultValue": "false"
             },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the row as selected \u2014 paints an at-rest gray-100 background. Used by\nsingle-select menus (sort/type)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "trailingCheck": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders a trailing check (size 15) after the label. Pair with `selected`\nto mark the chosen option in a single-select menu."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trailing-check",
+                "defaultValue": "false"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -60,6 +60,23 @@
 .co-modal--sm { max-width: 400px; }
 .co-modal--lg { max-width: 680px; }
 
+/* Media/document viewer. `height` is set (not just max-height) so the body has
+   a definite box to grow into — a <video> or <iframe> would otherwise collapse
+   to its intrinsic height and leave the panel half empty. */
+.co-modal--full {
+  max-width: min(1400px, 95vw);
+  width: 95vw;
+  height: 92vh;
+  max-height: 92vh;
+}
+
+.co-modal--full .co-modal__body {
+  flex: 1;
+  min-height: 0; /* let the flex child shrink; without it the body overflows the panel */
+  padding: 0;    /* the viewer fills edge-to-edge */
+  overflow: hidden;
+}
+
 .co-modal--open {
   transform: none;
   opacity: 1;

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

@@ -14,7 +14,24 @@ export class CoModal {
         this.closable = true;
         /** Close when clicking the overlay backdrop */
         this.closeOnOverlay = true;
-        /** Modal width: sm (400px), md (540px), lg (680px) */
+        /**
+         * Opt-in: close when Escape is pressed. Default false → existing consumers
+         * are unchanged.
+         *
+         * Handled here rather than by forwarding co-overlay's own `closeOnEscape`:
+         * co-overlay emits the SAME `coClose` for a backdrop click and for Escape,
+         * and this component gates that event on `closeOnOverlay`. Forwarding would
+         * therefore swallow Escape whenever `closeOnOverlay` is false.
+         */
+        this.closeOnEscape = false;
+        /**
+         * Modal width: sm (400px), md (540px), lg (680px),
+         * full (min(1400px, 95vw) × 92vh — media/document viewers).
+         *
+         * `full` also drops the body padding and lets the body grow, so a slotted
+         * <video>/<iframe> fills the panel edge-to-edge instead of sitting in a
+         * content-height box.
+         */
         this.size = 'md';
         /** Hide body section and all border dividers (compact confirm dialogs) */
         this.noDividers = false;
@@ -38,14 +55,21 @@ export class CoModal {
                 this.coAfterClose.emit();
         };
     }
+    handleKeydown(e) {
+        if (!this.open || !this.closeOnEscape)
+            return;
+        if (e.key === 'Escape')
+            this.coClose.emit();
+    }
     render() {
-        return (h("co-overlay", { key: '2fee2b3d1249611a053b917e7d56cb9550e5f3b8', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '68cd9017ea7b89c2a3c3a5a6be81a4a1760588be', class: "co-modal__frame" }, h("div", { key: 'cb97ce8eb1bb4ca47b9f81dd8c72878eec383928', class: {
+        return (h("co-overlay", { key: 'db9ac94c8fd2fe2e348fdee437aee9ddccdf85cb', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: 'b2f0c174b09e2582c9e17ef18133b3e9057ace74', class: "co-modal__frame" }, h("div", { key: 'a3ae4c2a30d52b3c651ca80387f49f9344d9e89c', class: {
                 'co-modal': true,
                 'co-modal--open': this.open,
                 'co-modal--sm': this.size === 'sm',
                 'co-modal--lg': this.size === 'lg',
+                'co-modal--full': this.size === 'full',
                 'co-modal--no-dividers': this.noDividers,
-            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '85b3c3616ec370427f30832aaec9674fa3651205', class: "co-modal__header", part: "header" }, h("div", { key: '4bcab7c1022aeaa357feae91999120e5b4dc2d30', class: "co-modal__header-text" }, h("h2", { key: '40879cdb0533f481e4807d8510937eec0de46317', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'ba57a406a257ce0a969da6a508a287f28ffc64b4', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: 'e5eb0cbcf8cbe53b02991b41a2b2e4e75ae0d5b3', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'f11fd06c1a6b3cd41254324e44dcfb70b2058003', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '8e189a09c8418f1646650c57748855d805d9bd7e', class: "co-modal__body", part: "body" }, h("slot", { key: '8c8363b3405295c7823feb6196c4c72a1724a6d5' }))), h("div", { key: 'fdd675455b1391ea7d3456321a1fb03104f14b49', class: "co-modal__footer", part: "footer" }, h("slot", { key: 'a05ba1229c4fa147c582ad7d06fb4a27d4a42ef5', name: "footer" }))))));
+            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: 'e90b7e7aa085ff53675586e66ee0ac5473a69cbc', class: "co-modal__header", part: "header" }, h("div", { key: 'e7ffccb3b8658e213d92f1a7873eebf6de42ef7d', class: "co-modal__header-text" }, h("h2", { key: '431e22f5bd933ee3052750e7e9abb7911fe24d9a', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'f8e83dafce7ef899e5931902b568807063ea9ae3', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: '938dbc0df49067f359aa431ba0d16b89ad41a751', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'f1421d7d4441fff67259e21cf2a0107b6a57f746', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: 'faf612d93e95232b46ebfb45089768bf09366a80', class: "co-modal__body", part: "body" }, h("slot", { key: '3c4dd9d1f3613a2f308cbc714426739a3aa6523d' }))), h("div", { key: '35546891b1847627de68a8f012e23fbfbdc1760b', class: "co-modal__footer", part: "footer" }, h("slot", { key: '263bd761b09998b9cc1f5f53d7dee87ccb5f4367', name: "footer" }))))));
     }
     static get is() { return "co-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -160,19 +184,39 @@ export class CoModal {
                 "attribute": "close-on-overlay",
                 "defaultValue": "true"
             },
+            "closeOnEscape": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Opt-in: close when Escape is pressed. Default false \u2192 existing consumers\nare unchanged.\n\nHandled here rather than by forwarding co-overlay's own `closeOnEscape`:\nco-overlay emits the SAME `coClose` for a backdrop click and for Escape,\nand this component gates that event on `closeOnOverlay`. Forwarding would\ntherefore swallow Escape whenever `closeOnOverlay` is false."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-escape",
+                "defaultValue": "false"
+            },
             "size": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'sm' | 'md' | 'lg'",
-                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "original": "'sm' | 'md' | 'lg' | 'full'",
+                    "resolved": "\"full\" | \"lg\" | \"md\" | \"sm\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Modal width: sm (400px), md (540px), lg (680px)"
+                    "text": "Modal width: sm (400px), md (540px), lg (680px),\nfull (min(1400px, 95vw) \u00D7 92vh \u2014 media/document viewers).\n\n`full` also drops the body padding and lets the body grow, so a slotted\n<video>/<iframe> fills the panel edge-to-edge instead of sitting in a\ncontent-height box."
                 },
                 "getter": false,
                 "setter": false,
@@ -250,4 +294,13 @@ export class CoModal {
                 }
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -14,12 +14,12 @@ export class CoNavbar {
         this.rounded = false;
     }
     render() {
-        return (h("div", { key: 'b2af21d1a45ce64e859c5eee4565bed3acf59af9', class: {
+        return (h("div", { key: 'ed73dbf77742c009fbd37602925a43f217044027', 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: '70eabcdbfdae15af12cc9bfd8aea140ca37176c9' })));
+            }, part: "navbar", role: "toolbar" }, h("slot", { key: '60235bb4ac473f67371094a735701fe40362db66' })));
     }
     static get is() { return "co-navbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -124,13 +124,13 @@ export class CoNumberField {
         this.coChange.emit(clamped);
     }
     render() {
-        return (h("div", { key: '56f049b125c4b28824da9980446b6152c5e8c34e', class: {
+        return (h("div", { key: 'b9d2918682c1943728aa412b5abb4e17c842d9bd', 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: '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)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'baa117f0cfeba73015fe6a396b7001c83db76079', class: "co-number-field__labels" }, this.label && h("label", { key: '2593906b02ca0935ab1b3e8bcf51d8867a2b416a', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '40cc658fedb70c38e92e07cf1cd0b8a628fd6ca6', required: this.required })), this.secondaryLabel && h("span", { key: 'b495275c3f9108442d6a4cc1d36b23b510e9f151', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'ac482c099f7952d26142b4e8aacac74fad2cd469', class: "co-number-field__row" }, h("button", { key: '617f9d33a8371bce87c9d8e56df88aef77dcc724', 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: '3242ac9dbbbcfeca024812b69d5f17a00fe4928a', name: "minus", size: 16 })), h("input", { key: 'beaab19de433dcc7b6ffd13678b68f2b229d8311', 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: '5426965b700dccf1387071138d8dae113cf4fdf4', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: 'f6f2e6a7f9a5a77fc96a8223a0eaad7880599e55', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '1c29c52af8720ffd2dbd5c5aa960107ad16c7613', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: '3a1265f41fcf4ca88b25e88f3921d0087aeede99', 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: 'ac97bb8ee26e535b2c278e647b2edb1d3dbaac1b', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '714e6fcd1f7ac625ec6702d97f72487b0448e8ed', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '69cf83620410820ca2eaf3e473a0f815c812c69e', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'e185964aaa4a7410e5f5e78da88bd6b78de072b4', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-option-list/co-option-list.css

@@ -0,0 +1,228 @@
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary);
+}
+
+.co-option-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-sm);
+  min-width: 0;
+}
+
+/* ── Search ──────────────────────────────────────────────── */
+.co-option-list__search {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm);
+  padding: var(--co-spacing-sm) var(--co-spacing-md);
+  border: 1px solid var(--co-semantic-border-default);
+  border-radius: var(--co-border-radius-xs);
+  color: var(--co-semantic-text-muted);
+}
+
+.co-option-list__search:focus-within {
+  border-color: var(--co-semantic-border-focus);
+}
+
+.co-option-list__search-input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14);
+  color: var(--co-semantic-text-default);
+}
+
+.co-option-list__search-input::placeholder {
+  color: var(--co-semantic-text-muted);
+}
+
+/* ── Options container ───────────────────────────────────── */
+.co-option-list__options {
+  max-height: 240px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.co-option-list__inner {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* ── Rows ────────────────────────────────────────────────── */
+.co-option-list__option {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm);
+  min-width: 0;
+  padding: var(--co-spacing-sm);
+  border-radius: var(--co-border-radius-xxs);
+  cursor: pointer;
+  font-size: var(--co-font-size-14);
+  color: var(--co-semantic-text-default);
+}
+
+.co-option-list__option--active {
+  background: var(--co-semantic-surface-hover);
+}
+
+.co-option-list__option--selected .co-option-list__label {
+  font-weight: 600;
+}
+
+.co-option-list__option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.co-option-list__avatar,
+.co-option-list__icon {
+  flex-shrink: 0;
+}
+
+.co-option-list__dot {
+  flex-shrink: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: var(--co-border-radius-full);
+}
+
+.co-option-list__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-xxs);
+  flex: 1;
+  min-width: 0;
+}
+
+.co-option-list__title {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xs);
+  min-width: 0;
+}
+
+.co-option-list__label {
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.co-option-list__suffix {
+  color: var(--co-semantic-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 1;
+}
+
+.co-option-list__badge {
+  flex-shrink: 0;
+  padding: 0 var(--co-spacing-xs);
+  border-radius: var(--co-border-radius-full);
+  background: var(--co-semantic-surface-hover);
+  color: var(--co-semantic-on-primary);
+  font-size: var(--co-font-size-10);
+  font-weight: 600;
+  line-height: 16px;
+}
+
+.co-option-list__desc {
+  font-size: var(--co-font-size-12);
+  color: var(--co-semantic-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.co-option-list__match {
+  color: var(--co-color-primary-azul);
+  font-weight: 700;
+}
+
+.co-option-list__check {
+  flex-shrink: 0;
+  color: var(--co-color-primary-verde);
+}
+
+.co-option-list__row-action {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  color: var(--co-semantic-text-muted);
+}
+
+.co-option-list__row-action:hover {
+  color: var(--co-semantic-text-default);
+}
+
+/* ── Group headers ───────────────────────────────────────── */
+.co-option-list__group {
+  padding: var(--co-spacing-sm) var(--co-spacing-sm) var(--co-spacing-xs);
+  font-size: var(--co-font-size-11, 11px);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--co-semantic-text-muted);
+}
+
+/* ── Clear row ───────────────────────────────────────────── */
+.co-option-list__clear-row {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm);
+  width: 100%;
+  border: 0;
+  background: transparent;
+  padding: var(--co-spacing-sm);
+  border-radius: var(--co-border-radius-xxs);
+  cursor: pointer;
+  text-align: left;
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14);
+  color: var(--co-semantic-text-secondary);
+}
+
+.co-option-list__clear-row:hover {
+  background: var(--co-semantic-surface-hover);
+}
+
+/* ── States ──────────────────────────────────────────────── */
+.co-option-list__loading,
+.co-option-list__loading-more {
+  display: flex;
+  justify-content: center;
+  padding: var(--co-spacing-sm);
+}
+
+.co-option-list__empty {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm);
+  padding: var(--co-spacing-md) var(--co-spacing-sm);
+  font-size: var(--co-font-size-12);
+  color: var(--co-semantic-text-muted);
+}
+
+.co-option-list__more {
+  padding: var(--co-spacing-xs) var(--co-spacing-sm);
+  font-size: var(--co-font-size-12);
+  color: var(--co-semantic-text-muted);
+  text-align: center;
+}
+
+/* Focus visible en filas navegadas por teclado (a11y baseline) */
+.co-option-list__option:focus-visible,
+.co-option-list__clear-row:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: -2px;
+}