@prolibu-suite/cobalt-core 0.6.0 → 0.7.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: '7d7318c97238d5784bc5e97b4d062324567f4298', 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: '6a9eb80dd31b3fdcbad3fd5375c24a7039d7ed91', 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: 'ea2fc2c66f3fdf9a385d30fe1c15a50196d61502', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '9a0c46128e14f5e62e956f51d292f8d59aa23bee', d: "M3 8h10", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round" }))), isOverlay && this.checked && !this.indeterminate && (h("svg", { key: '5898d1b96e97a2ba71bd80ef4ee9446a1250e88e', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '9dcac76996e654417555489e7d2c1467848ca242', 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: '3833a6596021f89ac26cd5201911d8fa4ca2f19a', 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: '05440263b3d6ba10c01b5c85e345dcaa121e3237', 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: 'd71d63015f9a594587f146cc041032381b22d369', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, h("co-icon", { key: 'fbf6114ccdbac2b6f7cce84d98b5d695a141bcd1', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (h("span", { key: 'db9984dcec5a53b9ddbd3d535031b46e25477b83', class: "co-chip__icon-left", part: "icon-left" }, h("co-icon", { key: 'cd745b03f23e86da95bc0eba975ebc3764b9661c', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (h("span", { key: '696a9b35c06a12b107cff95192e01584e167f147', class: "co-chip__icon-left", part: "icon-left" }, h("slot", { key: 'c485bf176b6f45ad04de0ce40e76c3fee9810a44', name: "icon-left" }))), h("span", { key: '30f93d2f29ced9dc817619f9b83c7e12e69c6664', class: "co-chip__label" }, h("slot", { key: '3e103e98d2557ac3fa9eb130a1ddac431c2005d3' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (h("span", { key: '65bd6af3007737372daef2afe379820ccc8addef', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (h("span", { key: 'acac0c84b83a53ad1fb9b22143ae2f31701ac226', class: "co-chip__icon-right", part: "icon-right" }, h("co-icon", { key: '60ad2e85d2c5658b3c4be23709c9aca6578fc4ac', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (h("span", { key: '020918e258d6d24b1a7d9f40dc8b90f31ce85690', class: "co-chip__icon-right", part: "icon-right" }, h("slot", { key: '1fdd279b5f3c8b24c8a6668441e09b6c3e90f900', name: "icon-right" }))), this.removable && (h("span", { key: '46bc990ba24fcf03ae0eb8f32797908c728ccddd', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, h("co-icon", { key: 'f18f1110893d39b013bb4d8f4bea117f107a8509', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (h("span", { key: '08ec959ca465adf3ac138336c7511293874bf540', class: "co-chip__trailing", part: "trailing" }, h("co-icon", { key: 'cd706e153280db4f0a4aa039e569d4cc123b8348', 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: 'bf1e124470ecaf6d214835e8bc01d481496c1c20', 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: 'af52a09e440de00f4f1951715043dfcc24291653', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: 'f6a5f5c10920f7289993d9d965e3b2eeff1e9a08', required: this.required }))), h("co-popover", { key: '865fe6f411d3f2312b1b1d0a089aae7ae19b4e6f', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '29feea25617531aec3072b6002a2cd3c13eb25e2', slot: "trigger", class: "co-color-picker__trigger" }, h("span", { key: '60ccd85b737ba09947ef2b5a9e64a0647bebfa6c', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: '1fae7ddf9b14ed14a9603cf9d9ed45b358d735b1', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '6cea80c1c13136d9526ab93d667c209bd1871f02', class: "co-color-picker__panel" }, h("div", { key: '637520727a4452a3de87a0a11715804a8a2cfe2f', 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: '21c2ea411903edcd18b40e91afdec27344e55185', class: "co-color-picker__hex-row" }, h("span", { key: 'ab7ec79d4edaf97e957735a64bb2cd806acdb8a2', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: '2526d185d375c0ac45c0ac088c3820e28bd94853', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: 'b2a5e1905f629bce7e910261eaa9731bef53110b', 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: 'c642e0f8093ae192cd23439e8cd80694f90d2ecf', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: 'f66cf310df66ac16283afa1d47974a71af66816b', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: 'c9578df8cc86de8ab277f44a72fae56f5f586004', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: 'c9b47133735bba79269e62d80b402766c4a8b019', 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: '6b8c6cfe2e881d0cba238960fae867205aae32c9', 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: 'b390d0401f69250a1a926f933d181be9a57e4f09', class: "co-column-picker__labels" }, this.label && h("label", { key: '6a073085876d0a24fc0e6083645de267c63ae16a', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: 'cd41ce02c3bee55bb80fc05cfbc69c662e747c5d', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: 'e508300691a608eba74f0eed4564d3eb00d473ce', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: '849fa75718686b0616ba36af36eacf2445e68e95', class: "co-column-picker__search" }, h("co-icon", { key: '5a5ff7c464cc5966164621e7c60e58e87cd42c6d', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: '2e4c97aa689ffbec464e63b27ff502cfdea1da20', 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: '2ee4f153a3c3ac3788338c94a7864602630f59fb', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: '281833ffc8f4a0bbe0287c55733fc0fdcd5cd1b6', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: 'cd4c8b1f1bfd728f118668aec42e486a4a9cbaae', class: "co-column-picker__toolbar" }, h("button", { key: 'c903f236b2c08a8d879c2b04eaaa54dc719ce7e2', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '42846fde5f9f53eb7bfe40b61781fd9ce7fbdb51', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: 'fda2bf84b90e2523cd27d35eca52c99b9b036101', class: "co-column-picker__toolbar-sep" }), h("button", { key: '2e084ef4652b9286a917849b790f053b65a33096', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: 'e853c6a5177863da0ed836b46cf4d446801b2c33', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: 'e68c03ccbdd3ae1f1402caacd08454574614ec9f', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: 'e132ebee1af4b1b73d7587589c9f6de5d6c663b0', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: 'ee5c9f8d58f0a36073bd2dc206b5113002464f6d', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: '15e9d64ea94e93119198cf33a375927f37d4f795', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '75539629763f3efc4a8c354954a3c0d166e108df', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: 'b84d6dee0cc0fc6cbe91aa67599e26a71e1a3a3c', 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

