@effindomv2/fui-rs 0.1.11 → 0.1.13

package/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "fui-rs"
-version = "0.1.11"
+version = "0.1.13"
 edition = "2021"
 license = "AGPL-3.0-only OR LicenseRef-EffinDom-Commercial"
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effindomv2/fui-rs",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "private": false,
   "license": "AGPL-3.0-only OR LicenseRef-EffinDom-Commercial",
   "description": "EffinDom v2 Rust frontend framework SDK and host generators",

package/scripts/hostgen/rust-host-events.ts

@@ -167,5 +167,5 @@ export async function generateRustHostEventsFile(
     lines.push("");
   });
   await fs.mkdir(path.dirname(outputPath), { recursive: true });
-  await fs.writeFile(outputPath, `${lines.join("\n")}\n`, "utf8");
+  await fs.writeFile(outputPath, `${lines.join("\n").replace(/\n+$/, "")}\n`, "utf8");
 }

package/scripts/hostgen/rust-host-services.ts

@@ -140,9 +140,9 @@ function emitWasmCallArgs(args: readonly HostServiceTypeName[]): string {
 function emitFrameworkNonWasmBody(importName: string, args: readonly HostServiceTypeName[]): string[] {
   const argNames = args.map((_type, index) => `arg${String(index)}`);
   if (importName === "fui_now_ms") {
-    return ["    crate::ffi::test::host_now_ms()"];
+    return ["        crate::ffi::test::host_now_ms()"];
   }
-  return [`    unsafe { crate::ffi::${importName}(${argNames.join(", ")}) }`];
+  return [`        unsafe { crate::ffi::${importName}(${argNames.join(", ")}) }`];
 }
 
 function emitDecodeReturn(
@@ -154,7 +154,7 @@ function emitDecodeReturn(
     return [];
   }
   if (!isBufferType(returns)) {
-    return ["    raw_result"];
+    return ["        raw_result"];
   }
   const decodeFn =
     returns === "string" ? "decode_host_service_string_result" :
@@ -165,7 +165,7 @@ function emitDecodeReturn(
     returns === "u64_array" ? "decode_host_service_u64_array_result" :
     "decode_host_service_f64_array_result";
   return [
-    `    ${runtimePath}::${decodeFn}(result_ptr, raw_result, "${importName}")`,
+    `        ${runtimePath}::${decodeFn}(result_ptr, raw_result, "${importName}")`,
   ];
 }
 
@@ -219,32 +219,32 @@ export async function generateRustHostServicesFile(
     const wrapperName = snakeCaseIdentifier(method.importName);
     const returnType = rustReturnType(method.returns);
     wrappers.push(`pub fn ${wrapperName}(${emitWrapperArgs(method.args)}) -> ${returnType} {`);
-    wrappers.push(`  #[cfg(${hostImportCfg})]`);
-    wrappers.push("  {");
+    wrappers.push(`    #[cfg(${hostImportCfg})]`);
+    wrappers.push("    {");
     if (isBufferType(method.returns)) {
-      wrappers.push(`    let result_ptr = ${runtimePath}::host_service_result_buffer_ptr();`);
-      wrappers.push(`    let result_cap = ${runtimePath}::host_service_result_buffer_size();`);
+      wrappers.push(`        let result_ptr = ${runtimePath}::host_service_result_buffer_ptr();`);
+      wrappers.push(`        let result_cap = ${runtimePath}::host_service_result_buffer_size();`);
       const wasmCallArgs = emitWasmCallArgs(method.args);
       const callArgs = wasmCallArgs.length > 0 ? `${wasmCallArgs}, result_ptr, result_cap` : "result_ptr, result_cap";
-      wrappers.push(`    let raw_result = unsafe { __host_${method.importName}(${callArgs}) };`);
+      wrappers.push(`        let raw_result = unsafe { __host_${method.importName}(${callArgs}) };`);
       wrappers.push(...emitDecodeReturn(method.returns, runtimePath, method.importName));
     } else if (method.returns === "void") {
       const wasmCallArgs = emitWasmCallArgs(method.args);
-      wrappers.push(`    unsafe { __host_${method.importName}(${wasmCallArgs}) };`);
+      wrappers.push(`        unsafe { __host_${method.importName}(${wasmCallArgs}) };`);
     } else {
-      wrappers.push(`    unsafe { __host_${method.importName}(${emitWasmCallArgs(method.args)}) }`);
+      wrappers.push(`        unsafe { __host_${method.importName}(${emitWasmCallArgs(method.args)}) }`);
     }
-    wrappers.push("  }");
-    wrappers.push(`  #[cfg(${fallbackCfg})]`);
-    wrappers.push("  {");
+    wrappers.push("    }");
+    wrappers.push(`    #[cfg(${fallbackCfg})]`);
+    wrappers.push("    {");
     if (mode === "framework") {
       wrappers.push(...emitFrameworkNonWasmBody(method.importName, method.args));
     } else {
       wrappers.push(
-        `    panic!("Host service ${method.importName} is only available in wasm/browser builds.");`,
+        `        panic!("Host service ${method.importName} is only available in wasm/browser builds.");`,
       );
     }
-    wrappers.push("  }");
+    wrappers.push("    }");
     wrappers.push("}");
     wrappers.push("");
   }

package/src/controls/anti_selection_area.rs

@@ -52,3 +52,18 @@ impl HasFlexBoxRoot for AntiSelectionArea {
         &self.root
     }
 }
+
+impl ThemeBindable for AntiSelectionArea {
+    fn theme_binding_node(&self) -> NodeRef {
+        self.root.retained_node_ref()
+    }
+
+    fn weak_theme_target(&self) -> Box<dyn Fn() -> Option<Self>> {
+        let weak_root = self.root.downgrade();
+        Box::new(move || {
+            Some(AntiSelectionArea {
+                root: weak_root.upgrade()?,
+            })
+        })
+    }
+}

package/src/controls/button.rs

@@ -4,6 +4,7 @@ use super::internal::button_presenter::{
 use super::*;
 use crate::ffi::CursorStyle;
 use crate::node::{TextCore, WeakFlexBox};
+use crate::theme::subscribe;
 use crate::{focus_adorner, focus_visibility};
 use std::rc::Rc;
 
@@ -250,6 +251,9 @@ impl Button {
         ButtonEventTarget {
             weak_root: self.root.downgrade(),
             presenter: self.presenter.clone(),
+            label: self.label.clone(),
+            template: self.template.clone(),
+            label_value: self.label_value.clone(),
             click: self.click.clone(),
             double_click: self.double_click.clone(),
             triple_click: self.triple_click.clone(),
@@ -345,6 +349,17 @@ impl HasFlexBoxRoot for Button {
     }
 }
 
+impl ThemeBindable for Button {
+    fn theme_binding_node(&self) -> NodeRef {
+        self.root.retained_node_ref()
+    }
+
+    fn weak_theme_target(&self) -> Box<dyn Fn() -> Option<Self>> {
+        let target = self.event_target();
+        Box::new(move || target.upgrade())
+    }
+}
+
 impl LabeledControlTextStyle for Button {
     fn set_label_font_family(&self, family: crate::FontFamily) {
         self.set_explicit_font_family(family);
@@ -434,6 +449,9 @@ fn create_button_presenter(template: Option<Rc<dyn ButtonTemplate>>) -> Rc<dyn B
 struct ButtonEventTarget {
     weak_root: WeakFlexBox,
     presenter: Rc<RefCell<Rc<dyn ButtonPresenter>>>,
+    label: Rc<RefCell<TextCore>>,
+    template: Rc<RefCell<Option<Rc<dyn ButtonTemplate>>>>,
+    label_value: Rc<RefCell<String>>,
     click: Rc<RefCell<Option<ClickCallback>>>,
     double_click: Rc<RefCell<Option<ClickCallback>>>,
     triple_click: Rc<RefCell<Option<ClickCallback>>>,
@@ -448,6 +466,27 @@ struct ButtonEventTarget {
 }
 
 impl ButtonEventTarget {
+    fn upgrade(&self) -> Option<Button> {
+        Some(Button {
+            root: self.weak_root.upgrade()?,
+            presenter: self.presenter.clone(),
+            label: self.label.clone(),
+            template: self.template.clone(),
+            label_value: self.label_value.clone(),
+            click: self.click.clone(),
+            double_click: self.double_click.clone(),
+            triple_click: self.triple_click.clone(),
+            hovered_state: self.hovered_state.clone(),
+            pressed_state: self.pressed_state.clone(),
+            focused_state: self.focused_state.clone(),
+            keyboard_armed_key: self.keyboard_armed_key.clone(),
+            font_family_override: self.font_family_override.clone(),
+            font_size_override: self.font_size_override.clone(),
+            text_color_override: self.text_color_override.clone(),
+            colors_value: self.colors_value.clone(),
+        })
+    }
+
     fn is_enabled(&self) -> bool {
         self.weak_root
             .upgrade()

package/src/controls/checkbox.rs

@@ -2,7 +2,9 @@ use super::internal::checkbox_indicator_presenter::{
     create_default_checkbox_indicator_presenter, CheckboxIndicatorPresenter,
     CheckboxIndicatorTemplate, CheckboxIndicatorVisualState,
 };
-use super::internal::pressable_labeled_control::PressableLabeledControlState;
+use super::internal::pressable_labeled_control::{
+    PressableLabeledControlState, WeakPressableLabeledControl,
+};
 use super::*;
 use std::cell::{Cell, RefCell};
 use std::rc::Rc;
@@ -318,9 +320,23 @@ impl HasFlexBoxRoot for Checkbox {
     }
 }
 
+impl ThemeBindable for Checkbox {
+    fn theme_binding_node(&self) -> NodeRef {
+        self.root.retained_node_ref()
+    }
+
+    fn weak_theme_target(&self) -> Box<dyn Fn() -> Option<Self>> {
+        let target = CheckboxEventTarget::from_checkbox(self);
+        Box::new(move || target.upgrade())
+    }
+}
+
 #[derive(Clone)]
 struct CheckboxEventTarget {
+    base: WeakPressableLabeledControl,
     presenter: Rc<RefCell<Rc<dyn CheckboxIndicatorPresenter>>>,
+    template_override: Rc<RefCell<Option<Rc<dyn CheckboxIndicatorTemplate>>>>,
+    sizing_value: Rc<Cell<Option<LabeledControlSizing>>>,
     state: Rc<Cell<CheckState>>,
     tri_state: Rc<Cell<bool>>,
     colors_value: Rc<Cell<Option<LabeledControlColors>>>,
@@ -331,7 +347,10 @@ struct CheckboxEventTarget {
 impl CheckboxEventTarget {
     fn from_checkbox(checkbox: &Checkbox) -> Self {
         Self {
+            base: checkbox.base.downgrade(),
             presenter: checkbox.indicator_presenter.clone(),
+            template_override: checkbox.template_override.clone(),
+            sizing_value: checkbox.sizing_value.clone(),
             state: checkbox.state.clone(),
             tri_state: checkbox.tri_state.clone(),
             colors_value: checkbox.colors_value.clone(),
@@ -340,6 +359,22 @@ impl CheckboxEventTarget {
         }
     }
 
+    fn upgrade(&self) -> Option<Checkbox> {
+        let base = self.base.upgrade()?;
+        Some(Checkbox {
+            root: base.root(),
+            base,
+            indicator_presenter: self.presenter.clone(),
+            template_override: self.template_override.clone(),
+            sizing_value: self.sizing_value.clone(),
+            state: self.state.clone(),
+            tri_state: self.tri_state.clone(),
+            colors_value: self.colors_value.clone(),
+            changed: self.changed.clone(),
+            weak_root: self.weak_root.clone(),
+        })
+    }
+
     fn activate(&self, base_state: PressableLabeledControlState) {
         let next = match (self.state.get(), self.tri_state.get()) {
             (CheckState::False, _) => CheckState::True,

package/src/controls/combobox.rs

@@ -24,7 +24,7 @@ use crate::node::{
 };
 use crate::signal::SubscriptionGuard;
 use crate::theme::{current_theme, subscribe, Theme};
-use crate::{app, frame_scheduler};
+use crate::{app, frame_scheduler, ThemeBindable};
 use std::cell::{Cell, RefCell};
 use std::rc::{Rc, Weak};
 
@@ -876,6 +876,23 @@ impl HasFlexBoxRoot for ComboBox {
     }
 }
 
+impl ThemeBindable for ComboBox {
+    fn theme_binding_node(&self) -> NodeRef {
+        self.root.retained_node_ref()
+    }
+
+    fn weak_theme_target(&self) -> Box<dyn Fn() -> Option<Self>> {
+        let weak_root = self.root.downgrade();
+        let weak_shared = Rc::downgrade(&self.shared);
+        Box::new(move || {
+            Some(ComboBox {
+                root: weak_root.upgrade()?,
+                shared: weak_shared.upgrade()?,
+            })
+        })
+    }
+}
+
 impl Node for ComboBox {
     fn retained_node_ref(&self) -> NodeRef {
         self.root.retained_node_ref()

package/src/controls/dropdown.rs

@@ -22,6 +22,7 @@ use crate::node::{row, FlexBox, FlexBoxSurface, HasFlexBoxRoot, Node, NodeRef, W
 use crate::persisted::{persisted_value_adapter, PersistedInt32Codec};
 use crate::signal::SubscriptionGuard;
 use crate::theme::{current_theme, subscribe};
+use crate::ThemeBindable;
 use std::cell::{Cell, RefCell};
 use std::rc::{Rc, Weak};
 
@@ -642,6 +643,23 @@ impl HasFlexBoxRoot for Dropdown {
     }
 }
 
+impl ThemeBindable for Dropdown {
+    fn theme_binding_node(&self) -> NodeRef {
+        self.root.retained_node_ref()
+    }
+
+    fn weak_theme_target(&self) -> Box<dyn Fn() -> Option<Self>> {
+        let weak_root = self.root.downgrade();
+        let weak_shared = Rc::downgrade(&self.shared);
+        Box::new(move || {
+            Some(Dropdown {
+                root: weak_root.upgrade()?,
+                shared: weak_shared.upgrade()?,
+            })
+        })
+    }
+}
+
 impl DropdownShared {
     fn is_enabled(&self) -> bool {
         self.root

package/src/controls/internal/pressable_labeled_control.rs

@@ -96,6 +96,29 @@ impl PressableLabeledControl {
         self.root.clone()
     }
 
+    pub(crate) fn downgrade(&self) -> WeakPressableLabeledControl {
+        WeakPressableLabeledControl {
+            root: self.root.downgrade(),
+            indicator_root: self.indicator_root.clone(),
+            label_node: self.label_node.clone(),
+            gap_node: self.gap_node.clone(),
+            label_host: self.label_host.clone(),
+            hovered_state: self.hovered_state.clone(),
+            pressed_state: self.pressed_state.clone(),
+            focused_state: self.focused_state.clone(),
+            key_pressed_state: self.key_pressed_state.clone(),
+            pointer_pressed_state: self.pointer_pressed_state.clone(),
+            enabled_state: self.enabled_state.clone(),
+            label_font_family_override: self.label_font_family_override.clone(),
+            label_font_size_override: self.label_font_size_override.clone(),
+            label_text_color_override: self.label_text_color_override.clone(),
+            colors_value: self.colors_value.clone(),
+            activation: self.activation.clone(),
+            state_changed: self.state_changed.clone(),
+            key_handler: self.key_handler.clone(),
+        }
+    }
+
     #[cfg(test)]
     pub(crate) fn test_parts(&self) -> (FlexBox, FlexBox, FlexBox, FlexBox) {
         (
@@ -302,6 +325,53 @@ impl PressableLabeledControl {
     }
 }
 
+#[derive(Clone)]
+pub(crate) struct WeakPressableLabeledControl {
+    root: WeakFlexBox,
+    indicator_root: Rc<RefCell<FlexBox>>,
+    label_node: TextCore,
+    gap_node: FlexBox,
+    label_host: FlexBox,
+    hovered_state: Rc<Cell<bool>>,
+    pressed_state: Rc<Cell<bool>>,
+    focused_state: Rc<Cell<bool>>,
+    key_pressed_state: Rc<Cell<bool>>,
+    pointer_pressed_state: Rc<Cell<bool>>,
+    enabled_state: Rc<Cell<bool>>,
+    label_font_family_override: Rc<RefCell<Option<crate::FontFamily>>>,
+    label_font_size_override: Rc<Cell<f32>>,
+    label_text_color_override: Rc<Cell<Option<u32>>>,
+    colors_value: Rc<Cell<Option<LabeledControlColors>>>,
+    activation: Rc<RefCell<Option<ActivationCallback>>>,
+    state_changed: Rc<RefCell<Option<StateCallback>>>,
+    key_handler: Rc<RefCell<Option<KeyCallback>>>,
+}
+
+impl WeakPressableLabeledControl {
+    pub(crate) fn upgrade(&self) -> Option<PressableLabeledControl> {
+        Some(PressableLabeledControl {
+            root: self.root.upgrade()?,
+            indicator_root: self.indicator_root.clone(),
+            label_node: self.label_node.clone(),
+            gap_node: self.gap_node.clone(),
+            label_host: self.label_host.clone(),
+            hovered_state: self.hovered_state.clone(),
+            pressed_state: self.pressed_state.clone(),
+            focused_state: self.focused_state.clone(),
+            key_pressed_state: self.key_pressed_state.clone(),
+            pointer_pressed_state: self.pointer_pressed_state.clone(),
+            enabled_state: self.enabled_state.clone(),
+            label_font_family_override: self.label_font_family_override.clone(),
+            label_font_size_override: self.label_font_size_override.clone(),
+            label_text_color_override: self.label_text_color_override.clone(),
+            colors_value: self.colors_value.clone(),
+            activation: self.activation.clone(),
+            state_changed: self.state_changed.clone(),
+            key_handler: self.key_handler.clone(),
+        })
+    }
+}
+
 fn sync_base_theme_parts(
     root: &FlexBox,
     label_node: &TextCore,

package/src/controls/mod.rs

@@ -5,7 +5,8 @@ use crate::ffi::{
     SemanticCheckedState, SemanticRole, Unit,
 };
 use crate::node::{
-    flex_box, row, Child, FlexBox, HasFlexBoxRoot, Node, NodeRef, TextNode, WeakNodeRef,
+    flex_box, row, Child, FlexBox, HasFlexBoxRoot, Node, NodeRef, TextNode, ThemeBindable,
+    WeakNodeRef,
 };
 use crate::theme::{current_theme, subscribe};
 use std::cell::{Cell, RefCell};

package/src/controls/nav_link.rs

@@ -271,19 +271,6 @@ impl NavLink {
         self
     }
 
-    pub fn bind_theme(&self, handler: impl Fn(&NavLink, crate::theme::Theme) + 'static) -> &Self {
-        let target = self.event_target();
-        let guard = subscribe(move |theme| {
-            if let Some(link) = target.upgrade() {
-                handler(&link, theme);
-            }
-        });
-        self.root
-            .retained_node_ref()
-            .retain_attachment(Rc::new(guard));
-        self
-    }
-
     pub fn on_navigate(&self, handler: impl Fn(NavigateEventArgs) + 'static) -> &Self {
         *self.navigate.borrow_mut() = Some(Rc::new(handler));
         self
@@ -315,6 +302,17 @@ impl HasFlexBoxRoot for NavLink {
     }
 }
 
+impl ThemeBindable for NavLink {
+    fn theme_binding_node(&self) -> NodeRef {
+        self.root.retained_node_ref()
+    }
+
+    fn weak_theme_target(&self) -> Box<dyn Fn() -> Option<Self>> {
+        let target = self.event_target();
+        Box::new(move || target.upgrade())
+    }
+}
+
 impl LabeledControlTextStyle for NavLink {
     fn set_label_font_family(&self, family: crate::FontFamily) {
         self.set_explicit_font_family(family);

package/src/controls/progress_bar.rs

@@ -31,6 +31,7 @@ pub struct ProgressBar {
     min: Rc<Cell<f32>>,
     max: Rc<Cell<f32>>,
     value: Rc<Cell<f32>>,
+    orientation: Rc<Cell<Orientation>>,
     sizing_value: Rc<Cell<Option<ProgressBarSizing>>>,
     colors_value: Rc<Cell<Option<ProgressBarColors>>>,
     weak_root: WeakFlexBox,
@@ -47,7 +48,9 @@ impl ProgressBar {
     pub fn new() -> Self {
         let root = flex_box();
         let fill = flex_box();
-        root.semantic_value_range(0.0, 0.0, 100.0).child(&fill);
+        root.semantic_orientation(Orientation::Horizontal)
+            .semantic_value_range(0.0, 0.0, 100.0)
+            .child(&fill);
         let control = Self {
             weak_root: root.downgrade(),
             weak_fill: fill.downgrade(),
@@ -56,6 +59,7 @@ impl ProgressBar {
             min: Rc::new(Cell::new(0.0)),
             max: Rc::new(Cell::new(100.0)),
             value: Rc::new(Cell::new(0.0)),
+            orientation: Rc::new(Cell::new(Orientation::Horizontal)),
             sizing_value: Rc::new(Cell::new(None)),
             colors_value: Rc::new(Cell::new(None)),
         };
@@ -88,6 +92,43 @@ impl ProgressBar {
         self
     }
 
+    pub fn length(&self, value: f32) -> &Self {
+        let value = clamp_direct_dimension("length", value);
+        let current = self.sizing_value.get().unwrap_or_default();
+        let mut sizing = ProgressBarSizing::new().length(value);
+        if current.has_thickness() {
+            sizing = sizing.thickness(current.thickness_px());
+        }
+        self.sizing_value.set(Some(sizing));
+        self.sync_geometry();
+        self
+    }
+
+    pub fn thickness(&self, value: f32) -> &Self {
+        let value = clamp_direct_dimension("thickness", value);
+        let current = self.sizing_value.get().unwrap_or_default();
+        let mut sizing = ProgressBarSizing::new().thickness(value);
+        if current.has_length() {
+            sizing = sizing.length(current.length_px());
+        }
+        self.sizing_value.set(Some(sizing));
+        self.sync_geometry();
+        self.sync_visual_state();
+        self
+    }
+
+    pub fn orientation(&self, orientation: Orientation) -> &Self {
+        let orientation = if orientation == Orientation::Vertical {
+            Orientation::Vertical
+        } else {
+            Orientation::Horizontal
+        };
+        self.orientation.set(orientation);
+        self.root.semantic_orientation(orientation);
+        self.sync_geometry();
+        self
+    }
+
     pub fn sizing(&self, sizing: ProgressBarSizing) -> &Self {
         self.sizing_value.set(Some(sizing));
         self.sync_geometry();
@@ -165,6 +206,7 @@ impl ProgressBar {
             self.min.get(),
             self.max.get(),
             self.value.get(),
+            self.orientation.get(),
             resolve_sizing(self.sizing_value.get()),
         );
     }
@@ -179,6 +221,46 @@ impl ProgressBar {
     }
 }
 
+#[derive(Clone)]
+struct ProgressBarThemeTarget {
+    root: WeakFlexBox,
+    fill: WeakFlexBox,
+    min: Rc<Cell<f32>>,
+    max: Rc<Cell<f32>>,
+    value: Rc<Cell<f32>>,
+    orientation: Rc<Cell<Orientation>>,
+    sizing_value: Rc<Cell<Option<ProgressBarSizing>>>,
+    colors_value: Rc<Cell<Option<ProgressBarColors>>>,
+}
+
+impl ProgressBarThemeTarget {
+    fn upgrade(&self) -> Option<ProgressBar> {
+        Some(ProgressBar {
+            root: self.root.upgrade()?,
+            fill: self.fill.upgrade()?,
+            min: self.min.clone(),
+            max: self.max.clone(),
+            value: self.value.clone(),
+            orientation: self.orientation.clone(),
+            sizing_value: self.sizing_value.clone(),
+            colors_value: self.colors_value.clone(),
+            weak_root: self.root.clone(),
+            weak_fill: self.fill.clone(),
+        })
+    }
+}
+
+fn clamp_direct_dimension(method: &str, value: f32) -> f32 {
+    if value > 0.0 {
+        return value;
+    }
+    crate::logger::warn(
+        "Layout",
+        &format!("ProgressBar.{method}() received {value}; clamping to 1.0."),
+    );
+    1.0
+}
+
 impl Node for ProgressBar {
     fn retained_node_ref(&self) -> NodeRef {
         self.root.retained_node_ref()
@@ -197,12 +279,33 @@ impl HasFlexBoxRoot for ProgressBar {
     }
 }
 
+impl ThemeBindable for ProgressBar {
+    fn theme_binding_node(&self) -> NodeRef {
+        self.root.retained_node_ref()
+    }
+
+    fn weak_theme_target(&self) -> Box<dyn Fn() -> Option<Self>> {
+        let target = ProgressBarThemeTarget {
+            root: self.weak_root.clone(),
+            fill: self.weak_fill.clone(),
+            min: self.min.clone(),
+            max: self.max.clone(),
+            value: self.value.clone(),
+            orientation: self.orientation.clone(),
+            sizing_value: self.sizing_value.clone(),
+            colors_value: self.colors_value.clone(),
+        };
+        Box::new(move || target.upgrade())
+    }
+}
+
 fn sync_progress_geometry(
     root: &FlexBox,
     fill: &FlexBox,
     min: f32,
     max: f32,
     current_value: f32,
+    orientation: Orientation,
     sizing: ResolvedProgressBarSizing,
 ) {
     let range = max - min;
@@ -212,15 +315,26 @@ fn sync_progress_geometry(
         0.0
     };
     let fill_length = sizing.length * fraction;
-    root.width(sizing.length, Unit::Pixel)
-        .height(sizing.thickness, Unit::Pixel)
-        .semantic_value_range(current_value, min, max)
+    if orientation == Orientation::Vertical {
+        root.flex_direction(FlexDirection::Column)
+            .justify_content(JustifyContent::End)
+            .width(sizing.thickness, Unit::Pixel)
+            .height(sizing.length, Unit::Pixel);
+        fill.width(sizing.thickness, Unit::Pixel)
+            .height(fill_length, Unit::Pixel);
+    } else {
+        root.flex_direction(FlexDirection::Row)
+            .justify_content(JustifyContent::Start)
+            .width(sizing.length, Unit::Pixel)
+            .height(sizing.thickness, Unit::Pixel);
+        fill.width(fill_length, Unit::Pixel)
+            .height(sizing.thickness, Unit::Pixel);
+    }
+    root.semantic_value_range(current_value, min, max)
         .default_semantic_label(format!(
             "Progress bar, value {}, range {} to {}",
             current_value, min, max
         ));
-    fill.width(fill_length, Unit::Pixel)
-        .height(sizing.thickness, Unit::Pixel);
 }
 
 fn sync_progress_visual_state(