@effindomv2/fui-as 0.1.37 → 0.1.41

package/src/controls/NavLink.ts

@@ -1,6 +1,7 @@
 import {
   CursorStyle,
   KeyEventType,
+  KeyModifier,
   PointerEventType,
   SemanticRole,
   fui_hide_url_preview,
@@ -11,16 +12,25 @@ import { Disposable, disposeAll } from "../core/Disposable";
 import { FocusAdornerManager } from "../core/FocusAdornerManager";
 import { keyboardFocusVisible } from "../core/FocusVisibility";
 import { navigateTo } from "../core/Navigation";
+import { PointerEventArgs, PointerType } from "../core/Node";
 import { hasPrimaryShortcutModifier } from "../core/Platform";
 import { Theme, activeTheme } from "../core/Theme";
 import { FlexBox } from "../nodes";
 
+export class NavigateEventArgs {
+  readonly path: string;
+
+  constructor(path: string) {
+    this.path = path;
+  }
+}
+
 export class NavLink extends FlexBox {
   private static activePreviewOwner: NavLink | null = null;
   private hrefValue: string;
   private openInNewTabValue: bool;
   private readonly disposables: Array<Disposable> = new Array<Disposable>();
-  private navigateCallback: ((path: string) => void) | null = null;
+  private navigateCallback: ((event: NavigateEventArgs) => void) | null = null;
   private pointerPressed: bool = false;
   private pointerPressedOpenInNewTab: bool = false;
   private enterPressed: bool = false;
@@ -60,7 +70,7 @@ export class NavLink extends FlexBox {
     return this;
   }
 
-  onNavigate(cb: (path: string) => void): this {
+  onNavigate(cb: (event: NavigateEventArgs) => void): this {
     this.navigateCallback = cb;
     return this;
   }
@@ -75,6 +85,10 @@ export class NavLink extends FlexBox {
   }
 
   _handlePointerEvent(eventType: PointerEventType, x: f32, y: f32, modifiers: u32 = 0): void {
+    const pending = NavLink.pendingPointerEventArgs;
+    const isPrimaryActivation = pending !== null
+      ? this.isPrimaryActivationPointer(changetype<PointerEventArgs>(pending))
+      : true;
     super._handlePointerEvent(eventType, x, y, modifiers);
     if (eventType == PointerEventType.Enter) {
       this.hovered = true;
@@ -91,11 +105,16 @@ export class NavLink extends FlexBox {
       return;
     }
     if (eventType == PointerEventType.Down) {
+      if (!isPrimaryActivation) {
+        this.pointerPressed = false;
+        this.pointerPressedOpenInNewTab = false;
+        return;
+      }
       this.pointerPressed = true;
       this.pointerPressedOpenInNewTab = this.shouldOpenInNewTab(modifiers);
       return;
     }
-    if (eventType == PointerEventType.Up && this.pointerPressed) {
+    if (eventType == PointerEventType.Up && this.pointerPressed && isPrimaryActivation) {
       this.pointerPressed = false;
       this.activate(this.pointerPressedOpenInNewTab || this.shouldOpenInNewTab(modifiers));
       this.pointerPressedOpenInNewTab = false;
@@ -123,7 +142,7 @@ export class NavLink extends FlexBox {
     if (key != "Enter") {
       return callbackHandled;
     }
-    if (modifiers != 0 && !hasPrimaryShortcutModifier(modifiers)) {
+    if (modifiers != 0 && !hasPrimaryShortcutModifier(<KeyModifier>modifiers)) {
       return callbackHandled;
     }
     if (eventType == KeyEventType.Down) {
@@ -144,12 +163,16 @@ export class NavLink extends FlexBox {
     navigateTo(this.hrefValue, openInNewTab);
     const callback = this.navigateCallback;
     if (callback !== null) {
-      callback(this.hrefValue);
+      callback(new NavigateEventArgs(this.hrefValue));
     }
   }
 
   private shouldOpenInNewTab(modifiers: u32): bool {
-    return this.openInNewTabValue || hasPrimaryShortcutModifier(modifiers);
+    return this.openInNewTabValue || hasPrimaryShortcutModifier(<KeyModifier>modifiers);
+  }
+
+  private isPrimaryActivationPointer(event: PointerEventArgs): bool {
+    return event.button == 0 || event.pointerType == PointerType.Touch || event.pointerType == PointerType.Pen;
   }
 
   pinPreviewForContextMenu(): void {

package/src/controls/Popup.ts

@@ -1,7 +1,7 @@
-import { BorderStyle, FlexDirection, Unit } from "../core/ffi";
+import { FlexDirection, Unit } from "../core/ffi";
 import { Node } from "../core/Node";
 import { throwNullArgument } from "../core/Errors";
-import { FlexBox, Portal } from "../nodes";
+import { Border, FlexBox, Portal } from "../nodes";
 import { PopupPlacement, PopupPresenter } from "./internal/PopupPresenter";
 
 export { PopupPlacement } from "./internal/PopupPresenter";
@@ -21,7 +21,7 @@ export class Popup extends Portal {
       .position(0.0, 0.0)
       .width(100.0, Unit.Percent)
       .height(100.0, Unit.Percent);
-    this.presenter.overlayNode.onClickWith(this, (popup) => popup.handleBackdropClick());
+    this.presenter.overlayNode.onPointerClickWith(this, (popup, _event) => popup.handleBackdropClick());
   }
 
   get isOpen(): bool {
@@ -90,8 +90,13 @@ export class Popup extends Portal {
     return this;
   }
 
-  panelBorder(width: f32, color: u32, style: BorderStyle = BorderStyle.Solid): this {
-    this.surfaceNode.border(width, color, style);
+  panelBorder(width: f32, color: u32): this {
+    this.surfaceNode.border(width, color);
+    return this;
+  }
+
+  panelBorderConfig(border: Border): this {
+    this.surfaceNode.borderConfig(border);
     return this;
   }
 

package/src/controls/ProgressBar.ts

@@ -1,4 +1,3 @@
-import { BorderStyle } from "../core/ffi";
 import { HandlerAction } from "../core/Action";
 import { Disposable, disposeAll } from "../core/Disposable";
 import { Theme, activeTheme } from "../core/Theme";
@@ -154,7 +153,7 @@ export class ProgressBar extends FlexBox {
       this.fillNode.cornerRadius(this.thicknessValue * 0.5);
     }
     super.bgColor(trackColor);
-    super.border(1.0, theme.colors.border, BorderStyle.Solid);
+    super.border(1.0, theme.colors.border);
     this.fillNode.bgColor(fillColor);
   }
 

package/src/controls/RadioButton.ts

@@ -1,5 +1,8 @@
+import { Callback1, Handler1 } from "../core/BoundCallback";
 import { KeyEventType, SemanticCheckedState, SemanticRole } from "../core/ffi";
+import { RadioButtonChangedEventArgs } from "../core/Node";
 import { activeTheme } from "../core/Theme";
+import { bind1 } from "../core/bind";
 import { LabeledControlSizing } from "./ControlSizing";
 import { PressableLabeledControl } from "./internal/PressableLabeledControl";
 import { getControlTemplates } from "./ControlTemplateSet";
@@ -13,13 +16,13 @@ import {
 
 function createIndicatorPresenter(template: RadioIndicatorTemplate | null, sizing: LabeledControlSizing | null = null): RadioIndicatorPresenter {
   if (template !== null) {
-    return template.create();
+    return template.create(sizing);
   }
   const templateSet = getControlTemplates();
   const appTemplate = templateSet !== null ? templateSet.radioIndicator : null;
   return appTemplate === null
     ? createDefaultRadioIndicatorPresenter(sizing)
-    : appTemplate.create();
+    : appTemplate.create(sizing);
 }
 
 export class RadioButton extends PressableLabeledControl {
@@ -28,7 +31,8 @@ export class RadioButton extends PressableLabeledControl {
   private sizingValue: LabeledControlSizing | null = null;
   private readonly valueText: string;
   private checkedValue: bool = false;
-  private changedCallback: ((checked: bool) => void) | null = null;
+  private changedCallback: ((event: RadioButtonChangedEventArgs) => void) | null = null;
+  private changedBinding: Callback1<RadioButtonChangedEventArgs> | null = null;
   private ownerGroup: RadioGroup | null = null;
 
   constructor(value: string, label: string = value) {
@@ -54,7 +58,7 @@ export class RadioButton extends PressableLabeledControl {
   }
 
   check(flag: bool): this {
-    this.updateChecked(flag, false);
+    this.updateChecked(flag, true, false);
     return this;
   }
 
@@ -63,11 +67,9 @@ export class RadioButton extends PressableLabeledControl {
     this.setLabelFontSizeOverride(
       sizing !== null && sizing.hasLabelFontSize ? sizing.labelFontSizePx : 0.0,
     );
-    if (this.usesDefaultIndicatorPresenter()) {
-      this.indicatorPresenter = createIndicatorPresenter(this.templateOverride, this.sizingValue);
-      this.replaceIndicatorRoot(this.indicatorPresenter.root);
-      this.syncVisualState();
-    }
+    this.indicatorPresenter = createIndicatorPresenter(this.templateOverride, this.sizingValue);
+    this.replaceIndicatorRoot(this.indicatorPresenter.root);
+    this.syncVisualState();
     return this;
   }
 
@@ -79,8 +81,20 @@ export class RadioButton extends PressableLabeledControl {
     return this;
   }
 
-  onChanged(callback: ((checked: bool) => void) | null): this {
+  onChanged(callback: ((event: RadioButtonChangedEventArgs) => void) | null): this {
     this.changedCallback = callback;
+    this.changedBinding = null;
+    return this;
+  }
+
+  bindChanged<Owner>(owner: Owner, handler: Handler1<Owner, RadioButtonChangedEventArgs>): this {
+    this.changedCallback = null;
+    this.changedBinding = bind1<Owner, RadioButtonChangedEventArgs>(owner, handler);
+    return this;
+  }
+
+  onChangedWith<Owner>(owner: Owner, handler: Handler1<Owner, RadioButtonChangedEventArgs>): this {
+    this.bindChanged(owner, handler);
     return this;
   }
 
@@ -135,7 +149,7 @@ export class RadioButton extends PressableLabeledControl {
     );
   }
 
-  updateChecked(flag: bool, emit: bool): void {
+  updateChecked(flag: bool, emit: bool, announce: bool = emit): void {
     if (this.checkedValue == flag) {
       return;
     }
@@ -143,10 +157,17 @@ export class RadioButton extends PressableLabeledControl {
     this.semanticChecked(flag ? SemanticCheckedState.True : SemanticCheckedState.False);
     this.syncVisualState();
     if (emit) {
-      this.requestSemanticAnnouncement();
+      if (announce) {
+        this.requestSemanticAnnouncement();
+      }
+      const event = new RadioButtonChangedEventArgs(flag);
       const callback = this.changedCallback;
       if (callback !== null) {
-        callback(flag);
+        callback(event);
+      }
+      const binding = this.changedBinding;
+      if (binding !== null) {
+        binding.invoke(event);
       }
     }
   }

package/src/controls/RadioGroup.ts

@@ -1,5 +1,6 @@
 import { Callback1, Handler1 } from "../core/BoundCallback";
 import { FlexDirection, SemanticRole } from "../core/ffi";
+import { RadioGroupChangedEventArgs } from "../core/Node";
 import { PersistedInt32Codec, PersistedValueState } from "../core/PersistedState";
 import { bind1 } from "../core/bind";
 import { warn } from "../core/Logger";
@@ -31,8 +32,8 @@ const RADIO_GROUP_PERSISTED_STATE = new PersistedRadioGroupState();
 export class RadioGroup extends FlexBox {
   private readonly radios: Array<RadioButton> = new Array<RadioButton>();
   private selectedIndexValue: i32 = -1;
-  private changedCallback: ((value: string) => void) | null = null;
-  private changedBinding: Callback1<string> | null = null;
+  private changedCallback: ((event: RadioGroupChangedEventArgs) => void) | null = null;
+  private changedBinding: Callback1<RadioGroupChangedEventArgs> | null = null;
 
   constructor() {
     super();
@@ -75,19 +76,19 @@ export class RadioGroup extends FlexBox {
     return this;
   }
 
-  onChanged(callback: ((value: string) => void) | null): this {
+  onChanged(callback: ((event: RadioGroupChangedEventArgs) => void) | null): this {
     this.changedCallback = callback;
     this.changedBinding = null;
     return this;
   }
 
-  bindChanged<Owner>(owner: Owner, handler: Handler1<Owner, string>): this {
+  bindChanged<Owner>(owner: Owner, handler: Handler1<Owner, RadioGroupChangedEventArgs>): this {
     this.changedCallback = null;
-    this.changedBinding = bind1<Owner, string>(owner, handler);
+    this.changedBinding = bind1<Owner, RadioGroupChangedEventArgs>(owner, handler);
     return this;
   }
 
-  onChangedWith<Owner>(owner: Owner, handler: Handler1<Owner, string>): this {
+  onChangedWith<Owner>(owner: Owner, handler: Handler1<Owner, RadioGroupChangedEventArgs>): this {
     this.bindChanged(owner, handler);
     return this;
   }
@@ -95,7 +96,7 @@ export class RadioGroup extends FlexBox {
   selectRadio(radio: RadioButton, focus: bool): void {
     const index = this.indexOfRadio(radio);
     if (index >= 0) {
-      this.selectIndexInternal(index, focus, true);
+      this.selectIndexInternal(index, focus, true, true);
     }
   }
 
@@ -106,30 +107,42 @@ export class RadioGroup extends FlexBox {
     }
     const nextIndex = this.findEnabledIndex(startIndex, delta);
     if (nextIndex >= 0) {
-      this.selectIndexInternal(nextIndex, true, true);
+      this.selectIndexInternal(nextIndex, true, true, true);
     }
   }
 
   selectFirstEnabled(focus: bool): void {
     const nextIndex = this.findBoundaryIndex(true);
     if (nextIndex >= 0) {
-      this.selectIndexInternal(nextIndex, focus, true);
+      this.selectIndexInternal(nextIndex, focus, true, true);
     }
   }
 
   selectLastEnabled(focus: bool): void {
     const nextIndex = this.findBoundaryIndex(false);
     if (nextIndex >= 0) {
-      this.selectIndexInternal(nextIndex, focus, true);
+      this.selectIndexInternal(nextIndex, focus, true, true);
     }
   }
 
   selectIndex(index: i32): this {
     if (index == -1) {
+      const changed = this.selectedIndexValue != -1;
       if (this.selectedIndexValue >= 0 && this.selectedIndexValue < this.radios.length) {
-        unchecked(this.radios[this.selectedIndexValue]).updateChecked(false, false);
+        unchecked(this.radios[this.selectedIndexValue]).updateChecked(false, true, false);
       }
       this.selectedIndexValue = -1;
+      if (changed) {
+        const event = new RadioGroupChangedEventArgs("");
+        const callback = this.changedCallback;
+        if (callback !== null) {
+          callback(event);
+        }
+        const binding = this.changedBinding;
+        if (binding !== null) {
+          binding.invoke(event);
+        }
+      }
       return this;
     }
     if (this.radios.length == 0) {
@@ -151,7 +164,7 @@ export class RadioGroup extends FlexBox {
           ".",
       );
     }
-    this.selectIndexInternal(clampedIndex, false, false);
+    this.selectIndexInternal(clampedIndex, false, true, false);
     return this;
   }
 
@@ -159,10 +172,10 @@ export class RadioGroup extends FlexBox {
     if (index < 0) {
       return;
     }
-    this.selectIndexInternal(index, false, true);
+    this.selectIndexInternal(index, false, true, false);
   }
 
-  private selectIndexInternal(index: i32, focus: bool, emit: bool): void {
+  private selectIndexInternal(index: i32, focus: bool, emit: bool, announce: bool = emit): void {
     if (index < 0 || index >= this.radios.length) {
       return;
     }
@@ -177,22 +190,22 @@ export class RadioGroup extends FlexBox {
       return;
     }
     if (this.selectedIndexValue >= 0 && this.selectedIndexValue < this.radios.length) {
-      unchecked(this.radios[this.selectedIndexValue]).updateChecked(false, false);
+      unchecked(this.radios[this.selectedIndexValue]).updateChecked(false, emit, false);
     }
     this.selectedIndexValue = index;
-    radio.updateChecked(true, false);
+    radio.updateChecked(true, emit, announce);
     if (focus) {
       radio.focusNow();
     }
     if (emit) {
-      radio.requestSemanticAnnouncement();
+      const event = new RadioGroupChangedEventArgs(radio.value);
       const callback = this.changedCallback;
       if (callback !== null) {
-        callback(radio.value);
+        callback(event);
       }
       const binding = this.changedBinding;
       if (binding !== null) {
-        binding.invoke(radio.value);
+        binding.invoke(event);
       }
     }
   }

package/src/controls/Slider.ts

@@ -6,7 +6,6 @@ import { DragCompletedEvent, DragDeltaEvent, DragGesture, DragGestureHost, DragS
 import { FocusAdornerManager } from "../core/FocusAdornerManager";
 import { keyboardFocusVisible } from "../core/FocusVisibility";
 import {
-  BorderStyle,
   CursorStyle,
   KeyEventType,
   Orientation,
@@ -17,7 +16,7 @@ import {
 import { Theme, activeTheme } from "../core/Theme";
 import { warn } from "../core/Logger";
 import { PersistedFloat32Codec, PersistedValueState } from "../core/PersistedState";
-import { Node } from "../core/Node";
+import { Node, SliderChangedEventArgs } from "../core/Node";
 import { FlexBox } from "../nodes";
 import { bind1 } from "../core/bind";
 import { SliderSizing } from "./ControlSizing";
@@ -67,13 +66,13 @@ const SLIDER_CHILD_INSET: f32 = SLIDER_PADDING + SLIDER_CONTENT_INSET;
 
 function createSliderPresenter(template: SliderTemplate | null, sizing: SliderSizing | null = null): SliderPresenter {
   if (template !== null) {
-    return template.create();
+    return template.create(sizing);
   }
   const templateSet = getControlTemplates();
   const appTemplate = templateSet !== null ? templateSet.slider : null;
   return appTemplate === null
     ? createDefaultSliderPresenter(sizing)
-    : appTemplate.create();
+    : appTemplate.create(sizing);
 }
 
 export class Slider extends FlexBox implements DragGestureHost {
@@ -83,8 +82,8 @@ export class Slider extends FlexBox implements DragGestureHost {
   private colorsValue: SliderColors | null = null;
   private readonly disposables: Array<Disposable> = new Array<Disposable>();
   private readonly dragGesture!: DragGesture;
-  private changedCallback: ((value: f32) => void) | null = null;
-  private changedBinding: Callback1<f32> | null = null;
+  private changedCallback: ((event: SliderChangedEventArgs) => void) | null = null;
+  private changedBinding: Callback1<SliderChangedEventArgs> | null = null;
   private disposed: bool = false;
   private focusedState: bool = false;
   private hoveredState: bool = false;
@@ -135,7 +134,7 @@ export class Slider extends FlexBox implements DragGestureHost {
     if (this.maxValue < value) {
       this.maxValue = value;
     }
-    this.setValue(this.currentValue, false);
+    this.setValue(this.currentValue, true, false);
     return this;
   }
 
@@ -144,7 +143,7 @@ export class Slider extends FlexBox implements DragGestureHost {
     if (this.minValue > value) {
       this.minValue = value;
     }
-    this.setValue(this.currentValue, false);
+    this.setValue(this.currentValue, true, false);
     return this;
   }
 
@@ -153,7 +152,7 @@ export class Slider extends FlexBox implements DragGestureHost {
       warn("Layout", "Slider.step() received " + value.toString() + "; clamping to 1.0.");
     }
     this.stepValue = value > 0.0 ? value : 1.0;
-    this.setValue(this.currentValue, false);
+    this.setValue(this.currentValue, true, false);
     return this;
   }
 
@@ -180,9 +179,6 @@ export class Slider extends FlexBox implements DragGestureHost {
 
   sizing(sizing: SliderSizing | null): this {
     this.sizingValue = sizing;
-    if (!this.usesDefaultPresenter()) {
-      return this;
-    }
     this.replacePresenter(createSliderPresenter(this.templateOverride, this.sizingValue));
     const thumbSize = this.sliderPresenter.metrics.thumbSize;
     if (this.lengthValue <= thumbSize) {
@@ -214,19 +210,19 @@ export class Slider extends FlexBox implements DragGestureHost {
     return this;
   }
 
-  onChanged(callback: ((value: f32) => void) | null): this {
+  onChanged(callback: ((event: SliderChangedEventArgs) => void) | null): this {
     this.changedCallback = callback;
     this.changedBinding = null;
     return this;
   }
 
-  bindChanged<Owner>(owner: Owner, handler: Handler1<Owner, f32>): this {
+  bindChanged<Owner>(owner: Owner, handler: Handler1<Owner, SliderChangedEventArgs>): this {
     this.changedCallback = null;
-    this.changedBinding = bind1<Owner, f32>(owner, handler);
+    this.changedBinding = bind1<Owner, SliderChangedEventArgs>(owner, handler);
     return this;
   }
 
-  onChangedWith<Owner>(owner: Owner, handler: Handler1<Owner, f32>): this {
+  onChangedWith<Owner>(owner: Owner, handler: Handler1<Owner, SliderChangedEventArgs>): this {
     this.bindChanged(owner, handler);
     return this;
   }
@@ -322,7 +318,7 @@ export class Slider extends FlexBox implements DragGestureHost {
   }
 
   _applyPersistedValue(value: f32): void {
-    this.setValue(value, true);
+    this.setValue(value, true, false);
   }
 
   private normalizeValue(value: f32): f32 {
@@ -334,7 +330,7 @@ export class Slider extends FlexBox implements DragGestureHost {
     return clamp(this.minValue + snapped, this.minValue, this.maxValue);
   }
 
-  private setValue(value: f32, emit: bool): void {
+  private setValue(value: f32, emit: bool, announce: bool = emit): void {
     const normalized = this.normalizeValue(value);
     if (normalized == this.currentValue) {
       this.syncPresentation();
@@ -344,14 +340,17 @@ export class Slider extends FlexBox implements DragGestureHost {
     this.semanticValueRange(this.currentValue, this.minValue, this.maxValue);
     this.syncPresentation();
     if (emit) {
-      this.requestSemanticAnnouncement();
+      if (announce) {
+        this.requestSemanticAnnouncement();
+      }
+      const event = new SliderChangedEventArgs(this.currentValue);
       const callback = this.changedCallback;
       if (callback !== null) {
-        callback(this.currentValue);
+        callback(event);
       }
       const binding = this.changedBinding;
       if (binding !== null) {
-        binding.invoke(this.currentValue);
+        binding.invoke(event);
       }
     }
   }
@@ -401,8 +400,7 @@ export class Slider extends FlexBox implements DragGestureHost {
     this.cornerRadius(theme.spacing.sm);
     this.border(
       SLIDER_FOCUS_BORDER_WIDTH,
-      theme.colors.background,
-      BorderStyle.Solid,
+      theme.colors.background
     );
     this.padding(SLIDER_PADDING, SLIDER_PADDING, SLIDER_PADDING, SLIDER_PADDING);
     this.opacity(this.isEnabled ? 1.0 : 0.6);

package/src/controls/Switch.ts

@@ -1,8 +1,10 @@
 import { Callback1, Handler1 } from "../core/BoundCallback";
 import { SemanticCheckedState, SemanticRole } from "../core/ffi";
+import { SwitchChangedEventArgs } from "../core/Node";
 import { PersistedBoolCodec, PersistedValueState } from "../core/PersistedState";
 import { bind1 } from "../core/bind";
 import { activeTheme } from "../core/Theme";
+import { LabeledControlSizing } from "./ControlSizing";
 import { getControlTemplates } from "./ControlTemplateSet";
 import { PressableLabeledControl } from "./internal/PressableLabeledControl";
 import {
@@ -30,24 +32,25 @@ class PersistedSwitchState extends PersistedValueState<Switch, bool> {
 
 const SWITCH_PERSISTED_STATE = new PersistedSwitchState();
 
-function createIndicatorPresenter(template: SwitchIndicatorTemplate | null): SwitchIndicatorPresenter {
+function createIndicatorPresenter(template: SwitchIndicatorTemplate | null, sizing: LabeledControlSizing | null = null): SwitchIndicatorPresenter {
   if (template !== null) {
-    return template.create();
+    return template.create(sizing);
   }
   const templateSet = getControlTemplates();
   const appTemplate = templateSet !== null ? templateSet.switchIndicator : null;
-  return (appTemplate === null ? defaultSwitchIndicatorTemplate : appTemplate).create();
+  return (appTemplate === null ? defaultSwitchIndicatorTemplate : appTemplate).create(sizing);
 }
 
 export class Switch extends PressableLabeledControl {
   private indicatorPresenter: SwitchIndicatorPresenter;
   private templateOverride: SwitchIndicatorTemplate | null = null;
+  private sizingValue: LabeledControlSizing | null = null;
   private checkedValue: bool = false;
-  private changedCallback: ((checked: bool) => void) | null = null;
-  private changedBinding: Callback1<bool> | null = null;
+  private changedCallback: ((event: SwitchChangedEventArgs) => void) | null = null;
+  private changedBinding: Callback1<SwitchChangedEventArgs> | null = null;
 
   constructor(label: string) {
-    const indicatorPresenter = createIndicatorPresenter(null);
+    const indicatorPresenter = createIndicatorPresenter(null, null);
     super(SemanticRole.Switch, label, indicatorPresenter.root);
     this.indicatorPresenter = indicatorPresenter;
     this.semanticChecked(SemanticCheckedState.False);
@@ -60,31 +63,42 @@ export class Switch extends PressableLabeledControl {
   }
 
   check(flag: bool): this {
-    this.updateChecked(flag, false);
+    this.updateChecked(flag, true, false);
+    return this;
+  }
+
+  sizing(sizing: LabeledControlSizing | null): this {
+    this.sizingValue = sizing;
+    this.setLabelFontSizeOverride(
+      sizing !== null && sizing.hasLabelFontSize ? sizing.labelFontSizePx : 0.0,
+    );
+    this.indicatorPresenter = createIndicatorPresenter(this.templateOverride, this.sizingValue);
+    this.replaceIndicatorRoot(this.indicatorPresenter.root);
+    this.syncVisualState();
     return this;
   }
 
   template(template: SwitchIndicatorTemplate | null): this {
     this.templateOverride = template;
-    this.indicatorPresenter = createIndicatorPresenter(this.templateOverride);
+    this.indicatorPresenter = createIndicatorPresenter(this.templateOverride, this.sizingValue);
     this.replaceIndicatorRoot(this.indicatorPresenter.root);
     this.syncVisualState();
     return this;
   }
 
-  onChanged(callback: ((checked: bool) => void) | null): this {
+  onChanged(callback: ((event: SwitchChangedEventArgs) => void) | null): this {
     this.changedCallback = callback;
     this.changedBinding = null;
     return this;
   }
 
-  bindChanged<Owner>(owner: Owner, handler: Handler1<Owner, bool>): this {
+  bindChanged<Owner>(owner: Owner, handler: Handler1<Owner, SwitchChangedEventArgs>): this {
     this.changedCallback = null;
-    this.changedBinding = bind1<Owner, bool>(owner, handler);
+    this.changedBinding = bind1<Owner, SwitchChangedEventArgs>(owner, handler);
     return this;
   }
 
-  onChangedWith<Owner>(owner: Owner, handler: Handler1<Owner, bool>): this {
+  onChangedWith<Owner>(owner: Owner, handler: Handler1<Owner, SwitchChangedEventArgs>): this {
     this.bindChanged(owner, handler);
     return this;
   }
@@ -108,10 +122,10 @@ export class Switch extends PressableLabeledControl {
   }
 
   _applyPersistedChecked(next: bool): void {
-    this.updateChecked(next, true);
+    this.updateChecked(next, true, false);
   }
 
-  private updateChecked(next: bool, emit: bool): void {
+  private updateChecked(next: bool, emit: bool, announce: bool = emit): void {
     if (this.checkedValue == next) {
       return;
     }
@@ -119,14 +133,17 @@ export class Switch extends PressableLabeledControl {
     this.semanticChecked(next ? SemanticCheckedState.True : SemanticCheckedState.False);
     this.syncVisualState();
     if (emit) {
-      this.requestSemanticAnnouncement();
+      if (announce) {
+        this.requestSemanticAnnouncement();
+      }
+      const event = new SwitchChangedEventArgs(next);
       const callback = this.changedCallback;
       if (callback !== null) {
-        callback(next);
+        callback(event);
       }
       const binding = this.changedBinding;
       if (binding !== null) {
-        binding.invoke(next);
+        binding.invoke(event);
       }
     }
   }