@prolibu-suite/cobalt-core 0.6.0 → 0.8.0

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

@@ -730,7 +730,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   /* Figma Text Field parity (same box as co-input): solid page surface +
      Negro 25% border — tinted glass didn't read as editable on white. */
   background: var(--co-semantic-surface-page);
-  border: 1px solid var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
+  border: 1px solid var(--co-semantic-border-field);
   border-radius: var(--co-border-radius-xs);
   min-height: 40px;
   box-sizing: border-box;
@@ -738,6 +738,17 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
+/* ── Variant: flat (no border/background — reads as content) ──────────
+   Border-width/radius are left untouched (only the color goes transparent),
+   so padding/box size never shift between default and flat. Placed here
+   (before size variants and ahead of open/disabled/status below) so the
+   equal-specificity (0,2,0) state selectors win their cascade tie by
+   source order and keep showing through on top of flat, same as today. */
+.co-select--flat .co-select__trigger {
+  background: transparent;
+  border-color: transparent;
+}
+
 /* ── Multiple: selected values as removable chips (mirror co-ref-field) ── */
 .co-select__chips {
   flex: 1;

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

@@ -16,6 +16,11 @@ export class CoSelect {
         this.value = '';
         this.multiple = false;
         this.size = 'md';
+        /** Visual style. `flat` strips the trigger's border and background so it
+         *  reads as plain content instead of a boxed control — padding, label,
+         *  focus ring, disabled and status states are unaffected. `default` (the
+         *  standard bordered box) renders identically to before this prop existed. */
+        this.variant = 'default';
         /** Show a search box inside the dropdown to filter options client-side. */
         this.searchable = false;
         this.searchPlaceholder = 'Search…';
@@ -208,19 +213,20 @@ export class CoSelect {
         var _a;
         const selected = this.selectedValues;
         const options = this.filteredOptions;
-        return (h("div", { key: 'e52ada6dab00c28435576237271547db70c66b7a', class: {
+        return (h("div", { key: 'dda1b5f2f72939374a748224137586c8cc67cfcb', class: {
                 'co-select': true,
                 'co-select--open': this.isOpen,
                 'co-select--disabled': this.disabled,
                 [`co-select--${this.size}`]: true,
                 [`co-select--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '45c9c037da6523f7ffaea58f22363f239e1537d3', class: "co-select__labels" }, this.label && h("label", { key: '611dec09fd4637c09ca45e8fbb9a930bafaf8e15', class: "co-select__label" }, this.label, h(RequiredMark, { key: '75f302013790f9cf73da4db38a1c8635d8132a2e', required: this.required })), this.secondaryLabel && h("span", { key: '49404c2801028303e2bb825f1eb5e0d1854cf72a', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '2169518b1ed1944b4b483e19a72507865762764a', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '6d4984781b7b59ba09c77b24677e4911a3f0827b', slot: "trigger", class: "co-select__trigger", onClick: this.handleTriggerClick }, this.iconLeft && h("co-icon", { key: '8aa3d88126db4f7840b8080c46fe00a1e498dc7f', name: this.iconLeft, size: 16, class: "co-select__icon" }), ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.image) && (h("img", { key: '6cf713b9dbbd2923d6543a9903e998ee83185010', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
+                'co-select--flat': this.variant === 'flat',
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '5947cfc99c31904238dd3c86c4da4e42e7d94ba3', class: "co-select__labels" }, this.label && h("label", { key: 'fac1de54916c5b0701c10b3b618c41f8319c3a50', class: "co-select__label" }, this.label, h(RequiredMark, { key: '12f175c2dc67ef19c949fd517e38cd2c32b55084', required: this.required })), this.secondaryLabel && h("span", { key: 'a1a0fa82fc220952e4c8225e13fa8bbb2cbbe310', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '126cb2923ea3a5e3646697fd514050258c82bcaa', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '0b3dd75a9d0bb427bc8e5c8f17fe5c297855a899', slot: "trigger", class: "co-select__trigger", onClick: this.handleTriggerClick }, this.iconLeft && h("co-icon", { key: 'ad2fa6c5a6798314097d8e0715cddff8ce349586', name: this.iconLeft, size: 16, class: "co-select__icon" }), ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.image) && (h("img", { key: '36e7407bf782a1adb15cd41432bc4f36d5605094', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
             const opt = this.parsedOptions.find((o) => o.value === v);
             return (h("span", { class: "co-select__chip", key: v }, h("span", { class: "co-select__chip-label" }, opt ? opt.label : v), h("button", { class: "co-select__chip-remove", type: "button", tabIndex: -1, "aria-label": "Remove", onClick: (e) => {
                     e.stopPropagation();
                     this.handleOptionClick(v);
                 } }, h("co-icon", { name: "x", size: 12 }))));
-        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: 'b2e65bbec3c9f4eade2f250b8f446fc7719ac87f', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'ec6bef7248b519d032c831208a89d8fdabdd5e85', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '9e43c223117d1a30b3b24f1e64a4bf1ca2e003db', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: 'c622ad50ad8667ffa1094d9f53a467588963a720', class: "co-select__dropdown" }, this.isOpen && this.searchable && (h("div", { key: 'a20bb6f186b6c740da4f7f22392dd5369dd1cd15', class: "co-select__search" }, h("co-icon", { key: '02a8fbbcdc31b6924bc69255c692cb9c89210321', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: '5323a3037c9deb9855d65ec1d3246ba80b0811e2', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, onInput: this.handleSearchInput, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: 'b9d8a5f12e278bf5b8ff813b22e43f7e8ffee0fb', class: "co-select__empty" }, this.emptyText)), h("div", { key: '7f84a589795e9333e18926854ead79dc0fa3c6e1', class: "co-select__options", ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
+        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '3e97e8239b922280a21cd0fa53d37cbb15f313ba', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'da2171535417fed8e6a3422120c13f4f860354e3', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: 'e262edfb38a2bcd9771082c78af22ae3816a4472', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: 'd557662d3722a7a60e7b499fea0c47a11bb86737', class: "co-select__dropdown" }, this.isOpen && this.searchable && (h("div", { key: '7248c5417c929016e43eba3754ef74cb68e21d76', class: "co-select__search" }, h("co-icon", { key: 'a88c9f7da98cb112d33a7bc6f970f503d7fbfcdc', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: 'ed90bd495b6d92941af5f585d24ad9a4986757d9', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, onInput: this.handleSearchInput, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: '0b9a0a98cb298dd25f2f869f7c6d01ced4c030a8', class: "co-select__empty" }, this.emptyText)), h("div", { key: '4c0aa1f9e0f0f3fcede94decb037217466c80ca5', class: "co-select__options", ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
             const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
             return (h("div", { class: "co-select__virtual-spacer", style: { height: `${totalHeight}px`, position: 'relative' } }, h("div", { style: { position: 'absolute', top: `${offsetY}px`, left: '0', right: '0' } }, options.slice(startIdx, endIdx).map(opt => {
                 const isSelected = selected.includes(opt.value);
@@ -231,7 +237,7 @@ export class CoSelect {
                         'co-select__option--disabled': isDisabled,
                     }, onClick: () => !isDisabled && this.handleOptionClick(opt.value) }, opt.image ? (h("img", { class: "co-select__option-flag", src: opt.image, alt: "", loading: "lazy" })) : opt.icon ? (h("co-icon", { name: opt.icon, size: 20, class: "co-select__option-icon" })) : null, h("span", { class: "co-select__option-label" }, this.renderLabel(opt.label)), isSelected && h("co-icon", { name: "check", size: 16, class: "co-select__option-check" })));
             }))));
-        })()))), this.helperText && (h("div", { key: '2d65962fc0025c8bf2b3950328e0187a15c92cf8', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'c64d2b35fb10dbe5e25a9db78c7155f9cfdde33c', name: this.statusIcon, size: 14, weight: "fill", class: "co-select__helper-icon" }), h("span", { key: 'e49697063342fd79a85e101a821f944e781c9ef5', class: "co-select__helper-text" }, this.helperText)))));
+        })()))), this.helperText && (h("div", { key: 'b7f14d7e02dd3fe15be6c0f82b13df14edc0db60', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '80dbcc3fe68bbe9e89256fa7a3dae7d846280d33', name: this.statusIcon, size: 14, class: "co-select__helper-icon" }), h("span", { key: 'd2162ba7ac4c287720185295643ef1c3e2187c84', class: "co-select__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-select"; }
     static get encapsulation() { return "shadow"; }
@@ -529,6 +535,26 @@ export class CoSelect {
                 "attribute": "size",
                 "defaultValue": "'md'"
             },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'flat'",
+                    "resolved": "\"default\" | \"flat\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style. `flat` strips the trigger's border and background so it\nreads as plain content instead of a boxed control \u2014 padding, label,\nfocus ring, disabled and status states are unaffected. `default` (the\nstandard bordered box) renders identically to before this prop existed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
             "searchable": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -57,7 +57,7 @@ export class CoSeparator {
                 style['--co-separator-inset-end'] = '0px';
             }
         }
-        return (h("hr", { key: '79a2dd5c7bc7d37d1b9d77b03e72b6014228532b', class: {
+        return (h("hr", { key: 'fa1b1c05d8d5dfb77619036555d1d8a13590f33a', class: {
                 'co-separator': true,
                 'co-separator--vertical': this.vertical,
                 'co-separator--dark': this.dark,

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

@@ -10,10 +10,10 @@ export class CoSidebar {
         this.mode = 'full';
     }
     render() {
-        return (h("nav", { key: 'ea33fc3e60a0b3e7f5d5ad37569524aa46b1cb76', class: {
+        return (h("nav", { key: '3c0842a02ed5a1bf40b1c69263efceff221aa193', class: {
                 'co-sidebar': true,
                 [`co-sidebar--${this.mode}`]: true,
-            }, part: "sidebar" }, h("div", { key: '7feaf48ba91059cf5b046579b68adfbfb896850d', class: "co-sidebar__header", part: "header" }, h("slot", { key: '869fd6af70b09829ef05f15b2fdab554a978f1f8', name: "header" })), h("div", { key: '1bc044d4c70854b748e473041fea378ca1e3bd4f', class: "co-sidebar__body", part: "body" }, h("slot", { key: '0c0033d1af7a9dd902a61da6e97811e75214e9c5' })), h("div", { key: 'ef37cc7709b4d6afc420f1e3aaba13b6db2997e6', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: 'df1b6a08c313ed1818fcfd93a89f9c1cd709bccd', name: "footer" }))));
+            }, part: "sidebar" }, h("div", { key: '392937b5a15fe0c7f6abb78a717b34601c616bf4', class: "co-sidebar__header", part: "header" }, h("slot", { key: '28f3b073070f7dfa9e8b0a2260c911ef264e9c66', name: "header" })), h("div", { key: '622f3dd5167875811492a820e7fa9a12734a8247', class: "co-sidebar__body", part: "body" }, h("slot", { key: '10cec6e86c11203e167eed243aeb718ddeca4a98' })), h("div", { key: '55dc3013edc9c4e0c7531a52d15ddc7070722847', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: 'ec0bff733e378e23b6788b39b7cf18457b30c8a6', name: "footer" }))));
     }
     static get is() { return "co-sidebar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.js

@@ -144,6 +144,16 @@ const DEFAULT_ICON_MAP = {
     // Sales / Billing extras
     PaymentReceipts: 'hand-coins',
     Coupons: 'seal-percent',
+    // Events
+    EventManager: 'calendar-star',
+    EventProspects: 'users-four',
+    BusinessEvents: 'briefcase',
+    EventExpense: 'coins',
+    // Content
+    Content: 'folder-open',
+    Portals: 'app-window',
+    // Communication Center
+    CommunicationCenter: 'headset',
     // Integrations
     Integrations: 'plugs-connected',
     Mcp: 'plug',
@@ -486,10 +496,10 @@ export class CoSidebarNav {
         // `flyout-open` (min mode only) lets the CSS drop the host edge-fade mask
         // while a flyout is shown — a host mask would otherwise clip AND
         // mis-position the fixed flyout (mask makes the host a containing block).
-        h(Host, { key: '6bf3b6d16c6baef9af2b41ee38c0823961595132', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: '0264a43d3b83859b114001917c45e312fb702afe', class: {
+        h(Host, { key: '637707894cb777ff149c0516aff13786054e5393', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: '3d98909c4d5d0f17eb478fbd01603884d040f45f', class: {
                 'co-sidebar-nav': true,
                 'co-sidebar-nav--min': this.mode === 'min',
-            } }, this.renderSearch(), h("div", { key: '92437d9f022ec1a25adc04ea52b512dbb046bfc0', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
+            } }, this.renderSearch(), h("div", { key: 'd46c1e3b5e60ded1d232e7ccf8beb768d34ffe88', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
     }
     static get is() { return "co-sidebar-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class CoSkeleton {
         const style = { width: this.width };
         if (this.height)
             style.height = this.height;
-        return (h("div", { key: 'e62aec4781b1ef8b7b4fa2ba423cf9e94184646a', class: { 'co-skeleton': true, [`co-skeleton--${this.variant}`]: true }, part: "skeleton", style: style, "aria-hidden": "true" }));
+        return (h("div", { key: '233bdc2410690a010be28e57f71880f885edd711', class: { 'co-skeleton': true, [`co-skeleton--${this.variant}`]: true }, part: "skeleton", style: style, "aria-hidden": "true" }));
     }
     static get is() { return "co-skeleton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -72,12 +72,12 @@ export class CoSlider {
     }
     render() {
         const pct = this.percentage;
-        return (h("div", { key: 'a445c6c490d0a86aabdd1863ffca7fb5b6a83dcb', class: {
+        return (h("div", { key: '5b112a7975ab5dee865814fae75fe1d4ca8099ed', class: {
                 'co-slider': true,
                 'co-slider--disabled': this.disabled,
                 'co-slider--dragging': this.dragging,
                 [`co-slider--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: '604b51df33236b1401660a8b914035adbd339665', class: "co-slider__labels" }, h("div", { key: '3000bbc413d021ecdfbbb7efef5d8ec6d5924e6e', class: "co-slider__labels-left" }, this.label && h("label", { key: 'b9b02590dc634466834ac6229934cf3b78281fb6', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'c6acee956d73ae313b26196b87ee7ea1b8a2b134', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'aba76d883e5cf2631104cbaebb302002e1fe496a', class: "co-slider__value" }, this.value))), h("div", { key: '6535ee992fccc80988c77a33032846e8b5fe605f', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'c017699fc2fea78cb55cac01b4dce6c8c660d27a', class: "co-slider__track" }, h("div", { key: '7831a55b6e34544915e27fb2ed5dd84f92acb60e', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: 'e03368137b3e548e9a082f1f7f57b6e7a9b0df37', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: '8f8be1af979de772be4f7ebc69e9d3b6a7c2f58d', class: "co-slider__marks" }, h("span", { key: '2037b37b88f6a5734bf8845e5a562ca17d823ef0', class: "co-slider__mark" }, this.min), h("span", { key: 'db35ba88af0d4b13b4f47370360d0f041fbeb4b7', class: "co-slider__mark" }, this.max))), h("input", { key: '6a98de808328d9a72f4b95f9a64ad01e4003082e', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, "aria-label": this.label || 'Slider' }), this.helperText && (h("div", { key: '2d5f0d9ccf9d4e052ddbedb5080718f9e71f0605', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'afa9618ff8a3dfab3a55163e1fe500c58f0a4406', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '6e0c46b8561beca6a3dadf03d117a8526d31a860', class: "co-slider__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: '215199cccc16293c239ad543e19965de8016bc49', class: "co-slider__labels" }, h("div", { key: '0c72aed8099eb04a7be3fd978643ff1807b450b7', class: "co-slider__labels-left" }, this.label && h("label", { key: '19addd8933e918b73bb12e8c5e600d95f082f755', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'e7128961c9aea173ff13d81b03062ad2cfc38084', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'f82b30d226e562521a5564d4348a03ccc978715b', class: "co-slider__value" }, this.value))), h("div", { key: '0a42dc4519dd991b332bc62eb8ff59c44acbdd79', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'b85ba951d913ef68ee454c2f70a8e5517c4262bf', class: "co-slider__track" }, h("div", { key: 'f06c1d1d9b602c078fcd6cfb3ab1f486b9ae0c63', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: 'be52d64df84ef2620ebdc11b75793a804b3c7a4e', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: 'd0bf46d74c1d9cffc35db3af25bd39de8c041899', class: "co-slider__marks" }, h("span", { key: '779c25fb6669e0e3ce8c73d2a59686204a19b6fb', class: "co-slider__mark" }, this.min), h("span", { key: 'd61b61a373332bf22fc524d879c595047782c585', class: "co-slider__mark" }, this.max))), h("input", { key: '426f58b9210369dbd0c976555965ac62d20ce198', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, "aria-label": this.label || 'Slider' }), this.helperText && (h("div", { key: '72de59ff964142aa3e63f1c1da203d6ae5a015b4', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '07c8dacb49fcb50b57014ae16a4f0220757064c8', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '64464d85a972b1bc523d5f28f2f8ac82f194fb8a', class: "co-slider__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,16 +29,16 @@ export class CoSwitch {
     render() {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = !!this.helperText;
-        return (h("div", { key: 'aa2690f72e8a64fcf835a58ed7b5a578e93dd6fa', class: {
+        return (h("div", { key: '2d54e4a245ff8e7bac33f720c0bf22b16e2f2863', class: {
                 'co-switch-wrapper': true,
                 'co-switch-wrapper--disabled': this.disabled,
                 [`co-switch-wrapper--${this.status}`]: this.status !== 'default',
-            } }, h("div", { key: 'fda38eadee3187b559ab343acd80de17d6f88da1', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '11c63216f459295d2858530f9d879913d205417d', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            } }, h("div", { key: 'a8c0d9067596dc7ba2cde7db13936ac98f4a308f', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '920210333625a69b9aa505a50cfd147ad7f71357', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-switch': true,
                 'co-switch--on': this.checked,
                 'co-switch--off': !this.checked,
                 'co-switch--disabled': this.disabled,
-            }, disabled: this.disabled, part: "track" }, h("span", { key: '6e6060ee3128697653bb11335e7ebd82a37d2960', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '10084cce0ded48f6188fe5bbba1e2058f2d6962c', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '87665730e8cf05f481f4835594fd912f4499b9c7', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: '0d121097ee0c5ca14f150a93a9f021ddf883667c', required: this.required })), this.secondaryLabel && (h("span", { key: '0bc01f629b4b62ba7c86e2ff229b127a3ac45537', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '7447890f8f651445917e1b59166e827e1a0a52ca', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '5759ca2e6b013743ce263a4b002214c03d8a202c', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '359a87a5865fde6d9db953e6e4554a7b5ae5cb5e', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
+            }, disabled: this.disabled, part: "track" }, h("span", { key: 'b9bafc85e62aa24ed0243359d53210f31d984e13', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '38ca77e6f9bf4c2b9e911fd1f98588df0b273320', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: 'd25c10a12a6e3bd7dd49ee6e25d7a4e710622604', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: 'b6e434fe0dcae3ed7a23aa2a3c4686783debc736', required: this.required })), this.secondaryLabel && (h("span", { key: 'da01d07fc4a7519fad7e5c6d8d283e4dfd72763a', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '6d518eb23a4459ad5853159d4e33632d758f419e', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '96772daea7dc0b3c3304f4394f55856bd74b2fc6', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: 'de1d5474326eb79396cad519faf48a3595adf755', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,13 +21,13 @@ export class CoTab {
     }
     render() {
         const iconSize = this.variant === 'underline' ? 16 : this.size === 'large' ? 18 : 14;
-        return (h("button", { key: '77fc8443dbdc5fe327ea28de6e926c4438e96cca', class: {
+        return (h("button", { key: 'b8673b45961dbde0d1227cc11c5901c3ac835a5f', class: {
                 'co-tab': true,
                 [`co-tab--${this.size}`]: true,
                 [`co-tab--${this.variant}`]: true,
                 'co-tab--selected': this.selected,
                 'co-tab--disabled': this.disabled,
-            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: '6d209028484dc6726f48cf1c5919cdeb59dac33a', name: this.iconLeft, size: iconSize })), h("span", { key: 'ee7cbdaaa22dde0b6ed599a1c9d20909f639d3db' }, this.label), this.badge && (h("span", { key: 'a1099b9d141f70d70e736853da2261fe3a125964', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: '56a8917e4bbb27411f1bed6ef7b0a11e8c8b75b7', name: this.iconRight, size: iconSize }))));
+            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: '56c288e6ef62ddbae146e433e7cbd5c26ac59671', name: this.iconLeft, size: iconSize })), h("span", { key: '0960be9c2f886e6997d34e430c80a5c7ffad15d5' }, this.label), this.badge && (h("span", { key: '38c8c970f55ce333b950746d65e166bddc6877e4', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: '70b527b463734e8181287cf1c6f0b499e9b3825c', name: this.iconRight, size: iconSize }))));
     }
     static get is() { return "co-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-tab-group/co-tab-group.css

@@ -1,11 +1,36 @@
 :host {
   display: flex;
+  /* El strip nunca fuerza el ancho del layout: clipea y scrollea adentro. */
+  max-width: 100%;
+  min-width: 0;
 }
 
 .co-tab-group {
   display: flex;
   align-items: center;
   gap: var(--co-spacing-sm2);
+  /* Overflow: el track clipea y el scroll vive DENTRO (trackpad nativo; la
+     rueda del mouse se traduce en el onWheel del componente). Scrollbar
+     oculta a propósito — acá `scrollbar-width: none` es correcto (queremos
+     CERO scrollbar, no estilarla). */
+  max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+  /* Al clickear un tab parcialmente fuera de vista, el navegador lo mete en
+     vista (focus scroll). Con smooth ese reajuste es un deslizamiento suave en
+     vez de un salto brusco. NO afecta la rueda: el onWheel asigna scrollLeft
+     directo, que es instantáneo por spec (scroll-behavior solo aplica a las
+     scrolling APIs y al focus/navegación del user-agent). */
+  scroll-behavior: smooth;
+}
+
+.co-tab-group::-webkit-scrollbar {
+  display: none;
+}
+
+/* Los tabs no se comprimen: el desborde se resuelve scrolleando, no encogiendo. */
+::slotted(co-tab) {
+  flex-shrink: 0;
 }
 
 /* ─── Underline variant ─────────────────────────────────────── */
@@ -17,12 +42,15 @@
 }
 
 /* ─── Segmented variant ─────────────────────────────────────── */
-/* Gray track + white active pill (Figma segmented control). The
-   track hugs its content; each co-tab styles its own pill. */
+/* Gray track + white active pill (Figma segmented control, node
+   3500:93295). The track hugs its content; each co-tab styles its
+   own pill. The subtle bottom border is part of the track itself —
+   hosts must not add their own separator under it. */
 .co-tab-group--segmented {
   display: inline-flex;
-  gap: 2px;
-  padding: 3px;
+  gap: var(--co-spacing-xxs, 2px);
+  padding: var(--co-spacing-sm, 6px);
   background: var(--co-color-gray-100, #f6f6f6);
+  border-bottom: 1px solid var(--co-color-opacity-negro-4, rgba(31, 28, 27, 0.04));
   border-radius: var(--co-border-radius-sm, 12px);
 }

package/dist/collection/components/co-tab-group/co-tab-group.js

@@ -9,6 +9,22 @@ export class CoTabGroup {
         this.onSlotChange = () => {
             this.syncTabs();
         };
+        /** Wheel → horizontal scroll cuando el track desborda (los tabs clipean con
+            `overflow-x`, ver CSS): la rueda vertical del mouse scrollea el strip.
+            Solo consume el evento si realmente puede desplazarse en esa dirección —
+            en los extremos deja pasar el scroll a la página. */
+        this.onWheel = (e) => {
+            const track = e.currentTarget;
+            const max = track.scrollWidth - track.clientWidth;
+            if (max <= 0)
+                return;
+            const delta = Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX;
+            const next = Math.max(0, Math.min(max, track.scrollLeft + delta));
+            if (next === track.scrollLeft)
+                return;
+            track.scrollLeft = next;
+            e.preventDefault();
+        };
     }
     onTabSelect(e) {
         e.stopPropagation();
@@ -33,10 +49,10 @@ export class CoTabGroup {
         });
     }
     render() {
-        return (h("div", { key: 'b0e4e872934528c7dbce3bf1c0329b1efb0db887', class: {
+        return (h("div", { key: 'cdc42835ffb5727ceb6de152ccf91064ebfc9cf9', class: {
                 'co-tab-group': true,
                 [`co-tab-group--${this.variant}`]: true,
-            }, role: "tablist", part: "tab-group" }, h("slot", { key: '407d99ce75badc9bfeecaf8506155ef346681489', onSlotchange: this.onSlotChange })));
+            }, role: "tablist", part: "tab-group", onWheel: this.onWheel }, h("slot", { key: '2815afe02e2e34378cd33f0d6a21e2fe658eac53', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "co-tab-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,11 +62,11 @@
   display: flex;
   align-items: flex-start;
   gap: var(--co-spacing-sm2);
-  padding: var(--co-spacing-xs) var(--co-spacing-md);
-  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);
+  padding: var(--co-spacing-sm2) var(--co-spacing-md);
+  /* Figma Text Field: fondo sólido de página + borde Negro 25% (los campos
+     tenues negro-8 + glass no leen como editables sobre el drawer blanco). */
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-semantic-border-field);
   border-radius: var(--co-border-radius-xs);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   min-height: 40px;
@@ -83,8 +83,12 @@
   align-items: center;
   gap: var(--co-spacing-sm);
   min-width: 0;
-  min-height: 28px;
-  padding: var(--co-spacing-xxs) 0;
+  /* 22px de contenido + la padding vertical del field + 1px de bordes = la caja
+     md de 40px; los 28px + xxs de antes empujaban el campo a 50px, fuera de paso
+     con el resto. Los chips conservan su alto propio (flex los deja crecer).
+     Mismo criterio que co-input. */
+  min-height: 22px;
+  padding: 0;
 }
 
 /* ── Size variants (mirror co-input: s 28 / sm 32 / md 40 / lg 48).
@@ -110,15 +114,6 @@
   font-size: var(--co-font-size-16);
 }
 
-/* The inner wrapper's own min-height+padding (28px+4px) would otherwise
-   overshoot the field's min-height — flatten it for s/sm (same trick as
-   co-date-field). */
-.co-tags-field--s .co-tags-field__input-wrapper,
-.co-tags-field--sm .co-tags-field__input-wrapper {
-  min-height: 0;
-  padding: 0;
-}
-
 /* Figma "Tipo=Chips" (node 780:26592) — same chip spec as co-ref-field. */
 .co-tags-field__chip {
   display: inline-flex;
@@ -183,7 +178,7 @@
   border: 1px solid var(--co-semantic-border-focus);
   border-radius: var(--co-border-radius-xxs);
   outline: none;
-  background: var(--co-semantic-surface-primary);
+  background: var(--co-semantic-surface-page);
   font-family: inherit;
   font-size: var(--co-font-size-12);
   line-height: 1;
@@ -304,7 +299,3 @@
   grid-column: 2;
   min-width: 0;
 }
-
-@supports not (background: color-mix(in srgb, red, transparent)) {
-  .co-tags-field__field { background: var(--co-semantic-surface-secondary); }
-}

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

@@ -186,14 +186,14 @@ export class CoTagsField {
         const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
         const helper = this.isInvalid ? this.errorMessage : this.helperText;
         const showInput = !this.readonly && !this.atCapacity;
-        return (h("div", { key: '45bafe056e1e22295fca85e4117688b3689f6531', class: {
+        return (h("div", { key: '47f84ca4f1ca42b71bb652f557e5a8718ab5a463', class: {
                 'co-tags-field': true,
                 'co-tags-field--disabled': this.disabled,
                 'co-tags-field--focused': this.hasFocus,
                 'co-tags-field--filled': this.hasValue,
                 'co-tags-field--invalid': this.isInvalid,
                 [`co-tags-field--${this.size}`]: true,
-            }, part: "wrapper" }, this.label && (h("div", { key: '74f22995661cc3617ec781c002e9dd0d14be1d08', class: "co-tags-field__labels" }, h("label", { key: '90d1e9356d0e2e308b74be32fc508dcfd0d1049c', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '0cdef38368b8770ccf6f202f947a9b8797a0de2d', required: this.required })))), h("div", { key: '9be586d54135a42590ccd1114aa0024fb0a4cb89', class: "co-tags-field__field-row" }, h("div", { key: '61024e618e9140aa6e8ca14dc9b0d26dcf0192ed', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: 'bcac0080c15699779e844632f52969ed3b97e669', class: "co-tags-field__input-wrapper" }, tags.map((tag, index) => this.editingIndex === index ? (h("input", { key: `edit-${index}`, ref: (el) => (this.editEl = el), class: "co-tags-field__edit", type: "text", value: this.editingDraft, onInput: (e) => (this.editingDraft = e.target.value), onKeyDown: this.handleEditKeyDown, onBlur: () => this.saveEdit() })) : (
+            }, part: "wrapper" }, this.label && (h("div", { key: '718b221eab4b3e7ed2397bde6e13a3f5f8c5f703', class: "co-tags-field__labels" }, h("label", { key: 'e3479f790451e5d2e7d89977f88af29db2bd3269', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '5a544537e8a663a53bc44d3333788e1fa1270112', required: this.required })))), h("div", { key: '0174ad7bb299efa97d98450de80c4c8dd9378f35', class: "co-tags-field__field-row" }, h("div", { key: '25b80d7f435195f9c789f4eb8553d3c326984b31', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: 'b4eb779b42ffc118e584d36ff6896de6e39148bc', class: "co-tags-field__input-wrapper" }, tags.map((tag, index) => this.editingIndex === index ? (h("input", { key: `edit-${index}`, ref: (el) => (this.editEl = el), class: "co-tags-field__edit", type: "text", value: this.editingDraft, onInput: (e) => (this.editingDraft = e.target.value), onKeyDown: this.handleEditKeyDown, onBlur: () => this.saveEdit() })) : (
         // Shared field-chip (utils/fieldChip.tsx) per the Figma
         // "Tipo=Chips" spec — same look as co-ref-field's chips.
         h(FieldChip, { key: `chip-${index}-${tag}`, baseClass: "co-tags-field__chip", label: tag, title: tag, onChipDblClick: () => this.startEdit(index), onRemove: !this.disabled && !this.readonly
@@ -201,13 +201,13 @@ export class CoTagsField {
                     e.stopPropagation();
                     this.removeTag(index);
                 }
-                : undefined }))), showInput && (h("input", { key: 'a72e551df5531ccbc08db60c9f2c87dfd4d4b554', ref: (el) => (this.inputEl = el), class: "co-tags-field__native", type: "text", autocomplete: "off", value: this.draft, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, required: this.required && tags.length === 0, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'Tags' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }))), this.clearable && (h("button", { key: 'c18186dba9f0f07db60885885734fb924c8deeb5', class: {
+                : undefined }))), showInput && (h("input", { key: '35e2946e38d6b3e69e1a1cdad49ade9999ad1c48', ref: (el) => (this.inputEl = el), class: "co-tags-field__native", type: "text", autocomplete: "off", value: this.draft, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, required: this.required && tags.length === 0, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'Tags' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }))), this.clearable && (h("button", { key: '1be954210a0d61e36cf987d12127594119b40095', class: {
                 'co-tags-field__clear': true,
                 'co-tags-field__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClearAll, "aria-label": "Clear all", part: "clear" }, h("co-icon", { key: '6831ec45b34a29da992291838bcd21bec82f9bc3', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'ec43dc82ad02fe07a7dde183355c824275d64c7e', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: '8d1a219b0536746e0d57a31b9124f203872e9360', class: {
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClearAll, "aria-label": "Clear all", part: "clear" }, h("co-icon", { key: 'c1a4975e339115a6a2fc933a2d73a3d5ff0b4653', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'bd3e4bf286efe97939e9933d3b4c3bda0909f54f', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: 'e32c923da1928cfa6bc1bf041e257e41809df047', class: {
                 'co-tags-field__helper': true,
                 'co-tags-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'ceb06b309d8614eefaa81fd92a028e6fb69c8302', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '96134b037eb376bc20aab31b627b8cf579f76f8f', class: "co-tags-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '8ab523ee51f9f3525985d6f7ec5b0cede3dd1d61', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '24641df824075583a1ece04e202b6f419a99c54d', class: "co-tags-field__helper-text" }, helper)))));
     }
     static get is() { return "co-tags-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,16 +66,30 @@
 .co-textarea__field {
   position: relative;
   display: flex;
-  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);
+  /* Figma Text Field: fondo sólido de página + borde Negro 25% (los campos
+     tenues negro-8 + glass no leen como editables sobre el drawer blanco). */
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-semantic-border-field);
   border-radius: var(--co-border-radius-xs);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   box-sizing: border-box;
   overflow: hidden;
 }
 
+/* ---- Variant: flat (no border/background — reads as content) ----
+   Border-width/radius are left untouched (only the color goes transparent),
+   so padding/box size never shift between default and flat. Placed here
+   (before size variants and ahead of the States section below) so the
+   equal-specificity (0,2,0) state selectors — focused/disabled/error/
+   success/warning/over-limit — win their cascade tie by source order and
+   keep showing through on top of flat, same as they do today. */
+.co-textarea--flat .co-textarea__field {
+  background: transparent;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  border-color: transparent;
+}
+
 .co-textarea__native {
   width: 100%;
   border: none;
@@ -280,7 +294,3 @@
   grid-column: 2;
   min-width: 0;
 }
-
-@supports not (background: color-mix(in srgb, red, transparent)) {
-  .co-textarea__field { background: var(--co-semantic-surface-secondary); }
-}

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

@@ -33,6 +33,11 @@ export class CoTextarea {
         /** Field size (mirrors co-input paddings/font: s / sm / md / lg).
          *  Vertical extent still comes from `rows`. */
         this.size = 'md';
+        /** Visual style. `flat` strips the field's border and background so it
+         *  reads as plain content instead of a boxed textarea — padding, label,
+         *  focus ring, disabled and status states are unaffected. `default` (the
+         *  standard bordered box) renders identically to before this prop existed. */
+        this.variant = 'default';
         /** Show clear button when textarea has value */
         this.clearable = false;
         /** Resize behavior of the textarea */
@@ -71,7 +76,7 @@ export class CoTextarea {
         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: 'cb418f5b90a1a22cdd5661d923fec6b5111d4f2f', class: {
+        return (h("div", { key: '83cddaf39334bbd1ee8c3c2804bf879a1678be31', class: {
                 'co-textarea': true,
                 'co-textarea--disabled': this.disabled,
                 'co-textarea--focused': this.hasFocus,
@@ -79,13 +84,14 @@ export class CoTextarea {
                 'co-textarea--over-limit': isOverLimit,
                 [`co-textarea--${this.size}`]: true,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '400c4187c7c6614e4e843216b466a45fdbb49d2b', class: "co-textarea__labels" }, this.label && (h("label", { key: 'a1e0e0fac2cd0c8645a89aba1367881e6f907005', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: '07870f276a4d35f35072dab6c8ee726079c34be5', required: this.required }))), this.secondaryLabel && (h("span", { key: 'ddcfffd9e502787acc434e4dd78abac7193b19cd', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: '4a315f9667d81b1aed6be91ed08095666bc69c37', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'b0c69a6c064a04c7f487b8d48897f0882d15a8ad', ref: (el) => (this.textareaEl = el), class: {
+                'co-textarea--flat': this.variant === 'flat',
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '78e5e03b10e3d19e565fc5a617efa42f4a0102c3', class: "co-textarea__labels" }, this.label && (h("label", { key: '65bde2a35c48be79ae04aa0d2b040970cdad7b8c', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: 'd46b4a35d8daeff39cdaaed33c9d4b38071d0663', required: this.required }))), this.secondaryLabel && (h("span", { key: '526f358820bedf0184f9353d0cad8fe54afb1557', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'f9133145a9a50f963bafb10546e6f46fa3dbfedf', class: "co-textarea__field", part: "field" }, h("textarea", { key: '83e91e506c84939b4c4ff06da316c81e38540ea1', 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: 'b832c62e32fe0bf0e2343c71cec9755ecb68537c', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'e0d6673bb0d29ddabb83ebff4bce9dcb1dce5408', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: '2f30b4a7923e78ee4c60fd40bbf891607978e961', class: "co-textarea__footer" }, this.helperText && (h("div", { key: '7de370940c99f30fad34e6b40911f190b38eb9b5', class: {
+            }, 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: '5fd7d570f0fa628fd69739b1245892791073a04a', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'aa8d7ec05dae2ffc62caa62261d7a26fb0c74f72', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: 'bf78c1beb45928d0494699bd4fa108c9941d4011', class: "co-textarea__footer" }, this.helperText && (h("div", { key: '6a607e88c55a7c370e319a6972be00ca92beab53', class: {
                 'co-textarea__helper': true,
                 'co-textarea__helper--error': this.status === 'error',
-            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '57e658fc2c65c787f11eaf10a56ac25358467710', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '53f33d1e87ac75b87019843b8ffbd56e15fd998a', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: '80f731565f9fb3d99539ee06bc6bd6285736dbde', class: {
+            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: 'd5b027fb53b600f7a527ffddb3a819463b360255', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '9e180c6e956efa75558dc1d3027f28760d3d39d4', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: 'cc32a43d1e804910dbb948e9dd004fe36d428a1e', class: {
                 'co-textarea__counter': true,
                 'co-textarea__counter--over': isOverLimit,
             }, part: "counter" }, this.charCount, "/", this.maxLength))))));
@@ -379,6 +385,26 @@ export class CoTextarea {
                 "attribute": "size",
                 "defaultValue": "'md'"
             },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'flat'",
+                    "resolved": "\"default\" | \"flat\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style. `flat` strips the field's border and background so it\nreads as plain content instead of a boxed textarea \u2014 padding, label,\nfocus ring, disabled and status states are unaffected. `default` (the\nstandard bordered box) renders identically to before this prop existed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
             "clearable": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -18,13 +18,13 @@ export class CoToggleButton {
     render() {
         const iconSize = this.variant === 'track' ? 18 : this.size === 'l' ? 20 : this.size === 'xs' ? 14 : 16;
         const iconWeight = this.selected && this.selectedIconWeight ? this.selectedIconWeight : undefined;
-        return (h("button", { key: '0016c8ec4c9f9e408c818e725b1d10159d53168c', class: {
+        return (h("button", { key: '6beac8a34985f6a26940ec47f311d39f4d9c9638', 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: 'b301e2330b92fbd0347b89d0d453b1fbfa4091aa', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: '8917418e796a53d8e269e1ebb69f293975a140c7', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: '4fc74790fba1e7ec56f489fbda65d21b0048de26', name: this.iconRight, size: iconSize, weight: iconWeight })));
+            }, type: "button", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.handleClick }, h("slot", { key: 'fdf638c8ef852a470dd3a0adeae95ed4c2edb859', name: "leading" }), this.iconLeft && h("co-icon", { key: '1d3e827014602f30963ecd6d052483d94fa7ee21', name: this.iconLeft, size: iconSize, weight: iconWeight }), this.label && h("span", { key: 'dddc3ca99579d68c8db7239e161f556e92ab2061', class: "co-toggle-button__label" }, this.label), this.iconRight && h("co-icon", { key: 'bc6f81715ab9396e9d47e22ccb32f84d3f0203c8', name: this.iconRight, size: iconSize, weight: iconWeight })));
     }
     static get is() { return "co-toggle-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,13 +65,13 @@ export class CoToggleButtonGroup {
         });
     }
     render() {
-        return (h("div", { key: 'e1d84ee3741f5f10700b7e99d90081a92de7b2c5', class: {
+        return (h("div", { key: 'd0fbc22ed60159af08811ea30833ca32c5c6ec0e', class: {
                 'co-toggle-button-group': true,
                 [`co-toggle-button-group--${this.direction}`]: true,
                 [`co-toggle-button-group--${this.variant}`]: true,
                 'co-toggle-button-group--disabled': this.disabled,
                 'co-toggle-button-group--full': this.fullWidth,
-            }, role: "group" }, h("slot", { key: '4f6f8e56d637ffccab5b1efff3df0f0314a75615' })));
+            }, role: "group" }, h("slot", { key: '382d16e587f014f0fde656c1b82e095eda0e06ee' })));
     }
     static get is() { return "co-toggle-button-group"; }
     static get encapsulation() { return "shadow"; }