@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { afterEventFor } from "../co-overlay/overlayAfterClose";
 /**
  * @slot        - Modal body content
  * @slot footer - Footer with action buttons
@@ -13,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;
@@ -27,15 +45,31 @@ export class CoModal {
         this.stopPropagation = (e) => {
             e.stopPropagation();
         };
+        this.handleTransitionEnd = (e) => {
+            if (e.target !== this.modalEl)
+                return;
+            const ev = afterEventFor(e.propertyName, this.open, 'transform');
+            if (ev === 'after-open')
+                this.coAfterOpen.emit();
+            else if (ev === 'after-close')
+                this.coAfterClose.emit();
+        };
+    }
+    handleKeydown(e) {
+        if (!this.open || !this.closeOnEscape)
+            return;
+        if (e.key === 'Escape')
+            this.coClose.emit();
     }
     render() {
-        return (h("co-overlay", { key: '8b8d87da7d6d0cc1f8758dc85d536901c1b8e559', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '21406763f2a69fbb8d6deca46d06e5d470aa3238', 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", role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation }, h("div", { key: 'e0cbf1b770a791d94185500e98550de7428cf61d', class: "co-modal__header", part: "header" }, h("div", { key: '493aaaed168299eb167514dae238e218ce53b78e', class: "co-modal__header-text" }, h("h2", { key: 'de76fdc6f85420119170425b7166807c2c81df0f', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'c5c0ec7113a1715c4db372b6641fcac2989ff113', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: '64bae9c3dcac4e036671d36863f419eb051a986c', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: '74fffda310bb8c09812239218f6ee0ca413be44a', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '448b9b55b2bf70b57d478938ab9bb3704d3bcf10', class: "co-modal__body", part: "body" }, h("slot", { key: '77ac168d42a68fac4dd240f2b8dfa5f2ff2ce2bc' }))), h("div", { key: 'd72a9dfdb6a8b1f5f182746eb2df3551bb27f884', class: "co-modal__footer", part: "footer" }, h("slot", { key: '97b3f2d7f2838388f80817d123a9970b159c9223', 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"; }
@@ -150,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,
@@ -208,6 +262,45 @@ export class CoModal {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "coAfterClose",
+                "name": "coAfterClose",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Close animation finished."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coAfterOpen",
+                "name": "coAfterOpen",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Open animation finished."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    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: 'ec767e2bc0b048666ee78670729a851ab99b2ddb', 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: '72fab32c330d1688e9f34b8d712b17f35d5aa513' })));
+            }, 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.css

@@ -51,7 +51,9 @@
   display: flex;
   align-items: center;
   gap: 0;
-  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);
   min-height: 40px;
@@ -161,6 +163,18 @@
   color: var(--co-semantic-text-muted);
 }
 
+/* Unit suffix for format='rate'|'percent' (the input keeps the bare number) */
+.co-number-field__affix {
+  flex-shrink: 0;
+  padding-right: var(--co-spacing-sm2);
+  color: var(--co-semantic-text-muted);
+  font-size: inherit;
+  font-weight: 400;
+  line-height: 1;
+  pointer-events: none;
+  user-select: none;
+}
+
 .co-number-field__input::-webkit-outer-spin-button,
 .co-number-field__input::-webkit-inner-spin-button {
   -webkit-appearance: none;
@@ -246,3 +260,7 @@
 .co-field-required__caption::before {
   content: var(--co-field-required-text, ' (required)');
 }
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-number-field__row { background: var(--co-semantic-surface-secondary); }
+}

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: '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: '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: '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"; }
@@ -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-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;
+}