Btw possible values as far as I know are switcher-success (default one), switcher-warning and switcher-danger. Maybe there are additional ones (@dgt41 is that documented?)

@Bakual Thank you.

I have tested this item ✅ successfully on 2705963

I tested the design in Joomla 4 not the functionality.

I did not apply any class attribute: I saw no swicher, but circels and the field works. I could change die active circles

<field
	name="article_layout"
	type="componentlayout"
	label="JGLOBAL_FIELD_LAYOUT_LABEL"
	menuitems="true"
	extension="com_content"
	view="article"
/>

With class=switcher-danger (without switcher) the switcher color is green. I expected a red color, but that is OK. I forgot to insert the switcher to the class list.

<field
	name="show_title"
	type="radio"
	label="JGLOBAL_SHOW_TITLE_LABEL"
	class="switcher-danger"
	default="1"
	>
	<option value="0">JHIDE</option>
	<option value="1">JSHOW</option>
</field>

With class=switcher switcher-danger the switcher color is green like expected.

<field
	name="show_title"
	type="radio"
	label="JGLOBAL_SHOW_TITLE_LABEL"
	class="switcher switcher-danger"
	default="1"
	>
	<option value="0">JHIDE</option>
	<option value="1">JSHOW</option>
</field>

With class=switcher switcher-primary the switcher color is blue like expected

<field
	name="show_title"
	type="radio"
	label="JGLOBAL_SHOW_TITLE_LABEL"
	class="switcher switcher-primary"
	default="1"
	>
	<option value="0">JHIDE</option>
	<option value="1">JSHOW</option>
</field>

Is there a documentation anywhere for this webcomponent?

@Bakual I believe that the 4 cookouts that are used in alerts (blue, green, yellow, red) cover 90% of the use cases but Charlie is against that.

Anyways whatever the decision on the number of colors supported by the switcher there is fine detail that needs to be taken into consideration: custom elements WILL be again 1 file so the idea of extending the css means also that people will have to override (totally doable right now) the js!

@wilsonge can you merge this?

@Bakual We currently use the following colour map for custom elements:

$theme-colors: map-merge((
        primary: $blue,
        secondary: $gray-600,
        success: $green,
        warning: $yellow,
        danger: $red
), $theme-colors);

However I may unset secondary and warning for the switcher

@dgt41 I assume you mean, for example, the use of alert-blue instead of alert-primary?

Rebased to see if tests now pass

[c/s] Add space before and after +?

@Quy I don't even know if we have a CS rule for that but I can do that of course.