@@ -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: '9bda0302cc65a11065744a33ce2c48ad2d86f905', class: "co-pagination", part: "pagination" }, h("div", { key: '2605fca75f90b5f764ca8f070d79654d0653d6eb', class: "co-pagination__section" }, h("span", { key: '2296d9f00584bf8243cf6b1c32eeb8ce79b14fdc', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: '7a6a3a24ed99d708940f6da784d05f7c490d2f42', 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: '5d8af4318ba1a8e4e5c13862e7ea3877ae6b3bc4', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: '758ea59d9e614de2d7a5ebc3fe93e3af2cc28ae6', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '841f93bea5d817cdd42f076b1a056da6a3707cb2', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '8e381335184c0790c3379f0223239c7c478030c3', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '415dd90e5fb5f41071a35f4214f4d02387740c71', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '845b73359db84f19583ec716d79c1dc8310f87b3', 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: '55bf44bc21ed00c5058ad0197621cfcb1d81ec2d', class: "co-pagination__spacer" }), h("div", { key: '2c2a5384f9fda9a3de7c1abc3f2adca9f413e7e6', class: "co-pagination__section" }, h("span", { key: '6f1b81541df05323f428db30e88e467c0aa93a21', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '50c630088453b650deb17c77c4cfef90e5275ccb', class: "co-pagination__section co-pagination__nav" }, h("button", { key: 'e4755f11fba6d27ce861f1c41659f802427dabc4', 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: '1e1a386b40fb40f169c13619e6cb79993406d16d', 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: '3536bc260fea07e059915baf8b094426b5304b7f', 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: '5e241dc942081c61b96b8c58a69e03bba89ccdce', class: "co-date-field__labels" }, h("label", { key: '0b5c7b758d48d322dcb4587a662ebb4ca2f5843b', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: '3b134781a1b1199bf96140a74e37e5269ec58f86', required: this.required })))), h("div", { key: '3985035d2fb8b52c91dd3e5ad12989e0e94d59a6', class: "co-date-field__field-row" }, h("div", { key: '075d979038a918cb9936153031e8a4753d6fed19', class: "co-date-field__field", part: "field" }, h("co-icon", { key: 'c95e2441e0301031e54a57dfac9f58b071f50e9c', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: 'bc0c45cf1bcc0f26cdb3e0e5d757fe1db60b2b5e', class: "co-date-field__input-wrapper" }, h("input", { key: '804eedd12a02fc505e2b6743b17d189c4f3cf7cb', 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: 'f39034c484ebb4d07e173feea4bcc7fe16d53b5a', 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: 'ca94d8bca29632e70e08f99ef5605f24df458d25', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '3dd400a30b59443f232d8001852811aeaa4945f5', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: 'd5981fda3e0ab19fea518acddc4cf1c2641bbdd1', 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: 'e111d135454ac081770edddb290929903c376fea', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: 'da47256ba021dce0590ce3adfcd602b8715d7184', 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: 'f4fb3c7ea22266e6ff8516ecdfda885365a34985', 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,

package/dist/collection/components/co-drive-card/co-drive-card.js

@@ -74,7 +74,7 @@ export class CoDriveCard {
     }
     render() {
         const isFile = this.variant === 'file';
-        return (h("div", { key: '8f843886a6953476f075dcec86567da6d6160d51', class: {
+        return (h("div", { key: '942d53fe6341ba7c24665b6f10762eeb8aaad3f7', class: {
                 'co-drive-card': true,
                 [`co-drive-card--${this.variant}`]: true,
                 [`co-drive-card--${this.density}`]: true,

package/dist/collection/components/co-drop-zone/co-drop-zone.js

@@ -58,7 +58,7 @@ export class CoDropZone {
         this.coDragStateChange.emit(next);
     }
     render() {
-        return (h(Host, { key: '015443db8a6c29e05a99dfd947c9dbc258a244a2', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: '5d1756f75bf122e538842f146635ed7d6181b376' }), this.active && (h("div", { key: '1f52982512900c61cfbfa38f2fcf05db785c656e', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: '32a754269cb02d8010403545ab351eaa870e42e7', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: 'fa72d2e3802970233742faf1ce48b16594fd1d25', name: this.icon, size: 34 })), h("span", { key: '92d2d4b8daa9d1cb3eb1d79c1fe0a59ac290c9aa', class: "co-drop-zone__label", part: "label" }, this.label)))));
+        return (h(Host, { key: '3358f8a880d1105209b5047fe14b49c5c2d67033', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: 'd1fb8f1e918d1ca7d26b40d60903e743855d70e7' }), this.active && (h("div", { key: '72a2df7b78205ffa6da676c850fec495ea6e3e68', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: 'a25910837ccb5d20b16870272780578d2e3229a2', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: '5066e11590b64c48d2397be0af1a85d1a353a952', name: this.icon, size: 34 })), h("span", { key: '53237cbb8ec4c607ac7c7846419d65e63a8cfef6', class: "co-drop-zone__label", part: "label" }, this.label)))));
     }
     static get is() { return "co-drop-zone"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-empty-state/co-empty-state.js

@@ -13,11 +13,11 @@ export class CoEmptyState {
     render() {
         var _a;
         const iconWeight = (_a = this.iconWeight) !== null && _a !== void 0 ? _a : (this.variant === 'card' ? 'regular' : 'light');
-        return (h("div", { key: '4cf85c1fd72560c3fde039901adbac86a4fc147f', class: {
+        return (h("div", { key: 'f43461cfe3b4336f099a164130201842eb4c9634', class: {
                 'co-empty-state': true,
                 [`co-empty-state--${this.variant}`]: true,
                 [`co-empty-state--${this.size}`]: true,
-            }, part: "empty-state" }, this.icon && (h("div", { key: '4f8e8922631a5b88a9e158c2a6235515e8d09022', class: "co-empty-state__icon" }, h("co-icon", { key: '66fe90f142047bd3c03f901443e91b9a654e2bfa', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: 'fba5fe8abb82a90902e069d2f06730a3240b3cff', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: '82bb5115feb16737e9a6658a508ba6faa1ab1e24', class: "co-empty-state__description" }, this.description)), h("div", { key: '048fb44e84e107232753f0d203f512dba556338b', class: "co-empty-state__actions" }, h("slot", { key: 'd7b1111baa84f9eeda18606f18b721865678bfd5' }))));
+            }, part: "empty-state" }, this.icon && (h("div", { key: 'c8232663644d30471b3cf7bba67798baa0a0d75a', class: "co-empty-state__icon" }, h("co-icon", { key: '0bbd66e7d8b930fa33f52039e90714b4d0e436a8', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '17df7252b0cb40161798ce3b677efb7a2c1247f2', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: '52226dbdab22fc0524f6b49b4628dc68daf6a7fc', class: "co-empty-state__description" }, this.description)), h("div", { key: '9a27fe8be272eb5b6c0f820bd8671842a7ae4487', class: "co-empty-state__actions" }, h("slot", { key: '0cd1c07318977ac5aa3b55602f31c51a71682ee4' }))));
     }
     static get is() { return "co-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-event-calendar/co-event-calendar.js

@@ -146,10 +146,10 @@ export class CoEventCalendar {
         const t = getDateStrings(this.locale);
         const views = this.viewsList;
         const a = parseISO(this.anchor);
-        return (h("div", { key: 'dce81390ee349de59285e31506ec397aead8c1c5', class: "cal" }, h("div", { key: '58f3acb8a74558505aab88e95fbea15bc65cce2f', class: "cal__toolbar", part: "toolbar" }, h("div", { key: '9249edf79de99180871667f813aa40e288f130b7', class: "cal__nav-group" }, h("button", { key: '2cb250065f64860466b141b6dcaffeef60158dcc', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("button", { key: '15ebc01c5be71b48042735ee6247ad16a957493b', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: 'dc74fc8780144c952c7012cf0e984998650e96a7', name: "caret-left", size: 16 })), h("button", { key: 'e4d2ee75a2c8fa818d327a9d82fa23051ec8a24c', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: 'd489365423552d000655898ac267fdbfddd216c0', name: "caret-right", size: 16 }))), h("h2", { key: '370e61c61a12860d36b4a04cdbc5dee447fdfe46', class: "cal__title", "aria-live": "polite" }, this.title()), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
+        return (h("div", { key: '4820180047be56115d2b350343c50cd73e3c275c', class: "cal" }, h("div", { key: 'd623a44932b94bef980f35459247b743ee63b656', class: "cal__toolbar", part: "toolbar" }, h("div", { key: 'bd3019ee327752aeef1f8f5c8bcd738adf966861', class: "cal__nav-group" }, h("button", { key: '7e57307890143d11c1d18599025c9204c88c75fa', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("button", { key: '97270e2db26f1d014b4c92f01f68a38881cf9dc5', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: '64ef0715a090303ca38c039b456ead6e30ec79c9', name: "caret-left", size: 16 })), h("button", { key: '4c0e5eb70d51c8c7d74c4f49662395cc63d14c8a', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: 'e83a4ea954f6be95369b7af5c07fb8b3541761ea', name: "caret-right", size: 16 }))), h("h2", { key: '465e8b8aa199bb897d81226da06ad899d3c3467e', class: "cal__title", "aria-live": "polite" }, this.title()), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
             var _a;
             return (h("button", { type: "button", role: "tab", "aria-selected": this.view === v ? 'true' : 'false', class: { 'cal__view-btn': true, 'cal__view-btn--active': this.view === v }, onClick: () => this.switchView(v) }, (_a = t[v]) !== null && _a !== void 0 ? _a : v));
-        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: '26677d79d63d957315c09df9b18597009c9681cc', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
+        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: '4997eb7d83efa22dab101463c3550e0cee373b89', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
     }
     static get is() { return "co-event-calendar"; }
     static get encapsulation() { return "shadow"; }