Is it possible to change the option text in ColorPicker?

[TailoredITRob]

I have implemented a ColorPicker to select custom paint colors. I've created options objects with a label and value. The value contains a hex approximation of the paint code. I'm using the commit hook to transform the value so that the form data reflects the paint code rather than the hex value.

The problem is that the popover element still displays the HTML hex color. I'd like to transform this text to show my custom color name instead but I can't find a hook that gives me access to the valueString. I don't think it's exposed directly, Is there away to address this or do I need to assign an ID and get creative with innerHTML?

const colorpicker = document.getElementById('my-id');
const valueString = colorpicker.queryString('.formkit-valueString');
valueString.innerHTML = "My Cool Label";

The following code works, but it may not be the most elegant or efficient. Each time the color picker value changes, it gets intercepted using the commit hook. Then you loop over the options to find the current match and replace the value with the label text. Finally, it uses vanilla JavaScript to drill down to the visible element in the form and replace the visible text with the custom text as well.

<script setup>
  const my_colors = [
    {
      group: 'Standard Options',
      options: [
        {
          label: 'Custom White',
          value: '#F2F2F2',
        },
        ...
    }
  ];

  const registerTransformHooks = (node) => {
    // The commit hook intercepts the value before it updates the form state
    node.hook.commit((payload, next) => {
      for (const option of node.context.options) {
        if (payload === option.value) {
          const modifiedValue = option.label;

          const colorpicker = document.getElementById('my-id');
          const valueString = colorpicker.querySelector('.formkit-valueString');
          valueString.innerHTML = modifiedValue;

          return next(modifiedValue);
        }
      }
    });
  }
</script>

<template>
  <FormKit
    id="my-id"
    type="colorpicker"
    allow-paste="false"
    panel-controls="false"
    panel-format="false"
    popover
    :options="my_colors"
    @node="registerTransformHooks" />
</template>

[TailoredITRob]

Here's a more ES6 way of doing this without the loop.

<script setup>
  const my_colors = [
    {
      group: 'Standard Options',
      options: [
        {
          label: 'Custom White',
          value: '#F2F2F2',
        },
        ...
    }
  ];

  const registerTransformHooks = (node) => {
    // The commit hook intercepts the value before it updates the form state
    node.hook.commit((payload, next) => {
      const options = node.context.options.flatMap(group => group.options);
      const option = options.find(item => item.value === payload);
      const modifiedValue = option.label;

      const colorpicker = document.getElementById('my-id');
      const valueString = colorpicker.querySelector('.formkit-valueString');
      valueString.innerHTML = modifiedValue;

      return next(modifiedValue);
    });
  }
</script>

<template>
  <FormKit
    id="my-id"
    type="colorpicker"
    allow-paste="false"
    panel-controls="false"
    panel-format="false"
    popover
    :options="my_colors"
    @node="registerTransformHooks" />
</template>