@prolibu-suite/cobalt-core 0.6.0 → 0.8.0

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

@@ -37,17 +37,17 @@ export class CoCheckbox {
         // Only override the fill when a custom color is provided AND the box is "on".
         // Leaving this undefined keeps the default appearance byte-identical to before.
         const boxStyle = this.onColor && isOn ? { background: this.onColor } : undefined;
-        return (h("div", { key: 'b52aa4d0412e9ab8b170f11d7a323bbbc80057e5', class: {
+        return (h("div", { key: '31690de633689da0b273e3c88cc200cabb4cee75', class: {
                 'co-checkbox-row': true,
                 'co-checkbox-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("span", { key: 'd3a1caff03ad0358ea005bcb88a8ad607e9d3d24', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("span", { key: '2b0c4ebbe4c7a7a8046cf726e682a3d42ae3ebbe', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
                 'co-checkbox': true,
                 [`co-checkbox--${this.size}`]: true,
                 'co-checkbox--overlay': isOverlay,
                 'co-checkbox--checked': this.checked && !this.indeterminate,
                 'co-checkbox--indeterminate': this.indeterminate,
                 'co-checkbox--disabled': this.disabled,
-            }, style: boxStyle, part: "box" }, isOverlay && this.indeterminate && (h("svg", { key: 'e6783c1035b4c9f8bb529b4a8f7efc75d9bb093a', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '19c92d5cd4cbda22338c1a675cabf444e5f58bfc', d: "M3 8h10", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round" }))), isOverlay && this.checked && !this.indeterminate && (h("svg", { key: 'b84d28ddb24652658b0afc88bafce1a3ae7a83c6', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'b5e21ca2634667abca82f16d30a6952ab8ccbc88', d: "M3.5 8.5l3 3 6-6.5", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.label && (h("span", { key: 'f311bec251f6fd375d81dcd06cafdb380d6206f0', class: "co-checkbox__label", part: "label" }, this.label))));
+            }, style: boxStyle, part: "box" }, isOverlay && this.indeterminate && (h("svg", { key: '75d235738fadf7408b5eb80c5178349f1ad53874', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'e9a15cacae65f1f66096e10bf1a777a6e9eb0a31', d: "M3 8h10", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round" }))), isOverlay && this.checked && !this.indeterminate && (h("svg", { key: '7e66ec4d016bbbbe050eeb10c57f562952b88209', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'dd9c06e590b0cdccc24f6701ed4f5b80da36d091', d: "M3.5 8.5l3 3 6-6.5", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.label && (h("span", { key: 'a42bc52f90391be07a70cae1beec265080522b1a', class: "co-checkbox__label", part: "label" }, this.label))));
     }
     static get is() { return "co-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,7 +70,7 @@ export class CoChip {
         else
             effectiveIconMode = 'none';
         const Tag = this.clickable ? 'button' : 'div';
-        return (h(Tag, { key: '3210b69426aa37cc7e1f9cc7d7a9add9fd0dd93b', class: {
+        return (h(Tag, { key: 'd08adf936ccb8e2b1ef10e82e4173571efc6fb9c', class: {
                 'co-chip': true,
                 [`co-chip--${this.shape}`]: true,
                 [`co-chip--${this.size}`]: true,
@@ -80,7 +80,7 @@ export class CoChip {
                 'co-chip--clickable': this.clickable,
                 'co-chip--disabled': this.disabled,
                 'co-chip--selected': this.selected,
-            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (h("span", { key: '105306abb8267ebec6a4241b85be844ce9e0fe9e', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: 'a6e6bbf79ec321916bae16fea448b63f22109bd0', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: '6ddd3f25eca0380831c10fce157aa042d5195da5', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: 'd331947abb472bede535a794dfae052a021d06b1', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: 'ddf803655d633a17901ecab726739ad69ae03d5c', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: '4602a3f28aa74f31bd7a5124b9ef1a1337f4d960', name: "icon-left" }))), h("span", { key: 'aebc08bb058e32d13ef3c962e1cf23cfdbc3baf5', class: "co-chip__label" }, h("slot", { key: 'be0e8625634f0b4a9da70944e32bb7d2c80c3a00' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (h("span", { key: '11634b783e3a482fe161781658fd22d0ec015265', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: '49837e189f540874558c337bce19a983a5bd77f2', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '6510c33b909da03ef0e6ee59fb52b5c12a5faa86', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: '9c6e6ccea304803daaecf447a5651d5e8a67cc07', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: '3bdd7c888bba838894b88a41039df45af8f7547c', name: "icon-right" }))), this.removable && (h("span", { key: 'a4d45167d0c3fc237692371a131af5a76840a89a', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: 'ce146e623ce90a936c54a8bfad349b7ea04691fa', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (h("span", { key: 'fe01795e08be25909f530d6da4f57cb38b6f8a8e', class: "co-chip__trailing", part: "trailing" }, h("co-icon", { key: '2d8c0bba14a8fa9128c9f9673d9d295f191f1e5c', name: this.trailingIcon, size: trailingIconSize, weight: this.iconWeight })))));
+            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (h("span", { key: 'b5d1841160ef7d72a5e41660a7cf161cca45c052', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: 'fba3454103156c3f0d2ffbed21bff3a0104d4351', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: '371f6f6f3af2272892155f4d3e4f714aeea6d6b9', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: 'acce2aa1a4a8e5452154055912249b1aa1f1da67', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: 'f9f686487e6b31d85fc049d3ccbe9c20b29929c6', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: '598a282686a50657283c2ea002e41584cade29e0', name: "icon-left" }))), h("span", { key: 'd5d62912bc89da7f6af34d48065a6ab8a63043ba', class: "co-chip__label" }, h("slot", { key: '67ee2a516d20d97eef9556c9c8e849d464ed6643' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (h("span", { key: '08d64c102684108eed55954881beab9a2078aa6a', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: 'b3439d3170f7ac2a63580e38ab7ca390e6bbf2ab', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: 'd3e5c2bc56c1e31a16a6e263dda57c19509ea459', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: '89f2f5e870fbb629dcf56838f0ec394cd68ec5d3', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: 'a6d0133f96ef488d8e87d15269cd5d11d6bec2d1', name: "icon-right" }))), this.removable && (h("span", { key: 'c29aa14ff3fadd6c514dcfeffd7e1ed279783585', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: '4ca4dea2ca89aa01187065618e63066c3e2d1631', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (h("span", { key: '97f5fc2b8e4f2624c3efe67a249f1b025b6aedb5', class: "co-chip__trailing", part: "trailing" }, h("co-icon", { key: 'e15a293d9957fdbef33f22c1fe2b85423d22847c', name: this.trailingIcon, size: trailingIconSize, weight: this.iconWeight })))));
     }
     static get is() { return "co-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-color-picker/co-color-picker.css

@@ -52,10 +52,10 @@
   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: 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);
   min-height: 40px;
   box-sizing: border-box;
@@ -105,8 +105,13 @@
 }
 
 .co-color-picker__swatch {
-  width: 24px;
-  height: 24px;
+  /* 22px es el alto de contenido interno del sistema (mismo que los chips de
+     co-ref-field --md); con 24 + 1px de borde el trigger crecía a 44 y quedaba
+     4px más alto que el resto de campos. */
+  width: 22px;
+  height: 22px;
+  /* Sin border-box el 1px de borde sumaría 24 y el trigger volvería a 42. */
+  box-sizing: border-box;
   border-radius: var(--co-border-radius-full);
   border: 1px solid var(--co-semantic-border-subtle);
   flex-shrink: 0;
@@ -252,7 +257,3 @@
   grid-column: 2;
   min-width: 0;
 }
-
-@supports not (background: color-mix(in srgb, red, transparent)) {
-  .co-color-picker__trigger { background: var(--co-semantic-surface-secondary); }
-}

package/dist/collection/components/co-color-picker/co-color-picker.js

@@ -82,10 +82,10 @@ export class CoColorPicker {
         const presets = this.parsedPresets;
         const hasValue = !!this.value;
         const statusClass = this.status !== 'default' ? `co-color-picker--${this.status}` : '';
-        return (h("div", { key: 'cf82d2fe5d1ca59a0be4edbd98f2f127cbb0666c', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: 'ad0e372b32b0e7d5294609b7a952e8d4fb633447', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: '9976b6350be9c69a5db48079cdcc32b597b99e4f', required: this.required }))), h("co-popover", { key: 'e50a584f035be8e4cb7d18968c16e6dfe5b8fad2', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '79bfb8856c30be5bbedf2471651eafabf4c2faa5', slot: "trigger", class: "co-color-picker__trigger" }, h("span", { key: '468b9f7f6a63297086f48938155bea1a5a82ec04', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '727966662cfa0c6647d66f0268eca9f77452c46d', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '25df03b58bf3a690e524f53d53a16fe299f019ed', class: "co-color-picker__panel" }, h("div", { key: 'd102f3c6b266046dc2b8d6d7536d25aa2dffb79c', class: "co-color-picker__grid" }, presets.map((preset) => {
+        return (h("div", { key: '49d28cf02d9f34c887f7e14a062d8fa2a5c59d1a', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: 'a4b178f117d73a45a9d2ba0374646ab408b2fd6f', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: '5be202bbcf4edfd7c565069213f749aaefef9319', required: this.required }))), h("co-popover", { key: '3f4435572ce8597f29d7feba26c9c5fe00c58b28', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'f9980b7fa0c89648bc65dbf65017ae4489420fd5', slot: "trigger", class: "co-color-picker__trigger" }, h("span", { key: 'd98f1d31fbede3d4c080e12789e5adf17f158510', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '73071f85034a2014e254001b1511dc89cbfdf526', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '75d0b455d0e74e642e8be472a1a4e436731f307a', class: "co-color-picker__panel" }, h("div", { key: 'f881490c55ce08e145fccfc6a9bd0759826a0542', class: "co-color-picker__grid" }, presets.map((preset) => {
             var _a;
             return (h("button", { type: "button", key: preset.value, class: `co-color-picker__grid-item ${preset.value.toUpperCase() === ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toUpperCase()) ? 'co-color-picker__grid-item--selected' : ''}`, style: { background: preset.value }, title: preset.name, onClick: () => this.handleSwatchClick(preset.value) }));
-        })), hasValue && (h("div", { key: '4897fc8e3c3d371b23b7ae6c9e5c04c92dfe27df', class: "co-color-picker__hex-row" }, h("span", { key: '625828e841d8f8b545ee6119d74e839eca80841e', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: '00f73948a453f2db74103ab1d49013e999d13b1f', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: 'c87e69f32065bf05dcad1eaa73cf21d028abf93c', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, h("co-icon", { key: 'bf8e7abbb52e543bb4335acc577b268cce40c2be', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: '368cf0c7f3877c1a6fd35c992b6543862b1cebc8', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: '5b9f3568320860fde1d701ef6e5d9b3475903d8c', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '5a480e0edaf010df948e8f73e9befa70f88b0865', class: "co-color-picker__helper-text" }, this.helperText)))));
+        })), hasValue && (h("div", { key: 'f909b634288d07472da28289a0baa98cf3fe372b', class: "co-color-picker__hex-row" }, h("span", { key: '566a04e86a1a0efc9f42458a893e7416b95427aa', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: '18898c82c2aaf7c7b87c39c5d9d70bd31d3d04cc', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: 'bbdcfe3eb919ce5e09d288c496c445c58d3084ae', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, h("co-icon", { key: '599526103113f33ba8e96a3700e047730956feb4', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: '8c1550acdddf738736fcf1ea371a4d97eb3ff6b3', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: '5465917158f37b874e7ae91c7b41d21f9953f607', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: 'f530d23a12e501a3574e6b9ecbf04f71c2bba160', class: "co-color-picker__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-color-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-column-picker/co-column-picker.js

@@ -165,13 +165,13 @@ export class CoColumnPicker {
         return (h("div", { class: "co-column-picker__empty" }, h("co-icon", { name: "magnifying-glass", size: 40, class: "co-column-picker__empty-icon" }), h("span", null, this.emptyText)));
     }
     render() {
-        return (h("div", { key: '2666e34dab21c03638a74bb5aa49ab0e886a0693', class: {
+        return (h("div", { key: 'a80fc1d3dcad1747d1d806300b81c3e72a10beb9', class: {
                 'co-column-picker': true,
                 'co-column-picker--open': this.isOpen,
                 'co-column-picker--disabled': this.disabled,
                 'co-column-picker--focused': this.focused,
                 [`co-column-picker--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '14278387662b21beb294db48c0758fc6ff265676', class: "co-column-picker__labels" }, this.label && h("label", { key: '3f96a7fc4f4c41a4dfd96461b68c3f5b58bb681c', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: '96c8aee4265a6a1714d17ab91035bb635df4a925', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: '71ec0116e86706c139eba9a2368c238e527c2251', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: 'b17441aa3d0d73dab3b16ae7d9f2d0796968c9da', class: "co-column-picker__search" }, h("co-icon", { key: '007c2975b633af4bfde6248372b24cf0a2f9b862', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: 'd6bbaf600cc3f2ed2e490d095045a744b46bed8d', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (h("button", { key: 'ba292c3f2ee4fcfb73d1360d681c5ed2ccdd0f41', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: '1ec246b29fb288351153e896b2014b8f4fdec62c', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: '007a4067b4c369f076eef0e5068419ad1ad7717b', class: "co-column-picker__toolbar" }, h("button", { key: 'd4ad1c99e81cba77cce7d7f8a121b16398b4b462', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '2ac4546a1375c337363c905a1262082f4ec4ac25', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: '053b07244ea82a1d83eadc0f3e0d7f3c79df3f1c', class: "co-column-picker__toolbar-sep" }), h("button", { key: '0568ea5680716dc2560ca93e89dbb0649145f552', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: '6538744f86c59489871040bed656a85220fbdb1c', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: 'd0c4294e408378f9613655f9f1a8665fff4bc866', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: '5dc6510896ca75e4d1d62608ca9fd0c46daa2158', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: 'bb7a021742ab70da4d1c8b29b58944a826d50399', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: '8135e8db252ad8de777683d308e7440f7902d281', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'cd2416dde35f709547185a893cd61c981be0de3f', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: 'eb8b1353ec98c16360ad13484944879046235339', class: "co-column-picker__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'ca8bc69a870b65f4b16026875a0feb799e8e70d3', class: "co-column-picker__labels" }, this.label && h("label", { key: '173aa03b66e2fec3f9157f92fbda875d1a23a2dd', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: '46f6e14d50567ecc0cf3ef11e1f5b554700aaad3', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: 'bd9f290112ac732bf1d79762402eb9e487e529ba', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: 'b21d0dafb2c65cb0571e8cf070e757f03a2d668d', class: "co-column-picker__search" }, h("co-icon", { key: '48eac4a99e9badddcada4fe6b927b918c28bd59d', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: '8f59474e4d593c9b9a6dceba72f13f57aa0faced', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (h("button", { key: '85db810426d03c4beace3ef5895a467dd2215807', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: '616eb12fac37df98e30426bb431bf282f35c384c', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: '7fd12775dd7b756b1e6193a6a6d792ae688bfddb', class: "co-column-picker__toolbar" }, h("button", { key: '50821fab94549af6b92e911bbe8e2cff821e3b45', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '978f21c455f5651f6f62c35aebda69cda4967676', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: '744cc9367dbe98058ddb6a71d3742b0c5867f372', class: "co-column-picker__toolbar-sep" }), h("button", { key: '0369927d132be8feed66e0d4fcd077a937f60c0e', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: '779a95a5949d2f6e09d593ab8e09b92fc027bd60', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: 'b33b051ee96dfd5b74929644429b11003ade8eb4', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: '3e1f360328307d2493bbde4867767c36342608b8', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: '2c36eed809b92c5114a9300ddfbd53347fcb5391', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: '66a8cd7433e2f556227187631fec18975319ea3b', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '05b34fe973453b6c7ad30ccd426ff2994072b97b', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: 'a7bc18db7dd835f3384279a7bcc8d536db2f2fab', class: "co-column-picker__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-column-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -58,7 +58,7 @@
   /* 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;
@@ -83,11 +83,6 @@
   padding: var(--co-spacing-sm) var(--co-spacing-lg);
   font-size: var(--co-font-size-16);
 }
-/* The inner input-wrapper's own min-height+padding (24px+4px) would otherwise
-   overshoot the trigger's min-height — flatten it for s/sm so the combobox
-   matches co-select's height exactly. Chips keep their own height. */
-.co-combobox--s .co-combobox__input-wrapper,
-.co-combobox--sm .co-combobox__input-wrapper { min-height: 0; padding: 0; }
 
 .co-combobox--open .co-combobox__trigger {
   border-color: var(--co-semantic-border-focus);
@@ -120,8 +115,11 @@
   flex-wrap: nowrap;
   gap: 4px;
   min-width: 0;
-  min-height: 24px;
-  padding: var(--co-spacing-xxs) 0;
+  /* 22px content + la padding vertical del trigger + 1px de bordes = la caja md
+     de 40px; los 24px + xxs de antes empujaban el combobox a 46px, fuera de paso
+     con el resto de campos de 40px. Mismo criterio que co-input. */
+  min-height: 22px;
+  padding: 0;
   overflow: hidden;
 }
 

package/dist/collection/components/co-data-table/co-data-table.css

@@ -62,8 +62,8 @@ co-data-table {
   height: 40px; /* Figma header 40 — altura dura, centrado por flex/vertical-align */
   padding: 0 var(--co-spacing-md);
   background: var(--co-color-base-blanco);
-  border-bottom: 1px solid var(--co-color-opacity-negro-8);
-  border-right: 1px solid var(--co-color-opacity-negro-8);
+  border-bottom: 1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);
+  border-right: 1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);
   text-align: left;
   vertical-align: middle;
   font-size: var(--co-font-size-14);
@@ -287,8 +287,8 @@ co-data-table {
   height: 48px;
   padding: 0 var(--co-spacing-md);
   background: inherit;
-  border-bottom: 1px solid var(--co-color-opacity-negro-8);
-  border-right: 1px solid var(--co-color-opacity-negro-8);
+  border-bottom: 1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);
+  border-right: 1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);
   vertical-align: middle;
   font-size: var(--co-font-size-12);
   font-weight: var(--co-font-weight-medium); /* Figma Btn4/Medium para contenido de celda */
@@ -381,11 +381,21 @@ co-data-table {
 .co-data-table__empty-action:empty { display: none; }
 
 /* ─── SKELETON LOADING ──────────────────────────────────────── */
+/* Paridad con co-skeleton (primitivo canónico): mismo gradiente + sweep +
+   1.2s, para que el skeleton de la tabla y el de las cards/kanban se vean
+   como UN sistema. Antes era un pulse de opacidad sobre gray-100 sólido a
+   1.5s — divergía en color, movimiento y timing. */
 .co-data-table__skeleton {
   height: 14px;
   border-radius: var(--co-border-radius-xxs);
-  background: var(--co-color-gray-100);
-  animation: co-dt-shimmer 1.5s ease-in-out infinite;
+  background: linear-gradient(
+    90deg,
+    var(--co-semantic-surface-secondary) 0%,
+    var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04)) 50%,
+    var(--co-semantic-surface-secondary) 100%
+  );
+  background-size: 200% 100%;
+  animation: co-dt-shimmer 1.2s ease-in-out infinite;
   width: 70%;
 }
 
@@ -395,9 +405,14 @@ co-data-table {
   margin: 0 auto;
 }
 
+/* Mismo sweep que co-skeleton-sweep (gradient position), no un opacity pulse. */
 @keyframes co-dt-shimmer {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .co-data-table__skeleton { animation: none; }
 }
 
 .co-data-table__row--skeleton {

package/dist/collection/components/co-data-table-pagination/co-data-table-pagination.js

@@ -84,17 +84,17 @@ export class CoDataTablePagination {
     }
     render() {
         const pages = this.getVisiblePages();
-        return (h("div", { key: 'a0634afed71b18005f42921052b2bb41b5710818', class: "co-pagination", part: "pagination" }, h("div", { key: '08afef194748764e581c9c0e173af57bd7484e6a', class: "co-pagination__section" }, h("span", { key: '8bf238dd11b3c322becb18e07afbe087584ce3e0', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: '109f501ce7a1dc4ee2c109d75f7fcbc81aa3bfcc', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
+        return (h("div", { key: 'ad2d4cf540fbae67f997c4e8800316297815a9c2', class: "co-pagination", part: "pagination" }, h("div", { key: 'df28ba06ed542fe90c20d1fa1b7fa0c9d52b70d9', class: "co-pagination__section" }, h("span", { key: 'f4342d215bcee3af2ad7a21b48807a56da1fd83a', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: '8a43bbddf9541755d699bf945bbd9f3f2d86a24c', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
                 this.jumpToValue = e.target.value;
             }, onKeyDown: (e) => this.handleJumpToPage(e), onFocus: (e) => {
                 e.target.select();
-            }, part: "jump-input" })), h("div", { key: '706f537a7165004e18a4cf9f3b172392cbc25657', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: '15102e983f876658cf56c2aba8d94d29d132fa47', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '5eb114f934a1f694c45ae4165d3dc32e120fd7c9', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: 'f767df618ae0f1193dd107d8b8ab66434ab3da92', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '013df9bfa151cbc9c266c10e94e18823edd48050', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '634d6cdb5ceaaf6e0ffee6ee3533d568765d8868', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
+            }, part: "jump-input" })), h("div", { key: '0c6dda33a8fb2b5117b92a450fd69fe5f441cacc', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: 'ac831c093350dba3acfa1411d56df5fb1593144f', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '259a54e96723ef0b7f6cef648665d446bf049c83', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '692fc67a27fa66edce0e1fda13fd4de1c9b76a6b', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '3cd29507bea87f9b9e079acd587b137e9e2ab66f', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '4ea1fdbfe7c1eb5b7fb67003ef38391e8e9045a4', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
                 'co-pagination__page-size-option': true,
                 'co-pagination__page-size-option--active': size === this.pageSize,
-            }, onClick: () => this.changePageSize(size) }, size)))))), h("div", { key: '9cd537ceee590fdf03fb71f1e703c468e88881c5', class: "co-pagination__spacer" }), h("div", { key: '4f958f5ce6d1d5bb77a232d49dcf0375cadd8bff', class: "co-pagination__section" }, h("span", { key: '50717cd14f6dd64a47c31d64c6b98064316c5363', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: 'd133196b3970aed10f5e80fe8edc16576d3ef723', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '497d2dec11447e6426810770a38ff09564796336', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (h("button", { class: {
+            }, onClick: () => this.changePageSize(size) }, size)))))), h("div", { key: '2fd3277a44095c93825d8f7b11f6ae159edf9606', class: "co-pagination__spacer" }), h("div", { key: 'a3d16fd95c6c6e791818c6d1be760b5163187b90', class: "co-pagination__section" }, h("span", { key: 'dc536a071d1ca0b2bc3485bfc0c3aaecfd2178c0', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '415d04a264767e615fa742da1d7b3e509352555f', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '6b49bbb0cb284e1c0cdc38858412e3599d4a1206', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (h("button", { class: {
                 'co-pagination__page-btn': true,
                 'co-pagination__page-btn--active': p === this.page,
-            }, onClick: () => this.goToPage(p) }, p))), h("button", { key: '86ef170b109112e82cc2b7e53932a1ce1594e3cf', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
+            }, onClick: () => this.goToPage(p) }, p))), h("button", { key: '146515ae084df5f5e8d783a2e2c3f0d46ab971a3', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
     }
     static get is() { return "co-data-table-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,10 +46,6 @@
 .co-date-field--s .co-date-field__field { min-height: 28px; padding: var(--co-spacing-xxs) var(--co-spacing-sm); }
 .co-date-field--sm .co-date-field__field { min-height: 32px; padding: var(--co-spacing-xs) var(--co-spacing-sm); }
 .co-date-field--lg .co-date-field__field { min-height: 48px; padding: var(--co-spacing-sm) var(--co-spacing-lg); }
-/* The inner input-wrapper's own min-height+padding (24px+4px) would otherwise
-   add ~4px and overshoot the field's min-height — flatten it for s/sm. */
-.co-date-field--s .co-date-field__input-wrapper,
-.co-date-field--sm .co-date-field__input-wrapper { min-height: 0; padding: 0; }
 
 .co-date-field__field {
   display: flex;
@@ -59,7 +55,7 @@
   /* 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);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   min-height: 40px;
@@ -81,8 +77,11 @@
   display: flex;
   align-items: center;
   min-width: 0;
-  min-height: 24px;
-  padding: var(--co-spacing-xxs) 0;
+  /* 22px content + la padding vertical del field + 1px de bordes = la caja md
+     de 40px; los 24px + xxs de antes empujaban el campo a 46px, fuera de paso
+     con el resto de campos de 40px. Mismo criterio que co-input. */
+  min-height: 22px;
+  padding: 0;
 }
 
 .co-date-field__native {

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

@@ -162,20 +162,20 @@ export class CoDateField {
         // should still fall back to the localized default placeholder.
         const placeholder = this.placeholder || t.setDate;
         const helper = this.isInvalid ? this.errorMessage : this.helperText;
-        return (h("div", { key: '7c7de06d53bf9ab7dab40906d533bfaf1874e41e', class: {
+        return (h("div", { key: '6d81792bd047804a420165f06bdd859a49d6b02e', class: {
                 'co-date-field': true,
                 'co-date-field--disabled': this.disabled,
                 'co-date-field--focused': this.hasFocus,
                 'co-date-field--filled': this.hasValue,
                 'co-date-field--invalid': this.isInvalid,
                 [`co-date-field--${this.size}`]: true,
-            }, part: "wrapper" }, this.label && (h("div", { key: '30828a7b19aae5f304a26ec5025dba14039060d2', class: "co-date-field__labels" }, h("label", { key: '0b004de41209191ee0a03cf8436eb4dba96bb99c', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: '810008c09dbc2fd5e889adc71230a546ab4e78df', required: this.required })))), h("div", { key: '8e488bd0ceb0b011fc4a903d66f3dd17a668cea3', class: "co-date-field__field-row" }, h("div", { key: '9a7fb685c5fc65ee9f731dba6c34a527044a1388', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '81aa74d44ff1b524c253e278345c8add4fb3fe9f', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '4dc0d25d37fb8d099860566af1c2ac59d5111e4a', class: "co-date-field__input-wrapper" }, h("input", { key: '1aedac94aff9df44316509d9062e41f86a405a33', ref: (el) => (this.inputEl = el), class: "co-date-field__native", type: "text", inputMode: "numeric", autocomplete: "off", value: this.draft, placeholder: placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: '0e91b71755c341971064186ee1371d59353cdd1c', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '2d44a36188dca997cc42b7e165690348e61ff175', class: "co-date-field__labels" }, h("label", { key: '746f684d7f82ddcb520fc70e4ad745455b7cdfc2', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'f0579a7f7916d3d9a0cb0be68e6fb02c0d3dc0d5', required: this.required })))), h("div", { key: '1299f5619feb689440fffef7f0871dae663990e0', class: "co-date-field__field-row" }, h("div", { key: '9e6ee26e724056007151ff41018723d3e92649fc', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '6fcf9075eff0d6cd3e034a7f1edfd346c30a26ab', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '75bbaa8dfd1c3adab3c59d3f5a9c909e43087464', class: "co-date-field__input-wrapper" }, h("input", { key: '95da11005e53369a65f3a9e0cb4aa2b7714c0739', ref: (el) => (this.inputEl = el), class: "co-date-field__native", type: "text", inputMode: "numeric", autocomplete: "off", value: this.draft, placeholder: placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: '31115e35a4c00f4bb41437e35a73ee6e7df9290e', class: {
                 'co-date-field__clear': true,
                 'co-date-field__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClear, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clearDate, part: "clear" }, h("co-icon", { key: 'c4714d0444f27adf4c85f9303d0a510cb63af406', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '257a873a76fdf65494778b1d514717ae2627f4ef', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: '345fe8ad6fd0c5c512c038249f7d8f95ff286838', class: {
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClear, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clearDate, part: "clear" }, h("co-icon", { key: 'daccf6656333b81a5b7aedc14f9fe358ad296cde', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'b86c2a20e668f62de9dfce6b9dcd2a3eff0940ea', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: '46951e15c38162880460268b278e1a90bebed78c', class: {
                 'co-date-field__helper': true,
                 'co-date-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '32b6d53b1f8d78fdff90c960c039ac109c80c137', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '6f9ad478ddb4401d314ad7ef4fb98b21230b5ef1', class: "co-date-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '401c012d2e6635920228d80675681da8f6c05e4d', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '0cb6f7e05efe31cdd32e09206b8367bc5fe180fa', class: "co-date-field__helper-text" }, helper)))));
     }
     static get is() { return "co-date-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-date-picker/co-date-picker.css

@@ -9,6 +9,22 @@
   gap: var(--co-spacing-sm2);
 }
 
+/* ── Variant: flat (no border/background — reads as content) ──────────
+   The bordered box actually lives inside co-date-field's own shadow root
+   (co-date-field has no `variant` prop and is out of scope here), so it's
+   reached from the outside via `::part(field)`, gated by a plain `data-variant`
+   attribute co-date-picker.tsx sets on the <co-date-field> tag (see
+   renderField()). Kept deliberately low-specificity — type selector + one
+   attribute + ::part() ≈ (0,1,2) — well under co-date-field's own two-class
+   state rules (`.co-date-field--focused/--disabled/--invalid .co-date-field__field`,
+   (0,2,0)), so those keep winning on raw specificity (not source order) and
+   the focus ring / disabled surface / invalid border still show through on
+   top of flat, same as today — no changes needed in co-date-field itself. */
+co-date-field[data-variant='flat']::part(field) {
+  background: transparent;
+  border-color: transparent;
+}
+
 /* ---- Label (external, mirrors co-date-field/co-input) ---- */
 .co-date-picker__label {
   padding: 0 var(--co-spacing-xs);

package/dist/collection/components/co-date-picker/co-date-picker.js

@@ -28,6 +28,13 @@ export class CoDatePicker {
         this.firstDayOfWeek = 1;
         /** Field size, forwarded to the inner co-date-field. */
         this.size = 'md';
+        /** Visual style. `flat` strips the inner co-date-field's border and
+         *  background so it reads as plain content instead of a boxed control —
+         *  padding, label, focus ring, disabled and invalid states are unaffected.
+         *  `default` (the standard bordered box) renders identically to before
+         *  this prop existed. co-date-field itself has no `variant` prop, so this
+         *  is applied from the outside via `::part(field)` — see co-date-picker.css. */
+        this.variant = 'default';
         this.disabled = false;
         this.readonly = false;
         this.required = false;
@@ -153,7 +160,7 @@ export class CoDatePicker {
         }
     }
     renderField() {
-        return (h("co-date-field", { ref: (el) => (this.fieldEl = el), value: this.value, min: this.min, max: this.max, disabledDates: this.disabledDates, disabledDaysOfWeek: this.disabledDaysOfWeek, locale: this.locale, displayFormat: this.displayFormat, placeholder: this.placeholder, size: this.size, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, clearable: this.clearable, invalid: this.isInvalid, onCoChange: this.onFieldChange, onCoInput: this.onFieldInput, onCoInvalid: this.onFieldInvalid, onCoClear: this.onFieldClear, onCoFocus: () => this.coFocus.emit(), onCoBlur: () => this.coBlur.emit() }));
+        return (h("co-date-field", { ref: (el) => (this.fieldEl = el), "data-variant": this.variant, value: this.value, min: this.min, max: this.max, disabledDates: this.disabledDates, disabledDaysOfWeek: this.disabledDaysOfWeek, locale: this.locale, displayFormat: this.displayFormat, placeholder: this.placeholder, size: this.size, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, clearable: this.clearable, invalid: this.isInvalid, onCoChange: this.onFieldChange, onCoInput: this.onFieldInput, onCoInvalid: this.onFieldInvalid, onCoClear: this.onFieldClear, onCoFocus: () => this.coFocus.emit(), onCoBlur: () => this.coBlur.emit() }));
     }
     renderCalendar(touch) {
         return (h("co-calendar", { ref: (el) => (this.calendarEl = el), "data-touch": touch ? '' : undefined, value: this.value, min: this.min, max: this.max, disabledDates: this.disabledDates, disabledDaysOfWeek: this.disabledDaysOfWeek, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, onCoSelect: this.onCalendarSelect }));
@@ -402,6 +409,26 @@ export class CoDatePicker {
                 "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 inner co-date-field's border and\nbackground so it reads as plain content instead of a boxed control \u2014\npadding, label, focus ring, disabled and invalid states are unaffected.\n`default` (the standard bordered box) renders identically to before\nthis prop existed. co-date-field itself has no `variant` prop, so this\nis applied from the outside via `::part(field)` \u2014 see co-date-picker.css."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/co-date-range/co-date-range.js

@@ -33,7 +33,7 @@ export class CoDateRange {
         }
     }
     render() {
-        return (h("co-date-range-picker", { key: '4982a84de425fdf533128dc3ce3665b51d8c885d', value: this.value, label: this.label, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, presets: this.presets, helperText: this.helperText, locale: this.locale, applyLabel: this.applyLabel, clearLabel: this.clearLabel, onCoApply: this.handleApply, onCoClear: () => this.coClear.emit() }));
+        return (h("co-date-range-picker", { key: '8f9d549eb8f80d07555a2cd97677ce3969fb4aba', value: this.value, label: this.label, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, presets: this.presets, helperText: this.helperText, locale: this.locale, applyLabel: this.applyLabel, clearLabel: this.clearLabel, onCoApply: this.handleApply, onCoClear: () => this.coClear.emit() }));
     }
     static get is() { return "co-date-range"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-date-range-picker/co-date-range-picker.css

@@ -41,7 +41,7 @@
   /* 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);
   cursor: pointer;
   color: var(--co-semantic-text-default);
@@ -49,6 +49,18 @@
   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. Same
+   specificity (single class) as --open/--disabled right below and placed
+   before them, so those still win their cascade tie by source order —
+   opening the popover (focus) still shows the ring, and the invalid
+   compound-class rule further down (higher specificity) still wins too. */
+.co-date-range-picker__trigger--flat {
+  background: transparent;
+  border-color: transparent;
+}
+
 .co-date-range-picker__trigger--open {
   border-color: var(--co-semantic-border-focus);
   box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);

package/dist/collection/components/co-date-range-picker/co-date-range-picker.js

@@ -34,6 +34,11 @@ export class CoDateRangePicker {
         this.layout = 'vertical';
         /** Trigger size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
         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 invalid states are unaffected. `default` (the
+         *  standard bordered box) renders identically to before this prop existed. */
+        this.variant = 'default';
         this.placement = 'bottom-start';
         this.open = false;
         /** Max viewport width (px) that renders the picker as a bottom sheet. */
@@ -324,6 +329,7 @@ export class CoDateRangePicker {
             'co-date-range-picker__trigger': true,
             'co-date-range-picker__trigger--open': this.open,
             'co-date-range-picker__trigger--disabled': this.disabled,
+            'co-date-range-picker__trigger--flat': this.variant === 'flat',
         };
         if (this.isMobile) {
             return (h("div", { class: { 'co-date-range-picker': true, 'co-date-range-picker--invalid': isInvalid, [`co-date-range-picker--${this.size}`]: true }, onKeyDown: this.onRootKeyDown }, this.label && h("label", { class: "co-date-range-picker__label", part: "label" }, this.label, h(RequiredMark, { required: this.required })), h("div", { class: triggerClasses, part: "trigger", role: "button", tabIndex: this.disabled ? -1 : 0, "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false', onClick: this.openSheet }, this.renderTriggerChildren(t, showClear)), h("co-drawer", { position: "bottom", open: this.open, heading: t.selectDate, onCoClose: this.handleCancel }, this.renderPanel(t, true)), this.renderHelper(isInvalid, helper)));
@@ -795,6 +801,26 @@ export class CoDateRangePicker {
                 "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 invalid 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'"
+            },
             "placement": {
                 "type": "string",
                 "mutable": false,