Et2SwitchIcon & Et2ButtonToggle fixes

- use font-size for sizing
- expose control as part for styling
- let server-side treat as checkbox

api/js/etemplate/Et2Button/Et2ButtonToggle.ts

@@ -24,7 +24,9 @@ export class Et2ButtonToggle extends Et2SwitchIcon
 				}
 
 				sl-switch {
-					--width: var(--height);
+					font-size: inherit;
+					--width: 1em;
+					--height: 1em;
 				}
 
 				sl-switch:not([checked]) slot[name="off"] {

api/js/etemplate/Et2Switch/Et2SwitchIcon.ts

@@ -16,6 +16,9 @@ import {SlSwitch} from "@shoelace-style/shoelace";
  * @cssproperty --height - The height of the switch.
  * @cssproperty --width - The width of the switch.
  * @cssproperty --indicator-color - The color of the selected image
+ *
+ * @csspart form-control-label The label's wrapper
+ * @csspart control The control's wrapper
  */
 @customElement("et2-switch-icon")
 export class Et2SwitchIcon extends Et2InputWidget(LitElement)
@@ -94,9 +97,16 @@ export class Et2SwitchIcon extends Et2InputWidget(LitElement)
 	}
 
 	set value(new_value : string | boolean)
+	{
+		if(this.switch)
 		{
 			this.switch.checked = !!new_value;
 		}
+		else
+		{
+			this.updateComplete.then(() => this.value = new_value);
+		}
+	}
 
 	get value()
 	{
@@ -111,6 +121,7 @@ export class Et2SwitchIcon extends Et2InputWidget(LitElement)
                     class="form-control__label">${this.label}
 			</span>` : nothing}
             <span
+                    part="control"
                     class=${classMap({
                         "label": true,
                         "on": this.checked,

api/src/Etemplate/Widget/Checkbox.php

@@ -132,4 +132,5 @@ class Checkbox extends Etemplate\Widget
 }
 
 Etemplate\Widget::registerWidget(__NAMESPACE__ . '\\Checkbox', array('et2-checkbox', 'et2-radio', 'et2-switch',
+																	 'et2-switch-icon', 'et2-button-toggle',
 																	 'checkbox', 'radio'));