Summary of Changes

Refactor the code so:

• php: layout spits buttons as slotted elements
• use of :part to style the component internals.
• component becomes light/dark
• JS: component now uses the elementInternals so it is an actual form field
• The client side supports all the colors that a browser could support (hex, rgb, lch, oklab, color(colorspace val1 val2 val3 / alpha)). This requires setting the format to "". All color values are validated client side

B/C considerations:

• The field layout has changes (the old one WILL NOT WORK)
• The old field dispatched 2 change events, one on the custom element and another on the select element. There's only one event on the custom element now

Testing Instructions

Paste this:

<field
  name="blabla"
  type="color"
  control="simple"
  format=""
  colors="#000000,rgb(59% 4.79% 75.2% / 0.8),oklch(87% 0.293 207),oklab(79% -0.261 0.088),color(display-p3 0.83 0.19 0.73 / 0.96),#FF0000,lch(56 90.2 154 / 0.88),none"
  default=""
  label="color"
/>

in the templateDetails.xml of the Atum template (after line 51: <fieldset name="colors" label="TPL_ATUM_COLORS_SETTINGS_LABEL">)

Check that the field:

• saves and respects the value from the PHP side
• works with the keyboard (enter to go to the select mode, tab to navigate, enter to select)

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

Unused strings

JFIELD_COLOR_SELECT="Select a colour"
JFIELD_COLOR_TRANSPARENT="No colour, transparent"
JFIELD_COLOR_VALUE="Colour with hexadecimal value of"