@prolibu-suite/cobalt-core 0.9.3 → 0.9.5

package/dist/esm/co-ref-field.entry.js

@@ -1,8 +1,9 @@
 import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CrtiywTB.js';
 import { R as RequiredMark } from './requiredMark-DCD-ZA51.js';
-import { F as FieldChip } from './fieldChip-BZDUy9Z-.js';
+import { F as FieldChip } from './fieldChip-DsAfq1e0.js';
+import { i as isLightColor } from './color-BG4WRR22.js';
 
-const coRefFieldCss = () => `: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;position:relative}.co-ref-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-ref-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-ref-field__label{display:inline-flex;align-items:center;color:var(--co-ref-field-label-color, var(--co-semantic-text-secondary));font-family:var(--co-ref-field-label-font-family, var(--co-font-family-primary));font-size:var(--co-ref-field-label-font-size, var(--co-font-size-14));font-weight:var(--co-ref-field-label-font-weight, 400);line-height:1;white-space:nowrap;cursor:default;text-transform:var(--co-ref-field-label-text-transform, none);letter-spacing:var(--co-ref-field-label-letter-spacing, var(--co-font-letter-spacing-body))}.co-ref-field__secondary-label{color:var(--co-semantic-text-muted);font-family:var(--co-font-family-mono);font-size:var(--co-font-size-12);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-ref-field__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-ref-field-trigger-bg, var(--co-semantic-surface-page));border:1px solid var(--co-ref-field-trigger-border-color, var(--co-semantic-border-field));border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-ref-field--flat{background:transparent;border-color:transparent}.co-ref-field--s{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-ref-field--sm{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-ref-field--lg{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-ref-field--open{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-ref-field--disabled{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-ref-field--error{border-color:var(--co-semantic-status-error)}.co-ref-field--success{border-color:var(--co-semantic-status-success)}.co-ref-field--warning{border-color:var(--co-color-status-review)}.co-ref-field--s .co-ref-field__selected{--co-avatar-size:20px}.co-ref-field--sm .co-ref-field__selected{--co-avatar-size:22px}.co-ref-field--md .co-ref-field__selected{--co-avatar-size:22px}.co-ref-field--lg .co-ref-field__selected{--co-avatar-size:28px}.co-ref-field__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__label-icon{flex-shrink:0;margin-right:var(--co-spacing-xs);color:var(--co-semantic-text-secondary)}.co-ref-field__value{flex:1;min-width:0;display:flex;align-items:center}.co-ref-field__placeholder{color:var(--co-semantic-text-muted);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__trigger-badge{flex-shrink:0;display:grid;place-items:center;width:18px;height:18px;border-radius:var(--co-border-radius-xxs);background:var(--co-ref-field-trigger-badge-bg, rgba(0, 0, 0, 0.22));color:var(--co-semantic-text-default)}.co-ref-field__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-ref-field__clear:hover{color:var(--co-semantic-text-default)}.co-ref-field__selected{display:flex;align-items:center;gap:var(--co-spacing-sm);min-width:0}.co-ref-field__color-dot{width:10px;height:10px;min-width:10px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__avatar{flex-shrink:0}.co-ref-field__selected-label{color:var(--co-semantic-text-default);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__chips-row{flex:1;min-width:0;display:flex;align-items:center;gap:var(--co-spacing-xs)}.co-ref-field__chips{flex:1;min-width:0;display:flex;flex-wrap:nowrap;overflow:hidden;gap:var(--co-spacing-xs);align-items:center}.co-ref-field__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-sm);padding:0 var(--co-spacing-sm2);background:var(--co-color-gray-100);border-radius:var(--co-border-radius-full);line-height:1;max-width:min(160px, 100%);flex-shrink:0}.co-ref-field__chip--avatar{padding-left:var(--co-spacing-xxs)}.co-ref-field__chip--s{min-height:20px;--co-avatar-size:20px;font-size:var(--co-font-size-12)}.co-ref-field__chip--sm{min-height:22px;--co-avatar-size:22px;font-size:var(--co-font-size-12)}.co-ref-field__chip--md{min-height:22px;--co-avatar-size:22px;font-size:var(--co-font-size-14)}.co-ref-field__chip--lg{min-height:28px;--co-avatar-size:28px;font-size:var(--co-font-size-14)}.co-ref-field__chip--clipped{visibility:hidden}.co-ref-field__chip-dot{width:8px;height:8px;min-width:8px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__chip-label{color:var(--co-semantic-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.co-ref-field__chip-remove{display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-color-gray-500);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out);flex-shrink:0}.co-ref-field__chip-remove:hover{color:var(--co-semantic-text-default)}.co-ref-field__chip-overflow{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs) var(--co-spacing-sm);background:var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-12);font-weight:600;color:var(--co-semantic-text-secondary);line-height:1}.co-ref-field__panel{display:flex;flex-direction:column;border-radius:var(--co-border-radius-sm, 12px);overflow:hidden}.co-ref-field__panel--dark{--co-semantic-surface-page:#0A0A0A;--co-semantic-surface-primary:#0A0A0A;--co-semantic-surface-hover:rgba(255, 255, 255, 0.08);--co-semantic-surface-muted:rgba(255, 255, 255, 0.12);--co-semantic-text-default:#ffffff;--co-semantic-text-secondary:rgba(255, 255, 255, 0.8);--co-semantic-text-muted:rgba(255, 255, 255, 0.5);--co-semantic-border-subtle:rgba(255, 255, 255, 0.12);--co-semantic-border-default:rgba(255, 255, 255, 0.16);background:#0A0A0A;color:#ffffff}.co-ref-field__panel--light{--co-semantic-surface-page:#ffffff;--co-semantic-surface-primary:#ffffff;--co-semantic-surface-hover:var(--co-color-gray-100, #f5f5f5);--co-semantic-surface-muted:var(--co-color-gray-200, #e5e5e5);--co-semantic-text-default:var(--co-color-gray-700, #1F1C1B);--co-semantic-text-secondary:rgba(0, 0, 0, 0.6);--co-semantic-text-muted:rgba(0, 0, 0, 0.45);--co-semantic-border-subtle:var(--co-color-gray-200, #e5e5e5);--co-semantic-border-default:var(--co-color-gray-300, #d4d4d4);background:#ffffff;color:var(--co-color-gray-700, #1F1C1B)}.co-ref-field__footer{display:flex;gap:var(--co-spacing-sm2);border-top:1px solid var(--co-semantic-border-subtle);padding:var(--co-spacing-sm2)}.co-ref-field__footer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box;min-height:32px}.co-ref-field__footer-btn:hover{opacity:0.85}.co-ref-field__footer-btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-ref-field__footer-btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}.co-ref-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs);font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-muted)}.co-ref-field__helper--error{color:var(--co-semantic-status-error)}.co-ref-field__helper--success{color:var(--co-semantic-status-success)}.co-ref-field__helper--warning{color:var(--co-color-status-review)}:host([layout='horizontal']) .co-ref-field{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-ref-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-ref-field__label{white-space:normal}:host([layout='horizontal']) .co-ref-field>:not(.co-ref-field__labels){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 coRefFieldCss = () => `: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;position:relative}.co-ref-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-ref-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-ref-field__label{display:inline-flex;align-items:center;color:var(--co-ref-field-label-color, var(--co-semantic-text-secondary));font-family:var(--co-ref-field-label-font-family, var(--co-font-family-primary));font-size:var(--co-ref-field-label-font-size, var(--co-font-size-14));font-weight:var(--co-ref-field-label-font-weight, 400);line-height:1;white-space:nowrap;cursor:default;text-transform:var(--co-ref-field-label-text-transform, none);letter-spacing:var(--co-ref-field-label-letter-spacing, var(--co-font-letter-spacing-body))}.co-ref-field__secondary-label{color:var(--co-semantic-text-muted);font-family:var(--co-font-family-mono);font-size:var(--co-font-size-12);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-ref-field__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-ref-field-trigger-bg, var(--co-semantic-surface-page));border:1px solid var(--co-ref-field-trigger-border-color, var(--co-semantic-border-field));border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-ref-field--flat{background:transparent;border-color:transparent}.co-ref-field--s{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-ref-field--sm{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-ref-field--lg{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-ref-field--open{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-ref-field__trigger:focus-visible{outline:none;border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-ref-field--disabled{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-ref-field--error{border-color:var(--co-semantic-status-error)}.co-ref-field--success{border-color:var(--co-semantic-status-success)}.co-ref-field--warning{border-color:var(--co-color-status-review)}.co-ref-field--s .co-ref-field__selected{--co-avatar-size:20px}.co-ref-field--sm .co-ref-field__selected{--co-avatar-size:22px}.co-ref-field--md .co-ref-field__selected{--co-avatar-size:22px}.co-ref-field--lg .co-ref-field__selected{--co-avatar-size:28px}.co-ref-field__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__label-icon{flex-shrink:0;margin-right:var(--co-spacing-xs);color:var(--co-semantic-text-secondary)}.co-ref-field__value{flex:1;min-width:0;display:flex;align-items:center}.co-ref-field__placeholder{color:var(--co-semantic-text-muted);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__trigger-badge{flex-shrink:0;display:grid;place-items:center;width:18px;height:18px;border-radius:var(--co-border-radius-xxs);background:var(--co-ref-field-trigger-badge-bg, rgba(0, 0, 0, 0.22));color:var(--co-semantic-text-default)}.co-ref-field__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-ref-field__clear:hover{color:var(--co-semantic-text-default)}.co-ref-field__edit{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-ref-field__edit:hover{color:var(--co-semantic-text-default)}.co-ref-field__selected{display:flex;align-items:center;gap:var(--co-spacing-sm);min-width:0}.co-ref-field__color-dot{width:10px;height:10px;min-width:10px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__avatar{flex-shrink:0}.co-ref-field__selected-label{color:var(--co-semantic-text-default);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__chips-row{flex:1;min-width:0;display:flex;align-items:center;gap:var(--co-spacing-xs)}.co-ref-field__chips{flex:1;min-width:0;display:flex;flex-wrap:nowrap;overflow:hidden;gap:var(--co-spacing-xs);align-items:center}.co-ref-field__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-sm);padding:0 var(--co-spacing-sm2);background:var(--co-color-gray-100);border-radius:var(--co-border-radius-full);line-height:1;max-width:min(160px, 100%);flex-shrink:0}.co-ref-field__chip--avatar{padding-left:var(--co-spacing-xxs)}.co-ref-field__chip--s{min-height:20px;--co-avatar-size:20px;font-size:var(--co-font-size-12)}.co-ref-field__chip--sm{min-height:22px;--co-avatar-size:22px;font-size:var(--co-font-size-12)}.co-ref-field__chip--md{min-height:22px;--co-avatar-size:22px;font-size:var(--co-font-size-14)}.co-ref-field__chip--lg{min-height:28px;--co-avatar-size:28px;font-size:var(--co-font-size-14)}.co-ref-field__chip--clipped{visibility:hidden}.co-ref-field__chip-dot{width:8px;height:8px;min-width:8px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__chip--fill{color:var(--co-color-base-blanco);border-radius:var(--co-spacing-sm)}.co-ref-field__chip--fill-light{color:var(--co-color-base-negro)}.co-ref-field__chip--fill .co-ref-field__chip-label,.co-ref-field__chip--fill .co-ref-field__chip-remove{color:inherit}.co-ref-field__chip--fill .co-ref-field__chip-remove{opacity:0.72}.co-ref-field__chip--fill .co-ref-field__chip-remove:hover{color:inherit;opacity:1}.co-ref-field__chip-label{color:var(--co-semantic-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.co-ref-field__chip-remove{display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-color-gray-500);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out);flex-shrink:0}.co-ref-field__chip-remove:hover{color:var(--co-semantic-text-default)}.co-ref-field__chip-overflow{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs) var(--co-spacing-sm);background:var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-12);font-weight:600;color:var(--co-semantic-text-secondary);line-height:1}.co-ref-field__panel{display:flex;flex-direction:column;border-radius:var(--co-border-radius-sm, 12px);overflow:hidden}.co-ref-field__panel--dark{--co-semantic-surface-page:#0A0A0A;--co-semantic-surface-primary:#0A0A0A;--co-semantic-surface-hover:rgba(255, 255, 255, 0.08);--co-semantic-surface-muted:rgba(255, 255, 255, 0.12);--co-semantic-text-default:#ffffff;--co-semantic-text-secondary:rgba(255, 255, 255, 0.8);--co-semantic-text-muted:rgba(255, 255, 255, 0.5);--co-semantic-border-subtle:rgba(255, 255, 255, 0.12);--co-semantic-border-default:rgba(255, 255, 255, 0.16);background:#0A0A0A;color:#ffffff}.co-ref-field__panel--light{--co-semantic-surface-page:#ffffff;--co-semantic-surface-primary:#ffffff;--co-semantic-surface-hover:var(--co-color-gray-100, #f5f5f5);--co-semantic-surface-muted:var(--co-color-gray-200, #e5e5e5);--co-semantic-text-default:var(--co-color-gray-700, #1F1C1B);--co-semantic-text-secondary:rgba(0, 0, 0, 0.6);--co-semantic-text-muted:rgba(0, 0, 0, 0.45);--co-semantic-border-subtle:var(--co-color-gray-200, #e5e5e5);--co-semantic-border-default:var(--co-color-gray-300, #d4d4d4);background:#ffffff;color:var(--co-color-gray-700, #1F1C1B)}.co-ref-field__footer{display:flex;gap:var(--co-spacing-sm2);border-top:1px solid var(--co-semantic-border-subtle);padding:var(--co-spacing-sm2)}.co-ref-field__footer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box;min-height:32px}.co-ref-field__footer-btn:hover{opacity:0.85}.co-ref-field__footer-btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-ref-field__footer-btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}.co-ref-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs);font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-muted)}.co-ref-field__helper--error{color:var(--co-semantic-status-error)}.co-ref-field__helper--success{color:var(--co-semantic-status-success)}.co-ref-field__helper--warning{color:var(--co-color-status-review)}:host([layout='horizontal']) .co-ref-field{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-ref-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-ref-field__label{white-space:normal}:host([layout='horizontal']) .co-ref-field>:not(.co-ref-field__labels){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 CoRefField = class {
     constructor(hostRef) {
@@ -16,11 +17,20 @@ const CoRefField = class {
         this.coRemove = createEvent(this, "coRemove", 7);
         this.coFooterPrimary = createEvent(this, "coFooterPrimary", 7);
         this.coFooterSecondary = createEvent(this, "coFooterSecondary", 7);
+        this.coPinToggle = createEvent(this, "coPinToggle", 7);
+        this.coListReorder = createEvent(this, "coListReorder", 7);
+        this.coEditSelected = createEvent(this, "coEditSelected", 7);
         /** Whether the field is required (renders a required marker on the label). */
         this.required = false;
         this.placeholder = 'Select…';
         this.disabled = false;
         this.clearable = true;
+        /** Shows a pencil button on the single-value trigger that emits
+         *  `coEditSelected` with the selected record id. The host owns policy
+         *  (permissions, what opens) — the component only paints and emits. */
+        this.editable = false;
+        /** Accessible name / tooltip for the edit button. */
+        this.editLabel = 'Edit';
         this.multiple = false;
         this.status = 'default';
         /** Label layout: vertical (label above) or horizontal (label beside) */
@@ -69,6 +79,13 @@ const CoRefField = class {
         this.maxChips = 0;
         /** Panel color theme. 'auto' follows trigger, 'dark' forces dark panel, 'light' forces light. */
         this.panelTheme = 'auto';
+        /**
+         * How `item.color` paints the selected chips (multiple mode).
+         * 'dot' (default) = neutral chip with a leading 8px color dot.
+         * 'fill' = the color becomes the chip BACKGROUND (label/remove switch to
+         * WCAG-contrast text) — the tag look. Avatar/image items keep the avatar.
+         */
+        this.colorMode = 'dot';
         /**
          * Phosphor icon rendered as a small status badge after the selected label in
          * the trigger (e.g. 'funnel' = strict workspace filter active). Only shows
@@ -84,6 +101,10 @@ const CoRefField = class {
          * a smooth squircle. The avatar border can be themed via --co-avatar-border-color.
          */
         this.avatarShape = 'circle';
+        /** Push-pin por fila en el panel (forward a co-option-list). */
+        this.pinnable = false;
+        /** Drag-reorder de la lista del panel (forward a co-option-list). */
+        this.listReorderable = false;
         this.isOpen = false;
         /** How many trailing chips don't fit the trigger width (responsive mode). */
         this.overflowCount = 0;
@@ -100,6 +121,24 @@ const CoRefField = class {
             if (this.disabled)
                 e.stopPropagation();
         };
+        this.handleTriggerKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            // Solo las teclas del PROPIO trigger togglean el panel. Los botones
+            // internos (clear, "x" de los chips) llevan tabIndex={-1} pero quedan
+            // focuseados al clickearlos: su Enter/Space debe activarlos de forma
+            // nativa, no abrir/cerrar el panel bajo ellos.
+            if (e.target !== this.triggerEl)
+                return;
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.isOpen = !this.isOpen;
+            }
+            else if (e.key === 'ArrowDown' && !this.isOpen) {
+                e.preventDefault();
+                this.isOpen = true;
+            }
+        };
         /** Change de la co-option-list: `value: null` = deselección explícita (la X
          *  de la fila) → mismo camino que la X del trigger (clear + coClear). El
          *  resto sigue por handleOptionClick con el ítem. */
@@ -142,11 +181,29 @@ const CoRefField = class {
             this.value = this.multiple ? '[]' : '';
             this.coClear.emit();
         };
+        this.handleEditClick = (e) => {
+            e.stopPropagation();
+            const selected = this.effectiveDisplayItems[0];
+            if (selected)
+                this.coEditSelected.emit(selected._id);
+        };
         this.handleRemoveChip = (id, e) => {
+            var _a;
             e.stopPropagation();
+            // `?? {_id, label:id}`: el chip quitado SIEMPRE está en la lista que los
+            // pinta, pero `find` es `T | undefined` para el compilador — y un item
+            // con el id crudo es mejor payload que romper el tipo del evento.
+            const removed = (_a = this.effectiveDisplayItems.find((o) => o._id === id)) !== null && _a !== void 0 ? _a : { _id: id, label: id };
             const newValue = this.parsedValue.filter((v) => v !== id);
             this.value = JSON.stringify(newValue);
             this.coRemove.emit(id);
+            // …y TAMBIÉN por el contrato normal de cambio. `coRemove` sólo lleva el id
+            // quitado, así que un host que escuche el evento estándar (lo natural: es
+            // el mismo cambio de selección que un deselect del panel, que sí emite
+            // coChange) no se enteraba: el chip desaparecía de la pantalla y el modelo
+            // del host quedaba intacto. Emitir ambos mantiene la compatibilidad de
+            // `coRemove` y quita la trampa.
+            this.coChange.emit({ value: newValue, item: removed });
         };
         this.handleFooterPrimary = () => {
             this.coFooterPrimary.emit();
@@ -294,6 +351,17 @@ const CoRefField = class {
         }
         else {
             this.coClose.emit();
+            this.restoreTriggerFocus();
+        }
+    }
+    /** Devuelve el foco al trigger al cerrar el panel (Escape, selección),
+     *  salvo que el cierre venga de un click-outside que ya movió el foco a
+     *  otro elemento — en ese caso no robarlo. */
+    restoreTriggerFocus() {
+        var _a;
+        const active = document.activeElement;
+        if (active === this.el || this.el.contains(active)) {
+            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }
     // ── Render helpers ─────────────────────────────────────────
@@ -307,7 +375,7 @@ const CoRefField = class {
                 [`co-ref-field--${this.normalizedSize}`]: true,
                 [`co-ref-field--${this.status}`]: this.status !== 'default',
                 'co-ref-field--flat': this.variant === 'flat',
-            }, onClick: this.handleTriggerClick }, this.iconLeft && (h("span", { class: "co-ref-field__icon" }, h("co-icon", { name: this.iconLeft, size: 16 }))), h("div", { class: "co-ref-field__value" }, !hasValue && h("span", { class: "co-ref-field__placeholder", part: "trigger-placeholder" }, this.placeholder), hasValue && !this.multiple && this.renderSingleValue(selected[0]), hasValue && this.multiple && this.renderMultipleValue(selected)), hasValue && this.triggerBadgeIcon && (h("span", { class: "co-ref-field__trigger-badge", part: "trigger-badge", role: "img", title: this.triggerBadgeLabel || undefined, "aria-label": this.triggerBadgeLabel || undefined }, h("co-icon", { name: this.triggerBadgeIcon, size: 11, weight: "fill" }))), hasValue && this.clearable && !this.disabled && (h("button", { class: "co-ref-field__clear", part: "trigger-clear", onClick: this.handleClear, type: "button" }, h("co-icon", { name: "x", size: 14 }))), h("span", { class: "co-ref-field__caret", part: "trigger-chevron" }, h("co-icon", { name: "caret-up-down", size: 16 }))));
+            }, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-controls": this.isOpen ? CoRefField.LIST_ID : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && (h("span", { class: "co-ref-field__icon" }, h("co-icon", { name: this.iconLeft, size: 16 }))), h("div", { class: "co-ref-field__value" }, !hasValue && h("span", { class: "co-ref-field__placeholder", part: "trigger-placeholder" }, this.placeholder), hasValue && !this.multiple && this.renderSingleValue(selected[0]), hasValue && this.multiple && this.renderMultipleValue(selected)), hasValue && this.triggerBadgeIcon && (h("span", { class: "co-ref-field__trigger-badge", part: "trigger-badge", role: "img", title: this.triggerBadgeLabel || undefined, "aria-label": this.triggerBadgeLabel || undefined }, h("co-icon", { name: this.triggerBadgeIcon, size: 11, weight: "fill" }))), hasValue && !this.multiple && this.editable && !this.disabled && (h("button", { class: "co-ref-field__edit", part: "trigger-edit", tabIndex: -1, onClick: this.handleEditClick, type: "button", title: this.editLabel || undefined, "aria-label": this.editLabel || undefined }, h("co-icon", { name: "pencil-simple", size: 14 }))), hasValue && this.clearable && !this.disabled && (h("button", { class: "co-ref-field__clear", part: "trigger-clear", tabIndex: -1, onClick: this.handleClear, type: "button" }, h("co-icon", { name: "x", size: 14 }))), h("span", { class: "co-ref-field__caret", part: "trigger-chevron" }, h("co-icon", { name: "caret-up-down", size: 16 }))));
     }
     /**
      * Leading visual for a selected value / chip. Prefers a real avatar (image
@@ -340,25 +408,32 @@ const CoRefField = class {
         const visible = fixed ? items.slice(0, this.maxChips) : items;
         const overflow = fixed ? items.length - this.maxChips : responsiveOverflow;
         const visibleCount = items.length - (fixed ? 0 : responsiveOverflow);
-        return (h("div", { class: "co-ref-field__chips-row" }, h("div", { class: "co-ref-field__chips", ref: (el) => (this.chipsEl = el) }, visible.map((item, i) => (
-        // Shared field-chip (utils/fieldChip.tsx); the leading avatar /
-        // color-dot goes in as children, the "+N" overflow stays here.
-        h(FieldChip, { key: item._id, baseClass: "co-ref-field__chip", label: item.label, modifiers: {
-                'co-ref-field__chip--avatar': !!(item.image || item.avatar),
-                'co-ref-field__chip--clipped': !fixed && i >= visibleCount,
-                [`co-ref-field__chip--${this.normalizedSize}`]: true,
-            }, onRemove: (e) => this.handleRemoveChip(item._id, e) }, item.image || item.avatar ? (this.renderItemAvatar(item)) : item.color ? (h("span", { class: "co-ref-field__chip-dot", style: { backgroundColor: item.color } })) : null)))), overflow > 0 && h("span", { class: "co-ref-field__chip-overflow" }, "+", overflow)));
+        return (h("div", { class: "co-ref-field__chips-row" }, h("div", { class: "co-ref-field__chips", ref: (el) => (this.chipsEl = el) }, visible.map((item, i) => {
+            // 'fill' mode: the item color IS the chip background (tag look);
+            // no leading dot, label/remove flip to contrast via CSS `inherit`.
+            const fill = this.colorMode === 'fill' && !!item.color && !(item.image || item.avatar);
+            return (
+            // Shared field-chip (utils/fieldChip.tsx); the leading avatar /
+            // color-dot goes in as children, the "+N" overflow stays here.
+            h(FieldChip, { key: item._id, baseClass: "co-ref-field__chip", label: item.label, modifiers: {
+                    'co-ref-field__chip--avatar': !!(item.image || item.avatar),
+                    'co-ref-field__chip--fill': fill,
+                    'co-ref-field__chip--fill-light': fill && isLightColor(item.color),
+                    'co-ref-field__chip--clipped': !fixed && i >= visibleCount,
+                    [`co-ref-field__chip--${this.normalizedSize}`]: true,
+                }, style: fill ? { backgroundColor: item.color } : undefined, onRemove: (e) => this.handleRemoveChip(item._id, e) }, item.image || item.avatar ? (this.renderItemAvatar(item)) : item.color && !fill ? (h("span", { class: "co-ref-field__chip-dot", style: { backgroundColor: item.color } })) : null));
+        })), overflow > 0 && h("span", { class: "co-ref-field__chip-overflow" }, "+", overflow)));
     }
     renderPanel() {
         return (h("div", { class: {
                 'co-ref-field__panel': true,
                 'co-ref-field__panel--dark': this.panelTheme === 'dark',
                 'co-ref-field__panel--light': this.panelTheme === 'light',
-            }, style: this.panelWidth ? { width: this.panelWidth } : undefined }, h("co-option-list", { ref: (el) => (this.optionListEl = el), items: typeof this.options === 'string' ? this.options : JSON.stringify(this.options), value: this.value, selectedItems: typeof this.selectedDisplay === 'string' ? this.selectedDisplay : JSON.stringify(this.selectedDisplay), multiple: this.multiple, selectedFirst: this.multiple, reorderable: this.multiple, selectedAffordance: "deselect", searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: this.searchDebounce, loading: this.loading, total: this.total, emptyMessage: this.emptyMessage, avatarShape: this.avatarShape, onCoSearch: (e) => this.coSearch.emit(e.detail), onCoChange: (e) => this.handleListChange(e.detail), onCoReorder: (e) => this.handleReorder(e.detail), onCoLoadMore: () => this.coLoadMore.emit() }, h("slot", { name: "panel-footer", slot: "footer" }), this.showFooter && (h("div", { class: "co-ref-field__footer", slot: "footer" }, this.footerSecondaryLabel && (h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--secondary", type: "button", onClick: this.handleFooterSecondary }, h("co-icon", { name: "plus", size: 16 }), h("span", null, this.footerSecondaryLabel))), h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--primary", type: "button", onClick: this.handleFooterPrimary }, h("co-icon", { name: "check", size: 16 }), h("span", null, this.footerPrimaryLabel)))))));
+            }, style: this.panelWidth ? { width: this.panelWidth } : undefined }, h("co-option-list", { id: CoRefField.LIST_ID, ref: (el) => (this.optionListEl = el), items: typeof this.options === 'string' ? this.options : JSON.stringify(this.options), value: this.value, selectedItems: typeof this.selectedDisplay === 'string' ? this.selectedDisplay : JSON.stringify(this.selectedDisplay), multiple: this.multiple, selectedFirst: this.multiple, reorderable: this.multiple, pinnable: this.pinnable, listReorderable: this.listReorderable, selectedAffordance: "deselect", searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: this.searchDebounce, loading: this.loading, total: this.total, emptyMessage: this.emptyMessage, avatarShape: this.avatarShape, onCoSearch: (e) => this.coSearch.emit(e.detail), onCoChange: (e) => this.handleListChange(e.detail), onCoReorder: (e) => this.handleReorder(e.detail), onCoPinToggle: (e) => this.coPinToggle.emit(e.detail), onCoListReorder: (e) => this.coListReorder.emit(e.detail), onCoLoadMore: () => this.coLoadMore.emit() }, h("slot", { name: "panel-footer", slot: "footer" }), this.showFooter && (h("div", { class: "co-ref-field__footer", slot: "footer" }, this.footerSecondaryLabel && (h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--secondary", type: "button", onClick: this.handleFooterSecondary }, h("co-icon", { name: "plus", size: 16 }), h("span", null, this.footerSecondaryLabel))), h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--primary", type: "button", onClick: this.handleFooterPrimary }, h("co-icon", { name: "check", size: 16 }), h("span", null, this.footerPrimaryLabel)))))));
     }
     // ── Main render ────────────────────────────────────────────
     render() {
-        return (h("div", { key: '2947ab90a0811a53bc77263f96f13da30a2ed975', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: '5e16afd2e37e56191e019cdf4be27aea292836eb', class: "co-ref-field__labels" }, this.label && (h("label", { key: '28b97b7f577fa1a1ea2c2c9a8bbd31aa9915ef7f', class: "co-ref-field__label" }, this.labelIcon && (h("co-icon", { key: 'a02fdfc4ebd37c6b7fe1ff84788fb5b94b11c5bf', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, h(RequiredMark, { key: '933bb1d1d78894a9d127d0666f184a470bbe621f', required: this.required }))), this.secondaryLabel && (h("span", { key: 'cfe226e11e1cafb1187a90c4bba8abfe2318a9ca', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: 'd6fb3e669735e53c4b01269a69c018d703761758', open: this.isOpen, placement: "bottom-start", matchWidth: !this.panelWidth, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '7f80d30580f77a23b38f85a4771b6fb1170f6791', slot: "trigger" }, this.renderTrigger()), this.isOpen && this.renderPanel()), this.helperText && (h("div", { key: '9ed05c93faee76f9d4ff18f41f8ae1e8ce60a734', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: 'ffcb659c5dd52bc6f8b14ca982d0cba5f4089529', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: 'ab0f53e7e2ade7d635389767b0b31d89844697ae' }, this.helperText)))));
+        return (h("div", { key: '8904995ce46d0552556775029316fa42c0d1261e', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: 'a3b1d77f18f04b0233d5cf9c5b18c484b60d06e4', class: "co-ref-field__labels" }, this.label && (h("label", { key: '837c1f52807a6b258874d4984fdd3aafd48737ed', class: "co-ref-field__label" }, this.labelIcon && (h("co-icon", { key: 'c9e74495eac50df1f9f074f3a25b3be7bcf36d1c', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, h(RequiredMark, { key: '49a4366d6fc20c7ddbad31d020a1d45ea4134554', required: this.required }))), this.secondaryLabel && (h("span", { key: '4f9dd9e68d79642cfafd16a71e51747599668f9e', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '91ad529d27a62ccbcb8acac7f23cee7ac2ca33ce', open: this.isOpen, placement: "bottom-start", matchWidth: !this.panelWidth, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '809b6f7e0f64ffd7c6151c1fae340114f5887e72', slot: "trigger" }, this.renderTrigger()), this.isOpen && this.renderPanel()), this.helperText && (h("div", { key: '4089f6e3cd993ce620742d619282d12542e87057', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: '3d9e658ba0cc04034778911930837f1268afeedd', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: '8c26be0575794b6f8b410f1fd0b71efd715d5324' }, this.helperText)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -367,6 +442,17 @@ const CoRefField = class {
             }]
     }; }
 };
+/**
+ * Id del <co-option-list> del panel, target de `aria-controls` del trigger.
+ * Constante (no aleatoria): vive en el shadow root de ESTA instancia, donde
+ * los ids no colisionan con los de otras. Se referencia el HOST de la
+ * primitiva — su listbox interno queda tras su propio shadow boundary y no
+ * es direccionable desde acá (limitación conocida y aceptada).
+ *
+ * El trigger solo emite `aria-controls` mientras `isOpen`: el panel se monta
+ * on-demand, así que cerrado el IDREF quedaría colgante.
+ */
+CoRefField.LIST_ID = 'co-ref-field-list';
 CoRefField.style = coRefFieldCss();
 
 export { CoRefField as co_ref_field };