@prolibu-suite/cobalt-core 0.6.0 → 0.8.0

package/dist/cjs/co-data-table.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
+var index = require('./index-kBiXCEE7.js');
 
-const coDataTableCss = () => `co-data-table{display:block;flex:1;min-height:0;overflow:hidden;contain:layout}.co-data-table{position:relative;font-family:var(--co-font-family-primary);background:var(--co-color-base-blanco);display:flex;flex-direction:column;height:100%}.co-data-table--resizing{cursor:col-resize;user-select:none}.co-data-table__scroll{flex:1;overflow-x:auto;overflow-y:auto;min-height:0}.co-data-table__table{min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.co-data-table__head{position:sticky;top:0;z-index:2}.co-data-table__header-row{height:40px}.co-data-table__th{position:relative;height:40px;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);text-align:left;vertical-align:middle;font-size:var(--co-font-size-14);font-weight:500;color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;overflow:hidden;box-sizing:border-box}.co-data-table__th:last-child{border-right:none}.co-data-table__th--sortable{cursor:pointer}.co-data-table__th--sortable:hover{background-image:linear-gradient(var(--co-semantic-surface-hover), var(--co-semantic-surface-hover))}.co-data-table__th-content{display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm)}.co-data-table__pin-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-300);cursor:pointer;opacity:0;transition:opacity 0.15s ease, color 0.15s ease}.co-data-table__pin-icon--active{opacity:1;color:var(--co-semantic-text-default)}.co-data-table__th:hover .co-data-table__pin-icon{opacity:1}.co-data-table__pin-icon:hover{color:var(--co-semantic-text-default)}.co-data-table__filter-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-300);cursor:pointer;opacity:0;transition:opacity 0.15s ease, color 0.15s ease}.co-data-table__th:hover .co-data-table__filter-icon{opacity:1}.co-data-table__filter-icon:hover{color:var(--co-semantic-text-default)}.co-data-table__filter-icon--active{opacity:1;color:var(--co-color-primary-azul)}.co-data-table__filter-icon--indirect{opacity:0.45;color:var(--co-semantic-text-muted)}.co-data-table__th-label{flex:1;overflow:hidden;text-overflow:ellipsis}.co-data-table__sort-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-400);transition:color 0.15s ease}.co-data-table__sort-icon--active{color:var(--co-semantic-text-default)}.co-data-table__sort-button{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm);background:transparent;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}.co-data-table__sort-button:focus-visible{outline:2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul));outline-offset:-2px;border-radius:var(--co-border-radius-xxs)}.co-data-table__th--checkbox,.co-data-table__td--checkbox{width:48px;min-width:48px;max-width:48px;padding:0 var(--co-spacing-md);text-align:center;line-height:0;}.co-data-table__th--sticky,.co-data-table__td--sticky{position:sticky;z-index:1;background:var(--co-color-base-blanco)}.co-data-table__th--sticky{z-index:3}.co-data-table__td--sticky::after,.co-data-table__th--sticky::after{content:'';position:absolute;top:0;right:-4px;bottom:0;width:4px;pointer-events:none;opacity:0;background:linear-gradient(to right, var(--co-color-opacity-negro-8), transparent);transition:opacity 0.15s ease}.co-data-table__resize-handle{position:absolute;top:0;right:-2px;width:5px;height:100%;cursor:col-resize;z-index:1}.co-data-table__resize-handle:hover{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__resize-handle--active{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__row{height:48px;transition:background-color 0.15s ease;content-visibility:auto;contain-intrinsic-size:auto 48px}.co-data-table__row:hover{background:var(--co-semantic-surface-hover)}.co-data-table__row--selected{background:var(--co-color-opacity-negro-4)}.co-data-table__row--selected:hover{background:var(--co-color-opacity-negro-8)}.co-data-table__td{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);vertical-align:middle;font-size:var(--co-font-size-12);font-weight:var(--co-font-weight-medium);color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.co-data-table__td:last-child{border-right:none}.co-data-table__th--align-center,.co-data-table__td--align-center{text-align:center}.co-data-table__th--align-right,.co-data-table__td--align-right{text-align:right}.co-data-table__cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.co-data-table--empty .co-data-table__scroll{flex:0 0 auto;overflow:hidden}.co-data-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1;min-height:280px;padding:var(--co-spacing-3xl) var(--co-spacing-lg);gap:var(--co-spacing-lg) }.co-data-table__empty-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-muted);color:var(--co-semantic-text-secondary);margin-bottom:var(--co-spacing-sm)}.co-data-table__empty-title{font-size:var(--co-font-size-24);font-weight:var(--co-font-weight-medium, 500);line-height:1.25;color:var(--co-semantic-text-default);letter-spacing:-0.03em}.co-data-table__empty-message{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);margin:0;max-width:538px ;line-height:1.25}.co-data-table__empty-action{margin-top:var(--co-spacing-md);display:inline-flex}.co-data-table__empty-action:empty{display:none}.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;width:70%}.co-data-table__skeleton--checkbox{width:16px;height:16px;margin:0 auto}@keyframes co-dt-shimmer{0%,100%{opacity:1}50%{opacity:0.4}}.co-data-table__row--skeleton{pointer-events:none;content-visibility:visible}.co-data-table__row--flash-create{animation:co-dt-flash-create 1s ease-out}.co-data-table__row--flash-update{animation:co-dt-flash-update 1s ease-out}.co-data-table__row--flash-delete{animation:co-dt-flash-delete 0.5s ease-out forwards}@keyframes co-dt-flash-create{0%{background-color:rgba(2, 162, 112, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-update{0%{background-color:rgba(37, 99, 235, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-delete{0%{opacity:1;background-color:rgba(170, 46, 27, 0.1)}100%{opacity:0;height:0;padding:0;overflow:hidden}}`;
+const coDataTableCss = () => `co-data-table{display:block;flex:1;min-height:0;overflow:hidden;contain:layout}.co-data-table{position:relative;font-family:var(--co-font-family-primary);background:var(--co-color-base-blanco);display:flex;flex-direction:column;height:100%}.co-data-table--resizing{cursor:col-resize;user-select:none}.co-data-table__scroll{flex:1;overflow-x:auto;overflow-y:auto;min-height:0}.co-data-table__table{min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.co-data-table__head{position:sticky;top:0;z-index:2}.co-data-table__header-row{height:40px}.co-data-table__th{position:relative;height:40px;padding:0 var(--co-spacing-md);background:var(--co-color-base-blanco);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);font-weight:500;color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;overflow:hidden;box-sizing:border-box}.co-data-table__th:last-child{border-right:none}.co-data-table__th--sortable{cursor:pointer}.co-data-table__th--sortable:hover{background-image:linear-gradient(var(--co-semantic-surface-hover), var(--co-semantic-surface-hover))}.co-data-table__th-content{display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm)}.co-data-table__pin-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-300);cursor:pointer;opacity:0;transition:opacity 0.15s ease, color 0.15s ease}.co-data-table__pin-icon--active{opacity:1;color:var(--co-semantic-text-default)}.co-data-table__th:hover .co-data-table__pin-icon{opacity:1}.co-data-table__pin-icon:hover{color:var(--co-semantic-text-default)}.co-data-table__filter-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-300);cursor:pointer;opacity:0;transition:opacity 0.15s ease, color 0.15s ease}.co-data-table__th:hover .co-data-table__filter-icon{opacity:1}.co-data-table__filter-icon:hover{color:var(--co-semantic-text-default)}.co-data-table__filter-icon--active{opacity:1;color:var(--co-color-primary-azul)}.co-data-table__filter-icon--indirect{opacity:0.45;color:var(--co-semantic-text-muted)}.co-data-table__th-label{flex:1;overflow:hidden;text-overflow:ellipsis}.co-data-table__sort-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-400);transition:color 0.15s ease}.co-data-table__sort-icon--active{color:var(--co-semantic-text-default)}.co-data-table__sort-button{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm);background:transparent;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}.co-data-table__sort-button:focus-visible{outline:2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul));outline-offset:-2px;border-radius:var(--co-border-radius-xxs)}.co-data-table__th--checkbox,.co-data-table__td--checkbox{width:48px;min-width:48px;max-width:48px;padding:0 var(--co-spacing-md);text-align:center;line-height:0;}.co-data-table__th--sticky,.co-data-table__td--sticky{position:sticky;z-index:1;background:var(--co-color-base-blanco)}.co-data-table__th--sticky{z-index:3}.co-data-table__td--sticky::after,.co-data-table__th--sticky::after{content:'';position:absolute;top:0;right:-4px;bottom:0;width:4px;pointer-events:none;opacity:0;background:linear-gradient(to right, var(--co-color-opacity-negro-8), transparent);transition:opacity 0.15s ease}.co-data-table__resize-handle{position:absolute;top:0;right:-2px;width:5px;height:100%;cursor:col-resize;z-index:1}.co-data-table__resize-handle:hover{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__resize-handle--active{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__row{height:48px;transition:background-color 0.15s ease;content-visibility:auto;contain-intrinsic-size:auto 48px}.co-data-table__row:hover{background:var(--co-semantic-surface-hover)}.co-data-table__row--selected{background:var(--co-color-opacity-negro-4)}.co-data-table__row--selected:hover{background:var(--co-color-opacity-negro-8)}.co-data-table__td{height:48px;padding:0 var(--co-spacing-md);background:inherit;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);color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.co-data-table__td:last-child{border-right:none}.co-data-table__th--align-center,.co-data-table__td--align-center{text-align:center}.co-data-table__th--align-right,.co-data-table__td--align-right{text-align:right}.co-data-table__cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.co-data-table--empty .co-data-table__scroll{flex:0 0 auto;overflow:hidden}.co-data-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1;min-height:280px;padding:var(--co-spacing-3xl) var(--co-spacing-lg);gap:var(--co-spacing-lg) }.co-data-table__empty-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-muted);color:var(--co-semantic-text-secondary);margin-bottom:var(--co-spacing-sm)}.co-data-table__empty-title{font-size:var(--co-font-size-24);font-weight:var(--co-font-weight-medium, 500);line-height:1.25;color:var(--co-semantic-text-default);letter-spacing:-0.03em}.co-data-table__empty-message{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);margin:0;max-width:538px ;line-height:1.25}.co-data-table__empty-action{margin-top:var(--co-spacing-md);display:inline-flex}.co-data-table__empty-action:empty{display:none}.co-data-table__skeleton{height:14px;border-radius:var(--co-border-radius-xxs);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%}.co-data-table__skeleton--checkbox{width:16px;height:16px;margin:0 auto}@keyframes co-dt-shimmer{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{pointer-events:none;content-visibility:visible}.co-data-table__row--flash-create{animation:co-dt-flash-create 1s ease-out}.co-data-table__row--flash-update{animation:co-dt-flash-update 1s ease-out}.co-data-table__row--flash-delete{animation:co-dt-flash-delete 0.5s ease-out forwards}@keyframes co-dt-flash-create{0%{background-color:rgba(2, 162, 112, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-update{0%{background-color:rgba(37, 99, 235, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-delete{0%{opacity:1;background-color:rgba(170, 46, 27, 0.1)}100%{opacity:0;height:0;padding:0;overflow:hidden}}`;
 
 const CoDataTable = class {
     constructor(hostRef) {

package/dist/cjs/co-date-picker.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
-var requiredMark = require('./requiredMark-B3pKyqYI.js');
-var dateI18n = require('./dateI18n-BdiNAl0_.js');
+var index = require('./index-kBiXCEE7.js');
+var requiredMark = require('./requiredMark-DuMIcKtt.js');
+var dateI18n = require('./dateI18n-wblvKRq_.js');
 
-const coDatePickerCss = () => `:host{display:block;font-family:var(--co-font-family-primary)}.co-date-picker{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-date-picker__label{padding:0 var(--co-spacing-xs);color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-date-picker__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs);color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-date-picker__helper--error{color:var(--co-semantic-status-error)}.co-date-picker co-popover{display:block;width:100%}.co-date-picker__trigger{display:block;width:100%;cursor:text}.co-date-picker__panel{padding:var(--co-spacing-md)}.co-date-picker__sheet{display:flex;justify-content:center;padding:var(--co-spacing-sm) 0 var(--co-spacing-lg)}:host([layout='horizontal']) .co-date-picker{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-date-picker__label{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-date-picker__label{white-space:normal}:host([layout='horizontal']) .co-date-picker>:not(.co-date-picker__label){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}`;
+const coDatePickerCss = () => `:host{display:block;font-family:var(--co-font-family-primary)}.co-date-picker{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}co-date-field[data-variant='flat']::part(field){background:transparent;border-color:transparent}.co-date-picker__label{padding:0 var(--co-spacing-xs);color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-date-picker__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs);color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-date-picker__helper--error{color:var(--co-semantic-status-error)}.co-date-picker co-popover{display:block;width:100%}.co-date-picker__trigger{display:block;width:100%;cursor:text}.co-date-picker__panel{padding:var(--co-spacing-md)}.co-date-picker__sheet{display:flex;justify-content:center;padding:var(--co-spacing-sm) 0 var(--co-spacing-lg)}:host([layout='horizontal']) .co-date-picker{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-date-picker__label{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-date-picker__label{white-space:normal}:host([layout='horizontal']) .co-date-picker>:not(.co-date-picker__label){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}`;
 
 const CoDatePicker = class {
     constructor(hostRef) {
@@ -24,6 +24,13 @@ const CoDatePicker = class {
         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;
@@ -149,7 +156,7 @@ const CoDatePicker = class {
         }
     }
     renderField() {
-        return (index.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 (index.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 (index.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 }));

package/dist/cjs/co-date-range-picker.cjs.entry.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
-var requiredMark = require('./requiredMark-B3pKyqYI.js');
-var dateI18n = require('./dateI18n-BdiNAl0_.js');
-var dates = require('./dates-D8D-aS5d.js');
+var index = require('./index-kBiXCEE7.js');
+var requiredMark = require('./requiredMark-DuMIcKtt.js');
+var dateI18n = require('./dateI18n-wblvKRq_.js');
+var dates = require('./dates-TQLHlFd2.js');
 
-const coDateRangePickerCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14)}.co-date-range-picker{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-date-range-picker__label{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);line-height:1;padding:0 var(--co-spacing-xs)}.co-date-range-picker co-popover{display:block;width:100%}.co-date-range-picker--s .co-date-range-picker__trigger{min-height:28px;padding:0 var(--co-spacing-sm)}.co-date-range-picker--sm .co-date-range-picker__trigger{min-height:32px;padding:0 var(--co-spacing-sm)}.co-date-range-picker--lg .co-date-range-picker__trigger{min-height:48px;padding:0 var(--co-spacing-lg)}.co-date-range-picker__trigger{display:inline-flex;align-items:center;gap:var(--co-spacing-sm2);width:100%;min-height:40px;padding:0 var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));border-radius:var(--co-border-radius-xs);cursor:pointer;color:var(--co-semantic-text-default);box-sizing:border-box;transition:border-color 0.15s ease, box-shadow 0.15s ease}.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)}.co-date-range-picker__trigger--disabled{opacity:0.5;cursor:not-allowed}.co-date-range-picker--invalid .co-date-range-picker__trigger{border-color:var(--co-semantic-status-error)}.co-date-range-picker__icon,.co-date-range-picker__caret{color:var(--co-semantic-text-muted);flex-shrink:0}.co-date-range-picker__trigger-text{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-date-range-picker__trigger-text--placeholder{color:var(--co-semantic-text-muted)}.co-date-range-picker__clear{background:none;border:0;padding:0;cursor:pointer;color:var(--co-semantic-text-muted);display:inline-flex;align-items:center;flex-shrink:0}.co-date-range-picker__clear:hover{color:var(--co-semantic-text-default)}.co-date-range-picker__panel{display:flex;flex-direction:column;gap:var(--co-spacing-md);padding:var(--co-spacing-md);min-width:280px}.co-date-range-picker__fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--co-spacing-sm)}.co-date-range-picker__body{display:flex;gap:var(--co-spacing-md);align-items:flex-start}.co-date-range-picker__body--touch{flex-direction:column;align-items:stretch}.co-date-range-picker__body--touch .co-date-range-picker__presets{flex-direction:row;flex-wrap:wrap;min-width:0;border-right:0;padding-right:0;border-bottom:1px solid var(--co-semantic-border-subtle);padding-bottom:var(--co-spacing-sm)}.co-date-range-picker__body--touch co-calendar{align-self:center}.co-date-range-picker__presets{display:flex;flex-direction:column;gap:var(--co-spacing-xxs);min-width:120px;border-right:1px solid var(--co-semantic-border-subtle);padding-right:var(--co-spacing-md)}.co-date-range-picker__preset{text-align:left;background:none;border:0;padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);font-size:var(--co-font-size-14);font-family:inherit;color:var(--co-semantic-text-default);cursor:pointer;transition:background 0.1s ease}.co-date-range-picker__preset:hover{background:var(--co-semantic-surface-hover)}.co-date-range-picker__footer{display:flex;justify-content:flex-end;gap:var(--co-spacing-sm);padding-top:var(--co-spacing-sm);border-top:1px solid var(--co-semantic-border-subtle)}.co-date-range-picker__btn{padding:var(--co-spacing-xs) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-size:var(--co-font-size-14);font-family:inherit;font-weight:500;cursor:pointer;border:0}.co-date-range-picker__btn--ghost{background:transparent;color:var(--co-semantic-text-default)}.co-date-range-picker__btn--ghost:hover{background:var(--co-semantic-surface-hover)}.co-date-range-picker__btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary)}.co-date-range-picker__btn--primary:hover:not(:disabled){opacity:0.88}.co-date-range-picker__btn--primary:disabled{opacity:0.5;cursor:not-allowed}.co-date-range-picker__helper{display:inline-flex;align-items:center;gap:var(--co-spacing-xs);font-size:var(--co-font-size-14);color:var(--co-semantic-text-muted);padding:0 var(--co-spacing-xs)}.co-date-range-picker__helper--error{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-date-range-picker{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-date-range-picker__label{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-date-range-picker__label{white-space:normal}:host([layout='horizontal']) .co-date-range-picker>:not(.co-date-range-picker__label){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}`;
+const coDateRangePickerCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14)}.co-date-range-picker{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-date-range-picker__label{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);line-height:1;padding:0 var(--co-spacing-xs)}.co-date-range-picker co-popover{display:block;width:100%}.co-date-range-picker--s .co-date-range-picker__trigger{min-height:28px;padding:0 var(--co-spacing-sm)}.co-date-range-picker--sm .co-date-range-picker__trigger{min-height:32px;padding:0 var(--co-spacing-sm)}.co-date-range-picker--lg .co-date-range-picker__trigger{min-height:48px;padding:0 var(--co-spacing-lg)}.co-date-range-picker__trigger{display:inline-flex;align-items:center;gap:var(--co-spacing-sm2);width:100%;min-height:40px;padding:0 var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);cursor:pointer;color:var(--co-semantic-text-default);box-sizing:border-box;transition:border-color 0.15s ease, box-shadow 0.15s ease}.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)}.co-date-range-picker__trigger--disabled{opacity:0.5;cursor:not-allowed}.co-date-range-picker--invalid .co-date-range-picker__trigger{border-color:var(--co-semantic-status-error)}.co-date-range-picker__icon,.co-date-range-picker__caret{color:var(--co-semantic-text-muted);flex-shrink:0}.co-date-range-picker__trigger-text{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-date-range-picker__trigger-text--placeholder{color:var(--co-semantic-text-muted)}.co-date-range-picker__clear{background:none;border:0;padding:0;cursor:pointer;color:var(--co-semantic-text-muted);display:inline-flex;align-items:center;flex-shrink:0}.co-date-range-picker__clear:hover{color:var(--co-semantic-text-default)}.co-date-range-picker__panel{display:flex;flex-direction:column;gap:var(--co-spacing-md);padding:var(--co-spacing-md);min-width:280px}.co-date-range-picker__fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--co-spacing-sm)}.co-date-range-picker__body{display:flex;gap:var(--co-spacing-md);align-items:flex-start}.co-date-range-picker__body--touch{flex-direction:column;align-items:stretch}.co-date-range-picker__body--touch .co-date-range-picker__presets{flex-direction:row;flex-wrap:wrap;min-width:0;border-right:0;padding-right:0;border-bottom:1px solid var(--co-semantic-border-subtle);padding-bottom:var(--co-spacing-sm)}.co-date-range-picker__body--touch co-calendar{align-self:center}.co-date-range-picker__presets{display:flex;flex-direction:column;gap:var(--co-spacing-xxs);min-width:120px;border-right:1px solid var(--co-semantic-border-subtle);padding-right:var(--co-spacing-md)}.co-date-range-picker__preset{text-align:left;background:none;border:0;padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);font-size:var(--co-font-size-14);font-family:inherit;color:var(--co-semantic-text-default);cursor:pointer;transition:background 0.1s ease}.co-date-range-picker__preset:hover{background:var(--co-semantic-surface-hover)}.co-date-range-picker__footer{display:flex;justify-content:flex-end;gap:var(--co-spacing-sm);padding-top:var(--co-spacing-sm);border-top:1px solid var(--co-semantic-border-subtle)}.co-date-range-picker__btn{padding:var(--co-spacing-xs) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-size:var(--co-font-size-14);font-family:inherit;font-weight:500;cursor:pointer;border:0}.co-date-range-picker__btn--ghost{background:transparent;color:var(--co-semantic-text-default)}.co-date-range-picker__btn--ghost:hover{background:var(--co-semantic-surface-hover)}.co-date-range-picker__btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary)}.co-date-range-picker__btn--primary:hover:not(:disabled){opacity:0.88}.co-date-range-picker__btn--primary:disabled{opacity:0.5;cursor:not-allowed}.co-date-range-picker__helper{display:inline-flex;align-items:center;gap:var(--co-spacing-xs);font-size:var(--co-font-size-14);color:var(--co-semantic-text-muted);padding:0 var(--co-spacing-xs)}.co-date-range-picker__helper--error{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-date-range-picker{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-date-range-picker__label{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-date-range-picker__label{white-space:normal}:host([layout='horizontal']) .co-date-range-picker>:not(.co-date-range-picker__label){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}`;
 
 const CoDateRangePicker = class {
     constructor(hostRef) {
@@ -39,6 +39,11 @@ const CoDateRangePicker = class {
         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. */
@@ -329,6 +334,7 @@ const CoDateRangePicker = class {
             '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 (index.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 && index.h("label", { class: "co-date-range-picker__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { required: this.required })), index.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)), index.h("co-drawer", { position: "bottom", open: this.open, heading: t.selectDate, onCoClose: this.handleCancel }, this.renderPanel(t, true)), this.renderHelper(isInvalid, helper)));

package/dist/cjs/co-date-range.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
+var index = require('./index-kBiXCEE7.js');
 
 const coDateRangeCss = () => `:host{display:block}`;
 
@@ -33,7 +33,7 @@ const CoDateRange = class {
         }
     }
     render() {
-        return (index.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 (index.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() }));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/co-date-time-picker.cjs.entry.js

@@ -0,0 +1,409 @@
+'use strict';
+
+var index = require('./index-kBiXCEE7.js');
+var requiredMark = require('./requiredMark-DuMIcKtt.js');
+var dateI18n = require('./dateI18n-wblvKRq_.js');
+var tz = require('./tz-Dgom0W69.js');
+var dates = require('./dates-TQLHlFd2.js');
+var time = require('./time-LBHtzLHe.js');
+
+const coDateTimePickerCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-date-time-picker{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-date-time-picker__label{padding:0 var(--co-spacing-xs);color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-date-time-picker co-popover{display:block;width:100%}.co-date-time-picker__trigger{display:block;width:100%}.co-date-time-picker__field{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;min-height:40px;box-sizing:border-box;overflow:hidden;min-width:0}.co-date-time-picker__field--s{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm)}.co-date-time-picker__field--sm{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm)}.co-date-time-picker__field--lg{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg)}:host([variant='flat']) .co-date-time-picker__field{background:transparent;border-color:transparent}.co-date-time-picker__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-date-time-picker__display{flex:1;min-width:0;display:flex;align-items:center;min-height:22px;padding:0;margin:0;border:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);text-align:left;cursor:pointer;outline:none}.co-date-time-picker__text,.co-date-time-picker__placeholder{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-date-time-picker__placeholder{color:var(--co-semantic-text-muted)}.co-date-time-picker__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-date-time-picker__clear--hidden{visibility:hidden;pointer-events:none}.co-date-time-picker__clear:hover{color:var(--co-semantic-text-default)}.co-date-time-picker__field:focus-within{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-date-time-picker__field--disabled{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed;pointer-events:none}.co-date-time-picker__field--disabled .co-date-time-picker__display,.co-date-time-picker__field--disabled .co-date-time-picker__placeholder,.co-date-time-picker__field--disabled .co-date-time-picker__icon{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-date-time-picker__field--readonly .co-date-time-picker__display{cursor:default}.co-date-time-picker__field--invalid{border-color:var(--co-semantic-status-error)}.co-date-time-picker__field--invalid:focus-within{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-date-time-picker__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs);color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-date-time-picker__helper--error{color:var(--co-semantic-status-error)}.co-date-time-picker__panel{display:flex;align-items:stretch;gap:var(--co-spacing-md);padding:var(--co-spacing-md)}.co-date-time-picker__calendar{flex:0 0 auto}.co-date-time-picker__times{position:relative;flex:0 0 auto;width:7.5rem;max-height:17.5rem;overflow-y:auto;overscroll-behavior:contain;padding-left:var(--co-spacing-sm2);border-left:1px solid var(--co-semantic-border-default);outline:none;box-sizing:border-box}.co-date-time-picker__times:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px;border-radius:var(--co-border-radius-xxs)}.co-date-time-picker__time{padding:var(--co-spacing-sm) var(--co-spacing-sm2);border-radius:var(--co-border-radius-xxs);color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1;white-space:nowrap;cursor:pointer;user-select:none}.co-date-time-picker__time:hover:not(.co-date-time-picker__time--selected){background:var(--co-semantic-surface-hover)}.co-date-time-picker__time--active:not(.co-date-time-picker__time--selected){box-shadow:inset 0 0 0 1px var(--co-semantic-border-focus)}.co-date-time-picker__time--selected{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);font-weight:600}.co-date-time-picker__sheet{display:flex;justify-content:center;padding:var(--co-spacing-sm) 0 var(--co-spacing-lg)}.co-date-time-picker__panel--touch{flex-direction:column;align-items:center}.co-date-time-picker__panel--touch .co-date-time-picker__times{width:100%;max-width:20rem;max-height:12rem;padding-left:0;padding-top:var(--co-spacing-sm2);border-left:none;border-top:1px solid var(--co-semantic-border-default)}.co-date-time-picker__panel--touch .co-date-time-picker__time{min-height:44px;display:flex;align-items:center}:host([layout='horizontal']) .co-date-time-picker{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-date-time-picker__label{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0;white-space:normal}:host([layout='horizontal']) .co-date-time-picker>:not(.co-date-time-picker__label){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}`;
+
+/** Wall-clock minute assumed when the incoming value carries no time of day. */
+const DEFAULT_MINUTES = 9 * 60;
+const CoDateTimePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coChange = index.createEvent(this, "coChange", 7);
+        this.coClear = index.createEvent(this, "coClear", 7);
+        this.coFocus = index.createEvent(this, "coFocus", 7);
+        this.coBlur = index.createEvent(this, "coBlur", 7);
+        this.coOpen = index.createEvent(this, "coOpen", 3);
+        this.coClose = index.createEvent(this, "coClose", 3);
+        /** Committed value: UTC ISO instant ("2026-07-25T21:30:00.000Z") or null. */
+        this.value = null;
+        /** Minutes between consecutive options in the time list. */
+        this.stepMinutes = 15;
+        /** 12-hour clock (Google style). `false` renders a 24h clock. */
+        this.hour12 = true;
+        this.locale = 'es-CO';
+        /** Date part of the trigger text (tokens yyyy/yy/MMMM/MMM/MM/M/dd/d). */
+        this.displayFormat = 'd MMM yyyy';
+        this.firstDayOfWeek = 1;
+        /** Field size, mirrors co-input/co-date-field: s 28 / sm 32 / md 40 / lg 48. */
+        this.size = 'md';
+        /** `flat` strips the trigger's border/background so it reads as content. */
+        this.variant = 'default';
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.clearable = true;
+        this.invalid = false;
+        /** Label layout: vertical (label above) or horizontal (label beside). */
+        this.layout = 'vertical';
+        /** Popover placement relative to the field. */
+        this.placement = 'bottom-start';
+        /** Whether the panel is open. */
+        this.open = false;
+        /** Max viewport width (px) that renders the panel as a bottom sheet. */
+        this.mobileBreakpoint = 600;
+        /** True when the viewport is at/under `mobileBreakpoint`. */
+        this.isMobile = false;
+        /** Minutes-of-day highlighted by the keyboard in the time list. */
+        this.activeMinutes = DEFAULT_MINUTES;
+        this.pendingFocusGrid = false;
+        this.pendingFocusTrigger = false;
+        /** 'center' when the list is (re)opened, 'nearest' while arrowing through it. */
+        this.pendingScroll = null;
+        this.mqlHandler = (e) => {
+            this.isMobile = e.matches;
+        };
+        // ── Trigger ────────────────────────────────────────────────
+        this.onTriggerKeyDown = (e) => {
+            if (e.key !== 'ArrowDown')
+                return;
+            e.preventDefault();
+            if (this.disabled || this.readonly)
+                return;
+            if (!this.open)
+                this.setOpen(true);
+            this.pendingFocusGrid = true;
+            if (this.calendarEl)
+                this.focusGridSoon();
+        };
+        this.onClearClick = (e) => {
+            // The clear button lives INSIDE co-popover's trigger box, which toggles the
+            // panel on any click it sees — clearing must not open/close it.
+            e.stopPropagation();
+            if (this.disabled || this.readonly)
+                return;
+            this.value = null;
+            this.coClear.emit();
+            this.coChange.emit(null);
+        };
+        // ── Calendar / time list ───────────────────────────────────
+        this.onCalendarSelect = (e) => {
+            var _a, _b;
+            const dayKey = e.detail;
+            if (!dayKey)
+                return;
+            // Google behaviour: the day commits but the panel STAYS open so the hour can
+            // be picked next. The previously chosen hour is preserved (09:00 if none).
+            const minutes = (_b = (_a = this.parts) === null || _a === void 0 ? void 0 : _a.minutes) !== null && _b !== void 0 ? _b : DEFAULT_MINUTES;
+            this.commit(dayKey, minutes);
+            this.activeMinutes = minutes;
+            this.pendingScroll = 'center';
+        };
+        this.pickTime = (minutes) => {
+            var _a, _b;
+            const dayKey = (_b = (_a = this.parts) === null || _a === void 0 ? void 0 : _a.dayKey) !== null && _b !== void 0 ? _b : tz.zonedDateKey(Date.now(), this.zone);
+            this.commit(dayKey, minutes);
+            this.activeMinutes = minutes;
+            // Picking the hour is the terminal step → apply and close.
+            this.setOpen(false);
+            this.pendingFocusTrigger = true;
+        };
+        this.onListKeyDown = (e) => {
+            const opts = this.options;
+            const hourStep = Math.max(1, Math.round(60 / this.step));
+            let i = opts.indexOf(this.activeMinutes);
+            if (i < 0)
+                i = 0;
+            switch (e.key) {
+                case 'ArrowDown':
+                    i += 1;
+                    break;
+                case 'ArrowUp':
+                    i -= 1;
+                    break;
+                case 'PageDown':
+                    i += hourStep;
+                    break;
+                case 'PageUp':
+                    i -= hourStep;
+                    break;
+                case 'Home':
+                    i = 0;
+                    break;
+                case 'End':
+                    i = opts.length - 1;
+                    break;
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    this.pickTime(this.activeMinutes);
+                    return;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            this.activeMinutes = opts[Math.min(opts.length - 1, Math.max(0, i))];
+            this.pendingScroll = 'nearest';
+        };
+        // ── Popover lifecycle ──────────────────────────────────────
+        this.onPopoverOpen = () => {
+            var _a, _b;
+            if (this.disabled || this.readonly) {
+                // co-popover toggles itself on trigger click; a non-interactive field must
+                // not open, so push it back closed instead of mirroring the state.
+                (_b = (_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.hide) === null || _b === void 0 ? void 0 : _b.call(_a);
+                return;
+            }
+            if (!this.open) {
+                this.open = true; // triggers @Watch('open') → active hour + scroll
+                this.coOpen.emit();
+            }
+        };
+        this.onPopoverClose = () => {
+            if (this.open) {
+                this.open = false;
+                this.coClose.emit();
+            }
+        };
+        this.onRootKeyDown = (e) => {
+            if (e.key === 'Escape' && this.open) {
+                e.stopPropagation();
+                this.setOpen(false);
+                this.pendingFocusTrigger = true;
+            }
+        };
+    }
+    connectedCallback() {
+        // Guarded: jsdom-style hosts (unit tests, SSR shims) have no matchMedia —
+        // the desktop popover is the right fallback there.
+        if (typeof window.matchMedia !== 'function')
+            return;
+        this.mql = window.matchMedia(`(max-width: ${this.mobileBreakpoint}px)`);
+        this.isMobile = this.mql.matches;
+        this.mql.addEventListener('change', this.mqlHandler);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.mqlHandler);
+    }
+    onOpenChange(next) {
+        var _a, _b;
+        if (!next)
+            return;
+        // Opening: highlight (and scroll to) the committed hour, 09:00 when empty.
+        this.activeMinutes = (_b = (_a = this.parts) === null || _a === void 0 ? void 0 : _a.minutes) !== null && _b !== void 0 ? _b : DEFAULT_MINUTES;
+        this.pendingScroll = 'center';
+    }
+    // ── Derived value ──────────────────────────────────────────
+    get zone() {
+        return this.timeZone || tz.getLocalTimeZone();
+    }
+    get isInvalid() {
+        return this.invalid;
+    }
+    /** Wall clock of the committed value in `zone`, or null when empty/invalid. */
+    get parts() {
+        const v = this.value;
+        if (!v)
+            return null;
+        // Date-only: a calendar day, not an instant (see the class doc).
+        if (/^\d{4}-\d{2}-\d{2}$/.test(v))
+            return { dayKey: v, minutes: DEFAULT_MINUTES };
+        try {
+            return { dayKey: tz.zonedDateKey(v, this.zone), minutes: tz.zonedMinutesOfDay(v, this.zone) };
+        }
+        catch (_a) {
+            return null;
+        }
+    }
+    /** Calendar bounds are date-only; accept an instant and reduce it to its day. */
+    dayBound(v) {
+        if (!v)
+            return undefined;
+        if (/^\d{4}-\d{2}-\d{2}$/.test(v))
+            return v;
+        try {
+            return tz.zonedDateKey(v, this.zone);
+        }
+        catch (_a) {
+            return undefined;
+        }
+    }
+    setOpen(next) {
+        if (this.open === next)
+            return;
+        this.open = next;
+        if (next)
+            this.coOpen.emit();
+        else
+            this.coClose.emit();
+    }
+    /** Write day+minutes as a UTC instant and notify. */
+    commit(dayKey, minutes) {
+        const [year, month, day] = dayKey.split('-').map(Number);
+        if (!year || !month || !day)
+            return;
+        const epoch = tz.wallClockToEpoch({ year, month, day, hour: Math.floor(minutes / 60), minute: minutes % 60, second: 0 }, this.zone);
+        const iso = tz.toUtcISO(epoch);
+        this.value = iso;
+        this.coChange.emit(iso);
+    }
+    // ── Focus / scroll bookkeeping ─────────────────────────────
+    focusGridSoon() {
+        requestAnimationFrame(() => {
+            var _a, _b;
+            (_b = (_a = this.calendarEl) === null || _a === void 0 ? void 0 : _a.focusGrid) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+    }
+    scrollActiveIntoView(mode) {
+        const list = this.listEl;
+        if (!list)
+            return;
+        const el = list.querySelector('[data-active="true"]');
+        if (!el)
+            return;
+        // Manual scrollTop (not scrollIntoView): the panel lives in the top layer and
+        // scrollIntoView would also scroll the page behind it.
+        if (mode === 'center') {
+            list.scrollTop = Math.max(0, el.offsetTop - list.clientHeight / 2 + el.offsetHeight / 2);
+            return;
+        }
+        // Arrowing: only reveal when the option fell out of view, so the list does
+        // not jump under the cursor on every keystroke.
+        const top = el.offsetTop;
+        const bottom = top + el.offsetHeight;
+        if (top < list.scrollTop)
+            list.scrollTop = top;
+        else if (bottom > list.scrollTop + list.clientHeight) {
+            list.scrollTop = bottom - list.clientHeight;
+        }
+    }
+    componentDidRender() {
+        var _a;
+        if (this.pendingFocusGrid && this.open && this.calendarEl) {
+            this.pendingFocusGrid = false;
+            this.focusGridSoon();
+        }
+        if (this.pendingScroll && this.open && this.listEl) {
+            const mode = this.pendingScroll;
+            this.pendingScroll = null;
+            this.scrollActiveIntoView(mode);
+        }
+        if (this.pendingFocusTrigger) {
+            this.pendingFocusTrigger = false;
+            (_a = this.triggerBtn) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    // ── Options ────────────────────────────────────────────────
+    get step() {
+        const s = Math.round(Number(this.stepMinutes));
+        return Number.isFinite(s) && s > 0 ? Math.min(720, s) : 15;
+    }
+    /** Grid of minutes-of-day, plus the committed hour when it falls off-grid
+     *  (an imported 16:37 meeting must stay visible and selectable). */
+    get options() {
+        var _a, _b;
+        return timeOptions(this.step, (_b = (_a = this.parts) === null || _a === void 0 ? void 0 : _a.minutes) !== null && _b !== void 0 ? _b : null);
+    }
+    // ── Render ─────────────────────────────────────────────────
+    renderTrigger(t) {
+        const p = this.parts;
+        const text = p
+            ? `${dates.formatDisplay(p.dayKey, this.displayFormat, this.locale)}, ${clockLabel(p.minutes, this.locale, this.hour12)}`
+            : '';
+        const showClear = this.clearable && !!p && !this.disabled && !this.readonly;
+        return (index.h("div", { class: {
+                'co-date-time-picker__field': true,
+                'co-date-time-picker__field--disabled': this.disabled,
+                'co-date-time-picker__field--readonly': this.readonly,
+                'co-date-time-picker__field--invalid': this.isInvalid,
+                [`co-date-time-picker__field--${this.size}`]: true,
+            }, part: "field" }, index.h("co-icon", { name: "calendar", size: 16, class: "co-date-time-picker__icon" }), index.h("button", { ref: (el) => (this.triggerBtn = el), type: "button", class: "co-date-time-picker__display", disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false', "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onKeyDown: this.onTriggerKeyDown, onFocus: () => this.coFocus.emit(), onBlur: () => this.coBlur.emit(), part: "display" }, text ? (index.h("span", { class: "co-date-time-picker__text" }, text)) : (index.h("span", { class: "co-date-time-picker__placeholder" }, this.placeholder || t.setDateTime))), this.clearable && (index.h("button", { class: {
+                'co-date-time-picker__clear': true,
+                'co-date-time-picker__clear--hidden': !showClear,
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault(), onClick: this.onClearClick, "aria-label": t.clearDateTime, part: "clear" }, index.h("co-icon", { name: "x-circle", size: 16, weight: "fill" })))));
+    }
+    renderPanel(t, touch) {
+        var _a, _b, _c, _d;
+        const selected = (_b = (_a = this.parts) === null || _a === void 0 ? void 0 : _a.minutes) !== null && _b !== void 0 ? _b : null;
+        return (index.h("div", { class: {
+                'co-date-time-picker__panel': true,
+                'co-date-time-picker__panel--touch': touch,
+            } }, index.h("co-calendar", { ref: (el) => (this.calendarEl = el), class: "co-date-time-picker__calendar", "data-touch": touch ? '' : undefined, value: (_d = (_c = this.parts) === null || _c === void 0 ? void 0 : _c.dayKey) !== null && _d !== void 0 ? _d : null, min: this.dayBound(this.min), max: this.dayBound(this.max), disabledDates: this.disabledDates, disabledDaysOfWeek: this.disabledDaysOfWeek, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, onCoSelect: this.onCalendarSelect }), index.h("div", { ref: (el) => (this.listEl = el), class: "co-date-time-picker__times", role: "listbox", tabIndex: 0, "aria-label": t.timeLabel, "aria-activedescendant": `co-dtp-time-${this.activeMinutes}`, onKeyDown: this.onListKeyDown }, this.options.map((m) => (index.h("div", { key: m, id: `co-dtp-time-${m}`, role: "option", "aria-selected": m === selected ? 'true' : 'false', "data-active": m === this.activeMinutes ? 'true' : undefined, class: {
+                'co-date-time-picker__time': true,
+                'co-date-time-picker__time--selected': m === selected,
+                'co-date-time-picker__time--active': m === this.activeMinutes,
+            }, onClick: () => this.pickTime(m) }, clockLabel(m, this.locale, this.hour12)))))));
+    }
+    renderHelper() {
+        const helper = this.isInvalid ? this.errorMessage : this.helperText;
+        if (!helper)
+            return null;
+        return (index.h("div", { class: {
+                'co-date-time-picker__helper': true,
+                'co-date-time-picker__helper--error': this.isInvalid,
+            }, part: "helper" }, this.isInvalid && index.h("co-icon", { name: "warning-circle", size: 14 }), index.h("span", null, helper)));
+    }
+    renderLabel() {
+        if (!this.label)
+            return null;
+        return (index.h("label", { class: "co-date-time-picker__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { required: this.required })));
+    }
+    render() {
+        var _a;
+        const t = dateI18n.getDateStrings(this.locale);
+        return (index.h("div", { key: '45d0284c91912bd5ee6f2c6a348611e0ef7c0dfc', class: "co-date-time-picker", onKeyDown: this.onRootKeyDown }, this.renderLabel(), this.isMobile ? ([
+            index.h("div", { class: "co-date-time-picker__trigger", onClick: () => !this.disabled && !this.readonly && this.setOpen(true) }, this.renderTrigger(t)),
+            index.h("co-drawer", { position: "bottom", open: this.open, heading: t.selectDateTime, onCoClose: () => this.setOpen(false) }, index.h("div", { class: "co-date-time-picker__sheet" }, this.renderPanel(t, true))),
+        ]) : (index.h("co-popover", { ref: (el) => (this.popoverEl = el), open: this.open, placement: this.placement, offset: 4, closeOnEscape: false, onCoOpen: this.onPopoverOpen, onCoClose: this.onPopoverClose }, index.h("div", { slot: "trigger", class: "co-date-time-picker__trigger" }, this.renderTrigger(t)), this.open && this.renderPanel(t, false))), this.name && index.h("input", { key: '1afc6190afea10f2dc7c9a04ed2624cc3a80e0f5', type: "hidden", name: this.name, value: (_a = this.value) !== null && _a !== void 0 ? _a : '' }), this.renderHelper()));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
+};
+// ── Module-level caches ──────────────────────────────────────
+// Intl.DateTimeFormat is expensive to construct and these labels are recomputed
+// on every render over a BOUNDED domain (≤96 minutes-of-day × 1-2 locales): the
+// RESULT is cached (and the formatter, for the miss). Hygiene clear at 2000
+// entries — unreachable in normal use, it only guards pathological iteration.
+const LABEL_CACHE = new Map();
+const LABEL_FMT_CACHE = new Map();
+const OPTIONS_CACHE = new Map();
+/** Minutes-of-day → localized clock label ("4:30 p. m." / "16:30"). */
+function clockLabel(minutes, locale, hour12) {
+    const key = `${locale}|${hour12 ? 12 : 24}|${minutes}`;
+    const hit = LABEL_CACHE.get(key);
+    if (hit !== undefined)
+        return hit;
+    let fmt = LABEL_FMT_CACHE.get(`${locale}|${hour12 ? 12 : 24}`);
+    if (!fmt) {
+        // hour12 forced (not left to the locale): "es" bare is a 24h locale and
+        // would render bare numbers with no am/pm marker.
+        fmt = new Intl.DateTimeFormat(locale, Object.assign({ hour: 'numeric', minute: '2-digit' }, (hour12 ? { hour12: true } : { hourCycle: 'h23' })));
+        LABEL_FMT_CACHE.set(`${locale}|${hour12 ? 12 : 24}`, fmt);
+    }
+    const out = fmt.format(new Date(2000, 0, 1, Math.floor(minutes / 60), minutes % 60));
+    if (LABEL_CACHE.size > 2000)
+        LABEL_CACHE.clear();
+    LABEL_CACHE.set(key, out);
+    return out;
+}
+/** Minutes-of-day grid at `step`, plus `extra` when it falls off-grid. */
+function timeOptions(step, extra) {
+    const key = `${step}|${extra !== null && extra !== void 0 ? extra : ''}`;
+    const hit = OPTIONS_CACHE.get(key);
+    if (hit)
+        return hit;
+    const out = [];
+    for (let m = 0; m < time.MINUTES_PER_DAY; m += step)
+        out.push(m);
+    if (extra != null && extra >= 0 && extra < time.MINUTES_PER_DAY && !out.includes(extra)) {
+        out.push(extra);
+        out.sort((a, b) => a - b);
+    }
+    if (OPTIONS_CACHE.size > 200)
+        OPTIONS_CACHE.clear();
+    OPTIONS_CACHE.set(key, out);
+    return out;
+}
+CoDateTimePicker.style = coDateTimePickerCss();
+
+exports.co_date_time_picker = CoDateTimePicker;

package/dist/cjs/co-drive-card.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
+var index = require('./index-kBiXCEE7.js');
 
 const coDriveCardCss = () => `:host{display:block}.co-drive-card{--dc-accent:var(--co-color-primary-azul, #2563eb);position:relative;box-sizing:border-box;width:100%;border-radius:14px;cursor:pointer;outline:none;font-family:var(--co-font-family-primary);background:var(--co-color-base-blanco, #fff);box-shadow:inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-drive-card:focus-visible{box-shadow:inset 0 0 0 1.5px var(--dc-accent)}.co-drive-card--folder{display:flex;align-items:center;gap:12px;transition:box-shadow 0.14s ease, background 0.12s ease}.co-drive-card--folder.co-drive-card--comfy{padding:14px}.co-drive-card--folder.co-drive-card--compact{padding:10px 12px}.co-drive-card--folder:hover:not(.co-drive-card--selected){box-shadow:var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),     inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-drive-card--folder.co-drive-card--selected{background:color-mix(in srgb, var(--dc-accent) 7%, white);box-shadow:inset 0 0 0 1.5px var(--dc-accent)}.co-drive-card__tile{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;background:color-mix(in srgb, var(--dc-accent) 12%, white);color:var(--dc-accent)}.co-drive-card--comfy .co-drive-card__tile{width:44px;height:44px}.co-drive-card--compact .co-drive-card__tile{width:38px;height:38px}.co-drive-card__text{flex:1;min-width:0;display:flex;flex-direction:column}.co-drive-card__name{font-family:var(--co-font-family-primary);font-size:14px;font-weight:500;line-height:1.3;color:var(--co-color-base-negro, #1f1c1b);letter-spacing:var(--co-font-letter-spacing-body, -0.03em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-drive-card__meta{font-family:var(--co-font-family-primary);font-size:12px;color:var(--co-color-gray-500, #888888);margin-top:2px;letter-spacing:var(--co-font-letter-spacing-body, -0.03em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-drive-card__trailing{flex-shrink:0;display:flex;align-items:center;gap:6px}.co-drive-card__star{display:inline-flex;color:var(--co-color-primary-amarillo, #fdbf00)}.co-drive-card--file{display:flex;flex-direction:column;gap:10px;transition:box-shadow 0.14s ease}.co-drive-card--file.co-drive-card--comfy{padding:10px}.co-drive-card--file.co-drive-card--compact{padding:8px}.co-drive-card--file:hover:not(.co-drive-card--selected):not(.co-drive-card--active){box-shadow:var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),     inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-drive-card--file.co-drive-card--active:not(.co-drive-card--selected){box-shadow:inset 0 0 0 1.5px var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25))}.co-drive-card--file.co-drive-card--selected{box-shadow:inset 0 0 0 1.5px var(--dc-accent)}.co-drive-card__thumb{display:block;border-radius:10px;overflow:hidden;background:var(--co-color-gray-100, #f6f6f6)}.co-drive-card--comfy .co-drive-card__thumb{height:132px}.co-drive-card--compact .co-drive-card__thumb{height:96px}.co-drive-card__thumb ::slotted(*){display:block;width:100%;height:100%}.co-drive-card__thumb ::slotted(img){object-fit:cover}.co-drive-card--file .co-drive-card__name{font-size:13px}.co-drive-card__sub{font-family:var(--co-font-family-primary);font-size:11.5px;color:var(--co-color-gray-500, #888888);margin-top:1px;letter-spacing:var(--co-font-letter-spacing-body, -0.03em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-drive-card__foot{display:flex;align-items:center;gap:8px;padding:0 2px 2px}.co-drive-card__type{flex-shrink:0;display:inline-flex}.co-drive-card__foot-text{flex:1;min-width:0;display:flex;flex-direction:column}.co-drive-card__actions{flex-shrink:0;display:inline-flex;align-items:center;color:var(--co-color-gray-400, #a0a0a0);opacity:0;transition:opacity 0.12s ease}.co-drive-card:hover .co-drive-card__actions{opacity:1}.co-drive-card__star-overlay{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--co-color-base-blanco, #fff);opacity:0;transition:opacity 0.12s ease}.co-drive-card:hover .co-drive-card__star-overlay,.co-drive-card--starred .co-drive-card__star-overlay{opacity:1}.co-drive-card--starred .co-drive-card__star-overlay{color:var(--co-color-primary-amarillo, #fdbf00)}.co-drive-card__select{position:absolute;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;opacity:0;transition:opacity 0.12s ease;background:rgba(255, 255, 255, 0.9);box-shadow:inset 0 0 0 1px var(--co-color-opacity-negro-16, rgba(31, 28, 27, 0.16))}.co-drive-card:hover .co-drive-card__select,.co-drive-card--selected .co-drive-card__select{opacity:1}.co-drive-card--folder .co-drive-card__select{top:8px;left:8px;width:20px;height:20px}.co-drive-card--file .co-drive-card__select{top:16px;left:16px;width:22px;height:22px;background:rgba(255, 255, 255, 0.92)}.co-drive-card--selected .co-drive-card__select{background:var(--dc-accent);box-shadow:none}.co-drive-card__check{display:block;pointer-events:none}`;
 
@@ -66,7 +66,7 @@ const CoDriveCard = class {
     }
     render() {
         const isFile = this.variant === 'file';
-        return (index.h("div", { key: '8f843886a6953476f075dcec86567da6d6160d51', class: {
+        return (index.h("div", { key: 'de146bee6d498936524230709866a1b79ad3b34f', class: {
                 'co-drive-card': true,
                 [`co-drive-card--${this.variant}`]: true,
                 [`co-drive-card--${this.density}`]: true,

package/dist/cjs/co-drop-zone.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
+var index = require('./index-kBiXCEE7.js');
 
 const coDropZoneCss = () => `:host{position:relative;display:block}.co-drop-zone__overlay{position:absolute;inset:12px;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-radius:16px;border:2px dashed var(--co-drop-zone-accent, var(--co-color-primary-azul, #2563eb));background:color-mix(     in srgb,     var(--co-drop-zone-accent, var(--co-color-primary-azul, #2563eb)) 8%,     rgba(255, 255, 255, 0.85)   );-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none}.co-drop-zone__badge{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:20px;background:var(--co-color-base-blanco, #fff);color:var(--co-drop-zone-accent, var(--co-color-primary-azul, #2563eb));box-shadow:var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04))}.co-drop-zone__label{font-family:var(--co-font-family-primary);letter-spacing:var(--co-font-letter-spacing-body, -0.03em);font-size:18px;font-weight:500;color:var(--co-color-base-negro, #1f1c1b)}`;
 
@@ -55,7 +55,7 @@ const CoDropZone = class {
         this.coDragStateChange.emit(next);
     }
     render() {
-        return (index.h(index.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 }, index.h("slot", { key: '5d1756f75bf122e538842f146635ed7d6181b376' }), this.active && (index.h("div", { key: '1f52982512900c61cfbfa38f2fcf05db785c656e', class: "co-drop-zone__overlay", part: "overlay" }, index.h("div", { key: '32a754269cb02d8010403545ab351eaa870e42e7', class: "co-drop-zone__badge", part: "badge" }, index.h("co-icon", { key: 'fa72d2e3802970233742faf1ce48b16594fd1d25', name: this.icon, size: 34 })), index.h("span", { key: '92d2d4b8daa9d1cb3eb1d79c1fe0a59ac290c9aa', class: "co-drop-zone__label", part: "label" }, this.label)))));
+        return (index.h(index.Host, { key: 'cafe8242c821aa2258ab579cd5ecc82b77e2d7b3', 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 }, index.h("slot", { key: 'ec3c95cda838eab85e6a825c437954a190c0d25c' }), this.active && (index.h("div", { key: '74150a61764fde4ae351a7105916cde81ad42c80', class: "co-drop-zone__overlay", part: "overlay" }, index.h("div", { key: 'a7622e82346dd8657e6fbfeb7476b7f948e5ad25', class: "co-drop-zone__badge", part: "badge" }, index.h("co-icon", { key: '73725c98333f7a9fef978b82c447f631c742996b', name: this.icon, size: 34 })), index.h("span", { key: 'cf5900ec506c13664149598f6a509c50b405f7af', class: "co-drop-zone__label", part: "label" }, this.label)))));
     }
 };
 CoDropZone.style = coDropZoneCss();