Styling and theming

The chips, the field and the suggestion list are the same parts as @devix-labs/select, so the whole guide there applies: CSS variables, classNames on every part, icons, render hooks, strings, the @layer devix stylesheet and a headless core.

The variables a tags field usually wants:

.dxs, .dxs-panel {
  --dxs-chip-height: 22px;
  --dxs-chip-radius: 5px;
  --dxs-chip-bg: #eef2ff;
  --dxs-chip-text: #3730a3;
  --dxs-gap: 5px;              /* space between chips */
  --dxs-height: 36px;          /* the field's minimum height; it grows with the chips */
}

Classes worth knowing: .dxs--tags on the root, .dxs-chip with .is-dragging while one is being moved, .dxs-chip-label and .dxs-chip-remove.

Your own chip markup:

createCombobox(input, {
  render: {
    item(option, node) {
      const dot = Object.assign(document.createElement('i'), { className: 'dot' });
      dot.style.background = option.data?.colour ?? '#999';
      node.append(dot, document.createTextNode(option.label));
    },
  },
});