@prolibu-suite/cobalt-core 0.4.0 → 0.6.0

package/dist/collection/components/co-rich-text-editor/co-rich-text-editor.css

@@ -770,7 +770,7 @@ co-rich-text-editor {
 }
 
 .co-rte-bubble__link-unlink {
-  background: var(--co-semantic-surface-error, #ef4444);
+  background: var(--co-semantic-status-error, #aa2e1b);
 }
 
 /* ── Draggable panels (font size, weight, line height, letter spacing, bg color) ── */

package/dist/collection/components/co-rich-text-editor/co-rich-text-editor.js

@@ -2021,14 +2021,14 @@ export class CoRichTextEditor {
     render() {
         const showToolbar = this.resolvedToolbar !== 'none' && !this.readonly && !this.disabled;
         const showCount = this.showCharacterCount || this.maxLength != null;
-        return (h("div", { key: '1ba222ae8d8e46a45619685771253cdd3d1befd3', class: {
+        return (h("div", { key: 'a863f70f90bd46ee2306d175d55a519e7e659693', class: {
                 'co-rich-text-editor': true,
                 'co-rich-text-editor--focused': this.hasFocus,
                 'co-rich-text-editor--disabled': this.disabled,
                 'co-rich-text-editor--readonly': this.readonly,
                 'co-rich-text-editor--loading': !this.ready,
                 [`co-rich-text-editor--${this.status}`]: this.status !== 'default',
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '3bb65d173c680c2b8581aeeacdf9e94045378c43', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: 'a8c743e49b37c486e80fe0227bf1d7954ade234f', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: 'a0d33d71573bd06d4c2b568973144ddd22424362', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: '39d4776d45ca2a616b64c9aab1eb15a99ae916ce', class: "co-rich-text-editor__frame" }, showToolbar && (h("co-rich-text-toolbar", { key: '80844f77a0a1aadd7a9b109110e99d218c98542c', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, disabled: this.disabled || this.readonly, locale: this.locale, ref: (el) => (this.toolbarEl = el) })), h("div", { key: 'f60519b8253b6070f6ac0f0a292e0402075f401a', class: "co-rich-text-editor__box" }, h("div", { key: '858aaa1ee60e6ed5142c72831d4b5f321b77132e', class: "co-rte-content", part: "content", role: "textbox", "aria-multiline": "true", "aria-label": this.label, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.status === 'error' ? 'true' : undefined, ref: (el) => (this.contentEl = el) }))), h("div", { key: '320d390eccc2fd2381c26568241e2ebb335a6aa2', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: 'de5d9e8605e3a8edd037e9e49884a55f641b4585', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: 'ef7d3a8894a084e09e692839800bf8f1eb9c9b3f', name: this.helperIcon, size: 14 }), h("span", { key: 'a914b24fce4d891f7a7936051e04fa2f9dae6d62' }, this.helperText))), showCount && (h("span", { key: 'f9d197782e4e983b72f7432dd9b2fb8324f45a0b', class: "co-rich-text-editor__count", ref: (el) => (this.charCountEl = el) }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '7e17033f81cbb694f2010d709f82b5e9889a3c01', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: '9e2950cee1b79964f8628a6731bf5b779aaab325', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: 'e9fbd5143e20e61509691f86c53aabff6c3bc7a4', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'd8909018c066c1572c2fd28a8c1d5a658f342c02', class: "co-rich-text-editor__frame" }, showToolbar && (h("co-rich-text-toolbar", { key: '06907acfc9c6187864f79bed5364aae5cb0fb5d8', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, disabled: this.disabled || this.readonly, locale: this.locale, ref: (el) => (this.toolbarEl = el) })), h("div", { key: 'c173744e164a4c2591baf2a13076c253aeadab64', class: "co-rich-text-editor__box" }, h("div", { key: '62d96e73d679a9dda50dfba670ae42bf4a2cde96', class: "co-rte-content", part: "content", role: "textbox", "aria-multiline": "true", "aria-label": this.label, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.status === 'error' ? 'true' : undefined, ref: (el) => (this.contentEl = el) }))), h("div", { key: 'c0175bc7b0259c5d583d64394bb217f7cdc9b412', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '909b30e6b36cfda26573d5b3c653158904d3c0c2', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: 'e6c5c07ca23c2aee967bad06ce91c442cdee4d9b', name: this.helperIcon, size: 14 }), h("span", { key: 'e4e74012dea722d0aa31d79e4a444d8c5b004c7c' }, this.helperText))), showCount && (h("span", { key: 'ce85002412ace110ea9cf0191d4e5e072a21af72', class: "co-rich-text-editor__count", ref: (el) => (this.charCountEl = el) }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
     }
     static get is() { return "co-rich-text-editor"; }
     static get originalStyleUrls() {

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

@@ -13,11 +13,11 @@ export class CoRow {
         this.size = 'sm';
     }
     render() {
-        return (h("div", { key: '47d99fa50bacbc5b2651f7a672e4ff7106959622', class: {
+        return (h("div", { key: '3b77dcfd8a0d6fccdb5932e2dd316ab1166e13e9', class: {
                 'co-row': true,
                 [`co-row--${this.position}`]: true,
                 [`co-row--${this.size}`]: true,
-            }, part: "row" }, h("div", { key: 'ccae8616bc848d06b30b784f273c68df7d307a5b', class: "co-row__prefix" }, h("slot", { key: '3aa5343c6343398b77d55dffe79e7c3d04d4dc53', name: "prefix" })), h("div", { key: '3497f2ad38a0b3c016a3f027dec7386ffc9f478e', class: "co-row__content" }, h("slot", { key: '46f6c4b01998a726ac92b23c6ff2eb9c1cd548b8' })), h("div", { key: '50dbfe45d87abb540ee94d49ec5e3ff600c68aba', class: "co-row__suffix" }, h("slot", { key: '207dbcf5ce290c8dbd73768f7dbceba897b16114', name: "suffix" }))));
+            }, part: "row" }, h("div", { key: '0f0112ad8cf977587af1cc756ec822ca5d8c81fc', class: "co-row__prefix" }, h("slot", { key: 'd6ac18b41dca0597dba80f5d49554471832b6c4f', name: "prefix" })), h("div", { key: '8c1de305f4268cc8d10f6ba1203750bd96061dc3', class: "co-row__content" }, h("slot", { key: 'fe882bbb96faae81377c4613024a74762f84c113' })), h("div", { key: '0bb2646c6f0d4f52573021b76e3a950ddca11056', class: "co-row__suffix" }, h("slot", { key: '3518a826a39d3491a24067a9be3a5284e6a184d4', name: "suffix" }))));
     }
     static get is() { return "co-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-segmented-bar/co-segmented-bar.js

@@ -43,13 +43,13 @@ export class CoSegmentedBar {
     render() {
         const segments = this.parsedSegments;
         const total = this.total > 0 ? this.total : 100;
-        return (h("div", { key: 'a21a02b0177c838b376ffc116b7798463f51e247', class: "co-segmented-bar", part: "segmented-bar" }, h("div", { key: 'c85455d5178013b07aee2650d994e8a49fc1692d', class: {
+        return (h("div", { key: '3f4538a2c701799531b586e0b039fb952e5d11ba', class: "co-segmented-bar", part: "segmented-bar" }, h("div", { key: '45c3baf87d073835bc9954ba5ab9c847e5da7fa8', class: {
                 'co-segmented-bar__track': true,
                 [`co-segmented-bar__track--radius-${this.radius}`]: true,
             }, part: "track", style: { height: `${this.thickness}px`, background: this.trackColor } }, segments.map((seg, i) => (h("span", { key: i, class: "co-segmented-bar__segment", part: "segment", title: seg.label, style: {
                 width: `${(seg.value / total) * 100}%`,
                 background: seg.color,
-            } })))), h("slot", { key: 'aaf981fc73735cb1a63ad9e169145d1cbd36113d', name: "legend" })));
+            } })))), h("slot", { key: 'a6e865f76ff83ff47eb459721c1958f0b431f02d', name: "legend" })));
     }
     static get is() { return "co-segmented-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -727,10 +727,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   align-items: center;
   gap: var(--co-spacing-sm2);
   padding: var(--co-spacing-sm2) 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);
+  /* 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-radius: var(--co-border-radius-xs);
   min-height: 40px;
   box-sizing: border-box;
@@ -1066,6 +1066,3 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   content: var(--co-field-required-text, ' (required)');
 }
 
-@supports not (background: color-mix(in srgb, red, transparent)) {
-  .co-select__trigger { background: var(--co-semantic-surface-secondary); }
-}

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

@@ -208,19 +208,19 @@ export class CoSelect {
         var _a;
         const selected = this.selectedValues;
         const options = this.filteredOptions;
-        return (h("div", { key: 'f7280ac6fc30ec168e882f1332a3ec780b3d2965', class: {
+        return (h("div", { key: 'e52ada6dab00c28435576237271547db70c66b7a', 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: 'e2b2cc9276643e836764f7424e3982d5e3780b7f', class: "co-select__labels" }, this.label && h("label", { key: 'd303928cd5954ea352492ab63bc376d8ea4df907', class: "co-select__label" }, this.label, h(RequiredMark, { key: 'ccdd02cd727fa9142b67c3d8f190ae19d1325e8e', required: this.required })), this.secondaryLabel && h("span", { key: '8ff1d4d2b12f4542c8ec6e91648d1f8a06b3b57e', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '483b22c6efc32bc1411ff96a0a7a41a27452142b', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'bff3edc587f705e984dcb5d79c9a70d889ff427b', slot: "trigger", class: "co-select__trigger", onClick: this.handleTriggerClick }, this.iconLeft && h("co-icon", { key: 'ea34b3d34e7bd4d9c6e52971c1dd684383250694', name: this.iconLeft, size: 16, class: "co-select__icon" }), ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.image) && (h("img", { key: '42e3afef657778c834040fb951038e47e7748a4b', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
+            } }, (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) => {
             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: '583671b8023e996e4a3bf28b7db4743069580aba', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'a4b6cb55572b49f6e7d381dfb5d38fb992d25b20', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: 'bee58119202ae396f40c9a5633e33c5a3e8f85e6', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: 'afb9a8e4042df0b8a42fbf341309eb60726214b1', class: "co-select__dropdown" }, this.isOpen && this.searchable && (h("div", { key: '6dee2f6f654ea468ac5ef54d22f08a32adeced33', class: "co-select__search" }, h("co-icon", { key: 'a4c2bf7a4575952a7d7df091de68e4d0d0871ae3', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: '5b023ec13d6445bcec51d6ee0a252c5c8e80e3fd', 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: '07a4cb2040c463cb214e851fac20855d702a1968', class: "co-select__empty" }, this.emptyText)), h("div", { key: '882abaca5fbfcd8cfe007f374204b18f8e983758', 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: '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 && (() => {
             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 +231,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: '894ca1909e71e80000ebe0e13b4c824833b32ba5', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '3c19578de5317a13962afa3ca3962373c4659c3d', name: this.statusIcon, size: 14, weight: "fill", class: "co-select__helper-icon" }), h("span", { key: '7040317015e837c1fac4112c0887cb3a1269f818', class: "co-select__helper-text" }, this.helperText)))));
+        })()))), 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)))));
     }
     static get is() { return "co-select"; }
     static get encapsulation() { return "shadow"; }

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: 'fe5e2c132e6736fdf21c0d47096eb26c4a799672', class: {
+        return (h("hr", { key: '79a2dd5c7bc7d37d1b9d77b03e72b6014228532b', 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: '4c51173d0b39d5fbe481d585a6385738d4b8ec4c', class: {
+        return (h("nav", { key: 'ea33fc3e60a0b3e7f5d5ad37569524aa46b1cb76', class: {
                 'co-sidebar': true,
                 [`co-sidebar--${this.mode}`]: true,
-            }, part: "sidebar" }, h("div", { key: '7e6b56eff9514d2b49339c3972c03ba22ab53fc6', class: "co-sidebar__header", part: "header" }, h("slot", { key: 'ece98d54b3bd16c08bcd14203179a4c7244afa25', name: "header" })), h("div", { key: 'a3c9f64cffbb172ecb802ace41c5ebbcd731972b', class: "co-sidebar__body", part: "body" }, h("slot", { key: 'd0e85bb0e5095c14fa26dddb5ce92db1cf1f1d1f' })), h("div", { key: '006a4af475b87cbfb4d822c3f52fa0b4fe38faa8', class: "co-sidebar__footer", part: "footer" }, h("slot", { key: '5bfcbe7de63ba3f11a9c289a30fd9e416e65927a', name: "footer" }))));
+            }, 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" }))));
     }
     static get is() { return "co-sidebar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -229,7 +229,9 @@
 .co-sidebar-nav__item {
   display: flex;
   align-items: center;
-  gap: var(--co-spacing-sm);
+  /* Figma Home Link: gap 8 (space-sm de Figma = spacing-sm2), Geist Medium 14,
+     line-height 1, Gris-700 — paridad exacta con el spec del sidebar. */
+  gap: var(--co-spacing-sm2);
   padding: var(--co-spacing-xs) var(--co-spacing-sm);
   border-radius: var(--co-border-radius-xs);
   border: none;
@@ -240,10 +242,10 @@
   color: var(--co-semantic-text-default);
   transition: background 0.15s ease, color 0.15s ease;
   font-family: var(--co-font-family-primary);
-  font-size: var(--co-font-size-12);
+  font-size: var(--co-font-size-14);
   font-weight: var(--co-font-weight-medium);
   letter-spacing: var(--co-font-letter-spacing-body);
-  line-height: var(--co-font-line-height-normal);
+  line-height: 1;
 }
 
 .co-sidebar-nav__item:hover {
@@ -395,7 +397,7 @@
 .co-sidebar-nav__expansion-header {
   display: flex;
   align-items: center;
-  gap: var(--co-spacing-sm);
+  gap: var(--co-spacing-sm2);
   padding: var(--co-spacing-xs) var(--co-spacing-sm);
   border-radius: var(--co-border-radius-xs);
   border: none;
@@ -406,10 +408,10 @@
   color: var(--co-semantic-text-secondary);
   transition: background 0.15s ease, color 0.15s ease;
   font-family: var(--co-font-family-primary);
-  font-size: var(--co-font-size-12);
+  font-size: var(--co-font-size-14);
   font-weight: var(--co-font-weight-medium);
   letter-spacing: var(--co-font-letter-spacing-body);
-  line-height: var(--co-font-line-height-normal);
+  line-height: 1;
 }
 
 .co-sidebar-nav__expansion-header:hover {

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

@@ -365,12 +365,14 @@ export class CoSidebarNav {
             return null;
         return (h("div", { class: "co-sidebar-nav__search" }, h("co-icon", { name: "magnifying-glass", size: 16 }), h("input", { type: "text", class: "co-sidebar-nav__search-input", placeholder: this.searchPlaceholder, value: this.searchText, onInput: this.handleSearchInput }), this.searchText && (h("button", { class: "co-sidebar-nav__search-clear", onClick: () => { this.searchText = ''; this.coSearch.emit(''); } }, h("co-icon", { name: "x", size: 14 })))));
     }
-    renderIcon(item) {
+    /** Icon size follows the surface: 16 next to a label (Figma Home Link spec),
+        18 for the icon-only rail chips (min mode) where the glyph stands alone. */
+    renderIcon(item, size = 16) {
         if (item.customIcon) {
             return h("img", { class: "co-sidebar-nav__custom-icon", src: item.customIcon, alt: "" });
         }
         const iconName = item.icon || this.getIcon(item.key);
-        return h("co-icon", { name: iconName, size: 18 });
+        return h("co-icon", { name: iconName, size: size });
     }
     /**
      * Renders a label with the search-matching substring highlighted.
@@ -400,7 +402,7 @@ export class CoSidebarNav {
         const button = (h("button", { class: {
                 'co-sidebar-nav__item': true,
                 'co-sidebar-nav__item--active': isActive,
-            }, onClick: () => this.handleLeafClick(item), "aria-label": showLabel ? undefined : label }, h("span", { class: "co-sidebar-nav__item-icon" }, this.renderIcon(item)), showLabel && (h("span", { class: "co-sidebar-nav__item-label" }, this.renderHighlightedLabel(item.key)))));
+            }, onClick: () => this.handleLeafClick(item), "aria-label": showLabel ? undefined : label }, h("span", { class: "co-sidebar-nav__item-icon" }, this.renderIcon(item, showLabel ? 16 : 18)), showLabel && (h("span", { class: "co-sidebar-nav__item-label" }, this.renderHighlightedLabel(item.key)))));
         // Collapsed (icon-only) items get a Cobalt tooltip with the label instead of
         // the native `title`. Flyout items (forceLabel) already show their label.
         if (this.mode === 'min' && !forceLabel) {
@@ -450,7 +452,7 @@ export class CoSidebarNav {
                     else {
                         this.openFlyout(item.key, anchor || undefined, ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) || 0);
                     }
-                } }, h("span", { class: "co-sidebar-nav__item-icon" }, this.renderIcon(item))), isFlyoutOpen && (h("div", { class: "co-sidebar-nav__flyout", style: Object.assign(Object.assign(Object.assign({}, (this.flyoutPosition.top !== null ? { top: `${this.flyoutPosition.top}px` } : {})), (this.flyoutPosition.bottom !== null ? { bottom: `${this.flyoutPosition.bottom}px` } : {})), { left: `${this.flyoutPosition.left}px` }), onMouseEnter: () => clearTimeout(this.flyoutTimeout), onMouseLeave: () => this.closeFlyout() }, h("span", { class: "co-sidebar-nav__flyout-title" }, this.renderHighlightedLabel(item.key)), item.children.map(child => this.renderLeafItem(child, true))))));
+                } }, h("span", { class: "co-sidebar-nav__item-icon" }, this.renderIcon(item, 18))), isFlyoutOpen && (h("div", { class: "co-sidebar-nav__flyout", style: Object.assign(Object.assign(Object.assign({}, (this.flyoutPosition.top !== null ? { top: `${this.flyoutPosition.top}px` } : {})), (this.flyoutPosition.bottom !== null ? { bottom: `${this.flyoutPosition.bottom}px` } : {})), { left: `${this.flyoutPosition.left}px` }), onMouseEnter: () => clearTimeout(this.flyoutTimeout), onMouseLeave: () => this.closeFlyout() }, h("span", { class: "co-sidebar-nav__flyout-title" }, this.renderHighlightedLabel(item.key)), item.children.map(child => this.renderLeafItem(child, true))))));
         }
         return (h("div", { class: {
                 'co-sidebar-nav__expansion': true,
@@ -484,10 +486,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: '4cbc7c52e223889678c0b65bc2ccb1f27c1e6b1e', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: '4ff3825c2ac7f47bf87b81bc09ac76d0317ea300', class: {
+        h(Host, { key: '6bf3b6d16c6baef9af2b41ee38c0823961595132', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: '0264a43d3b83859b114001917c45e312fb702afe', class: {
                 'co-sidebar-nav': true,
                 'co-sidebar-nav--min': this.mode === 'min',
-            } }, this.renderSearch(), h("div", { key: '69552a770759709fd7e36a3af383987391dd338b', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
+            } }, this.renderSearch(), h("div", { key: '92437d9f022ec1a25adc04ea52b512dbb046bfc0', 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: 'eddef7fdf65325e1110ec444a129e6015db28df3', class: { 'co-skeleton': true, [`co-skeleton--${this.variant}`]: true }, part: "skeleton", style: style, "aria-hidden": "true" }));
+        return (h("div", { key: 'e62aec4781b1ef8b7b4fa2ba423cf9e94184646a', 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: 'a9f92ca57336e9bae289723f39592a47671a4b15', class: {
+        return (h("div", { key: 'a445c6c490d0a86aabdd1863ffca7fb5b6a83dcb', 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: '8eb64363bba56ffa4562338ba0d6d7136da14376', class: "co-slider__labels" }, h("div", { key: '4c3801ed323503bf8ade392fc36bff86d8b7110d', class: "co-slider__labels-left" }, this.label && h("label", { key: '597875203892c6a8a05a0320a68265fc5d1e3391', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'b625942a84e80fcdf41963496aa7638424c56d25', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'bda003630b130c2c06a1b69e4bbd152c247e9b13', class: "co-slider__value" }, this.value))), h("div", { key: '645b6872bdce75d9aba4dc3839a8dc69bd948397', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: '2ef7e7c4c323818611edf0adc84e785c0c588892', class: "co-slider__track" }, h("div", { key: '26abb3e3362f005068ecd55613641dadf4b9b634', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: '94275bcd27dee2b86fef7587f05651f5c32a43e0', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: '7972dbf5887472c03ca7c585d393bad59e78479d', class: "co-slider__marks" }, h("span", { key: '3594c16276b5a41905f52132a3a4f93894cd71ea', class: "co-slider__mark" }, this.min), h("span", { key: 'ef4c8c98850d33cf00b0eeb05a913c203d740f3f', class: "co-slider__mark" }, this.max))), h("input", { key: 'd0a72d43d4a0c420038287a4e3fd357781a4ad25', 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: 'd9006a19d95d4bb99b336d755c5ed6e20c842bbf', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '2a646e6a2d7baf2230fb7e0472b8bc2a2d1b01cb', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '76fd161a9ee5415c7d36bcd91b2651970c123624', class: "co-slider__helper-text" }, this.helperText)))));
+            } }, (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)))));
     }
     static get is() { return "co-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,9 @@
 .co-switch-wrapper__row {
   display: flex;
   align-items: center;
-  gap: var(--co-spacing-sm2);
+  /* Overridable per surface (crosses the shadow boundary): e.g. toolbar quick
+     toggles use spacing-md per the Figma navbar spec. */
+  gap: var(--co-switch-label-gap, var(--co-spacing-sm2));
   cursor: pointer;
 }
 

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: '38cc6534a6d29b3453180409c4140b41e41c5970', class: {
+        return (h("div", { key: 'aa2690f72e8a64fcf835a58ed7b5a578e93dd6fa', class: {
                 'co-switch-wrapper': true,
                 'co-switch-wrapper--disabled': this.disabled,
                 [`co-switch-wrapper--${this.status}`]: this.status !== 'default',
-            } }, h("div", { key: '5bec2bdbf3de9f5470840fac1c4abfad098e289a', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: 'd0039ee4818969f46c7014dbc1b29cb6fa3a021c', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            } }, 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: {
                 '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: 'b7bfcd10fb3e0eaa4083f1f08ba01ed4e7d05b48', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '46497aa93ae79b1d8beb0dcdbacf9ebd07a93fa9', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '0f0364713a3d6f29f1f496d91ad0d89b957e92fe', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: 'de427dfa828e8bb55d6b05ac6fa854fd6ce9d128', required: this.required })), this.secondaryLabel && (h("span", { key: 'b00e86fd005b72fcea23db91dbe4f3d39cf8026c', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '6ab547b5c56216132685647f026eae7a879b6338', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'e5eedf552bff62777946b448da584512a0a8c9b5', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: 'c2d3242dbb21c85cdba0d7eb48b263fa6b555b73', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
+            }, 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)))));
     }
     static get is() { return "co-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@
   white-space: nowrap;
   border-radius: var(--co-border-radius-full);
   background: transparent;
-  color: var(--co-color-gris-500, #888);
+  color: var(--co-color-gray-500, #888);
   transition: background 0.15s ease, color 0.15s ease, font-weight 0.15s ease;
   box-sizing: border-box;
 }
@@ -38,18 +38,18 @@
    has no hover rule. Every pill tab carries `.co-tab--pill`, so this
    reproduces the previous `.co-tab:hover` behavior exactly. */
 .co-tab--pill:hover:not(:disabled) {
-  background: var(--co-color-gris-100, #f6f6f6);
+  background: var(--co-color-gray-100, #f6f6f6);
   color: var(--co-color-base-negro, #1f1c1b);
 }
 
 .co-tab--selected {
-  background: var(--co-color-gris-100, #f6f6f6);
+  background: var(--co-color-gray-100, #f6f6f6);
   color: var(--co-color-base-negro, #1f1c1b);
   font-weight: 500;
 }
 
 .co-tab--pill.co-tab--selected:hover:not(:disabled) {
-  background: var(--co-color-gris-100, #f6f6f6);
+  background: var(--co-color-gray-100, #f6f6f6);
   color: var(--co-color-base-negro, #1f1c1b);
 }
 
@@ -110,3 +110,38 @@
   background: var(--co-color-base-negro, #1f1c1b);
   color: var(--co-color-base-blanco, #fff);
 }
+
+/* ─── Segmented variant ─────────────────────────────────────── */
+/* Lives inside a .co-tab-group--segmented track. Transparent chip by
+   default; the selected tab becomes a white bordered pill with the lg
+   shadow. The transparent border on the base state reserves the 1px so
+   selecting a tab never shifts layout. */
+.co-tab--segmented {
+  height: auto;
+  padding: var(--co-spacing-sm2, 8px) var(--co-spacing-md, 12px);
+  border: 1px solid transparent;
+  border-radius: var(--co-border-radius-xs, 8px);
+  font-size: var(--co-font-size-14);
+  font-weight: 400;
+  letter-spacing: -0.03em;
+  color: var(--co-color-gray-600, #585858);
+  background: transparent;
+}
+
+.co-tab--segmented:hover:not(:disabled) {
+  background: transparent;
+  color: var(--co-color-base-negro, #1f1c1b);
+}
+
+.co-tab--segmented.co-tab--selected {
+  background: var(--co-color-base-blanco, #fff);
+  border-color: var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));
+  box-shadow: var(--co-shadow-lg);
+  font-weight: 500;
+  color: var(--co-color-base-negro, #1f1c1b);
+}
+
+.co-tab--segmented.co-tab--selected:hover:not(:disabled) {
+  background: var(--co-color-base-blanco, #fff);
+  color: var(--co-color-base-negro, #1f1c1b);
+}

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

@@ -9,7 +9,7 @@ export class CoTab {
         this.selected = false;
         /** Size */
         this.size = 'small';
-        /** Visual variant: filled pill (default) or underline tab */
+        /** Visual variant: filled pill (default), underline tab, or segmented-control pill */
         this.variant = 'pill';
         /** Disabled state */
         this.disabled = false;
@@ -21,13 +21,13 @@ export class CoTab {
     }
     render() {
         const iconSize = this.variant === 'underline' ? 16 : this.size === 'large' ? 18 : 14;
-        return (h("button", { key: '6f181c1c0f6de62256ba768f656d0671b3e1968f', class: {
+        return (h("button", { key: '77fc8443dbdc5fe327ea28de6e926c4438e96cca', 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: '0fd0c49bf5e1836ed1250f98efcd68a7752a0c34', name: this.iconLeft, size: iconSize })), h("span", { key: '2b71c8f428d2c775675c6f96d7e2e2f9733081b5', class: "co-tab__label" }, this.label), this.badge && (h("span", { key: '168c7695c9694026442662632e57f41f907ca727', class: "co-tab__badge", part: "badge" }, this.badge)), this.iconRight && (h("co-icon", { key: '1d290f34920e4d5d451f5f0d145796244fb94884', 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: '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 }))));
     }
     static get is() { return "co-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -127,15 +127,15 @@ export class CoTab {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'pill' | 'underline'",
-                    "resolved": "\"pill\" | \"underline\"",
+                    "original": "'pill' | 'underline' | 'segmented'",
+                    "resolved": "\"pill\" | \"segmented\" | \"underline\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual variant: filled pill (default) or underline tab"
+                    "text": "Visual variant: filled pill (default), underline tab, or segmented-control pill"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -15,3 +15,14 @@
   gap: var(--co-spacing-xs, 4px);
   border-bottom: 1px solid var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
 }
+
+/* ─── Segmented variant ─────────────────────────────────────── */
+/* Gray track + white active pill (Figma segmented control). The
+   track hugs its content; each co-tab styles its own pill. */
+.co-tab-group--segmented {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  background: var(--co-color-gray-100, #f6f6f6);
+  border-radius: var(--co-border-radius-sm, 12px);
+}

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

@@ -3,6 +3,12 @@ export class CoTabGroup {
     constructor() {
         /** Visual variant, propagated to slotted co-tab children */
         this.variant = 'pill';
+        /** Slotted tabs can mount AFTER the group (async v-for data): re-propagate
+            variant/selection whenever the slot content changes, or late tabs render
+            with the default pill variant. */
+        this.onSlotChange = () => {
+            this.syncTabs();
+        };
     }
     onTabSelect(e) {
         e.stopPropagation();
@@ -27,10 +33,10 @@ export class CoTabGroup {
         });
     }
     render() {
-        return (h("div", { key: '3ff595c9a6437d18ea990ca2b798f2ad182f5974', class: {
+        return (h("div", { key: 'b0e4e872934528c7dbce3bf1c0329b1efb0db887', class: {
                 'co-tab-group': true,
                 [`co-tab-group--${this.variant}`]: true,
-            }, role: "tablist", part: "tab-group" }, h("slot", { key: 'b968cc4febb7156bf7e00bed02a6ec50fda354b0' })));
+            }, role: "tablist", part: "tab-group" }, h("slot", { key: '407d99ce75badc9bfeecaf8506155ef346681489', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "co-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -69,8 +75,8 @@ export class CoTabGroup {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'pill' | 'underline'",
-                    "resolved": "\"pill\" | \"underline\"",
+                    "original": "'pill' | 'underline' | 'segmented'",
+                    "resolved": "\"pill\" | \"segmented\" | \"underline\"",
                     "references": {}
                 },
                 "required": false,

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: 'b06b0400bebca239be4b3510c790e649a0b09e55', class: {
+        return (h("div", { key: '45bafe056e1e22295fca85e4117688b3689f6531', 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: '0476d5d5e3522e3de8703ffe48aaab76e892e7bd', class: "co-tags-field__labels" }, h("label", { key: '23c99c158c88d6fc508218b40d037176728700d0', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '0c88d8476cc6c316132a2888f51d3eb49736d205', required: this.required })))), h("div", { key: 'f261306b322b86b0ce6319b74c1dd5a604e354d1', class: "co-tags-field__field-row" }, h("div", { key: 'ee3d816cf0c5197676629840eef464f85fcf9559', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: 'a9c34371df22b4741d4c6ad1a3842df6f9a2f67d', 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: '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() })) : (
         // 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: 'e3619e500dce2c86bbc964e80ce1b47bac97b488', 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: 'd55a9de7143a4ec296b519d27d08528446c3eb7f', class: {
+                : 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: {
                 '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: 'dfb1fb1b0e91013eaa6ce324089e04d9db16d5a5', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '1981743bf4ecdcca8ff44b92c234cd51cdeef536', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: 'de671e568b85b27e03636530a544adaf46334e77', 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: '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: {
                 'co-tags-field__helper': true,
                 'co-tags-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '057154aa6ccbe1598b6d3fa9c82febb929454288', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '2d79353740ced07fa8d8e9fa2541ddf9d6261522', class: "co-tags-field__helper-text" }, helper)))));
+            }, 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)))));
     }
     static get is() { return "co-tags-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,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: '3988a4a4fd675326284655953e77cace71ba661d', class: {
+        return (h("div", { key: 'cb418f5b90a1a22cdd5661d923fec6b5111d4f2f', class: {
                 'co-textarea': true,
                 'co-textarea--disabled': this.disabled,
                 'co-textarea--focused': this.hasFocus,
@@ -79,13 +79,13 @@ export class CoTextarea {
                 'co-textarea--over-limit': isOverLimit,
                 [`co-textarea--${this.size}`]: true,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'c2ba685f08ada1353acb384316980dcddd4b9874', class: "co-textarea__labels" }, this.label && (h("label", { key: '91de715c89f556954471a00a00874e80f20ad186', class: "co-textarea__label", part: "label" }, this.label, h(RequiredMark, { key: 'c1409b803c1a0c9b9581a56b9790d9a2b7b63967', required: this.required }))), this.secondaryLabel && (h("span", { key: '51010b5855f06a455456153d8cac39142473951d', class: "co-textarea__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'e4e20df0ae7995636a328af6f65408b2388ea94e', class: "co-textarea__field", part: "field" }, h("textarea", { key: 'd4e01012fcacf351d90047dc4f6c6e495025fb2a', ref: (el) => (this.textareaEl = el), class: {
+            }, 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__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: '6e83fc70c4f4ca97b08dcce9c11ab8d07f3fb0ce', class: "co-textarea__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'c7a5be4eb9c1b225ed390af6c90eeb8cbc530996', name: "x-circle", size: 16, weight: "fill" })))), (this.helperText || this.maxLength != null) && (h("div", { key: '3211a12b4ef280e2aced5d55cff670a096b99b4e', class: "co-textarea__footer" }, this.helperText && (h("div", { key: 'f98be39968e67ab8dc2b3962977def3997964e00', 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: '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: {
                 'co-textarea__helper': true,
                 'co-textarea__helper--error': this.status === 'error',
-            }, part: "helper" }, this.status === 'error' && (h("co-icon", { key: '117908cada80bf151660808799a13ca04458611a', name: "warning-circle", size: 14, class: "co-textarea__helper-icon" })), h("span", { key: '4e1410e04d7989554495b0727a750887208649e3', class: "co-textarea__helper-text" }, this.helperText))), this.maxLength != null && (h("span", { key: 'd5bcfc362cc82d2dcaa2fe2d4c72b08e368a3196', class: {
+            }, 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: {
                 'co-textarea__counter': true,
                 'co-textarea__counter--over': isOverLimit,
             }, part: "counter" }, this.charCount, "/", this.maxLength))))));