@effindomv2/fui-as 0.1.12 → 0.1.13

package/src/controls/internal/CheckboxIndicatorPresenter.ts

@@ -1,6 +1,7 @@
 import { BorderStyle, SemanticCheckedState, Unit } from "../../core/ffi";
 import { Theme } from "../../core/Theme";
 import { FlexBox, Svg } from "../../nodes";
+import { LabeledControlSizing } from "../ControlSizing";
 import {
   PressableIndicatorMetrics,
   PressableIndicatorPresenter,
@@ -9,6 +10,30 @@ import {
 
 const CHECKBOX_CHECK_SVG_URL = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 14 14'><path d='M3.25 8.25 6.35 11.35 12.75 4.95' fill='none' stroke='%23000000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>";
 
+class CheckboxIndicatorMetrics extends PressableIndicatorMetrics {
+  constructor(
+    readonly indicatorSize: f32,
+    readonly cornerRadius: f32,
+    readonly checkMarkSize: f32,
+  ) {
+    super(indicatorSize, indicatorSize);
+  }
+}
+
+const DEFAULT_CHECKBOX_METRICS = new CheckboxIndicatorMetrics(20.0, 4.0, 16.0);
+
+function resolveCheckboxMetrics(sizing: LabeledControlSizing | null): CheckboxIndicatorMetrics {
+  if (sizing === null || !sizing.hasIndicatorSize) {
+    return DEFAULT_CHECKBOX_METRICS;
+  }
+  const indicatorSize = sizing.indicatorSizePx;
+  return new CheckboxIndicatorMetrics(
+    indicatorSize,
+    indicatorSize * 0.2,
+    indicatorSize * 0.8,
+  );
+}
+
 export class CheckboxIndicatorVisualState extends PressableIndicatorVisualState {
   constructor(
     readonly checkedState: SemanticCheckedState,
@@ -34,23 +59,25 @@ export abstract class CheckboxIndicatorTemplate {
 }
 
 class DefaultCheckboxIndicatorPresenter extends CheckboxIndicatorPresenter {
+  private readonly geometry: CheckboxIndicatorMetrics;
   private readonly markNode: Svg;
 
-  constructor() {
+  constructor(metrics: CheckboxIndicatorMetrics = DEFAULT_CHECKBOX_METRICS) {
     const root = new FlexBox()
-      .width(20.0, Unit.Pixel)
-      .height(20.0, Unit.Pixel)
+      .width(metrics.indicatorSize, Unit.Pixel)
+      .height(metrics.indicatorSize, Unit.Pixel)
       .alignItems(1)
       .justifyContent(1);
-    super(root, new PressableIndicatorMetrics(20.0, 20.0));
+    super(root, metrics);
+    this.geometry = metrics;
     const markHost = new FlexBox()
       .fillSize()
       .alignItems(1)
       .justifyContent(1);
     const markNode = new Svg();
     markNode
-      .width(16.0, Unit.Pixel)
-      .height(16.0, Unit.Pixel);
+      .width(metrics.checkMarkSize, Unit.Pixel)
+      .height(metrics.checkMarkSize, Unit.Pixel);
     this.markNode = markNode;
     markHost.child(markNode);
     root.child(markHost);
@@ -59,6 +86,7 @@ class DefaultCheckboxIndicatorPresenter extends CheckboxIndicatorPresenter {
   apply(theme: Theme, state: CheckboxIndicatorVisualState): void {
     let background = theme.colors.surface;
     let borderColor = theme.colors.border;
+    const geometry = this.geometry;
     let markVisible = false;
     let markColor = theme.colors.textPrimary;
     if (state.checkedState == SemanticCheckedState.True || state.checkedState == SemanticCheckedState.Mixed) {
@@ -71,7 +99,7 @@ class DefaultCheckboxIndicatorPresenter extends CheckboxIndicatorPresenter {
     } else if (state.hovered) {
       background = theme.colors.background;
     }
-    this.root.cornerRadius(theme.spacing.xs);
+    this.root.cornerRadius(geometry.cornerRadius);
     this.root.border(1.0, borderColor, BorderStyle.Solid);
     this.root.bgColor(background);
     if (markVisible) {
@@ -79,7 +107,12 @@ class DefaultCheckboxIndicatorPresenter extends CheckboxIndicatorPresenter {
     } else {
       this.markNode.clearSource();
     }
-    this.markNode.tint(markColor);
+    this.markNode
+      .width(geometry.checkMarkSize, Unit.Pixel)
+      .height(geometry.checkMarkSize, Unit.Pixel)
+      .opacity(markVisible ? 1.0 : 0.0);
+    const markNode = this.markNode as Svg;
+    markNode.tint(markColor);
   }
 }
 
@@ -90,3 +123,7 @@ class DefaultCheckboxIndicatorTemplate extends CheckboxIndicatorTemplate {
 }
 
 export const defaultCheckboxIndicatorTemplate = new DefaultCheckboxIndicatorTemplate();
+
+export function createDefaultCheckboxIndicatorPresenter(sizing: LabeledControlSizing | null = null): CheckboxIndicatorPresenter {
+  return new DefaultCheckboxIndicatorPresenter(resolveCheckboxMetrics(sizing));
+}

package/src/controls/internal/DropdownChevronPresenter.ts

@@ -1,9 +1,26 @@
 import { AlignItems, JustifyContent, Unit } from "../../core/ffi";
 import { Theme } from "../../core/Theme";
 import { FlexBox, Svg } from "../../nodes";
+import { DropdownSizing } from "../ControlSizing";
 
 const DROPDOWN_CHEVRON_COLLAPSED_SVG = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23000000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>";
 const DROPDOWN_CHEVRON_EXPANDED_SVG = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 7.5 6 4.5 9 7.5' fill='none' stroke='%23000000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>";
+const DEFAULT_DROPDOWN_CHEVRON_ICON_SIZE: f32 = 12.0;
+
+class DropdownChevronMetrics {
+  constructor(
+    readonly iconSize: f32,
+  ) {}
+}
+
+const DEFAULT_DROPDOWN_CHEVRON_METRICS = new DropdownChevronMetrics(DEFAULT_DROPDOWN_CHEVRON_ICON_SIZE);
+
+function resolveChevronMetrics(sizing: DropdownSizing | null): DropdownChevronMetrics {
+  if (sizing === null || !sizing.hasChevronIconSize) {
+    return DEFAULT_DROPDOWN_CHEVRON_METRICS;
+  }
+  return new DropdownChevronMetrics(sizing.chevronIconSizePx);
+}
 
 export class DropdownChevronVisualState {
   constructor(
@@ -30,29 +47,35 @@ export abstract class DropdownChevronTemplate {
 }
 
 class DefaultDropdownChevronPresenter extends DropdownChevronPresenter {
+  private readonly metrics: DropdownChevronMetrics;
   private readonly iconNode: Svg;
 
-  constructor() {
+  constructor(metrics: DropdownChevronMetrics = DEFAULT_DROPDOWN_CHEVRON_METRICS) {
     const root = new FlexBox()
       .fillSize()
       .alignItems(AlignItems.Center)
       .justifyContent(JustifyContent.Center);
     const iconNode = new Svg()
-      .width(12.0, Unit.Pixel)
-      .height(12.0, Unit.Pixel) as Svg;
+      .width(metrics.iconSize, Unit.Pixel)
+      .height(metrics.iconSize, Unit.Pixel) as Svg;
     root.child(iconNode);
     super(root);
+    this.metrics = metrics;
     this.iconNode = iconNode;
   }
 
   apply(theme: Theme, state: DropdownChevronVisualState): void {
+    const metrics = this.metrics;
     this.root
       .fillSize()
       .alignItems(AlignItems.Center)
       .justifyContent(JustifyContent.Center);
     this.iconNode
-      .source(state.open ? DROPDOWN_CHEVRON_EXPANDED_SVG : DROPDOWN_CHEVRON_COLLAPSED_SVG)
-      .tint(!state.enabled ? theme.colors.textMuted : (state.hovered ? theme.colors.textPrimary : theme.colors.textMuted));
+      .width(metrics.iconSize, Unit.Pixel)
+      .height(metrics.iconSize, Unit.Pixel);
+    const iconNode = this.iconNode as Svg;
+    iconNode.source(state.open ? DROPDOWN_CHEVRON_EXPANDED_SVG : DROPDOWN_CHEVRON_COLLAPSED_SVG);
+    iconNode.tint(!state.enabled ? theme.colors.textMuted : (state.hovered ? theme.colors.textPrimary : theme.colors.textMuted));
   }
 }
 
@@ -63,3 +86,7 @@ class DefaultDropdownChevronTemplate extends DropdownChevronTemplate {
 }
 
 export const defaultDropdownChevronTemplate = new DefaultDropdownChevronTemplate();
+
+export function createDefaultDropdownChevronPresenter(sizing: DropdownSizing | null = null): DropdownChevronPresenter {
+  return new DefaultDropdownChevronPresenter(resolveChevronMetrics(sizing));
+}

package/src/controls/internal/DropdownFieldPresenter.ts

@@ -8,8 +8,58 @@ import {
 } from "../../core/ffi";
 import { Theme } from "../../core/Theme";
 import { FlexBox, Text } from "../../nodes";
+import { DropdownSizing } from "../ControlSizing";
 
 const DEFAULT_CHEVRON_BOX_SIZE: f32 = 16.0;
+const DEFAULT_FIELD_PADDING_X: f32 = 16.0;
+const DEFAULT_FIELD_PADDING_Y: f32 = 8.0;
+const DEFAULT_FIELD_FONT_SIZE: f32 = 16.0;
+const DEFAULT_FIELD_HEIGHT: f32 = 32.0;
+
+export class DropdownFieldMetrics {
+  constructor(
+    readonly height: f32,
+    readonly fontSize: f32,
+    readonly chevronBoxSize: f32,
+    readonly paddingLeft: f32,
+    readonly paddingTop: f32,
+    readonly paddingRight: f32,
+    readonly paddingBottom: f32,
+  ) {}
+}
+
+const DEFAULT_DROPDOWN_FIELD_METRICS = new DropdownFieldMetrics(
+  DEFAULT_FIELD_HEIGHT,
+  DEFAULT_FIELD_FONT_SIZE,
+  DEFAULT_CHEVRON_BOX_SIZE,
+  DEFAULT_FIELD_PADDING_X,
+  DEFAULT_FIELD_PADDING_Y,
+  DEFAULT_FIELD_PADDING_X,
+  DEFAULT_FIELD_PADDING_Y,
+);
+
+function resolveFieldMetrics(sizing: DropdownSizing | null): DropdownFieldMetrics {
+  if (
+    sizing === null ||
+    (!sizing.hasFieldHeight && !sizing.hasFieldFontSize && !sizing.hasChevronBoxSize)
+  ) {
+    return DEFAULT_DROPDOWN_FIELD_METRICS;
+  }
+  const fontSize = sizing.hasFieldFontSize ? sizing.fieldFontSizePx : DEFAULT_DROPDOWN_FIELD_METRICS.fontSize;
+  const chevronBoxSize = sizing.hasChevronBoxSize ? sizing.chevronBoxSizePx : DEFAULT_DROPDOWN_FIELD_METRICS.chevronBoxSize;
+  const contentHeight = fontSize > chevronBoxSize ? fontSize : chevronBoxSize;
+  const height = sizing.hasFieldHeight ? sizing.fieldHeightPx : contentHeight + (DEFAULT_FIELD_PADDING_Y * 2.0);
+  const verticalPadding = height > contentHeight ? (height - contentHeight) * 0.5 : 0.0;
+  return new DropdownFieldMetrics(
+    height,
+    fontSize,
+    chevronBoxSize,
+    DEFAULT_FIELD_PADDING_X,
+    verticalPadding,
+    DEFAULT_FIELD_PADDING_X,
+    verticalPadding,
+  );
+}
 
 export class DropdownFieldVisualState {
   constructor(
@@ -27,6 +77,7 @@ export abstract class DropdownFieldPresenter {
     private readonly valueHostValue: FlexBox,
     private readonly valueNodeValue: Text,
     private readonly chevronHostValue: FlexBox,
+    private readonly metricsValue: DropdownFieldMetrics = DEFAULT_DROPDOWN_FIELD_METRICS,
   ) {}
 
   get root(): FlexBox {
@@ -45,6 +96,10 @@ export abstract class DropdownFieldPresenter {
     return this.chevronHostValue;
   }
 
+  get metrics(): DropdownFieldMetrics {
+    return this.metricsValue;
+  }
+
   abstract apply(theme: Theme, state: DropdownFieldVisualState): void;
 }
 
@@ -53,7 +108,7 @@ export abstract class DropdownFieldTemplate {
 }
 
 class DefaultDropdownFieldPresenter extends DropdownFieldPresenter {
-  constructor() {
+  constructor(metrics: DropdownFieldMetrics = DEFAULT_DROPDOWN_FIELD_METRICS) {
     const valueNode = new Text("")
       .selectable(false)
       .width(100.0, Unit.Percent)
@@ -66,8 +121,8 @@ class DefaultDropdownFieldPresenter extends DropdownFieldPresenter {
       .fillWidth()
       .child(valueNode) as FlexBox;
     const chevronHost = new FlexBox()
-      .width(DEFAULT_CHEVRON_BOX_SIZE, Unit.Pixel)
-      .height(DEFAULT_CHEVRON_BOX_SIZE, Unit.Pixel)
+      .width(metrics.chevronBoxSize, Unit.Pixel)
+      .height(metrics.chevronBoxSize, Unit.Pixel)
       .alignItems(AlignItems.Center)
       .justifyContent(JustifyContent.Center);
     const root = new FlexBox()
@@ -75,25 +130,27 @@ class DefaultDropdownFieldPresenter extends DropdownFieldPresenter {
       .alignItems(AlignItems.Center)
       .child(valueHost)
       .child(chevronHost);
-    super(root, valueHost, valueNode, chevronHost);
+    super(root, valueHost, valueNode, chevronHost, metrics);
   }
 
   apply(theme: Theme, state: DropdownFieldVisualState): void {
+    const metrics = this.metrics;
     this.root
       .flexDirection(FlexDirection.Row)
       .alignItems(AlignItems.Center)
+      .height(metrics.height, Unit.Pixel)
       .cornerRadius(theme.spacing.sm)
       .border(2.0, theme.colors.border, BorderStyle.Solid)
-      .padding(theme.spacing.md, theme.spacing.sm, theme.spacing.md, theme.spacing.sm)
+      .padding(metrics.paddingLeft, metrics.paddingTop, metrics.paddingRight, metrics.paddingBottom)
       .bgColor(state.pressed && state.enabled ? theme.colors.background : theme.colors.surface);
     this.valueHost
       .fillWidth();
     this.valueNode
-      .font(theme.fonts.body, theme.fonts.sizeBody)
+      .font(theme.fonts.body, metrics.fontSize)
       .textColor(state.enabled ? theme.colors.textPrimary : theme.colors.textMuted);
     this.chevronHost
-      .width(DEFAULT_CHEVRON_BOX_SIZE, Unit.Pixel)
-      .height(DEFAULT_CHEVRON_BOX_SIZE, Unit.Pixel)
+      .width(metrics.chevronBoxSize, Unit.Pixel)
+      .height(metrics.chevronBoxSize, Unit.Pixel)
       .alignItems(AlignItems.Center)
       .justifyContent(JustifyContent.Center);
   }
@@ -106,3 +163,7 @@ class DefaultDropdownFieldTemplate extends DropdownFieldTemplate {
 }
 
 export const defaultDropdownFieldTemplate = new DefaultDropdownFieldTemplate();
+
+export function createDefaultDropdownFieldPresenter(sizing: DropdownSizing | null = null): DropdownFieldPresenter {
+  return new DefaultDropdownFieldPresenter(resolveFieldMetrics(sizing));
+}

package/src/controls/internal/DropdownOptionRowPresenter.ts

@@ -1,13 +1,38 @@
-import { AlignItems, Unit } from "../../core/ffi";
+import { AlignItems, TextVerticalAlign, Unit } from "../../core/ffi";
 import { Theme } from "../../core/Theme";
 import { FlexBox, Text } from "../../nodes";
+import { DropdownSizing } from "../ControlSizing";
 
 export class DropdownOptionRowMetrics {
   constructor(
     readonly height: f32,
+    readonly paddingLeft: f32 = 10.0,
+    readonly paddingTop: f32 = 6.0,
+    readonly paddingRight: f32 = 10.0,
+    readonly paddingBottom: f32 = 6.0,
+    readonly fontSize: f32 = 16.0,
   ) {}
 }
 
+const DEFAULT_DROPDOWN_OPTION_ROW_METRICS = new DropdownOptionRowMetrics(34.0);
+
+function resolveOptionRowMetrics(sizing: DropdownSizing | null): DropdownOptionRowMetrics {
+  if (sizing === null || (!sizing.hasOptionHeight && !sizing.hasOptionFontSize)) {
+    return DEFAULT_DROPDOWN_OPTION_ROW_METRICS;
+  }
+  const fontSize = sizing.hasOptionFontSize ? sizing.optionFontSizePx : DEFAULT_DROPDOWN_OPTION_ROW_METRICS.fontSize;
+  const height = sizing.hasOptionHeight ? sizing.optionHeightPx : DEFAULT_DROPDOWN_OPTION_ROW_METRICS.height;
+  const verticalPadding = height > fontSize ? (height - fontSize) * 0.5 : 0.0;
+  return new DropdownOptionRowMetrics(
+    height,
+    DEFAULT_DROPDOWN_OPTION_ROW_METRICS.paddingLeft,
+    verticalPadding,
+    DEFAULT_DROPDOWN_OPTION_ROW_METRICS.paddingRight,
+    verticalPadding,
+    fontSize,
+  );
+}
+
 export class DropdownOptionRowVisualState {
   constructor(
     readonly highlighted: bool,
@@ -43,27 +68,30 @@ export abstract class DropdownOptionRowTemplate {
 }
 
 class DefaultDropdownOptionRowPresenter extends DropdownOptionRowPresenter {
-  constructor() {
+  constructor(metrics: DropdownOptionRowMetrics = DEFAULT_DROPDOWN_OPTION_ROW_METRICS) {
     const labelNode = new Text("")
       .selectable(false)
       .width(100.0, Unit.Percent)
       .maxLines(1)
       .wrapping(false) as Text;
-    labelNode.overflowFade(true, false);
+    labelNode
+      .overflowFade(true, false)
+      .verticalAlign(TextVerticalAlign.Center);
     const root = new FlexBox()
       .fillSize()
       .alignItems(AlignItems.Center)
       .child(labelNode);
-    super(root, labelNode, new DropdownOptionRowMetrics(34.0));
+    super(root, labelNode, metrics);
   }
 
   apply(theme: Theme, state: DropdownOptionRowVisualState): void {
+    const metrics = this.metrics;
     this.root
-      .padding(10.0, 6.0, 10.0, 6.0)
+      .padding(metrics.paddingLeft, metrics.paddingTop, metrics.paddingRight, metrics.paddingBottom)
       .cornerRadius(theme.spacing.xs)
       .bgColor(state.highlighted ? theme.contextMenu.item.hoverBackground : 0x00000000);
     this.labelNode
-      .font(theme.fonts.body, theme.fonts.sizeBody)
+      .font(theme.fonts.body, metrics.fontSize)
       .textColor(
         !state.enabled
           ? theme.colors.textMuted
@@ -79,3 +107,7 @@ class DefaultDropdownOptionRowTemplate extends DropdownOptionRowTemplate {
 }
 
 export const defaultDropdownOptionRowTemplate = new DefaultDropdownOptionRowTemplate();
+
+export function createDefaultDropdownOptionRowPresenter(sizing: DropdownSizing | null = null): DropdownOptionRowPresenter {
+  return new DefaultDropdownOptionRowPresenter(resolveOptionRowMetrics(sizing));
+}

package/src/controls/internal/PressableLabeledControl.ts

@@ -30,6 +30,7 @@ export class PressableLabeledControl extends FlexBox {
   private readonly labelHost: FlexBox;
   private readonly disposables: Array<Disposable> = new Array<Disposable>();
   private disposed: bool = false;
+  private labelFontSizeOverride: f32 = 0.0;
   protected hoveredState: bool = false;
   protected pressedState: bool = false;
   protected focusedState: bool = false;
@@ -171,6 +172,11 @@ export class PressableLabeledControl extends FlexBox {
     previousRoot.dispose();
   }
 
+  protected setLabelFontSizeOverride(fontSize: f32): void {
+    this.labelFontSizeOverride = fontSize > 0.0 ? fontSize : 0.0;
+    this.syncBaseTheme(activeTheme.value);
+  }
+
   protected syncBaseTheme(theme: Theme): void {
     this.cursor(this.isEnabled ? CursorStyle.Pointer : CursorStyle.Default);
     this.cornerRadius(theme.spacing.sm);
@@ -182,7 +188,10 @@ export class PressableLabeledControl extends FlexBox {
     this.padding(theme.spacing.xs, theme.spacing.xs, theme.spacing.xs, theme.spacing.xs);
     this.opacity(this.isEnabled ? 1.0 : 0.6);
     this.gapNode.width(theme.spacing.sm, Unit.Pixel);
-    this.labelNode.font(theme.fonts.body, theme.fonts.sizeBody);
+    this.labelNode.font(
+      theme.fonts.body,
+      this.labelFontSizeOverride > 0.0 ? this.labelFontSizeOverride : theme.fonts.sizeBody,
+    );
     this.labelNode.textColor(this.isEnabled ? theme.colors.textPrimary : theme.colors.textMuted);
     this.syncFocusChrome(theme);
   }

package/src/controls/internal/RadioIndicatorPresenter.ts

@@ -1,6 +1,7 @@
 import { BorderStyle, Unit } from "../../core/ffi";
 import { Theme } from "../../core/Theme";
 import { FlexBox } from "../../nodes";
+import { LabeledControlSizing } from "../ControlSizing";
 import {
   PressableIndicatorMetrics,
   PressableIndicatorPresenter,
@@ -31,36 +32,77 @@ export abstract class RadioIndicatorTemplate {
   abstract create(): RadioIndicatorPresenter;
 }
 
+class RadioIndicatorMetrics extends PressableIndicatorMetrics {
+  constructor(
+    readonly indicatorSize: f32,
+    readonly dotSize: f32,
+    readonly borderWidth: f32,
+  ) {
+    super(indicatorSize, indicatorSize);
+  }
+}
+
+function centeredInset(outerSize: f32, innerSize: f32): f32 {
+  return outerSize > innerSize ? (outerSize - innerSize) * 0.5 : 0.0;
+}
+
+function dotInset(metrics: RadioIndicatorMetrics): f32 {
+  const inset = centeredInset(metrics.indicatorSize, metrics.dotSize);
+  return inset > metrics.borderWidth
+    ? inset - metrics.borderWidth
+    : 0.0;
+}
+
+const DEFAULT_RADIO_METRICS = new RadioIndicatorMetrics(20.0, 8.0, 1.0);
+
+function resolveRadioMetrics(sizing: LabeledControlSizing | null): RadioIndicatorMetrics {
+  if (sizing === null || !sizing.hasIndicatorSize) {
+    return DEFAULT_RADIO_METRICS;
+  }
+  const indicatorSize = sizing.indicatorSizePx;
+  return new RadioIndicatorMetrics(
+    indicatorSize,
+    indicatorSize * 0.4,
+    indicatorSize >= 24.0 ? 2.0 : 1.0,
+  );
+}
+
 class DefaultRadioIndicatorPresenter extends RadioIndicatorPresenter {
+  private readonly geometry: RadioIndicatorMetrics;
   private readonly dotNode: FlexBox;
 
-  constructor() {
+  constructor(metrics: RadioIndicatorMetrics = DEFAULT_RADIO_METRICS) {
     const root = new FlexBox()
-      .width(20.0, Unit.Pixel)
-      .height(20.0, Unit.Pixel)
+      .width(metrics.indicatorSize, Unit.Pixel)
+      .height(metrics.indicatorSize, Unit.Pixel)
       .alignItems(1)
       .justifyContent(1);
-    super(root, new PressableIndicatorMetrics(20.0, 20.0));
+    super(root, metrics);
+    this.geometry = metrics;
     const dotNode = new FlexBox()
       .positionAbsolute()
-      .position(5.0, 5.0)
-      .width(8.0, Unit.Pixel)
-      .height(8.0, Unit.Pixel);
+      .position(dotInset(metrics), dotInset(metrics))
+      .width(metrics.dotSize, Unit.Pixel)
+      .height(metrics.dotSize, Unit.Pixel);
     this.dotNode = dotNode;
     root.child(dotNode);
   }
 
   apply(theme: Theme, state: RadioIndicatorVisualState): void {
+    const geometry = this.geometry;
     const outerColor = state.checked
       ? (state.pressed ? theme.colors.accentPressed : (state.hovered ? theme.colors.accentHovered : theme.colors.accent))
       : theme.colors.border;
-    this.root.cornerRadius(10.0);
-    this.root.border(1.0, outerColor, BorderStyle.Solid);
+    this.root.cornerRadius(geometry.indicatorSize * 0.5);
+    this.root.border(geometry.borderWidth, outerColor, BorderStyle.Solid);
     this.root.bgColor(theme.colors.surface);
-    this.dotNode.cornerRadius(4.0);
-    this.dotNode.position(5.0, 5.0);
-    this.dotNode.bgColor(outerColor);
-    this.dotNode.opacity(state.checked ? 1.0 : 0.0);
+    this.dotNode
+      .cornerRadius(geometry.dotSize * 0.5)
+      .position(dotInset(geometry), dotInset(geometry))
+      .width(geometry.dotSize, Unit.Pixel)
+      .height(geometry.dotSize, Unit.Pixel)
+      .bgColor(outerColor)
+      .opacity(state.checked ? 1.0 : 0.0);
   }
 }
 
@@ -71,3 +113,7 @@ class DefaultRadioIndicatorTemplate extends RadioIndicatorTemplate {
 }
 
 export const defaultRadioIndicatorTemplate = new DefaultRadioIndicatorTemplate();
+
+export function createDefaultRadioIndicatorPresenter(sizing: LabeledControlSizing | null = null): RadioIndicatorPresenter {
+  return new DefaultRadioIndicatorPresenter(resolveRadioMetrics(sizing));
+}