@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

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

@@ -0,0 +1,484 @@
+import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
+/**
+ * Multiline text input field with label, helper text, character counter,
+ * and clear functionality. Mirrors `co-input` styling but renders a native
+ * `<textarea>` for multiline content (bios, descriptions, notes).
+ *
+ * @part wrapper - Root container
+ * @part label - The field label
+ * @part field - The bordered textarea wrapper
+ * @part input - The native textarea element
+ * @part helper - The helper/error text row
+ * @part counter - The character counter element
+ */
+export class CoTextarea {
+    constructor() {
+        /** Current value */
+        this.value = '';
+        /** Placeholder text */
+        this.placeholder = '';
+        /** Whether the field is required */
+        this.required = false;
+        /** Disabled state */
+        this.disabled = false;
+        /** Read-only state */
+        this.readonly = false;
+        /** Number of visible text rows */
+        this.rows = 4;
+        /** Validation status */
+        this.status = 'default';
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /** Show clear button when textarea has value */
+        this.clearable = false;
+        /** Resize behavior of the textarea */
+        this.resize = 'vertical';
+        this.hasFocus = false;
+        this.handleInput = (e) => {
+            const target = e.target;
+            this.value = target.value;
+            this.coInput.emit(this.value);
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.coFocus.emit();
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.coChange.emit(this.value);
+            this.coBlur.emit();
+        };
+        this.handleClear = () => {
+            var _a;
+            this.value = '';
+            this.coClear.emit();
+            this.coInput.emit('');
+            (_a = this.textareaEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    get hasValue() {
+        return this.value != null && this.value !== '';
+    }
+    get charCount() {
+        var _a;
+        return ((_a = this.value) !== null && _a !== void 0 ? _a : '').length;
+    }
+    render() {
+        const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
+        const isOverLimit = this.maxLength != null && this.charCount > this.maxLength;
+        const statusClass = this.status !== 'default' ? `co-textarea--${this.status}` : '';
+        return (h("div", { key: '0e160877b3fefe64f2da005eff7323c528e2f260', class: {
+                'co-textarea': true,
+                'co-textarea--disabled': this.disabled,
+                'co-textarea--focused': this.hasFocus,
+                'co-textarea--filled': this.hasValue,
+                'co-textarea--over-limit': isOverLimit,
+                [statusClass]: !!statusClass,
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '903688841736f2c70c3f44e4619285974beb80af', class: "co-textarea__labels" }, this.label && (h("label", { key: 'a74ffa8509cc809470d0c269dd2ba2edf9d4d184', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: '9589ea1bfdd871e1e0e5fdd43512efde94fb9933', required: this.required }))), this.secondaryLabel && (h("span", { key: '8b133899c6ad21233c6a10b0e09791f529064546', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: '9d9bd3db4bc163a4429f3e1b5bb320b2cf261403', class: "co-textarea__field", part: "field" }, h("textarea", { key: '99fed67002ed7f2de3aa050085e9e3a90eda9652', ref: (el) => (this.textareaEl = el), class: {
+                'co-textarea__native': true,
+                [`co-textarea__native--resize-${this.resize}`]: true,
+            }, rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.status === 'error' || isOverLimit ? 'true' : 'false', onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), showClear && (h("button", { key: 'ad0d815278a6a8ab8bd4706b382f1f7aaaf087f3', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'b26e449735a78a4a44458e87de9df4969d95df67', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: '958684f0a44b0a09ce9d7095c5c3a677a7c7f35a', class: "co-textarea__footer" }, this.helperText && (h("div", { key: '3abdc8f49e26d210a2eaff7838a372e87746c74c', class: {
+                'co-textarea__helper': true,
+                'co-textarea__helper--error': this.status === 'error',
+            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: 'c874733960b31f7129e173728548a0ead315d72e', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '231e6acc23143094f59db60493861930bf77db50', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: '4978131a7caae184cb23c0e83d35c85f741fb1d6', class: {
+                'co-textarea__counter': true,
+                'co-textarea__counter--over': isOverLimit,
+            }, part: "counter" }, this.charCount, "/", this.maxLength))))));
+    }
+    static get is() { return "co-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-textarea.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-textarea.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text displayed above the textarea"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "secondaryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary label displayed on the right side"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-label"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Input name attribute"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Read-only state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of visible text rows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "4"
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum character length. When set, a counter is displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-length"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'error' | 'success' | 'warning'",
+                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation status"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text displayed below the textarea"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label layout: vertical (label above) or horizontal (label beside)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show clear button when textarea has value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "false"
+            },
+            "resize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'none' | 'both'",
+                    "resolved": "\"both\" | \"none\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resize behavior of the textarea"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resize",
+                "defaultValue": "'vertical'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coInput",
+                "name": "coInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on every keystroke with the current text"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "coChange",
+                "name": "coChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the committed text on blur"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "coFocus",
+                "name": "coFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on focus"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coBlur",
+                "name": "coBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on blur"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coClear",
+                "name": "coClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when clear button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -41,7 +41,7 @@ export class CoToast {
             'co-toast--multiline': hasDescription,
             'co-toast--stacked': isStacked,
         };
-        return (h("div", { key: 'bc18e157f1d28c5850448163fbe3b1ed0148086d', class: rootClass, part: "toast", role: role }, resolvedIcon && (h("span", { key: '1df6ceb6a20446f54d6bd429181e8b9ddb3c4701', class: "co-toast__icon" }, h("co-icon", { key: 'caa37fcb26774cd4211e6b01ed0080c0be2869dc', name: resolvedIcon, size: 20 }))), h("div", { key: '9e9635bfd87c0a0f9251ae2790ab1ece02d4e9e7', class: "co-toast__body" }, h("div", { key: '97d5f8880f5f1e6caaa90edf83237a2a8c6f9b80', class: "co-toast__content" }, h("span", { key: 'a51722ec68d7440d090698c4cdf07c578503a01a', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: '1ee7c20bf0a5332fe1090281658c3b932cc85872', class: "co-toast__description" }, this.description))), isStacked && (h("div", { key: 'ce5ae543e27144213b0a3a9c846f6dc12892a142', class: "co-toast__actions" }, h("slot", { key: '8af658d42453d12ca0471ce38621cdad609aa08d', name: "action" })))), !isStacked && (h("div", { key: 'b0439dc3101c0859c1f2c7f7ed3c578a3b361117', class: "co-toast__actions" }, h("slot", { key: '3a0a7d99e1fe886c073ded7e9e7805fe5ef66571', name: "action" }))), this.dismissible && (h("button", { key: '4e4374e8c12221b67b79ba8e1d51521fcfda06a3', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: 'd074d462adebdc7c44a95eed9482eeb973e4c9a5', name: "x", size: 16 })))));
+        return (h("div", { key: '764d958e40e198c3b02dc92d0fcb10f79c853547', class: rootClass, part: "toast", role: role }, resolvedIcon && (h("span", { key: '7064fdcf56694bc0b2f8a4a9338442db98560510', class: "co-toast__icon" }, h("co-icon", { key: 'cb3628ec9051d6d6ee42f432e8f9560bff276233', name: resolvedIcon, size: 20 }))), h("div", { key: 'aa15c35826277e7923bc7f8b0b0fcbd189706109', class: "co-toast__body" }, h("div", { key: '7a4992a6a984ff09cc8b6e0012a1c80309a0665b', class: "co-toast__content" }, h("span", { key: 'd6dd0e0f427395b311bbb9cee26d4a9be22900ce', class: "co-toast__message" }, this.message), hasDescription && (h("span", { key: 'f2167e0207c014933aef6bca2d9f5e2adc267abd', class: "co-toast__description" }, this.description))), isStacked && (h("div", { key: '448957a6f93ce912f231483d9469a38b23e72466', class: "co-toast__actions" }, h("slot", { key: '68834bc69baf4ba5ffa769a9edbd60f9441d7a44', name: "action" })))), !isStacked && (h("div", { key: 'ef11141a8d57484b75b3af5b974ec451c58a8f5a', class: "co-toast__actions" }, h("slot", { key: '417f06903a6b0d3fb4184175df675d28dfabca64', name: "action" }))), this.dismissible && (h("button", { key: 'cfbabfc9a35669c99c2a37ed1278e17d0dd77279', class: "co-toast__dismiss", type: "button", "aria-label": "Dismiss", onClick: () => this.coDismiss.emit() }, h("co-icon", { key: 'ef936e9c54768d46bf60335140f96dcd1c103d76', name: "x", size: 16 })))));
     }
     static get is() { return "co-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-toggle-button/co-toggle-button.css

@@ -6,6 +6,7 @@
 
 .co-toggle-button {
   display: inline-flex;
+  width: var(--co-toggle-button-width, auto);
   align-items: center;
   justify-content: center;
   gap: var(--co-spacing-sm2);
@@ -40,13 +41,14 @@
 }
 
 .co-toggle-button--selected {
-  background: var(--co-semantic-surface-primary);
-  color: var(--co-semantic-on-primary);
-  border-color: var(--co-semantic-surface-primary);
+  background: var(--co-color-base-negro, #1f1c1b);
+  color: var(--co-color-base-blanco, #fff);
+  border-color: var(--co-color-base-negro, #1f1c1b);
 }
 
 .co-toggle-button--selected:hover:not(:disabled) {
-  opacity: 0.9;
+  background: var(--co-color-gray-700, #1f1c1b);
+  border-color: var(--co-color-gray-700, #1f1c1b);
 }
 
 .co-toggle-button--disabled {

package/dist/collection/components/co-toggle-button/co-toggle-button.js

@@ -14,13 +14,13 @@ export class CoToggleButton {
     }
     render() {
         const iconSize = this.size === 'l' ? 20 : this.size === 'xs' ? 14 : 16;
-        return (h("button", { key: '3e9708b464063577fdb47ad010950caaf4b765bc', class: {
+        return (h("button", { key: '3e1a2d28437f608009c3a8dd7f8221773c42cf7d', class: {
                 'co-toggle-button': true,
                 'co-toggle-button--selected': this.selected,
                 [`co-toggle-button--${this.size}`]: true,
                 'co-toggle-button--disabled': this.disabled,
                 'co-toggle-button--icon-only': !this.label && (!!this.iconLeft || !!this.iconRight),
-            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, this.iconLeft && h("co-icon", { key: 'd33ccf292a46a623b7b8207123b64726a5d26a75', name: this.iconLeft, size: iconSize }), this.label && h("span", { key: '04410e0e57339f16115d99651a7ab25d6b640bf6', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '4f1ac0a23cc78470866aa9e1220d7ba9d08c817e', name: this.iconRight, size: iconSize })));
+            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, this.iconLeft && h("co-icon", { key: 'b6ddaa41d5264433483d0a7f911505106d657186', name: this.iconLeft, size: iconSize }), this.label && h("span", { key: 'b908957caffbce488c5483fc83e46bf918abcded', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '462027b869fe5122fdd3c7e9f00d0662271875fa', name: this.iconRight, size: iconSize })));
     }
     static get is() { return "co-toggle-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-toggle-button-group/co-toggle-button-group.css

@@ -17,6 +17,22 @@
   flex-direction: column;
 }
 
+/* Full width: group fills its container, buttons share the width equally. */
+:host([full-width]) {
+  display: flex;
+  width: 100%;
+}
+
+.co-toggle-button-group--full {
+  display: flex;
+  width: 100%;
+}
+
+.co-toggle-button-group--full.co-toggle-button-group--row ::slotted(co-toggle-button) {
+  flex: 1 1 0;
+  --co-toggle-button-width: 100%;
+}
+
 /* Remove inner radii for connected appearance */
 .co-toggle-button-group--row ::slotted(co-toggle-button) {
   --co-btn-border-radius: 0;

package/dist/collection/components/co-toggle-button-group/co-toggle-button-group.js

@@ -7,6 +7,8 @@ export class CoToggleButtonGroup {
         this.size = 'm';
         this.disabled = false;
         this.direction = 'row';
+        /** Stretch the group to fill its container; each button shares the width equally. */
+        this.fullWidth = false;
     }
     get selectedValues() {
         if (this.multiple) {
@@ -55,11 +57,12 @@ export class CoToggleButtonGroup {
         });
     }
     render() {
-        return (h("div", { key: '8f91e6dd191ba893948835787c754ec7cdf3711e', class: {
+        return (h("div", { key: '59aac10e6e4f7eb9337aed57f3d258c615139046', class: {
                 'co-toggle-button-group': true,
                 [`co-toggle-button-group--${this.direction}`]: true,
                 'co-toggle-button-group--disabled': this.disabled,
-            }, role: "group" }, h("slot", { key: '1dd2415b3cf9b97886ffb23e491cc7b0847b3c3e' })));
+                'co-toggle-button-group--full': this.fullWidth,
+            }, role: "group" }, h("slot", { key: 'c6a683245689d3109bc6fcedacae4e2d54209909' })));
     }
     static get is() { return "co-toggle-button-group"; }
     static get encapsulation() { return "shadow"; }
@@ -174,6 +177,26 @@ export class CoToggleButtonGroup {
                 "reflect": false,
                 "attribute": "direction",
                 "defaultValue": "'row'"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stretch the group to fill its container; each button shares the width equally."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -14,6 +14,22 @@
   display: inline-block;
 }
 
+/* Full-width trigger (opt-in): lets the tooltip wrap a flex/grid child that
+   must fill its track — e.g. an ellipsised table cell — without the default
+   inline-block wrappers shrink-wrapping the content. */
+:host([block]) {
+  display: block;
+  width: 100%;
+  min-width: 0;
+}
+
+:host([block]) .co-tooltip,
+:host([block]) .co-tooltip__trigger {
+  display: block;
+  width: 100%;
+  min-width: 0;
+}
+
 /* ── Panel ──────────────────────────────────────────────── */
 .co-tooltip__panel {
   position: fixed;