From f998b68566b499af552d8b464f7a02d50a748fb9 Mon Sep 17 00:00:00 2001
From: "vivi-the-going-merry[bot]"
 <308115520+vivi-the-going-merry[bot]@users.noreply.github.com>
Date: Tue, 22 Sep 2026 17:17:35 -0600
Subject: [PATCH 01/14] Fix Style builder labels pointing at hidden
 color-picker/slider inputs

Color pickers: wpColorPicker() hides the original input and shows a
.wp-color-result button instead, but nothing repointed the label's `for`
to follow it - clicking a color swatch's own label did nothing. Fix
this once in style.js for every color picker, right after init.

Single-value sliders: the visible text input next to the slider handle
had no id at all, so every label's `for` targeted the slider's hidden
"real" input instead - same dead-click problem. Give that input an
`{id}-value` id and repoint the corresponding labels.

Scope: only sliders whose value is always a single number (font sizes,
widths, heights, border widths/radii). Padding/margin sliders render as
either a single input or a 4-way group depending on the currently saved
value (FrmSliderStyleComponent::get_values()), so a static `for` can't
target the right element either way - left out of scope, needs the
component itself to own the association rather than the caller.

Fixes #3439 (partial - see PR description for the excluded scope)
---
 classes/views/styles/_buttons.php                | 10 +++++-----
 classes/views/styles/_check-box-radio-fields.php |  2 +-
 classes/views/styles/_field-colors.php           |  4 ++--
 classes/views/styles/_field-description.php      |  2 +-
 classes/views/styles/_field-labels.php           |  4 ++--
 classes/views/styles/_field-sizes.php            |  8 ++++----
 classes/views/styles/_form-description.php       |  2 +-
 classes/views/styles/_form-messages.php          |  4 ++--
 classes/views/styles/_form-title.php             |  2 +-
 classes/views/styles/_general.php                |  4 ++--
 classes/views/styles/_quick-settings.php         |  4 ++--
 .../views/styles/components/templates/slider.php |  2 +-
 js/admin/style.js                                | 16 ++++++++++++++++
 13 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/classes/views/styles/_buttons.php b/classes/views/styles/_buttons.php
index f2b9413f5a..a7c7145a3d 100644
--- a/classes/views/styles/_buttons.php
+++ b/classes/views/styles/_buttons.php
@@ -53,7 +53,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_submit_font_size"
+							for="frm_submit_font_size-value"
 							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -89,7 +89,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></l
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_submit_width"
+							for="frm_submit_width-value"
 							class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -108,7 +108,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></la
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_submit_height"
+							for="frm_submit_height-value"
 							class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -145,7 +145,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' );
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_submit_border_width"
+							for="frm_submit_border_width-value"
 							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -181,7 +181,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Shadow', 'formidable' ); ?></l
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_submit_border_radius"
+							for="frm_submit_border_radius-value"
 							class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_check-box-radio-fields.php b/classes/views/styles/_check-box-radio-fields.php
index df144b735b..94e602c663 100644
--- a/classes/views/styles/_check-box-radio-fields.php
+++ b/classes/views/styles/_check-box-radio-fields.php
@@ -23,7 +23,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_check_font_size"
+		for="frm_check_font_size-value"
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_field-colors.php b/classes/views/styles/_field-colors.php
index e01ca1b79a..2cb662bba4 100644
--- a/classes/views/styles/_field-colors.php
+++ b/classes/views/styles/_field-colors.php
@@ -75,7 +75,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></l
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_field_border_width"
+							for="frm_field_border_width-value"
 							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -309,7 +309,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></l
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_border_width_error"
+							for="frm_border_width_error-value"
 							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_field-description.php b/classes/views/styles/_field-description.php
index 6de066c648..a2b0134d15 100644
--- a/classes/views/styles/_field-description.php
+++ b/classes/views/styles/_field-description.php
@@ -23,7 +23,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_description_font_size"
+		for="frm_description_font_size-value"
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_field-labels.php b/classes/views/styles/_field-labels.php
index 18fc1e79b8..fa476ee687 100644
--- a/classes/views/styles/_field-labels.php
+++ b/classes/views/styles/_field-labels.php
@@ -37,7 +37,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_font_size"
+							for="frm_font_size-value"
 							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -109,7 +109,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Align', 'formidable' ); ?></la
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_width"
+							for="frm_width-value"
 							class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field frm-md-z-index">
diff --git a/classes/views/styles/_field-sizes.php b/classes/views/styles/_field-sizes.php
index 65890b3223..5da73a0cf1 100644
--- a/classes/views/styles/_field-sizes.php
+++ b/classes/views/styles/_field-sizes.php
@@ -5,7 +5,7 @@
 ?>
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_field_font_size"
+		for="frm_field_font_size-value"
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -41,7 +41,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></l
 
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_field_height"
+		for="frm_field_height-value"
 		class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -58,7 +58,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></l
 </div>
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_field_width"
+		for="frm_field_width-value"
 		class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -111,7 +111,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Margin', 'formidable' ); ?></l
 </div>
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_border_radius"
+		for="frm_border_radius-value"
 		class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_form-description.php b/classes/views/styles/_form-description.php
index 3608094cae..6e834f0d38 100644
--- a/classes/views/styles/_form-description.php
+++ b/classes/views/styles/_form-description.php
@@ -6,7 +6,7 @@
 
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_form_desc_size"
+		for="frm_form_desc_size-value"
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?>
 	</label>
 </div>
diff --git a/classes/views/styles/_form-messages.php b/classes/views/styles/_form-messages.php
index 99bf728d1f..23211b0752 100644
--- a/classes/views/styles/_form-messages.php
+++ b/classes/views/styles/_form-messages.php
@@ -73,7 +73,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_success_font_size"
+							for="frm_success_font_size-value"
 							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -149,7 +149,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_error_font_size"
+							for="frm_error_font_size-value"
 							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_form-title.php b/classes/views/styles/_form-title.php
index be28362bdc..0b1f34cc5c 100644
--- a/classes/views/styles/_form-title.php
+++ b/classes/views/styles/_form-title.php
@@ -23,7 +23,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_title_size"
+		for="frm_title_size-value"
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_general.php b/classes/views/styles/_general.php
index 01e1ee83a0..5508b9d080 100644
--- a/classes/views/styles/_general.php
+++ b/classes/views/styles/_general.php
@@ -65,7 +65,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' );
 
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_fieldset"
+		for="frm_fieldset-value"
 		class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -102,7 +102,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></
 
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_form_width"
+		for="frm_form_width-value"
 		class="frm-style-item-heading"><?php esc_html_e( 'Form Width', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_quick-settings.php b/classes/views/styles/_quick-settings.php
index af08997ba6..a86ece648e 100644
--- a/classes/views/styles/_quick-settings.php
+++ b/classes/views/styles/_quick-settings.php
@@ -161,7 +161,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Input Field Padding', 'formida
 <hr class="frm12"/>
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_base_font_size"
+		for="frm_base_font_size-value"
 		class="frm-style-item-heading"><?php esc_html_e( 'Base Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -207,7 +207,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Field Shape', 'formidable' );
 
 <div class="frm5 frm_form_field frm_hidden" data-frm-element="field-shape-corner-radius">
 	<label
-		for="frm_style_qsettings_border_radius"
+		for="frm_style_qsettings_border_radius-value"
 		class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field frm_hidden frm-md-z-index" data-frm-element="field-shape-corner-radius">
diff --git a/classes/views/styles/components/templates/slider.php b/classes/views/styles/components/templates/slider.php
index 072c15ffbb..5a6dd376c7 100644
--- a/classes/views/styles/components/templates/slider.php
+++ b/classes/views/styles/components/templates/slider.php
@@ -129,7 +129,7 @@
 						<?php $this->print_range_input( __( 'Field value', 'formidable' ), $component['value_label'], $component['unit_measurement'] ); ?>
 					</div>
 					<div class="frm-slider-value">
-						<input aria-label="<?php esc_attr_e( 'Field value', 'formidable' ); ?>" type="text" value="<?php echo esc_attr( $component['value_label'] ); ?>" <?php disabled( ! $this->is_measured_unit( $component['unit_measurement'] ) ); ?> />
+						<input aria-label="<?php esc_attr_e( 'Field value', 'formidable' ); ?>" type="text" id="<?php echo esc_attr( $component['id'] ); ?>-value" value="<?php echo esc_attr( $component['value_label'] ); ?>" <?php disabled( ! $this->is_measured_unit( $component['unit_measurement'] ) ); ?> />
 						<input type="hidden" <?php echo esc_attr( $field_name ); ?> value="<?php echo esc_attr( $field_value ); ?>" id="<?php echo esc_attr( $component['id'] ); ?>" />
 						<select aria-label="<?php esc_attr_e( 'Value unit', 'formidable' ); ?>">
 							<?php foreach ( $component['units'] as $unit ) : ?>
diff --git a/js/admin/style.js b/js/admin/style.js
index e5e9a6cbdc..63bba82fa0 100644
--- a/js/admin/style.js
+++ b/js/admin/style.js
@@ -1494,6 +1494,22 @@
 
 				debouncedPreviewUpdate();
 			}
+		} ).each( function() {
+			// wpColorPicker() hides the original input and shows a `.wp-color-result` button
+			// instead - repoint any label pointing at this input's id so clicking/focusing it
+			// reaches the visible, interactive button rather than a hidden input.
+			const label = this.id ? document.querySelector( `label[for="${ this.id }"]` ) : null;
+			if ( ! label ) {
+				return;
+			}
+
+			const result = this.closest( '.wp-picker-container' )?.querySelector( '.wp-color-result' );
+			if ( ! result ) {
+				return;
+			}
+
+			result.id = `${ this.id }_visible`;
+			label.setAttribute( 'for', result.id );
 		} );
 		jQuery( '.wp-color-result-text' ).text( function( _, oldText ) {
 			const container = jQuery( this ).closest( '.wp-picker-container' );

From 2ca0e5701141a5aaa15b7a36a1a129a0577dde74 Mon Sep 17 00:00:00 2001
From: "vivi-the-going-merry[bot]"
 <308115520+vivi-the-going-merry[bot]@users.noreply.github.com>
Date: Tue, 22 Sep 2026 17:18:31 -0600
Subject: [PATCH 02/14] Add regression coverage for style-builder label focus
 targets

Clicks each label directly and asserts focus lands on the visible
control (color-swatch button / slider number input), not the hidden
input the label used to be wired to.
---
 .../e2e/Styles/styleLabelFocusTargets.cy.js   | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js

diff --git a/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js b/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
new file mode 100644
index 0000000000..a0286c25f2
--- /dev/null
+++ b/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
@@ -0,0 +1,26 @@
+describe( 'Style builder labels focus their visible/interactive control', () => {
+	beforeEach( () => {
+		cy.login();
+		cy.viewport( 1280, 1600 );
+	} );
+
+	it( 'Clicking a color picker\'s own label focuses the visible swatch button, not the hidden text input', () => {
+		cy.visit( '/wp-admin/admin.php?page=formidable-styles' );
+
+		// "Primary" in Quick Settings - the label wraps a color picker whose original text
+		// input gets hidden by wpColorPicker() in favor of a `.wp-color-result` button.
+		cy.get( 'label[for="frm_style_qsettings_submit_bg_color"]' ).click();
+		cy.get( '#frm_style_qsettings_submit_bg_color' ).should( 'not.be.visible' );
+		cy.focused().should( 'have.class', 'wp-color-result' );
+	} );
+
+	it( 'Clicking a single-value slider\'s own label focuses the visible number input, not the hidden real input', () => {
+		cy.visit( '/wp-admin/admin.php?page=formidable-styles&section=advanced-settings' );
+		cy.get( '#general-style' ).should( 'have.class', 'open' );
+
+		// "Border Width" lives directly in the General section, open by default.
+		cy.get( 'label[for="frm_fieldset-value"]' ).click();
+		cy.get( '#frm_fieldset' ).should( 'not.be.visible' );
+		cy.focused().should( 'have.id', 'frm_fieldset-value' );
+	} );
+} );

From a771f0d78d2cffa9e14de7e947fbf37769c7394e Mon Sep 17 00:00:00 2001
From: "vivi-the-going-merry[bot]"
 <308115520+vivi-the-going-merry[bot]@users.noreply.github.com>
Date: Tue, 22 Sep 2026 17:51:06 -0600
Subject: [PATCH 03/14] Fix styleLabelFocusTargets.cy.js: select label's
 post-init id, not its original one

style.js repoints the color-picker label's `for` to `{id}_visible` as soon as
wpColorPicker() initializes, which happens before Cypress's query runs - the
test was still selecting the pre-init id, so cy.get() never found it (the
label genuinely no longer carries that attribute value, not a visibility
issue). No production code changed; the slider case in the same file was
unaffected since PHP already renders its label with the final id statically.
---
 tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js b/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
index a0286c25f2..65fa97c6a9 100644
--- a/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
+++ b/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
@@ -9,7 +9,9 @@ describe( 'Style builder labels focus their visible/interactive control', () =>
 
 		// "Primary" in Quick Settings - the label wraps a color picker whose original text
 		// input gets hidden by wpColorPicker() in favor of a `.wp-color-result` button.
-		cy.get( 'label[for="frm_style_qsettings_submit_bg_color"]' ).click();
+		// style.js repoints the label's `for` to `{id}_visible` once wpColorPicker() inits,
+		// which happens before this query runs - so the selector must target the post-init id.
+		cy.get( 'label[for="frm_style_qsettings_submit_bg_color_visible"]' ).click();
 		cy.get( '#frm_style_qsettings_submit_bg_color' ).should( 'not.be.visible' );
 		cy.focused().should( 'have.class', 'wp-color-result' );
 	} );

From c52110b578d19517058fb14d72eaecad7ed14d42 Mon Sep 17 00:00:00 2001
From: "vivi-the-going-merry[bot]"
 <308115520+vivi-the-going-merry[bot]@users.noreply.github.com>
Date: Tue, 22 Sep 2026 18:00:27 -0600
Subject: [PATCH 04/14] Fix styleLabelFocusTargets.cy.js: assert hidden state
 before click, not after

WP core's own color-picker.js open() intentionally un-hides
.wp-picker-input-wrap (which contains the original input) when the
swatch button is clicked, exposing it as the manual hex-entry field.
Asserting it stays hidden post-click fails against that by-design
behavior; the real regression coverage is that it's hidden before any
interaction and that the click lands focus on the visible swatch
button.
---
 tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js b/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
index 65fa97c6a9..d2627c6f52 100644
--- a/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
+++ b/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
@@ -11,8 +11,12 @@ describe( 'Style builder labels focus their visible/interactive control', () =>
 		// input gets hidden by wpColorPicker() in favor of a `.wp-color-result` button.
 		// style.js repoints the label's `for` to `{id}_visible` once wpColorPicker() inits,
 		// which happens before this query runs - so the selector must target the post-init id.
-		cy.get( 'label[for="frm_style_qsettings_submit_bg_color_visible"]' ).click();
+		// Confirm the original input is hidden *before* interacting with it - clicking the
+		// swatch button intentionally reveals it again afterward as WP core's own manual hex
+		// entry field (color-picker.js `open()` un-hides `.wp-picker-input-wrap`), so asserting
+		// it stays hidden post-click would fail against WP's own by-design behavior.
 		cy.get( '#frm_style_qsettings_submit_bg_color' ).should( 'not.be.visible' );
+		cy.get( 'label[for="frm_style_qsettings_submit_bg_color_visible"]' ).click();
 		cy.focused().should( 'have.class', 'wp-color-result' );
 	} );
 

From 9591399c442dbbe661280db0c120b57f7c23e912 Mon Sep 17 00:00:00 2001
From: "vivi-the-going-merry[bot]"
 <308115520+vivi-the-going-merry[bot]@users.noreply.github.com>
Date: Tue, 22 Sep 2026 23:42:08 -0600
Subject: [PATCH 05/14] Skip a for="" that targets a disabled input for
 Width/Height on the plugin's default auto unit

Both fields default to 'auto' (FrmStyle.php), which renders their slider
value input disabled - a label click never focuses a disabled control, so
the fix's own <label for="..."> was a no-op out of the box. Omit `for` at
render while the unit is non-measured, and re-associate it via JS once a
measured unit is chosen, matching detect_unit_measurement()'s definition of
"measured". Extends styleLabelFocusTargets.cy.js to cover both states.
---
 classes/views/styles/_buttons.php             |  6 ++-
 .../components/FrmSliderStyleComponent.php    | 49 ++++++++++++-------
 js/formidable-settings-components.js          |  2 +-
 .../components/slider-component.js            | 33 +++++++++++++
 .../e2e/Styles/styleLabelFocusTargets.cy.js   | 29 +++++++++++
 5 files changed, 97 insertions(+), 22 deletions(-)

diff --git a/classes/views/styles/_buttons.php b/classes/views/styles/_buttons.php
index a7c7145a3d..6337b46a18 100644
--- a/classes/views/styles/_buttons.php
+++ b/classes/views/styles/_buttons.php
@@ -89,7 +89,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></l
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_submit_width-value"
+							data-slider-label-for="frm_submit_width-value"
+							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['submit_width'] ) ? 'for="frm_submit_width-value"' : ''; ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -108,7 +109,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></la
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_submit_height-value"
+							data-slider-label-for="frm_submit_height-value"
+							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['submit_height'] ) ? 'for="frm_submit_height-value"' : ''; ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
diff --git a/classes/views/styles/components/FrmSliderStyleComponent.php b/classes/views/styles/components/FrmSliderStyleComponent.php
index 2af1ee4b73..59938633c5 100644
--- a/classes/views/styles/components/FrmSliderStyleComponent.php
+++ b/classes/views/styles/components/FrmSliderStyleComponent.php
@@ -34,7 +34,7 @@ public function __construct( $field_name, $field_value, $data ) {
 			return;
 		}
 
-		$this->data['unit_measurement']    = $this->detect_unit_measurement();
+		$this->data['unit_measurement']    = self::detect_unit_measurement( $this->field_value );
 		$this->data['has-multiple-values'] = count( $this->get_values() ) > 1;
 		$this->data['units']               = $this->get_units_list( $data );
 		$this->data['value_label']         = self::measured_value( $field_value, $this->data['unit_measurement'] );
@@ -231,33 +231,33 @@ private function init_multiple_values() {
 		$right  = $values[1];
 
 		$this->data['vertical'] = array(
-			'unit'  => $this->detect_unit_measurement( $top ),
-			'value' => self::measured_value( $top, $this->detect_unit_measurement( $top ) ),
+			'unit'  => self::detect_unit_measurement( $top ),
+			'value' => self::measured_value( $top, self::detect_unit_measurement( $top ) ),
 		);
 
 		$this->data['horizontal'] = array(
-			'unit'  => $this->detect_unit_measurement( $right ),
-			'value' => self::measured_value( $right, $this->detect_unit_measurement( $right ) ),
+			'unit'  => self::detect_unit_measurement( $right ),
+			'value' => self::measured_value( $right, self::detect_unit_measurement( $right ) ),
 		);
 
 		$this->data['top'] = array(
-			'unit'  => $this->detect_unit_measurement( $top ),
-			'value' => self::measured_value( $top, $this->detect_unit_measurement( $top ) ),
+			'unit'  => self::detect_unit_measurement( $top ),
+			'value' => self::measured_value( $top, self::detect_unit_measurement( $top ) ),
 		);
 
 		$this->data['bottom'] = array(
-			'unit'  => $this->detect_unit_measurement( $bottom ),
-			'value' => self::measured_value( $bottom, $this->detect_unit_measurement( $bottom ) ),
+			'unit'  => self::detect_unit_measurement( $bottom ),
+			'value' => self::measured_value( $bottom, self::detect_unit_measurement( $bottom ) ),
 		);
 
 		$this->data['left'] = array(
-			'unit'  => $this->detect_unit_measurement( $left ),
-			'value' => self::measured_value( $left, $this->detect_unit_measurement( $left ) ),
+			'unit'  => self::detect_unit_measurement( $left ),
+			'value' => self::measured_value( $left, self::detect_unit_measurement( $left ) ),
 		);
 
 		$this->data['right'] = array(
-			'unit'  => $this->detect_unit_measurement( $right ),
-			'value' => self::measured_value( $right, $this->detect_unit_measurement( $right ) ),
+			'unit'  => self::detect_unit_measurement( $right ),
+			'value' => self::measured_value( $right, self::detect_unit_measurement( $right ) ),
 		);
 	}
 
@@ -347,15 +347,11 @@ private function get_values() {
 	 *
 	 * @since 6.14
 	 *
-	 * @param string|null $value
+	 * @param string $value
 	 *
 	 * @return string
 	 */
-	private function detect_unit_measurement( $value = null ) {
-		if ( null === $value ) {
-			$value = $this->field_value;
-		}
-
+	private static function detect_unit_measurement( $value ) {
 		// 'auto' has its own option in the unit dropdown where that keyword is offered, so it can
 		// be selected (and announced) on load instead of always falling through to the blank option.
 		if ( 'auto' === $value ) {
@@ -373,6 +369,21 @@ private function detect_unit_measurement( $value = null ) {
 		return preg_match( '/px$/', $value ) ? 'px' : '';
 	}
 
+	/**
+	 * Whether a slider's raw saved value renders its value input enabled - a disabled input can
+	 * never receive focus, so a template deciding whether a <label for="..."> is safe to point at
+	 * it needs this rather than assuming the field always has a live value.
+	 *
+	 * @since x.x
+	 *
+	 * @param string $value Raw field value, e.g. '10px', '12.5' or 'auto'.
+	 *
+	 * @return bool
+	 */
+	public static function is_value_measured( $value ) {
+		return self::is_measured_unit( self::detect_unit_measurement( $value ) );
+	}
+
 	/**
 	 * Init the field icon
 	 *
diff --git a/js/formidable-settings-components.js b/js/formidable-settings-components.js
index 37c3d900f9..b9458c006d 100644
--- a/js/formidable-settings-components.js
+++ b/js/formidable-settings-components.js
@@ -1 +1 @@
-(()=>{var e={8616:e=>{e.exports=function(e,t){var n,r,i=0;function o(){var o,a,s=n,l=arguments.length;e:for(;s;){if(s.args.length===arguments.length){for(a=0;a<l;a++)if(s.args[a]!==arguments[a]){s=s.next;continue e}return s!==n&&(s===r&&(r=s.prev),s.prev.next=s.next,s.next&&(s.next.prev=s.prev),s.next=n,s.prev=null,n.prev=s,n=s),s.val}s=s.next}for(o=new Array(l),a=0;a<l;a++)o[a]=arguments[a];return s={args:o,val:e.apply(null,o)},n?(n.prev=s,s.next=n):r=s,i===t.maxSize?(r=r.prev).next=null:i++,n=s,s.val}return t=t||{},o.clear=function(){n=null,r=null,i=0},o}},7604:(e,t,n)=>{var r;!function(){"use strict";var i={not_string:/[^s]/,not_bool:/[^t]/,not_type:/[^T]/,not_primitive:/[^v]/,number:/[diefg]/,numeric_arg:/[bcdiefguxX]/,json:/[j]/,not_json:/[^j]/,text:/^[^\x25]+/,modulo:/^\x25{2}/,placeholder:/^\x25(?:([1-9]\d*)\$|\(([^)]+)\))?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?([b-gijostTuvxX])/,key:/^([a-z_][a-z_\d]*)/i,key_access:/^\.([a-z_][a-z_\d]*)/i,index_access:/^\[(\d+)\]/,sign:/^[+-]/};function o(e){return function(e,t){var n,r,a,s,l,c,u,f,d,p=1,v=e.length,h="";for(r=0;r<v;r++)if("string"==typeof e[r])h+=e[r];else if("object"==typeof e[r]){if((s=e[r]).keys)for(n=t[p],a=0;a<s.keys.length;a++){if(null==n)throw new Error(o('[sprintf] Cannot access property "%s" of undefined value "%s"',s.keys[a],s.keys[a-1]));n=n[s.keys[a]]}else n=s.param_no?t[s.param_no]:t[p++];if(i.not_type.test(s.type)&&i.not_primitive.test(s.type)&&n instanceof Function&&(n=n()),i.numeric_arg.test(s.type)&&"number"!=typeof n&&isNaN(n))throw new TypeError(o("[sprintf] expecting number but found %T",n));switch(i.number.test(s.type)&&(f=n>=0),s.type){case"b":n=parseInt(n,10).toString(2);break;case"c":n=String.fromCharCode(parseInt(n,10));break;case"d":case"i":n=parseInt(n,10);break;case"j":n=JSON.stringify(n,null,s.width?parseInt(s.width):0);break;case"e":n=s.precision?parseFloat(n).toExponential(s.precision):parseFloat(n).toExponential();break;case"f":n=s.precision?parseFloat(n).toFixed(s.precision):parseFloat(n);break;case"g":n=s.precision?String(Number(n.toPrecision(s.precision))):parseFloat(n);break;case"o":n=(parseInt(n,10)>>>0).toString(8);break;case"s":n=String(n),n=s.precision?n.substring(0,s.precision):n;break;case"t":n=String(!!n),n=s.precision?n.substring(0,s.precision):n;break;case"T":n=Object.prototype.toString.call(n).slice(8,-1).toLowerCase(),n=s.precision?n.substring(0,s.precision):n;break;case"u":n=parseInt(n,10)>>>0;break;case"v":n=n.valueOf(),n=s.precision?n.substring(0,s.precision):n;break;case"x":n=(parseInt(n,10)>>>0).toString(16);break;case"X":n=(parseInt(n,10)>>>0).toString(16).toUpperCase()}i.json.test(s.type)?h+=n:(!i.number.test(s.type)||f&&!s.sign?d="":(d=f?"+":"-",n=n.toString().replace(i.sign,"")),c=s.pad_char?"0"===s.pad_char?"0":s.pad_char.charAt(1):" ",u=s.width-(d+n).length,l=s.width&&u>0?c.repeat(u):"",h+=s.align?d+n+l:"0"===c?d+l+n:l+d+n)}return h}(function(e){if(s[e])return s[e];for(var t,n=e,r=[],o=0;n;){if(null!==(t=i.text.exec(n)))r.push(t[0]);else if(null!==(t=i.modulo.exec(n)))r.push("%");else{if(null===(t=i.placeholder.exec(n)))throw new SyntaxError("[sprintf] unexpected placeholder");if(t[2]){o|=1;var a=[],l=t[2],c=[];if(null===(c=i.key.exec(l)))throw new SyntaxError("[sprintf] failed to parse named argument key");for(a.push(c[1]);""!==(l=l.substring(c[0].length));)if(null!==(c=i.key_access.exec(l)))a.push(c[1]);else{if(null===(c=i.index_access.exec(l)))throw new SyntaxError("[sprintf] failed to parse named argument key");a.push(c[1])}t[2]=a}else o|=2;if(3===o)throw new Error("[sprintf] mixing positional and named placeholders is not (yet) supported");r.push({placeholder:t[0],param_no:t[1],keys:t[2],sign:t[3],pad_char:t[4],align:t[5],width:t[6],precision:t[7],type:t[8]})}n=n.substring(t[0].length)}return s[e]=r}(e),arguments)}function a(e,t){return o.apply(null,[e].concat(t||[]))}var s=Object.create(null);"undefined"!=typeof window&&(window.sprintf=o,window.vsprintf=a,void 0===(r=function(){return{sprintf:o,vsprintf:a}}.call(t,n,t,e))||(e.exports=r))}()}},t={};function n(r){var i=t[r];if(void 0!==i)return i.exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";var e=window.frmGlobal,t=(e.url,e.nonce,"frm_hidden"),r="frm_disabled",i=(Promise.resolve(),frmDom),o=(i.div,i.span,i.tag,i.a,i.img,i.svg,frmDom.modal),a=(o.maybeCreateModal,o.footerButton,frmDom.util),s=(a.onClickPreventDefault,a.documentOn);frmDom.ajax.doJsonPost;var l=(new URL(window.location.href).searchParams,function(e){return null==e?void 0:e.classList.remove(t)});function c(e){return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c(e)}function u(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,f(r.key),r)}}function f(e){var t=function(e){if("object"!=c(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=c(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==c(t)?t:t+""}var d=function(){return e=function e(){var t=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.radioElements=document.querySelectorAll(".frm-style-component.frm-radio-component"),this.observers=new Map,0<this.radioElements.length&&this.init(),document.addEventListener("frm_added_field",function(e){var n=e.frmField;return t.discoverAndInitFieldRadios(n.dataset.fid)}),document.addEventListener("frm_ajax_loaded_field",function(e){return e.frmFields.forEach(function(e){return t.discoverAndInitFieldRadios(e.id)})}),window.addEventListener("beforeunload",function(){return t.cleanupObservers()}),this.resizeTimeout=null,window.addEventListener("resize",function(){return t.throttledUpdateAllTrackers()})},n=[{key:"init",value:function(){this.initRadio(),this.initTrackerOnAccordionClick()}},{key:"discoverAndInitFieldRadios",value:function(e){var t=document.getElementById("frm-single-settings-".concat(e));if(!t)throw new Error("Field container not found for field ID: ".concat(e));this.radioElements=t.querySelectorAll(".frm-style-component.frm-radio-component"),this.initRadio()}},{key:"initRadio",value:function(){var e=this;this.radioElements.forEach(function(t){e.initOnRadioChange(t),e.initVisibilityObserver(t)})}},{key:"initTrackerOnAccordionClick",value:function(){var e=this;document.querySelectorAll("#frm_style_sidebar .accordion-section h3").forEach(function(t){t.addEventListener("click",function(t){t.target.closest(".accordion-section").querySelectorAll('.frm-style-component.frm-radio-component input[type="radio"]:checked').forEach(function(t){setTimeout(function(){return e.onRadioChange(t)},200)})})})}},{key:"initOnRadioChange",value:function(e){var t=this;e.querySelectorAll('input[type="radio"]').forEach(function(e){e.checked&&t.onRadioChange(e),e.addEventListener("change",function(e){t.onRadioChange(e.target)})})}},{key:"onRadioChange",value:function(e){var t=e.closest(".frm-style-component.frm-radio-component"),n=t.querySelector('input[type="radio"]:checked + label');null!==n&&(this.moveTracker(n,t),this.hideExtraElements(e),this.maybeShowExtraElements(e))}},{key:"maybeShowExtraElements",value:function(e){var t=e.getAttribute("data-frm-show-element");if(null!==t){var n=document.querySelectorAll('div[data-frm-element="'.concat(t,'"]'));0!==n.length&&n.forEach(function(e){l(e),e.classList.add("frm-element-is-visible")})}}},{key:"throttledUpdateAllTrackers",value:function(){var e=this;this.resizeTimeout||(this.resizeTimeout=requestAnimationFrame(function(){e.resizeTimeout=null,document.querySelectorAll('.frm-radio-component input[type="radio"]:checked').forEach(function(t){var n=t.closest(".frm-radio-component");n&&n.offsetWidth>0&&e.onRadioChange(t)})}))}},{key:"initVisibilityObserver",value:function(e){var t=this;this.observers.has(e)&&this.observers.get(e).disconnect();var n=new MutationObserver(function(){if(function(e){return"none"!==window.getComputedStyle(e).getPropertyValue("display")}(e)){var n=e.querySelector('input[type="radio"]:checked');n&&t.onRadioChange(n)}});this.observers.set(e,n),n.observe(e,{attributes:!0,attributeFilter:["class","style"]});for(var r=e.parentElement,i=0;i<7&&r;i++)n.observe(r,{attributes:!0,attributeFilter:["class","style"]}),r=r.parentElement}},{key:"cleanupObservers",value:function(){this.observers.forEach(function(e){e.disconnect()}),this.observers.clear()}},{key:"hideExtraElements",value:function(){var e=document.querySelectorAll(".frm-element-is-visible");0!==e.length&&e.forEach(function(e){e.classList.remove("frm-element-is-visible"),e.classList.add(t),function(e){null==e||e.classList.add(t)}(e)})}},{key:"moveTracker",value:function(e,t){var n=e.offsetLeft,r=e.offsetWidth,i=t.querySelector(".frm-radio-active-tracker");i.style.left=0,i.style.width="".concat(r,"px"),i.style.transform="translateX(".concat(n,"px)")}}],n&&u(e.prototype,n),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,n}();function p(e){return p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p(e)}function v(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,h(r.key),r)}}function h(e){var t=function(e){if("object"!=p(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=p(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==p(t)?t:t+""}var m,y,g,b,S=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.component=t;try{var n=JSON.parse(this.component.dataset.willChange);this.data={propagateInputs:this.initPropagationList(n),changeEvent:new Event("change",{bubbles:!0})}}catch(e){console.error('Error parsing JSON data from "will-change" attribute.',e)}},(t=[{key:"initPropagationList",value:function(e){var t=[];return e.forEach(function(e){var n=document.querySelector('input[name="'.concat(e,'"]'));n&&t.push(n)}),t}},{key:"updateAllDependentElements",value:function(e){var t=this.detectColorFormat(e);this.data.propagateInputs.forEach(function(n){n.value=e,n.dataset.colorFormat=t}),this.data.propagateInputs[0].dispatchEvent(this.data.changeEvent)}},{key:"detectColorFormat",value:function(e){return e.startsWith("rgba")?"rgba":e.startsWith("rgb")?"rgb":e.startsWith("hsla")?"hsla":e.startsWith("hsl")?"hsl":"hex"}}])&&v(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}(),k=n(8616),w=n.n(k);function x(e){return x="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},x(e)}function E(e){var t=function(e){if("object"!=x(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=x(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==x(t)?t:t+""}n(7604),w()(console.error),m={"(":9,"!":8,"*":7,"/":7,"%":7,"+":6,"-":6,"<":5,"<=":5,">":5,">=":5,"==":4,"!=":4,"&&":3,"||":2,"?":1,"?:":1},y=["(","?"],g={")":["("],":":["?","?:"]},b=/<=|>=|==|!=|&&|\|\||\?:|\(|!|\*|\/|%|\+|-|<|>|\?|\)|:/;var _={"!":function(e){return!e},"*":function(e,t){return e*t},"/":function(e,t){return e/t},"%":function(e,t){return e%t},"+":function(e,t){return e+t},"-":function(e,t){return e-t},"<":function(e,t){return e<t},"<=":function(e,t){return e<=t},">":function(e,t){return e>t},">=":function(e,t){return e>=t},"==":function(e,t){return e===t},"!=":function(e,t){return e!==t},"&&":function(e,t){return e&&t},"||":function(e,t){return e||t},"?:":function(e,t,n){if(e)throw t;return n}};var A={contextDelimiter:"",onMissingKey:null};function L(e,t){var n;for(n in this.data=e,this.pluralForms={},this.options={},A)this.options[n]=void 0!==t&&n in t?t[n]:A[n]}function q(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function F(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?q(Object(n),!0).forEach(function(t){var r,i,o;r=e,i=t,o=n[t],(i=E(i))in r?Object.defineProperty(r,i,{value:o,enumerable:!0,configurable:!0,writable:!0}):r[i]=o}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):q(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}L.prototype.getPluralForm=function(e,t){var n,r,i,o,a=this.pluralForms[e];return a||("function"!=typeof(i=(n=this.data[e][""])["Plural-Forms"]||n["plural-forms"]||n.plural_forms)&&(r=function(e){var t,n,r;for(t=e.split(";"),n=0;n<t.length;n++)if(0===(r=t[n].trim()).indexOf("plural="))return r.substr(7)}(n["Plural-Forms"]||n["plural-forms"]||n.plural_forms),o=function(e){var t=function(e){for(var t,n,r,i,o=[],a=[];t=e.match(b);){for(n=t[0],(r=e.substr(0,t.index).trim())&&o.push(r);i=a.pop();){if(g[n]){if(g[n][0]===i){n=g[n][1]||n;break}}else if(y.indexOf(i)>=0||m[i]<m[n]){a.push(i);break}o.push(i)}g[n]||a.push(n),e=e.substr(t.index+n.length)}return(e=e.trim())&&o.push(e),o.concat(a.reverse())}(e);return function(e){return function(e,t){var n,r,i,o,a,s,l=[];for(n=0;n<e.length;n++){if(a=e[n],o=_[a]){for(r=o.length,i=Array(r);r--;)i[r]=l.pop();try{s=o.apply(null,i)}catch(e){return e}}else s=t.hasOwnProperty(a)?t[a]:+a;l.push(s)}return l[0]}(t,e)}}(r),i=function(e){return+o({n:e})}),a=this.pluralForms[e]=i),a(t)},L.prototype.dcnpgettext=function(e,t,n,r,i){var o,a,s;return o=void 0===i?0:this.getPluralForm(e,i),a=n,t&&(a=t+this.options.contextDelimiter+n),(s=this.data[e][a])&&s[o]?s[o]:(this.options.onMissingKey&&this.options.onMissingKey(n,e),0===o?n:r)};var O={"":{plural_forms:function(e){return 1===e?0:1}}},T=/^i18n\.(n?gettext|has_translation)(_|$)/;const C=function(e){return"string"!=typeof e||""===e?(console.error("The namespace must be a non-empty string."),!1):!!/^[a-zA-Z][a-zA-Z0-9_.\-\/]*$/.test(e)||(console.error("The namespace can only contain numbers, letters, dashes, periods, underscores and slashes."),!1)},j=function(e){return"string"!=typeof e||""===e?(console.error("The hook name must be a non-empty string."),!1):/^__/.test(e)?(console.error("The hook name cannot begin with `__`."),!1):!!/^[a-zA-Z][a-zA-Z0-9_.-]*$/.test(e)||(console.error("The hook name can only contain numbers, letters, dashes, periods and underscores."),!1)},I=function(e,t){return function(n,r,i){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:10,a=e[t];if(j(n)&&C(r))if("function"==typeof i)if("number"==typeof o){var s={callback:i,priority:o,namespace:r};if(a[n]){var l,c=a[n].handlers;for(l=c.length;l>0&&!(o>=c[l-1].priority);l--);l===c.length?c[l]=s:c.splice(l,0,s),a.__current.forEach(function(e){e.name===n&&e.currentIndex>=l&&e.currentIndex++})}else a[n]={handlers:[s],runs:0};"hookAdded"!==n&&e.doAction("hookAdded",n,r,i,o)}else console.error("If specified, the hook priority must be a number.");else console.error("The hook callback must be a function.")}},P=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return function(r,i){var o=e[t];if(j(r)&&(n||C(i))){if(!o[r])return 0;var a=0;if(n)a=o[r].handlers.length,o[r]={runs:o[r].runs,handlers:[]};else for(var s=o[r].handlers,l=function(e){s[e].namespace===i&&(s.splice(e,1),a++,o.__current.forEach(function(t){t.name===r&&t.currentIndex>=e&&t.currentIndex--}))},c=s.length-1;c>=0;c--)l(c);return"hookRemoved"!==r&&e.doAction("hookRemoved",r,i),a}}},R=function(e,t){return function(n,r){var i=e[t];return void 0!==r?n in i&&i[n].handlers.some(function(e){return e.namespace===r}):n in i}},V=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return function(r){var i=e[t];i[r]||(i[r]={handlers:[],runs:0}),i[r].runs++;for(var o=i[r].handlers,a=arguments.length,s=new Array(a>1?a-1:0),l=1;l<a;l++)s[l-1]=arguments[l];if(!o||!o.length)return n?s[0]:void 0;var c={name:r,currentIndex:0};for(i.__current.push(c);c.currentIndex<o.length;){var u=o[c.currentIndex].callback.apply(null,s);n&&(s[0]=u),c.currentIndex++}return i.__current.pop(),n?s[0]:void 0}},D=function(e,t){return function(){var n,r,i=e[t];return null!==(n=null===(r=i.__current[i.__current.length-1])||void 0===r?void 0:r.name)&&void 0!==n?n:null}},z=function(e,t){return function(n){var r=e[t];return void 0===n?void 0!==r.__current[0]:!!r.__current[0]&&n===r.__current[0].name}},N=function(e,t){return function(n){var r=e[t];if(j(n))return r[n]&&r[n].runs?r[n].runs:0}};var U=new function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.actions=Object.create(null),this.actions.__current=[],this.filters=Object.create(null),this.filters.__current=[],this.addAction=I(this,"actions"),this.addFilter=I(this,"filters"),this.removeAction=P(this,"actions"),this.removeFilter=P(this,"filters"),this.hasAction=R(this,"actions"),this.hasFilter=R(this,"filters"),this.removeAllActions=P(this,"actions",!0),this.removeAllFilters=P(this,"filters",!0),this.doAction=V(this,"actions"),this.applyFilters=V(this,"filters",!0),this.currentAction=D(this,"actions"),this.currentFilter=D(this,"filters"),this.doingAction=z(this,"actions"),this.doingFilter=z(this,"filters"),this.didAction=N(this,"actions"),this.didFilter=N(this,"filters")},M=(U.addAction,U.addFilter,U.removeAction,U.removeFilter,U.hasAction,U.hasFilter,U.removeAllActions,U.removeAllFilters,U.doAction,U.applyFilters,U.currentAction,U.currentFilter,U.doingAction,U.doingFilter,U.didAction,U.didFilter,U.actions,U.filters,function(e,t,n){var r=new L({}),i=new Set,o=function(){i.forEach(function(e){return e()})},a=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"default";r.data[t]=F(F(F({},O),r.data[t]),e),r.data[t][""]=F(F({},O[""]),r.data[t][""])},s=function(e,t){a(e,t),o()},l=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"default",t=arguments.length>1?arguments[1]:void 0,n=arguments.length>2?arguments[2]:void 0,i=arguments.length>3?arguments[3]:void 0,o=arguments.length>4?arguments[4]:void 0;return r.data[e]||a(void 0,e),r.dcnpgettext(e,t,n,i,o)},c=function(){return arguments.length>0&&void 0!==arguments[0]?arguments[0]:"default"},u=function(e,t,r){var i=l(r,t,e);return n?(i=n.applyFilters("i18n.gettext_with_context",i,e,t,r),n.applyFilters("i18n.gettext_with_context_"+c(r),i,e,t,r)):i};if(n){var f=function(e){T.test(e)&&o()};n.addAction("hookAdded","core/i18n",f),n.addAction("hookRemoved","core/i18n",f)}return{getLocaleData:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"default";return r.data[e]},setLocaleData:s,resetLocaleData:function(e,t){r.data={},r.pluralForms={},s(e,t)},subscribe:function(e){return i.add(e),function(){return i.delete(e)}},__:function(e,t){var r=l(t,void 0,e);return n?(r=n.applyFilters("i18n.gettext",r,e,t),n.applyFilters("i18n.gettext_"+c(t),r,e,t)):r},_x:u,_n:function(e,t,r,i){var o=l(i,void 0,e,t,r);return n?(o=n.applyFilters("i18n.ngettext",o,e,t,r,i),n.applyFilters("i18n.ngettext_"+c(i),o,e,t,r,i)):o},_nx:function(e,t,r,i,o){var a=l(o,i,e,t,r);return n?(a=n.applyFilters("i18n.ngettext_with_context",a,e,t,r,i,o),n.applyFilters("i18n.ngettext_with_context_"+c(o),a,e,t,r,i,o)):a},isRTL:function(){return"rtl"===u("ltr","text direction")},hasTranslation:function(e,t,i){var o,a,s=t?t+""+e:e,l=!(null===(o=r.data)||void 0===o||null===(a=o[null!=i?i:"default"])||void 0===a||!a[s]);return n&&(l=n.applyFilters("i18n.has_translation",l,e,t,i),l=n.applyFilters("i18n.has_translation_"+c(i),l,e,t,i)),l}}}(0,0,U));M.getLocaleData.bind(M),M.setLocaleData.bind(M),M.resetLocaleData.bind(M),M.subscribe.bind(M);var B=M.__.bind(M);function W(e){return W="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},W(e)}function G(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,X(r.key),r)}}function X(e){var t=function(e){if("object"!=W(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=W(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==W(t)?t:t+""}M._x.bind(M),M._n.bind(M),M._nx.bind(M),M.isRTL.bind(M),M.hasTranslation.bind(M);var J,K=["px","em","%"],$=new WeakMap,Z=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.loadedByWebComponent=t.length>0,this.sliderElements=t.length>0?t:document.querySelectorAll(".frm-slider-component"),this.settings=n,0!==this.sliderElements.length&&(this.eventsChange=[],this.initOptions(),this.init())}return n=e,r=[{key:"initOptions",value:function(){var e=this;this.options=[],this.sliderElements.forEach(function(t,n){var r=t.classList.contains("frm-has-multiple-values")?t.closest(".frm-style-component"):t,i=e.settings.steps||(t.dataset.steps?JSON.parse(t.dataset.steps):null);e.options.push({maxValue:parseInt(t.dataset.maxValue,10),element:t,index:n,steps:i,dependentUpdater:r.classList.contains("frm-style-dependent-updater-component")?new S(r):null})})}},{key:"init",value:function(){this.initListeners(),this.initFill()}},{key:"initListeners",value:function(){var t=this;this.sliderElements.forEach(function(n,r){t.eventsChange[r]=new Event("change",{bubbles:!0,cancelable:!0});var i=n.querySelector(".frm-slider"),o=n.querySelector('.frm-slider-value input[type="text"]');i&&o&&(t.initSteps(i,r),i.addEventListener("input",function(){var a=t.getRangeValue(i,r);o.value=a,e.refreshRange(i,n,a),t.syncGroupSliders(n,a)}),i.addEventListener("change",function(){var o=t.getRangeValue(i,r);t.options[r].fullValue=t.updateValue(n,o+e.getUnit(n)),t.triggerValueChange(r)}),o.addEventListener("change",function(a){var s=e.getUnit(n),l=parseFloat(a.target.value),c=t.options[r].steps,u=c&&c.length>0?c.map(Number).includes(l):l>=parseFloat(i.min||0)&&parseFloat(i.max)>=l;!isNaN(l)&&u?(t.setRangeValue(i,r,l),e.refreshRange(i,n,l),t.options[r].fullValue=t.updateValue(n,l+s),t.triggerValueChange(r)):o.value=t.getRangeValue(i,r)}),e.expandSliderGroup(n),t.updateOnUnitChange(n,i,o,r),e.maybeDisableUnitDropdown(n))})}},{key:"initFill",value:function(){var t=this;this.sliderElements.forEach(function(n,r){var i=n.querySelector(".frm-slider");if(i){var o=t.getRangeValue(i,r);t.options[r].fullValue=o+e.getUnit(n),e.refreshRange(i,n,o)}})}},{key:"initSteps",value:function(t,n){var r=this.options[n].steps;if(r&&0!==r.length){var i=parseFloat(t.value);t.min="0",t.max=String(r.length-1),t.step="1",t.value=String(e.getClosestStepIndex(i,r))}}},{key:"getRangeValue",value:function(e,t){var n=this.options[t].steps;return n&&n.length>0?n[parseInt(e.value,10)]:parseFloat(e.value)}},{key:"setRangeValue",value:function(t,n,r){var i=this.options[n].steps;i&&i.length>0?t.value=String(e.getClosestStepIndex(parseFloat(r),i)):(e.applyStep(t,r),t.value=r)}},{key:"syncGroupSliders",value:function(t,n){var r=this;(t.classList.contains("frm-has-multiple-values")||t.classList.contains("frm-has-independent-fields"))&&(t.classList.contains("frm-has-independent-fields")?t.querySelectorAll(".frm-independent-slider-field"):e.getSliderGroupItems(t)).forEach(function(t){var i=t.querySelector(".frm-slider"),o=t.querySelector('.frm-slider-value input[type="text"]'),a=r.getSliderIndex(t);i&&-1!==a&&(r.setRangeValue(i,a,n),e.refreshRange(i,t,n)),o&&(o.value=n)})}},{key:"updateOnUnitChange",value:function(t,n,r,i){var o=this,a=t.querySelector("select");a&&a.addEventListener("change",function(a){var s=a.target.value.toLowerCase();if(""===s)return t.classList.add("frm-disabled","frm-empty"),n.disabled=!0,r.value="",r.disabled=!0,e.refreshRange(n,t,o.getRangeValue(n,i)),o.options[i].fullValue=o.updateValue(t,""),void o.triggerValueChange(i);if("auto"===s)return t.classList.add("frm-disabled"),n.disabled=!0,r.value="",r.disabled=!0,n.setAttribute("aria-valuetext",s),o.options[i].fullValue=o.updateValue(t,"auto"),void o.triggerValueChange(i);t.classList.remove("frm-disabled","frm-empty"),n.disabled=!1,r.disabled=!1,o.options[i].steps||(n.max=o.getMaxValue(s,i,o.getRangeValue(n,i)));var l=o.getRangeValue(n,i);r.value=l,o.options[i].fullValue=l+s,o.updateValue(t,o.options[i].fullValue),e.refreshRange(n,t,l),o.triggerValueChange(i)})}},{key:"getSliderIndex",value:function(e){var t=this.options.find(function(t){return t.element===e});return t?t.index:-1}},{key:"getMaxValue",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,r="%"===e?100:this.options[t].maxValue;return null!==n&&n>r?Math.ceil(n):r}},{key:"triggerValueChange",value:function(e){var t=this;if(null===this.options[e].dependentUpdater){var n=this.sliderElements[e].classList.contains("frm-has-multiple-values")?this.sliderElements[e].closest(".frm-style-component").querySelector('input[type="hidden"]'):this.sliderElements[e].querySelectorAll('.frm-slider-value input[type="hidden"]');n instanceof NodeList?n.forEach(function(n){n.dispatchEvent(t.eventsChange[e])}):n.dispatchEvent(this.eventsChange[e])}else this.options[e].dependentUpdater.updateAllDependentElements(this.options[e].fullValue)}},{key:"updateValue",value:function(t,n){var r=this;if(t.classList.contains("frm-base-font-size")){var i=document.querySelector('input[name="frm_style_setting[post_content][use_base_font_size]"]');i&&(i.value="true")}if(t.classList.contains("frm-has-multiple-values")){var o=t.closest(".frm-style-component").querySelector('input[type="hidden"]'),a=o.value.split(" "),s=t.dataset.type;switch(a[2]||(a[2]="0px"),a[3]||(a[3]="0px"),s){case"vertical":a[0]=n,a[2]=n;break;case"horizontal":a[1]=n,a[3]=n;break;case"top":a[0]=n;break;case"bottom":a[2]=n;break;case"left":a[3]=n;break;case"right":a[1]=n}var l=a.join(" ");return o.value=l,e.getSliderGroupItems(t).forEach(function(e){var t=r.getUnitMeasureFromValue(n);e.querySelector('.frm-slider-value input[type="text"]').value=parseFloat(n),e.querySelector("select").value=t}),l}if(t.classList.contains("frm-has-independent-fields")){var c=t.querySelectorAll('.frm-slider-value input[type="hidden"]'),u=t.querySelectorAll('.frm-slider-value input[type="text"]');return c.forEach(function(e,t){e.value=n,u[t+1].value=parseFloat(n)}),n}return t.querySelector('.frm-slider-value input[type="hidden"]').value=n,n}},{key:"getUnitMeasureFromValue",value:function(e){return K.find(function(t){return e.includes(t)})||""}}],i=[{key:"getUnit",value:function(e){var t=e.querySelector("select");return t?t.value:""}},{key:"getClosestStepIndex",value:function(e,t){for(var n=0,r=Math.abs(e-t[0]),i=1;i<t.length;i++){var o=Math.abs(e-t[i]);o<r&&(r=o,n=i)}return n}},{key:"applyStep",value:function(e,t){var n=(String(t).split(".")[1]||"").length;e.step=n>0?"0.".concat("0".repeat(n-1),"1"):"1"}},{key:"refreshRange",value:function(t,n,r){e.updateFill(t);var i=e.getUnit(n);if("auto"!==i)if(""!==i){var o=K.includes(i)?i:"";t.setAttribute("aria-valuetext","".concat(r).concat(o))}else t.setAttribute("aria-valuetext",B("Not set","formidable"));else t.setAttribute("aria-valuetext",i)}},{key:"updateFill",value:function(e){var t=parseFloat(e.min)||0,n=parseFloat(e.max),r=parseFloat(e.value),i=n-t,o=i>0?Math.min(Math.max((r-t)/i,0),1):0;e.style.setProperty("--frm-fill",o)}},{key:"expandSliderGroup",value:function(n){var r=n.querySelector(".frmsvg");if(void 0!==n.dataset.displaySliders&&null!==r){var i=e.getSliderGroupItems(n);r.addEventListener("click",function(){i.forEach(function(e){e.classList.toggle(t)})})}}},{key:"maybeDisableUnitDropdown",value:function(e){var t=e.querySelector("select");t&&1>=Array.from(t.options).filter(function(e){return""!==e.value}).length&&(t.classList.add("frm-single-unit"),t.addEventListener("mousedown",function(e){return e.preventDefault()}))}},{key:"getSliderGroupItems",value:function(e){if($.has(e))return $.get(e);if(void 0===e.dataset.displaySliders)return[];var t=e.closest(".frm-style-component");if(!t)return[];var n=e.dataset.displaySliders.split(",").map(function(e){return'.frm-slider-component[data-type="'.concat(e,'"]')}).join(", "),r=t.querySelectorAll(n);return $.set(e,r),r}}],r&&G(n.prototype,r),i&&G(n,i),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,r,i}();function H(e){if(J){J.dataset.activeFilter=e,J.querySelectorAll("[data-group]").forEach(function(t){"all"===e&&"my_actions"===t.dataset.group?t.classList.add("frm_hidden"):t.classList.toggle("frm_hidden","all"!==e&&t.dataset.group!==e)});var t=J.querySelector('[data-group="my_actions"]');t&&t.querySelectorAll("[data-section] .frm-group-heading").forEach(function(t){t.style.display="all"===e?"none":""})}}var Q=null;function Y(){Q&&(Q.disconnect(),Q=null)}function ee(e){return ee="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},ee(e)}function te(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,ne(r.key),r)}}function ne(e){var t=function(e){if("object"!=ee(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=ee(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==ee(t)?t:t+""}var re=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),void 0!==t&&(this.wrapper=t instanceof Element?t:document.querySelector(t),null!==this.wrapper&&(this.flexboxSlidesGap="16px",this.navs=this.wrapper.querySelectorAll(".frm-tabs-navs ul > li"),this.slideTrackLine=this.wrapper.querySelector(".frm-tabs-active-underline"),this.slideTrack=this.wrapper.querySelector(".frm-tabs-slide-track"),this.slides=this.wrapper.querySelectorAll(".frm-tabs-slide-track > div"),this.isRTL="rtl"===document.documentElement.dir||"rtl"===document.body.dir,this.resizeObserver=null,this.filterTarget=function(e){var t;J=null;var n=null==e||null===(t=e.dataset)||void 0===t?void 0:t.filterTarget;if(n){var r=document.querySelector(n);(function(e){return e.querySelectorAll("[data-group]").length>0})(r)&&(J=r)}return J}(this.wrapper),this.init()))},(t=[{key:"init",value:function(){var e,t=this,n=!this.filterTarget&&(null===this.slideTrack||0===this.slides.length);if(null!==this.wrapper&&this.navs.length&&null!==this.slideTrackLine&&!n){var r=null===(e=this.navs[0])||void 0===e?void 0:e.parentElement;r&&r.setAttribute("role","tablist"),this.navs.forEach(function(e,n){e.setAttribute("tabindex","0"),e.setAttribute("role","tab"),e.setAttribute("aria-selected",String(e.classList.contains("frm-active"))),e.addEventListener("click",function(e){return t.onNavClick(e,n)}),e.addEventListener("keydown",function(e){return t.onNavKeydown(e,n)}),e.classList.contains("frm-active")&&(t.initSlideTrackUnderline(e),t.filterTarget&&H(e.dataset.filter||"all"))}),this.slideTrackLine.style.display="block",this.setupScrollbarObserver(),this.setupVisibilityObserver(),window.addEventListener("beforeunload",this.cleanupObservers)}}},{key:"onNavClick",value:function(e,t){var n=e.currentTarget;if(e.preventDefault(),this.removeActiveClassnameFromNavs(),n.classList.add("frm-active"),this.navs.forEach(function(e){return e.setAttribute("aria-selected","false")}),n.setAttribute("aria-selected","true"),this.initSlideTrackUnderline(n),this.filterTarget)H(n.dataset.filter||"all");else{this.changeSlide(t);var r,i,o=n.querySelector("a");o&&"frm_insert_fields_tab"===o.id&&!o.closest("#frm_adv_info")&&(null===(r=window.frmAdminBuild)||void 0===r||null===(i=r.clearSettingsBox)||void 0===i||i.call(r))}}},{key:"onNavKeydown",value:function(e,t){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.onNavClick(e,t))}},{key:"initSlideTrackUnderline",value:function(e){var t=void 0!==e?e:this.navs.filter(function(e){return e.classList.contains("frm-active")});this.positionUnderlineIndicator(t)}},{key:"setupVisibilityObserver",value:function(){var e=this;!function(e,t){"IntersectionObserver"in window&&e instanceof Element&&"function"==typeof t&&(Q=new IntersectionObserver(function(e){e[0].isIntersecting&&(t(),Y())})).observe(e)}(this.wrapper,function(){var t=e.wrapper.querySelector(".frm-tabs-navs ul > li.frm-active");t&&e.positionUnderlineIndicator(t)})}},{key:"setupScrollbarObserver",value:function(){var e=this,t=document.querySelector(".frm-scrollbar-wrapper, .styling_settings")||document.body;t&&"ResizeObserver"in window&&(this.resizeObserver=new ResizeObserver(function(){var t=e.wrapper.querySelector(".frm-tabs-navs ul > li.frm-active");t&&e.positionUnderlineIndicator(t)}),this.resizeObserver.observe(t))}},{key:"cleanupObservers",value:function(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),Y()}},{key:"positionUnderlineIndicator",value:function(e){var t=this;requestAnimationFrame(function(){var n=t.isRTL?-(e.parentElement.offsetWidth-e.offsetLeft-e.offsetWidth):e.offsetLeft;t.slideTrackLine.style.transform="translateX(".concat(n,"px)"),t.slideTrackLine.style.width="".concat(e.clientWidth,"px")})}},{key:"changeSlide",value:function(e){this.removeActiveClassnameFromSlides();var t=0==e?"0px":"calc( ( ".concat(100*e,"% + ").concat(parseInt(this.flexboxSlidesGap,10)*e,"px ) * ").concat(this.isRTL?1:-1," )");"0px"!==t?this.slideTrack.style.transform="translateX(".concat(t,")"):this.slideTrack.style.removeProperty("transform"),e in this.slides&&this.slides[e].classList.add("frm-active")}},{key:"removeActiveClassnameFromSlides",value:function(){this.slides.forEach(function(e){return e.classList.remove("frm-active")})}},{key:"removeActiveClassnameFromNavs",value:function(){this.navs.forEach(function(e){return e.classList.remove("frm-active")})}}])&&te(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}();function ie(e){return ie="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},ie(e)}function oe(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,ae(r.key),r)}}function ae(e){var t=function(e){if("object"!=ie(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=ie(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==ie(t)?t:t+""}var se=function(){return e=function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.elements=document.querySelectorAll(".frm-style-tabs-wrapper"),0<this.elements.length&&this.init()},(t=[{key:"init",value:function(){this.elements.forEach(function(e){new re(e)})}},{key:"initOnTabClick",value:function(e){var t=this;this.initActiveBackgroundWidth(e),e.querySelectorAll(".frm-tab-item").forEach(function(e){e.addEventListener("click",function(e){t.onTabClick(e.target.closest(".frm-tabs-wrapper"))})})}}])&&oe(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}(),le="frm-token-container",ce="frm-tokens",ue="frm-token",fe="frm-token-value",de="frm-token-remove",pe="frm-token-proxy-input",ve=window.frmDom,he=ve.span,me=ve.svg,ye=ve.tag;function ge(){document.querySelectorAll(".".concat(le)).forEach(function(e){return be(e.querySelector(".".concat(pe)),e.querySelector(".".concat(ce)))})}function be(e,t){if(e&&t){var n=t.querySelectorAll(".".concat(ue));if(!(n.length>0))return e.style.paddingLeft="",e.style.paddingTop="",void(e.style.height="");var r=t.offsetHeight;if(Math.max(1,Math.ceil(r/36))>1){var i=function(e){if(!e.length)return 0;var t=0;return e.forEach(function(e){t+=e.offsetWidth}),(t+=4*(e.length-1))+4}(function(e){if(!e.length)return[];var t=Array.from(e),n=-1;t.forEach(function(e){var t=e.getBoundingClientRect().bottom;t>n&&(n=t)});return t.filter(function(e){var t=e.getBoundingClientRect();return Math.abs(t.bottom-n)<=2})}(n));e.style.height="".concat(r,"px"),e.style.paddingTop="".concat(r-36+4,"px"),e.style.paddingLeft=i?"".concat(i+8,"px"):""}else e.style.height="",e.style.paddingTop="",e.style.paddingLeft="".concat(t.offsetWidth-4,"px")}}function Se(e,t,n){e&&n&&t&&(n.innerHTML="",xe(e).forEach(function(e){return function(e,t){var n=he({className:ue,children:[he({text:e,className:fe}),he({className:de,child:me({href:"#frm_close_icon"})})]});t.append(n)}(e,n)}),be(t,n),t.focus())}function ke(e,t,n){if(!e||!t||!n)return!1;var r=xe(t.value);return r.includes(e)?(_e(n),!1):(r.push(e),Ee(t,r),_e(n),!0)}function we(e,t,n){if(e&&t&&n){var r=e.querySelector(".".concat(fe)).textContent;Ee(t,xe(t.value).filter(function(e){return e!==r})),e.remove(),n.focus()}}function xe(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return(e=e.trim())?e.split(/\s+/).filter(Boolean):[]}function Ee(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];e&&(e.value=t.join(" "),jQuery(e).trigger("change"))}function _e(e){e&&(e.value="",e.focus())}function Ae(e){var n=(e?document.getElementById("frm-single-settings-".concat(e)):document.body).querySelectorAll(".".concat("frm-token-input-field"));if(n.length){var r=new Set;n.forEach(function(e){r.has(e.id)||(function(e){var n=function(e){var n=e.closest(".".concat("frm-with-right-icon"));if(n.querySelector(".".concat(ce)))return null;n.classList.add(le);var r=he({className:ce});n.insertBefore(r,n.firstChild);var i=ye("input",{className:pe,id:"".concat(e.id,"-proxy-input")});return i.type="text",e.parentNode.insertBefore(i,e.nextSibling),e.classList.add(t),n}(e);if(n){var r=n.querySelector(".".concat(pe)),i=n.querySelector(".".concat(ce));Se(e.value,r,i),function(e,t,n){jQuery(e).on("change",function(){return Se(e.value,t,n)}),t.addEventListener("keydown",function(r){return function(e,t,n,r){var i=e.key,o=n.value.trim();switch(i){case"Backspace":o||(e.preventDefault(),we(r.querySelector(".".concat(ue,":last-child")),t,n));break;case" ":case",":case"Enter":e.preventDefault(),ke(o,t,n)}be(n,r)}(r,e,t,n)}),t.addEventListener("blur",function(){return ke(t.value.trim(),e,t)}),n.addEventListener("click",function(n){return function(e,t,n){var r=e.target.closest(".".concat(de));if(r){var i=r.closest(".".concat(ue));if(i){var o=i.parentElement;we(i,t,n),be(n,o)}}}(n,e,t)})}(e,r,i)}}(e),r.add(e.id))})}}var Le="frm-toggle-group",qe="frm_toggle_block",Fe="data-group-name";function Oe(e){var t=e.target,n=t.closest(".".concat(Le));n&&Te(t,n)}function Te(e,n){var i,o=(null===(i=n.closest(".".concat("frm-single-settings")))||void 0===i?void 0:i.dataset.fid)||n.dataset.fid,a=e.checked,s=e.getAttribute("data-show");s&&document.querySelectorAll(Ce(s,o)).forEach(function(e){return e.classList.toggle(t,!a)});var l=e.getAttribute("data-disable");l&&document.querySelectorAll(Ce(l,o)).forEach(function(e){e.classList.toggle(r,a),e.querySelectorAll("input, select, textarea").forEach(function(e){return e.disabled=a}),e.querySelectorAll(".frm-show-inline-modal[tabindex]").forEach(function(e){return e.tabIndex=a?-1:0})});var c=e.getAttribute("data-enable");c&&document.querySelectorAll(Ce(c,o)).forEach(function(e){return e.classList.toggle(r,!a)});var u=e.closest(".".concat(qe));Array.from(n.querySelectorAll(".".concat(qe))).filter(function(e){return e!==u}).forEach(function(e){e.classList.toggle(r,a);var t=e.querySelector(".frm_toggle");t.tabIndex=a?-1:0,t.setAttribute("aria-disabled",a)})}function Ce(e,t){return e.replace(/{id}/g,t)}function je(e){var t=e.target.closest(".frm-unit-input"),n=t.querySelector(".frm-unit-input-control"),r=t.querySelector("select").value;e.target.matches("select")&&(n.type=""===r?"text":"number");var i=n.value.trim();t.querySelector('input[type="hidden"]').value=""!==i?i+r:""}var Ie,Pe=function(e){var t=e.querySelector('li[data-filter="all"]');t.classList.contains("frm-active")||t.click()},Re=function(e){e.querySelectorAll("[data-group]").forEach(function(e){var t=e.querySelector(".frm-group-heading");if(t){var n=e.querySelectorAll(".frm-action"),r=n.length>0&&Array.from(n).every(function(e){return e.classList.contains("frm_hidden")});t.classList.toggle("frm-force-hidden",r)}})};Ie=function(){var e,t;new d,new Z,new se,null===(t=document.getElementById("frm-form-add-field"))||void 0===t||t.addEventListener("click",function(e){var t;e.preventDefault(),null===(t=document.querySelector(".frm-settings-panel .frm-tabs-navs ul > li:first-child"))||void 0===t||t.click()}),document.addEventListener("frm_added_field",function(e){return Ae(e.frmField.dataset.fid)}),document.addEventListener("frm_ajax_loaded_field",function(e){return e.frmFields.forEach(function(e){return Ae(e.id)})}),wp.hooks.addAction("frmShowedFieldSettings","formidable-token-input",function(e,t){Ae(t.id.replace("frm-single-settings-","")),ge()}),(e=document.querySelectorAll(".".concat(Le))).length&&e.forEach(function(e){var t=e.querySelector("[".concat(Fe,"]:checked"));t&&Te(t,e)}),s("change",".".concat(Le," [").concat(Fe,"]"),Oe),s("change",".frm-unit-input .frm-unit-input-control",je),s("change",".frm-unit-input select",je),function(){var e=document.getElementById("frm_email_addon_menu");if(e){var t=e.querySelector(".frm-auto-search");if(t){var n=document.getElementById("frm-actions-filter-content"),r=function(){return function(e,t,n){e.value.trim()&&Pe(t),n&&requestAnimationFrame(function(){return Re(n)})}(t,e,n)};t.addEventListener("input",r),t.addEventListener("search",r)}}}()},"undefined"!=typeof document&&("complete"!==document.readyState&&"interactive"!==document.readyState?document.addEventListener("DOMContentLoaded",Ie):Ie())})()})();
\ No newline at end of file
+(()=>{var e={8616:e=>{e.exports=function(e,t){var n,r,i=0;function o(){var o,a,s=n,l=arguments.length;e:for(;s;){if(s.args.length===arguments.length){for(a=0;a<l;a++)if(s.args[a]!==arguments[a]){s=s.next;continue e}return s!==n&&(s===r&&(r=s.prev),s.prev.next=s.next,s.next&&(s.next.prev=s.prev),s.next=n,s.prev=null,n.prev=s,n=s),s.val}s=s.next}for(o=new Array(l),a=0;a<l;a++)o[a]=arguments[a];return s={args:o,val:e.apply(null,o)},n?(n.prev=s,s.next=n):r=s,i===t.maxSize?(r=r.prev).next=null:i++,n=s,s.val}return t=t||{},o.clear=function(){n=null,r=null,i=0},o}},7604:(e,t,n)=>{var r;!function(){"use strict";var i={not_string:/[^s]/,not_bool:/[^t]/,not_type:/[^T]/,not_primitive:/[^v]/,number:/[diefg]/,numeric_arg:/[bcdiefguxX]/,json:/[j]/,not_json:/[^j]/,text:/^[^\x25]+/,modulo:/^\x25{2}/,placeholder:/^\x25(?:([1-9]\d*)\$|\(([^)]+)\))?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?([b-gijostTuvxX])/,key:/^([a-z_][a-z_\d]*)/i,key_access:/^\.([a-z_][a-z_\d]*)/i,index_access:/^\[(\d+)\]/,sign:/^[+-]/};function o(e){return function(e,t){var n,r,a,s,l,c,u,f,d,p=1,v=e.length,h="";for(r=0;r<v;r++)if("string"==typeof e[r])h+=e[r];else if("object"==typeof e[r]){if((s=e[r]).keys)for(n=t[p],a=0;a<s.keys.length;a++){if(null==n)throw new Error(o('[sprintf] Cannot access property "%s" of undefined value "%s"',s.keys[a],s.keys[a-1]));n=n[s.keys[a]]}else n=s.param_no?t[s.param_no]:t[p++];if(i.not_type.test(s.type)&&i.not_primitive.test(s.type)&&n instanceof Function&&(n=n()),i.numeric_arg.test(s.type)&&"number"!=typeof n&&isNaN(n))throw new TypeError(o("[sprintf] expecting number but found %T",n));switch(i.number.test(s.type)&&(f=n>=0),s.type){case"b":n=parseInt(n,10).toString(2);break;case"c":n=String.fromCharCode(parseInt(n,10));break;case"d":case"i":n=parseInt(n,10);break;case"j":n=JSON.stringify(n,null,s.width?parseInt(s.width):0);break;case"e":n=s.precision?parseFloat(n).toExponential(s.precision):parseFloat(n).toExponential();break;case"f":n=s.precision?parseFloat(n).toFixed(s.precision):parseFloat(n);break;case"g":n=s.precision?String(Number(n.toPrecision(s.precision))):parseFloat(n);break;case"o":n=(parseInt(n,10)>>>0).toString(8);break;case"s":n=String(n),n=s.precision?n.substring(0,s.precision):n;break;case"t":n=String(!!n),n=s.precision?n.substring(0,s.precision):n;break;case"T":n=Object.prototype.toString.call(n).slice(8,-1).toLowerCase(),n=s.precision?n.substring(0,s.precision):n;break;case"u":n=parseInt(n,10)>>>0;break;case"v":n=n.valueOf(),n=s.precision?n.substring(0,s.precision):n;break;case"x":n=(parseInt(n,10)>>>0).toString(16);break;case"X":n=(parseInt(n,10)>>>0).toString(16).toUpperCase()}i.json.test(s.type)?h+=n:(!i.number.test(s.type)||f&&!s.sign?d="":(d=f?"+":"-",n=n.toString().replace(i.sign,"")),c=s.pad_char?"0"===s.pad_char?"0":s.pad_char.charAt(1):" ",u=s.width-(d+n).length,l=s.width&&u>0?c.repeat(u):"",h+=s.align?d+n+l:"0"===c?d+l+n:l+d+n)}return h}(function(e){if(s[e])return s[e];for(var t,n=e,r=[],o=0;n;){if(null!==(t=i.text.exec(n)))r.push(t[0]);else if(null!==(t=i.modulo.exec(n)))r.push("%");else{if(null===(t=i.placeholder.exec(n)))throw new SyntaxError("[sprintf] unexpected placeholder");if(t[2]){o|=1;var a=[],l=t[2],c=[];if(null===(c=i.key.exec(l)))throw new SyntaxError("[sprintf] failed to parse named argument key");for(a.push(c[1]);""!==(l=l.substring(c[0].length));)if(null!==(c=i.key_access.exec(l)))a.push(c[1]);else{if(null===(c=i.index_access.exec(l)))throw new SyntaxError("[sprintf] failed to parse named argument key");a.push(c[1])}t[2]=a}else o|=2;if(3===o)throw new Error("[sprintf] mixing positional and named placeholders is not (yet) supported");r.push({placeholder:t[0],param_no:t[1],keys:t[2],sign:t[3],pad_char:t[4],align:t[5],width:t[6],precision:t[7],type:t[8]})}n=n.substring(t[0].length)}return s[e]=r}(e),arguments)}function a(e,t){return o.apply(null,[e].concat(t||[]))}var s=Object.create(null);"undefined"!=typeof window&&(window.sprintf=o,window.vsprintf=a,void 0===(r=function(){return{sprintf:o,vsprintf:a}}.call(t,n,t,e))||(e.exports=r))}()}},t={};function n(r){var i=t[r];if(void 0!==i)return i.exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";var e=window.frmGlobal,t=(e.url,e.nonce,"frm_hidden"),r="frm_disabled",i=(Promise.resolve(),frmDom),o=(i.div,i.span,i.tag,i.a,i.img,i.svg,frmDom.modal),a=(o.maybeCreateModal,o.footerButton,frmDom.util),s=(a.onClickPreventDefault,a.documentOn);frmDom.ajax.doJsonPost;var l=(new URL(window.location.href).searchParams,function(e){return null==e?void 0:e.classList.remove(t)});function c(e){return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c(e)}function u(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,f(r.key),r)}}function f(e){var t=function(e){if("object"!=c(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=c(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==c(t)?t:t+""}var d=function(){return e=function e(){var t=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.radioElements=document.querySelectorAll(".frm-style-component.frm-radio-component"),this.observers=new Map,0<this.radioElements.length&&this.init(),document.addEventListener("frm_added_field",function(e){var n=e.frmField;return t.discoverAndInitFieldRadios(n.dataset.fid)}),document.addEventListener("frm_ajax_loaded_field",function(e){return e.frmFields.forEach(function(e){return t.discoverAndInitFieldRadios(e.id)})}),window.addEventListener("beforeunload",function(){return t.cleanupObservers()}),this.resizeTimeout=null,window.addEventListener("resize",function(){return t.throttledUpdateAllTrackers()})},n=[{key:"init",value:function(){this.initRadio(),this.initTrackerOnAccordionClick()}},{key:"discoverAndInitFieldRadios",value:function(e){var t=document.getElementById("frm-single-settings-".concat(e));if(!t)throw new Error("Field container not found for field ID: ".concat(e));this.radioElements=t.querySelectorAll(".frm-style-component.frm-radio-component"),this.initRadio()}},{key:"initRadio",value:function(){var e=this;this.radioElements.forEach(function(t){e.initOnRadioChange(t),e.initVisibilityObserver(t)})}},{key:"initTrackerOnAccordionClick",value:function(){var e=this;document.querySelectorAll("#frm_style_sidebar .accordion-section h3").forEach(function(t){t.addEventListener("click",function(t){t.target.closest(".accordion-section").querySelectorAll('.frm-style-component.frm-radio-component input[type="radio"]:checked').forEach(function(t){setTimeout(function(){return e.onRadioChange(t)},200)})})})}},{key:"initOnRadioChange",value:function(e){var t=this;e.querySelectorAll('input[type="radio"]').forEach(function(e){e.checked&&t.onRadioChange(e),e.addEventListener("change",function(e){t.onRadioChange(e.target)})})}},{key:"onRadioChange",value:function(e){var t=e.closest(".frm-style-component.frm-radio-component"),n=t.querySelector('input[type="radio"]:checked + label');null!==n&&(this.moveTracker(n,t),this.hideExtraElements(e),this.maybeShowExtraElements(e))}},{key:"maybeShowExtraElements",value:function(e){var t=e.getAttribute("data-frm-show-element");if(null!==t){var n=document.querySelectorAll('div[data-frm-element="'.concat(t,'"]'));0!==n.length&&n.forEach(function(e){l(e),e.classList.add("frm-element-is-visible")})}}},{key:"throttledUpdateAllTrackers",value:function(){var e=this;this.resizeTimeout||(this.resizeTimeout=requestAnimationFrame(function(){e.resizeTimeout=null,document.querySelectorAll('.frm-radio-component input[type="radio"]:checked').forEach(function(t){var n=t.closest(".frm-radio-component");n&&n.offsetWidth>0&&e.onRadioChange(t)})}))}},{key:"initVisibilityObserver",value:function(e){var t=this;this.observers.has(e)&&this.observers.get(e).disconnect();var n=new MutationObserver(function(){if(function(e){return"none"!==window.getComputedStyle(e).getPropertyValue("display")}(e)){var n=e.querySelector('input[type="radio"]:checked');n&&t.onRadioChange(n)}});this.observers.set(e,n),n.observe(e,{attributes:!0,attributeFilter:["class","style"]});for(var r=e.parentElement,i=0;i<7&&r;i++)n.observe(r,{attributes:!0,attributeFilter:["class","style"]}),r=r.parentElement}},{key:"cleanupObservers",value:function(){this.observers.forEach(function(e){e.disconnect()}),this.observers.clear()}},{key:"hideExtraElements",value:function(){var e=document.querySelectorAll(".frm-element-is-visible");0!==e.length&&e.forEach(function(e){e.classList.remove("frm-element-is-visible"),e.classList.add(t),function(e){null==e||e.classList.add(t)}(e)})}},{key:"moveTracker",value:function(e,t){var n=e.offsetLeft,r=e.offsetWidth,i=t.querySelector(".frm-radio-active-tracker");i.style.left=0,i.style.width="".concat(r,"px"),i.style.transform="translateX(".concat(n,"px)")}}],n&&u(e.prototype,n),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,n}();function p(e){return p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p(e)}function v(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,h(r.key),r)}}function h(e){var t=function(e){if("object"!=p(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=p(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==p(t)?t:t+""}var m,y,g,b,S=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.component=t;try{var n=JSON.parse(this.component.dataset.willChange);this.data={propagateInputs:this.initPropagationList(n),changeEvent:new Event("change",{bubbles:!0})}}catch(e){console.error('Error parsing JSON data from "will-change" attribute.',e)}},(t=[{key:"initPropagationList",value:function(e){var t=[];return e.forEach(function(e){var n=document.querySelector('input[name="'.concat(e,'"]'));n&&t.push(n)}),t}},{key:"updateAllDependentElements",value:function(e){var t=this.detectColorFormat(e);this.data.propagateInputs.forEach(function(n){n.value=e,n.dataset.colorFormat=t}),this.data.propagateInputs[0].dispatchEvent(this.data.changeEvent)}},{key:"detectColorFormat",value:function(e){return e.startsWith("rgba")?"rgba":e.startsWith("rgb")?"rgb":e.startsWith("hsla")?"hsla":e.startsWith("hsl")?"hsl":"hex"}}])&&v(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}(),k=n(8616),w=n.n(k);function x(e){return x="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},x(e)}function E(e){var t=function(e){if("object"!=x(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=x(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==x(t)?t:t+""}n(7604),w()(console.error),m={"(":9,"!":8,"*":7,"/":7,"%":7,"+":6,"-":6,"<":5,"<=":5,">":5,">=":5,"==":4,"!=":4,"&&":3,"||":2,"?":1,"?:":1},y=["(","?"],g={")":["("],":":["?","?:"]},b=/<=|>=|==|!=|&&|\|\||\?:|\(|!|\*|\/|%|\+|-|<|>|\?|\)|:/;var _={"!":function(e){return!e},"*":function(e,t){return e*t},"/":function(e,t){return e/t},"%":function(e,t){return e%t},"+":function(e,t){return e+t},"-":function(e,t){return e-t},"<":function(e,t){return e<t},"<=":function(e,t){return e<=t},">":function(e,t){return e>t},">=":function(e,t){return e>=t},"==":function(e,t){return e===t},"!=":function(e,t){return e!==t},"&&":function(e,t){return e&&t},"||":function(e,t){return e||t},"?:":function(e,t,n){if(e)throw t;return n}};var A={contextDelimiter:"",onMissingKey:null};function L(e,t){var n;for(n in this.data=e,this.pluralForms={},this.options={},A)this.options[n]=void 0!==t&&n in t?t[n]:A[n]}function q(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function F(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?q(Object(n),!0).forEach(function(t){var r,i,o;r=e,i=t,o=n[t],(i=E(i))in r?Object.defineProperty(r,i,{value:o,enumerable:!0,configurable:!0,writable:!0}):r[i]=o}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):q(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}L.prototype.getPluralForm=function(e,t){var n,r,i,o,a=this.pluralForms[e];return a||("function"!=typeof(i=(n=this.data[e][""])["Plural-Forms"]||n["plural-forms"]||n.plural_forms)&&(r=function(e){var t,n,r;for(t=e.split(";"),n=0;n<t.length;n++)if(0===(r=t[n].trim()).indexOf("plural="))return r.substr(7)}(n["Plural-Forms"]||n["plural-forms"]||n.plural_forms),o=function(e){var t=function(e){for(var t,n,r,i,o=[],a=[];t=e.match(b);){for(n=t[0],(r=e.substr(0,t.index).trim())&&o.push(r);i=a.pop();){if(g[n]){if(g[n][0]===i){n=g[n][1]||n;break}}else if(y.indexOf(i)>=0||m[i]<m[n]){a.push(i);break}o.push(i)}g[n]||a.push(n),e=e.substr(t.index+n.length)}return(e=e.trim())&&o.push(e),o.concat(a.reverse())}(e);return function(e){return function(e,t){var n,r,i,o,a,s,l=[];for(n=0;n<e.length;n++){if(a=e[n],o=_[a]){for(r=o.length,i=Array(r);r--;)i[r]=l.pop();try{s=o.apply(null,i)}catch(e){return e}}else s=t.hasOwnProperty(a)?t[a]:+a;l.push(s)}return l[0]}(t,e)}}(r),i=function(e){return+o({n:e})}),a=this.pluralForms[e]=i),a(t)},L.prototype.dcnpgettext=function(e,t,n,r,i){var o,a,s;return o=void 0===i?0:this.getPluralForm(e,i),a=n,t&&(a=t+this.options.contextDelimiter+n),(s=this.data[e][a])&&s[o]?s[o]:(this.options.onMissingKey&&this.options.onMissingKey(n,e),0===o?n:r)};var O={"":{plural_forms:function(e){return 1===e?0:1}}},T=/^i18n\.(n?gettext|has_translation)(_|$)/;const C=function(e){return"string"!=typeof e||""===e?(console.error("The namespace must be a non-empty string."),!1):!!/^[a-zA-Z][a-zA-Z0-9_.\-\/]*$/.test(e)||(console.error("The namespace can only contain numbers, letters, dashes, periods, underscores and slashes."),!1)},j=function(e){return"string"!=typeof e||""===e?(console.error("The hook name must be a non-empty string."),!1):/^__/.test(e)?(console.error("The hook name cannot begin with `__`."),!1):!!/^[a-zA-Z][a-zA-Z0-9_.-]*$/.test(e)||(console.error("The hook name can only contain numbers, letters, dashes, periods and underscores."),!1)},I=function(e,t){return function(n,r,i){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:10,a=e[t];if(j(n)&&C(r))if("function"==typeof i)if("number"==typeof o){var s={callback:i,priority:o,namespace:r};if(a[n]){var l,c=a[n].handlers;for(l=c.length;l>0&&!(o>=c[l-1].priority);l--);l===c.length?c[l]=s:c.splice(l,0,s),a.__current.forEach(function(e){e.name===n&&e.currentIndex>=l&&e.currentIndex++})}else a[n]={handlers:[s],runs:0};"hookAdded"!==n&&e.doAction("hookAdded",n,r,i,o)}else console.error("If specified, the hook priority must be a number.");else console.error("The hook callback must be a function.")}},P=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return function(r,i){var o=e[t];if(j(r)&&(n||C(i))){if(!o[r])return 0;var a=0;if(n)a=o[r].handlers.length,o[r]={runs:o[r].runs,handlers:[]};else for(var s=o[r].handlers,l=function(e){s[e].namespace===i&&(s.splice(e,1),a++,o.__current.forEach(function(t){t.name===r&&t.currentIndex>=e&&t.currentIndex--}))},c=s.length-1;c>=0;c--)l(c);return"hookRemoved"!==r&&e.doAction("hookRemoved",r,i),a}}},R=function(e,t){return function(n,r){var i=e[t];return void 0!==r?n in i&&i[n].handlers.some(function(e){return e.namespace===r}):n in i}},V=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return function(r){var i=e[t];i[r]||(i[r]={handlers:[],runs:0}),i[r].runs++;for(var o=i[r].handlers,a=arguments.length,s=new Array(a>1?a-1:0),l=1;l<a;l++)s[l-1]=arguments[l];if(!o||!o.length)return n?s[0]:void 0;var c={name:r,currentIndex:0};for(i.__current.push(c);c.currentIndex<o.length;){var u=o[c.currentIndex].callback.apply(null,s);n&&(s[0]=u),c.currentIndex++}return i.__current.pop(),n?s[0]:void 0}},D=function(e,t){return function(){var n,r,i=e[t];return null!==(n=null===(r=i.__current[i.__current.length-1])||void 0===r?void 0:r.name)&&void 0!==n?n:null}},z=function(e,t){return function(n){var r=e[t];return void 0===n?void 0!==r.__current[0]:!!r.__current[0]&&n===r.__current[0].name}},N=function(e,t){return function(n){var r=e[t];if(j(n))return r[n]&&r[n].runs?r[n].runs:0}};var U=new function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.actions=Object.create(null),this.actions.__current=[],this.filters=Object.create(null),this.filters.__current=[],this.addAction=I(this,"actions"),this.addFilter=I(this,"filters"),this.removeAction=P(this,"actions"),this.removeFilter=P(this,"filters"),this.hasAction=R(this,"actions"),this.hasFilter=R(this,"filters"),this.removeAllActions=P(this,"actions",!0),this.removeAllFilters=P(this,"filters",!0),this.doAction=V(this,"actions"),this.applyFilters=V(this,"filters",!0),this.currentAction=D(this,"actions"),this.currentFilter=D(this,"filters"),this.doingAction=z(this,"actions"),this.doingFilter=z(this,"filters"),this.didAction=N(this,"actions"),this.didFilter=N(this,"filters")},M=(U.addAction,U.addFilter,U.removeAction,U.removeFilter,U.hasAction,U.hasFilter,U.removeAllActions,U.removeAllFilters,U.doAction,U.applyFilters,U.currentAction,U.currentFilter,U.doingAction,U.doingFilter,U.didAction,U.didFilter,U.actions,U.filters,function(e,t,n){var r=new L({}),i=new Set,o=function(){i.forEach(function(e){return e()})},a=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"default";r.data[t]=F(F(F({},O),r.data[t]),e),r.data[t][""]=F(F({},O[""]),r.data[t][""])},s=function(e,t){a(e,t),o()},l=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"default",t=arguments.length>1?arguments[1]:void 0,n=arguments.length>2?arguments[2]:void 0,i=arguments.length>3?arguments[3]:void 0,o=arguments.length>4?arguments[4]:void 0;return r.data[e]||a(void 0,e),r.dcnpgettext(e,t,n,i,o)},c=function(){return arguments.length>0&&void 0!==arguments[0]?arguments[0]:"default"},u=function(e,t,r){var i=l(r,t,e);return n?(i=n.applyFilters("i18n.gettext_with_context",i,e,t,r),n.applyFilters("i18n.gettext_with_context_"+c(r),i,e,t,r)):i};if(n){var f=function(e){T.test(e)&&o()};n.addAction("hookAdded","core/i18n",f),n.addAction("hookRemoved","core/i18n",f)}return{getLocaleData:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"default";return r.data[e]},setLocaleData:s,resetLocaleData:function(e,t){r.data={},r.pluralForms={},s(e,t)},subscribe:function(e){return i.add(e),function(){return i.delete(e)}},__:function(e,t){var r=l(t,void 0,e);return n?(r=n.applyFilters("i18n.gettext",r,e,t),n.applyFilters("i18n.gettext_"+c(t),r,e,t)):r},_x:u,_n:function(e,t,r,i){var o=l(i,void 0,e,t,r);return n?(o=n.applyFilters("i18n.ngettext",o,e,t,r,i),n.applyFilters("i18n.ngettext_"+c(i),o,e,t,r,i)):o},_nx:function(e,t,r,i,o){var a=l(o,i,e,t,r);return n?(a=n.applyFilters("i18n.ngettext_with_context",a,e,t,r,i,o),n.applyFilters("i18n.ngettext_with_context_"+c(o),a,e,t,r,i,o)):a},isRTL:function(){return"rtl"===u("ltr","text direction")},hasTranslation:function(e,t,i){var o,a,s=t?t+""+e:e,l=!(null===(o=r.data)||void 0===o||null===(a=o[null!=i?i:"default"])||void 0===a||!a[s]);return n&&(l=n.applyFilters("i18n.has_translation",l,e,t,i),l=n.applyFilters("i18n.has_translation_"+c(i),l,e,t,i)),l}}}(0,0,U));M.getLocaleData.bind(M),M.setLocaleData.bind(M),M.resetLocaleData.bind(M),M.subscribe.bind(M);var B=M.__.bind(M);function W(e){return W="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},W(e)}function G(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,X(r.key),r)}}function X(e){var t=function(e){if("object"!=W(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=W(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==W(t)?t:t+""}M._x.bind(M),M._n.bind(M),M._nx.bind(M),M.isRTL.bind(M),M.hasTranslation.bind(M);var J,K=["px","em","%"],$=new WeakMap,Z=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.loadedByWebComponent=t.length>0,this.sliderElements=t.length>0?t:document.querySelectorAll(".frm-slider-component"),this.settings=n,0!==this.sliderElements.length&&(this.eventsChange=[],this.initOptions(),this.init())}return n=e,r=[{key:"initOptions",value:function(){var e=this;this.options=[],this.sliderElements.forEach(function(t,n){var r=t.classList.contains("frm-has-multiple-values")?t.closest(".frm-style-component"):t,i=e.settings.steps||(t.dataset.steps?JSON.parse(t.dataset.steps):null);e.options.push({maxValue:parseInt(t.dataset.maxValue,10),element:t,index:n,steps:i,dependentUpdater:r.classList.contains("frm-style-dependent-updater-component")?new S(r):null})})}},{key:"init",value:function(){this.initListeners(),this.initFill()}},{key:"initListeners",value:function(){var t=this;this.sliderElements.forEach(function(n,r){t.eventsChange[r]=new Event("change",{bubbles:!0,cancelable:!0});var i=n.querySelector(".frm-slider"),o=n.querySelector('.frm-slider-value input[type="text"]');i&&o&&(t.initSteps(i,r),i.addEventListener("input",function(){var a=t.getRangeValue(i,r);o.value=a,e.refreshRange(i,n,a),t.syncGroupSliders(n,a)}),i.addEventListener("change",function(){var o=t.getRangeValue(i,r);t.options[r].fullValue=t.updateValue(n,o+e.getUnit(n)),t.triggerValueChange(r)}),o.addEventListener("change",function(a){var s=e.getUnit(n),l=parseFloat(a.target.value),c=t.options[r].steps,u=c&&c.length>0?c.map(Number).includes(l):l>=parseFloat(i.min||0)&&parseFloat(i.max)>=l;!isNaN(l)&&u?(t.setRangeValue(i,r,l),e.refreshRange(i,n,l),t.options[r].fullValue=t.updateValue(n,l+s),t.triggerValueChange(r)):o.value=t.getRangeValue(i,r)}),e.expandSliderGroup(n),t.updateOnUnitChange(n,i,o,r),e.maybeDisableUnitDropdown(n))})}},{key:"initFill",value:function(){var t=this;this.sliderElements.forEach(function(n,r){var i=n.querySelector(".frm-slider");if(i){var o=t.getRangeValue(i,r);t.options[r].fullValue=o+e.getUnit(n),e.refreshRange(i,n,o)}})}},{key:"initSteps",value:function(t,n){var r=this.options[n].steps;if(r&&0!==r.length){var i=parseFloat(t.value);t.min="0",t.max=String(r.length-1),t.step="1",t.value=String(e.getClosestStepIndex(i,r))}}},{key:"getRangeValue",value:function(e,t){var n=this.options[t].steps;return n&&n.length>0?n[parseInt(e.value,10)]:parseFloat(e.value)}},{key:"setRangeValue",value:function(t,n,r){var i=this.options[n].steps;i&&i.length>0?t.value=String(e.getClosestStepIndex(parseFloat(r),i)):(e.applyStep(t,r),t.value=r)}},{key:"syncGroupSliders",value:function(t,n){var r=this;(t.classList.contains("frm-has-multiple-values")||t.classList.contains("frm-has-independent-fields"))&&(t.classList.contains("frm-has-independent-fields")?t.querySelectorAll(".frm-independent-slider-field"):e.getSliderGroupItems(t)).forEach(function(t){var i=t.querySelector(".frm-slider"),o=t.querySelector('.frm-slider-value input[type="text"]'),a=r.getSliderIndex(t);i&&-1!==a&&(r.setRangeValue(i,a,n),e.refreshRange(i,t,n)),o&&(o.value=n)})}},{key:"updateOnUnitChange",value:function(t,n,r,i){var o=this,a=t.querySelector("select");a&&a.addEventListener("change",function(a){var s=a.target.value.toLowerCase();if(""===s)return t.classList.add("frm-disabled","frm-empty"),n.disabled=!0,r.value="",r.disabled=!0,e.updateLabelFocusTarget(r,!1),e.refreshRange(n,t,o.getRangeValue(n,i)),o.options[i].fullValue=o.updateValue(t,""),void o.triggerValueChange(i);if("auto"===s)return t.classList.add("frm-disabled"),n.disabled=!0,r.value="",r.disabled=!0,e.updateLabelFocusTarget(r,!1),n.setAttribute("aria-valuetext",s),o.options[i].fullValue=o.updateValue(t,"auto"),void o.triggerValueChange(i);t.classList.remove("frm-disabled","frm-empty"),n.disabled=!1,r.disabled=!1,e.updateLabelFocusTarget(r,!0),o.options[i].steps||(n.max=o.getMaxValue(s,i,o.getRangeValue(n,i)));var l=o.getRangeValue(n,i);r.value=l,o.options[i].fullValue=l+s,o.updateValue(t,o.options[i].fullValue),e.refreshRange(n,t,l),o.triggerValueChange(i)})}},{key:"getSliderIndex",value:function(e){var t=this.options.find(function(t){return t.element===e});return t?t.index:-1}},{key:"getMaxValue",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,r="%"===e?100:this.options[t].maxValue;return null!==n&&n>r?Math.ceil(n):r}},{key:"triggerValueChange",value:function(e){var t=this;if(null===this.options[e].dependentUpdater){var n=this.sliderElements[e].classList.contains("frm-has-multiple-values")?this.sliderElements[e].closest(".frm-style-component").querySelector('input[type="hidden"]'):this.sliderElements[e].querySelectorAll('.frm-slider-value input[type="hidden"]');n instanceof NodeList?n.forEach(function(n){n.dispatchEvent(t.eventsChange[e])}):n.dispatchEvent(this.eventsChange[e])}else this.options[e].dependentUpdater.updateAllDependentElements(this.options[e].fullValue)}},{key:"updateValue",value:function(t,n){var r=this;if(t.classList.contains("frm-base-font-size")){var i=document.querySelector('input[name="frm_style_setting[post_content][use_base_font_size]"]');i&&(i.value="true")}if(t.classList.contains("frm-has-multiple-values")){var o=t.closest(".frm-style-component").querySelector('input[type="hidden"]'),a=o.value.split(" "),s=t.dataset.type;switch(a[2]||(a[2]="0px"),a[3]||(a[3]="0px"),s){case"vertical":a[0]=n,a[2]=n;break;case"horizontal":a[1]=n,a[3]=n;break;case"top":a[0]=n;break;case"bottom":a[2]=n;break;case"left":a[3]=n;break;case"right":a[1]=n}var l=a.join(" ");return o.value=l,e.getSliderGroupItems(t).forEach(function(e){var t=r.getUnitMeasureFromValue(n);e.querySelector('.frm-slider-value input[type="text"]').value=parseFloat(n),e.querySelector("select").value=t}),l}if(t.classList.contains("frm-has-independent-fields")){var c=t.querySelectorAll('.frm-slider-value input[type="hidden"]'),u=t.querySelectorAll('.frm-slider-value input[type="text"]');return c.forEach(function(e,t){e.value=n,u[t+1].value=parseFloat(n)}),n}return t.querySelector('.frm-slider-value input[type="hidden"]').value=n,n}},{key:"getUnitMeasureFromValue",value:function(e){return K.find(function(t){return e.includes(t)})||""}}],i=[{key:"getUnit",value:function(e){var t=e.querySelector("select");return t?t.value:""}},{key:"getClosestStepIndex",value:function(e,t){for(var n=0,r=Math.abs(e-t[0]),i=1;i<t.length;i++){var o=Math.abs(e-t[i]);o<r&&(r=o,n=i)}return n}},{key:"applyStep",value:function(e,t){var n=(String(t).split(".")[1]||"").length;e.step=n>0?"0.".concat("0".repeat(n-1),"1"):"1"}},{key:"refreshRange",value:function(t,n,r){e.updateFill(t);var i=e.getUnit(n);if("auto"!==i)if(""!==i){var o=K.includes(i)?i:"";t.setAttribute("aria-valuetext","".concat(r).concat(o))}else t.setAttribute("aria-valuetext",B("Not set","formidable"));else t.setAttribute("aria-valuetext",i)}},{key:"updateFill",value:function(e){var t=parseFloat(e.min)||0,n=parseFloat(e.max),r=parseFloat(e.value),i=n-t,o=i>0?Math.min(Math.max((r-t)/i,0),1):0;e.style.setProperty("--frm-fill",o)}},{key:"expandSliderGroup",value:function(n){var r=n.querySelector(".frmsvg");if(void 0!==n.dataset.displaySliders&&null!==r){var i=e.getSliderGroupItems(n);r.addEventListener("click",function(){i.forEach(function(e){e.classList.toggle(t)})})}}},{key:"maybeDisableUnitDropdown",value:function(e){var t=e.querySelector("select");t&&1>=Array.from(t.options).filter(function(e){return""!==e.value}).length&&(t.classList.add("frm-single-unit"),t.addEventListener("mousedown",function(e){return e.preventDefault()}))}},{key:"updateLabelFocusTarget",value:function(e,t){if(e.id){var n=document.querySelector('[data-slider-label-for="'.concat(e.id,'"]'));n&&(t?n.setAttribute("for",e.id):n.removeAttribute("for"))}}},{key:"getSliderGroupItems",value:function(e){if($.has(e))return $.get(e);if(void 0===e.dataset.displaySliders)return[];var t=e.closest(".frm-style-component");if(!t)return[];var n=e.dataset.displaySliders.split(",").map(function(e){return'.frm-slider-component[data-type="'.concat(e,'"]')}).join(", "),r=t.querySelectorAll(n);return $.set(e,r),r}}],r&&G(n.prototype,r),i&&G(n,i),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,r,i}();function H(e){if(J){J.dataset.activeFilter=e,J.querySelectorAll("[data-group]").forEach(function(t){"all"===e&&"my_actions"===t.dataset.group?t.classList.add("frm_hidden"):t.classList.toggle("frm_hidden","all"!==e&&t.dataset.group!==e)});var t=J.querySelector('[data-group="my_actions"]');t&&t.querySelectorAll("[data-section] .frm-group-heading").forEach(function(t){t.style.display="all"===e?"none":""})}}var Q=null;function Y(){Q&&(Q.disconnect(),Q=null)}function ee(e){return ee="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},ee(e)}function te(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,ne(r.key),r)}}function ne(e){var t=function(e){if("object"!=ee(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=ee(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==ee(t)?t:t+""}var re=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),void 0!==t&&(this.wrapper=t instanceof Element?t:document.querySelector(t),null!==this.wrapper&&(this.flexboxSlidesGap="16px",this.navs=this.wrapper.querySelectorAll(".frm-tabs-navs ul > li"),this.slideTrackLine=this.wrapper.querySelector(".frm-tabs-active-underline"),this.slideTrack=this.wrapper.querySelector(".frm-tabs-slide-track"),this.slides=this.wrapper.querySelectorAll(".frm-tabs-slide-track > div"),this.isRTL="rtl"===document.documentElement.dir||"rtl"===document.body.dir,this.resizeObserver=null,this.filterTarget=function(e){var t;J=null;var n=null==e||null===(t=e.dataset)||void 0===t?void 0:t.filterTarget;if(n){var r=document.querySelector(n);(function(e){return e.querySelectorAll("[data-group]").length>0})(r)&&(J=r)}return J}(this.wrapper),this.init()))},(t=[{key:"init",value:function(){var e,t=this,n=!this.filterTarget&&(null===this.slideTrack||0===this.slides.length);if(null!==this.wrapper&&this.navs.length&&null!==this.slideTrackLine&&!n){var r=null===(e=this.navs[0])||void 0===e?void 0:e.parentElement;r&&r.setAttribute("role","tablist"),this.navs.forEach(function(e,n){e.setAttribute("tabindex","0"),e.setAttribute("role","tab"),e.setAttribute("aria-selected",String(e.classList.contains("frm-active"))),e.addEventListener("click",function(e){return t.onNavClick(e,n)}),e.addEventListener("keydown",function(e){return t.onNavKeydown(e,n)}),e.classList.contains("frm-active")&&(t.initSlideTrackUnderline(e),t.filterTarget&&H(e.dataset.filter||"all"))}),this.slideTrackLine.style.display="block",this.setupScrollbarObserver(),this.setupVisibilityObserver(),window.addEventListener("beforeunload",this.cleanupObservers)}}},{key:"onNavClick",value:function(e,t){var n=e.currentTarget;if(e.preventDefault(),this.removeActiveClassnameFromNavs(),n.classList.add("frm-active"),this.navs.forEach(function(e){return e.setAttribute("aria-selected","false")}),n.setAttribute("aria-selected","true"),this.initSlideTrackUnderline(n),this.filterTarget)H(n.dataset.filter||"all");else{this.changeSlide(t);var r,i,o=n.querySelector("a");o&&"frm_insert_fields_tab"===o.id&&!o.closest("#frm_adv_info")&&(null===(r=window.frmAdminBuild)||void 0===r||null===(i=r.clearSettingsBox)||void 0===i||i.call(r))}}},{key:"onNavKeydown",value:function(e,t){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.onNavClick(e,t))}},{key:"initSlideTrackUnderline",value:function(e){var t=void 0!==e?e:this.navs.filter(function(e){return e.classList.contains("frm-active")});this.positionUnderlineIndicator(t)}},{key:"setupVisibilityObserver",value:function(){var e=this;!function(e,t){"IntersectionObserver"in window&&e instanceof Element&&"function"==typeof t&&(Q=new IntersectionObserver(function(e){e[0].isIntersecting&&(t(),Y())})).observe(e)}(this.wrapper,function(){var t=e.wrapper.querySelector(".frm-tabs-navs ul > li.frm-active");t&&e.positionUnderlineIndicator(t)})}},{key:"setupScrollbarObserver",value:function(){var e=this,t=document.querySelector(".frm-scrollbar-wrapper, .styling_settings")||document.body;t&&"ResizeObserver"in window&&(this.resizeObserver=new ResizeObserver(function(){var t=e.wrapper.querySelector(".frm-tabs-navs ul > li.frm-active");t&&e.positionUnderlineIndicator(t)}),this.resizeObserver.observe(t))}},{key:"cleanupObservers",value:function(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),Y()}},{key:"positionUnderlineIndicator",value:function(e){var t=this;requestAnimationFrame(function(){var n=t.isRTL?-(e.parentElement.offsetWidth-e.offsetLeft-e.offsetWidth):e.offsetLeft;t.slideTrackLine.style.transform="translateX(".concat(n,"px)"),t.slideTrackLine.style.width="".concat(e.clientWidth,"px")})}},{key:"changeSlide",value:function(e){this.removeActiveClassnameFromSlides();var t=0==e?"0px":"calc( ( ".concat(100*e,"% + ").concat(parseInt(this.flexboxSlidesGap,10)*e,"px ) * ").concat(this.isRTL?1:-1," )");"0px"!==t?this.slideTrack.style.transform="translateX(".concat(t,")"):this.slideTrack.style.removeProperty("transform"),e in this.slides&&this.slides[e].classList.add("frm-active")}},{key:"removeActiveClassnameFromSlides",value:function(){this.slides.forEach(function(e){return e.classList.remove("frm-active")})}},{key:"removeActiveClassnameFromNavs",value:function(){this.navs.forEach(function(e){return e.classList.remove("frm-active")})}}])&&te(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}();function ie(e){return ie="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},ie(e)}function oe(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,ae(r.key),r)}}function ae(e){var t=function(e){if("object"!=ie(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=ie(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==ie(t)?t:t+""}var se=function(){return e=function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.elements=document.querySelectorAll(".frm-style-tabs-wrapper"),0<this.elements.length&&this.init()},(t=[{key:"init",value:function(){this.elements.forEach(function(e){new re(e)})}},{key:"initOnTabClick",value:function(e){var t=this;this.initActiveBackgroundWidth(e),e.querySelectorAll(".frm-tab-item").forEach(function(e){e.addEventListener("click",function(e){t.onTabClick(e.target.closest(".frm-tabs-wrapper"))})})}}])&&oe(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}(),le="frm-token-container",ce="frm-tokens",ue="frm-token",fe="frm-token-value",de="frm-token-remove",pe="frm-token-proxy-input",ve=window.frmDom,he=ve.span,me=ve.svg,ye=ve.tag;function ge(){document.querySelectorAll(".".concat(le)).forEach(function(e){return be(e.querySelector(".".concat(pe)),e.querySelector(".".concat(ce)))})}function be(e,t){if(e&&t){var n=t.querySelectorAll(".".concat(ue));if(!(n.length>0))return e.style.paddingLeft="",e.style.paddingTop="",void(e.style.height="");var r=t.offsetHeight;if(Math.max(1,Math.ceil(r/36))>1){var i=function(e){if(!e.length)return 0;var t=0;return e.forEach(function(e){t+=e.offsetWidth}),(t+=4*(e.length-1))+4}(function(e){if(!e.length)return[];var t=Array.from(e),n=-1;t.forEach(function(e){var t=e.getBoundingClientRect().bottom;t>n&&(n=t)});return t.filter(function(e){var t=e.getBoundingClientRect();return Math.abs(t.bottom-n)<=2})}(n));e.style.height="".concat(r,"px"),e.style.paddingTop="".concat(r-36+4,"px"),e.style.paddingLeft=i?"".concat(i+8,"px"):""}else e.style.height="",e.style.paddingTop="",e.style.paddingLeft="".concat(t.offsetWidth-4,"px")}}function Se(e,t,n){e&&n&&t&&(n.innerHTML="",xe(e).forEach(function(e){return function(e,t){var n=he({className:ue,children:[he({text:e,className:fe}),he({className:de,child:me({href:"#frm_close_icon"})})]});t.append(n)}(e,n)}),be(t,n),t.focus())}function ke(e,t,n){if(!e||!t||!n)return!1;var r=xe(t.value);return r.includes(e)?(_e(n),!1):(r.push(e),Ee(t,r),_e(n),!0)}function we(e,t,n){if(e&&t&&n){var r=e.querySelector(".".concat(fe)).textContent;Ee(t,xe(t.value).filter(function(e){return e!==r})),e.remove(),n.focus()}}function xe(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return(e=e.trim())?e.split(/\s+/).filter(Boolean):[]}function Ee(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];e&&(e.value=t.join(" "),jQuery(e).trigger("change"))}function _e(e){e&&(e.value="",e.focus())}function Ae(e){var n=(e?document.getElementById("frm-single-settings-".concat(e)):document.body).querySelectorAll(".".concat("frm-token-input-field"));if(n.length){var r=new Set;n.forEach(function(e){r.has(e.id)||(function(e){var n=function(e){var n=e.closest(".".concat("frm-with-right-icon"));if(n.querySelector(".".concat(ce)))return null;n.classList.add(le);var r=he({className:ce});n.insertBefore(r,n.firstChild);var i=ye("input",{className:pe,id:"".concat(e.id,"-proxy-input")});return i.type="text",e.parentNode.insertBefore(i,e.nextSibling),e.classList.add(t),n}(e);if(n){var r=n.querySelector(".".concat(pe)),i=n.querySelector(".".concat(ce));Se(e.value,r,i),function(e,t,n){jQuery(e).on("change",function(){return Se(e.value,t,n)}),t.addEventListener("keydown",function(r){return function(e,t,n,r){var i=e.key,o=n.value.trim();switch(i){case"Backspace":o||(e.preventDefault(),we(r.querySelector(".".concat(ue,":last-child")),t,n));break;case" ":case",":case"Enter":e.preventDefault(),ke(o,t,n)}be(n,r)}(r,e,t,n)}),t.addEventListener("blur",function(){return ke(t.value.trim(),e,t)}),n.addEventListener("click",function(n){return function(e,t,n){var r=e.target.closest(".".concat(de));if(r){var i=r.closest(".".concat(ue));if(i){var o=i.parentElement;we(i,t,n),be(n,o)}}}(n,e,t)})}(e,r,i)}}(e),r.add(e.id))})}}var Le="frm-toggle-group",qe="frm_toggle_block",Fe="data-group-name";function Oe(e){var t=e.target,n=t.closest(".".concat(Le));n&&Te(t,n)}function Te(e,n){var i,o=(null===(i=n.closest(".".concat("frm-single-settings")))||void 0===i?void 0:i.dataset.fid)||n.dataset.fid,a=e.checked,s=e.getAttribute("data-show");s&&document.querySelectorAll(Ce(s,o)).forEach(function(e){return e.classList.toggle(t,!a)});var l=e.getAttribute("data-disable");l&&document.querySelectorAll(Ce(l,o)).forEach(function(e){e.classList.toggle(r,a),e.querySelectorAll("input, select, textarea").forEach(function(e){return e.disabled=a}),e.querySelectorAll(".frm-show-inline-modal[tabindex]").forEach(function(e){return e.tabIndex=a?-1:0})});var c=e.getAttribute("data-enable");c&&document.querySelectorAll(Ce(c,o)).forEach(function(e){return e.classList.toggle(r,!a)});var u=e.closest(".".concat(qe));Array.from(n.querySelectorAll(".".concat(qe))).filter(function(e){return e!==u}).forEach(function(e){e.classList.toggle(r,a);var t=e.querySelector(".frm_toggle");t.tabIndex=a?-1:0,t.setAttribute("aria-disabled",a)})}function Ce(e,t){return e.replace(/{id}/g,t)}function je(e){var t=e.target.closest(".frm-unit-input"),n=t.querySelector(".frm-unit-input-control"),r=t.querySelector("select").value;e.target.matches("select")&&(n.type=""===r?"text":"number");var i=n.value.trim();t.querySelector('input[type="hidden"]').value=""!==i?i+r:""}var Ie,Pe=function(e){var t=e.querySelector('li[data-filter="all"]');t.classList.contains("frm-active")||t.click()},Re=function(e){e.querySelectorAll("[data-group]").forEach(function(e){var t=e.querySelector(".frm-group-heading");if(t){var n=e.querySelectorAll(".frm-action"),r=n.length>0&&Array.from(n).every(function(e){return e.classList.contains("frm_hidden")});t.classList.toggle("frm-force-hidden",r)}})};Ie=function(){var e,t;new d,new Z,new se,null===(t=document.getElementById("frm-form-add-field"))||void 0===t||t.addEventListener("click",function(e){var t;e.preventDefault(),null===(t=document.querySelector(".frm-settings-panel .frm-tabs-navs ul > li:first-child"))||void 0===t||t.click()}),document.addEventListener("frm_added_field",function(e){return Ae(e.frmField.dataset.fid)}),document.addEventListener("frm_ajax_loaded_field",function(e){return e.frmFields.forEach(function(e){return Ae(e.id)})}),wp.hooks.addAction("frmShowedFieldSettings","formidable-token-input",function(e,t){Ae(t.id.replace("frm-single-settings-","")),ge()}),(e=document.querySelectorAll(".".concat(Le))).length&&e.forEach(function(e){var t=e.querySelector("[".concat(Fe,"]:checked"));t&&Te(t,e)}),s("change",".".concat(Le," [").concat(Fe,"]"),Oe),s("change",".frm-unit-input .frm-unit-input-control",je),s("change",".frm-unit-input select",je),function(){var e=document.getElementById("frm_email_addon_menu");if(e){var t=e.querySelector(".frm-auto-search");if(t){var n=document.getElementById("frm-actions-filter-content"),r=function(){return function(e,t,n){e.value.trim()&&Pe(t),n&&requestAnimationFrame(function(){return Re(n)})}(t,e,n)};t.addEventListener("input",r),t.addEventListener("search",r)}}}()},"undefined"!=typeof document&&("complete"!==document.readyState&&"interactive"!==document.readyState?document.addEventListener("DOMContentLoaded",Ie):Ie())})()})();
\ No newline at end of file
diff --git a/js/src/settings-components/components/slider-component.js b/js/src/settings-components/components/slider-component.js
index 20c24c37cf..aefe7c89c3 100644
--- a/js/src/settings-components/components/slider-component.js
+++ b/js/src/settings-components/components/slider-component.js
@@ -390,6 +390,7 @@ export default class frmSliderComponent {
 				// There is no number to show or edit once the unit itself is unset.
 				valueInput.value = '';
 				valueInput.disabled = true;
+				frmSliderComponent.updateLabelFocusTarget( valueInput, false );
 
 				// Drop the old unit from what is announced, the value no longer carries one.
 				frmSliderComponent.refreshRange( rangeInput, element, this.getRangeValue( rangeInput, index ) );
@@ -412,6 +413,7 @@ export default class frmSliderComponent {
 				// the text box blank rather than duplicating the word or coercing it into a number.
 				valueInput.value = '';
 				valueInput.disabled = true;
+				frmSliderComponent.updateLabelFocusTarget( valueInput, false );
 
 				// The slider no longer stands for a number, so announce the keyword that replaced it.
 				rangeInput.setAttribute( 'aria-valuetext', unit );
@@ -424,6 +426,7 @@ export default class frmSliderComponent {
 			element.classList.remove( 'frm-disabled', 'frm-empty' );
 			rangeInput.disabled = false;
 			valueInput.disabled = false;
+			frmSliderComponent.updateLabelFocusTarget( valueInput, true );
 
 			if ( ! this.options[ index ].steps ) {
 				rangeInput.max = this.getMaxValue( unit, index, this.getRangeValue( rangeInput, index ) );
@@ -441,6 +444,36 @@ export default class frmSliderComponent {
 		} );
 	}
 
+	/**
+	 * Keeps a value input's <label for="..."> pointed at it only while it is enabled - a label
+	 * click never focuses a disabled control, so leaving `for` set while the unit is non-measured
+	 * ('auto' or unset) makes the label a permanent no-op instead of clearing on the initial PHP
+	 * render alone (see `_buttons.php`'s `data-slider-label-for`, which templates use to mark the
+	 * label without committing to a `for` that may start out invalid).
+	 *
+	 * @since x.x
+	 *
+	 * @param {HTMLInputElement} valueInput - The visible text input the label may target.
+	 * @param {boolean}          isMeasured - Whether the input is now enabled (a measured unit).
+	 * @return {void}
+	 */
+	static updateLabelFocusTarget( valueInput, isMeasured ) {
+		if ( ! valueInput.id ) {
+			return;
+		}
+
+		const label = document.querySelector( `[data-slider-label-for="${ valueInput.id }"]` );
+		if ( ! label ) {
+			return;
+		}
+
+		if ( isMeasured ) {
+			label.setAttribute( 'for', valueInput.id );
+		} else {
+			label.removeAttribute( 'for' );
+		}
+	}
+
 	/**
 	 * Disables the unit dropdown if there is only a single unit option.
 	 *
diff --git a/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js b/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
index d2627c6f52..d0e798715e 100644
--- a/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
+++ b/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
@@ -29,4 +29,33 @@ describe( 'Style builder labels focus their visible/interactive control', () =>
 		cy.get( '#frm_fieldset' ).should( 'not.be.visible' );
 		cy.focused().should( 'have.id', 'frm_fieldset-value' );
 	} );
+
+	it( 'A "Width"/"Height" label targets nothing while its unit defaults to "auto", and gets a working focus target once a measured unit is chosen', () => {
+		cy.intercept( 'POST', '**/admin-ajax.php', req => {
+			if ( req.body?.includes( 'action=frm_change_styling' ) ) {
+				req.alias = 'changeStyling';
+			}
+		} );
+
+		cy.visit( '/wp-admin/admin.php?page=formidable-styles&section=advanced-settings' );
+		cy.get( '#buttons-style button[aria-label="Buttons"]' ).click();
+		cy.get( '#frm_style_section_buttons-style' ).should( 'be.visible' );
+
+		cy.log( 'Width defaults to "auto" out of the box (FrmStyle.php), rendering the value input disabled' );
+		cy.get( '#frm_submit_width' ).should( 'have.value', 'auto' );
+		cy.get( '#frm_submit_width-value' ).should( 'be.disabled' );
+		cy.get( '[data-slider-label-for="frm_submit_width-value"]' ).should( 'not.have.attr', 'for' );
+
+		cy.log( 'Choosing a measured unit re-associates the label with the now-enabled input' );
+		cy.get( '#frm_submit_width' ).closest( '.frm-slider-component' ).find( '.frm-slider-value select' ).select( 'px' );
+		cy.wait( '@changeStyling', { timeout: 10000 } );
+		cy.get( '[data-slider-label-for="frm_submit_width-value"]' ).should( 'have.attr', 'for', 'frm_submit_width-value' );
+		cy.get( '[data-slider-label-for="frm_submit_width-value"]' ).click();
+		cy.focused().should( 'have.id', 'frm_submit_width-value' );
+
+		cy.log( 'Switching back to "auto" removes the focus target again, live, not just on the next server render' );
+		cy.get( '#frm_submit_width' ).closest( '.frm-slider-component' ).find( '.frm-slider-value select' ).select( 'auto' );
+		cy.wait( '@changeStyling', { timeout: 10000 } );
+		cy.get( '[data-slider-label-for="frm_submit_width-value"]' ).should( 'not.have.attr', 'for' );
+	} );
 } );

From 63d47ac49f32a829000d183367b013b15c62cda2 Mon Sep 17 00:00:00 2001
From: "vivi-the-going-merry[bot]"
 <308115520+vivi-the-going-merry[bot]@users.noreply.github.com>
Date: Wed, 23 Sep 2026 13:32:24 -0600
Subject: [PATCH 06/14] Extend disabled-input label fix to the remaining
 single-value sliders

PR #3449 fixed the same defect (a <label for="..."> pointing at a
slider's value input that renders disabled whenever its unit is
non-measured) for Width/Height only, since those are the only two
fields that ship with a non-measured ('auto') default today.

The other ~20 single-value slider labels (font sizes, border widths,
corner radii, etc.) still use a static for="{id}-value" with no
conditional - none of them default to a non-measured unit, so there's
no live bug in the default state, but a user can still clear any
slider's unit to blank ("Not set", which every slider offers) and
disable that field's own label the same way.

Apply the same data-slider-label-for marker + FrmSliderStyleComponent
::is_value_measured() conditional `for` to every remaining plain
for="{id}-value" label in classes/views/styles/. No JS change needed -
style.js's updateLabelFocusTarget() already selects generically by
[data-slider-label-for], so this is template-only.

Extends styleLabelFocusTargets.cy.js with a case covering the "Not
set" unit for a field outside PR #3449's own Width/Height scope
(frm_fieldset, already visited by the existing single-value-slider
test).

Addresses #3454. Branched on top of PR #3449's own branch
(fix/issue-3439-style-label-focus-targets) since the mechanism this
extends doesn't exist on master yet - not opening a PR against master
until #3449 merges.
---
 classes/views/styles/_buttons.php             |  9 ++++---
 .../views/styles/_check-box-radio-fields.php  |  3 ++-
 classes/views/styles/_field-colors.php        |  6 +++--
 classes/views/styles/_field-description.php   |  3 ++-
 classes/views/styles/_field-labels.php        |  6 +++--
 classes/views/styles/_field-sizes.php         | 12 ++++++---
 classes/views/styles/_form-description.php    |  3 ++-
 classes/views/styles/_form-messages.php       |  6 +++--
 classes/views/styles/_form-title.php          |  3 ++-
 classes/views/styles/_general.php             |  6 +++--
 classes/views/styles/_quick-settings.php      |  6 +++--
 .../e2e/Styles/styleLabelFocusTargets.cy.js   | 27 +++++++++++++++++++
 12 files changed, 69 insertions(+), 21 deletions(-)

diff --git a/classes/views/styles/_buttons.php b/classes/views/styles/_buttons.php
index 6337b46a18..6ceb11d317 100644
--- a/classes/views/styles/_buttons.php
+++ b/classes/views/styles/_buttons.php
@@ -53,7 +53,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_submit_font_size-value"
+							data-slider-label-for="frm_submit_font_size-value"
+							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['submit_font_size'] ) ? 'for="frm_submit_font_size-value"' : ''; ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -147,7 +148,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' );
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_submit_border_width-value"
+							data-slider-label-for="frm_submit_border_width-value"
+							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['submit_border_width'] ) ? 'for="frm_submit_border_width-value"' : ''; ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -183,7 +185,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Shadow', 'formidable' ); ?></l
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_submit_border_radius-value"
+							data-slider-label-for="frm_submit_border_radius-value"
+							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['submit_border_radius'] ) ? 'for="frm_submit_border_radius-value"' : ''; ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_check-box-radio-fields.php b/classes/views/styles/_check-box-radio-fields.php
index 94e602c663..c36c7b7d40 100644
--- a/classes/views/styles/_check-box-radio-fields.php
+++ b/classes/views/styles/_check-box-radio-fields.php
@@ -23,7 +23,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_check_font_size-value"
+		data-slider-label-for="frm_check_font_size-value"
+		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['check_font_size'] ) ? 'for="frm_check_font_size-value"' : ''; ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_field-colors.php b/classes/views/styles/_field-colors.php
index 2cb662bba4..d2615af1b4 100644
--- a/classes/views/styles/_field-colors.php
+++ b/classes/views/styles/_field-colors.php
@@ -75,7 +75,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></l
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_field_border_width-value"
+							data-slider-label-for="frm_field_border_width-value"
+							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['field_border_width'] ) ? 'for="frm_field_border_width-value"' : ''; ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -309,7 +310,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></l
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_border_width_error-value"
+							data-slider-label-for="frm_border_width_error-value"
+							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['border_width_error'] ) ? 'for="frm_border_width_error-value"' : ''; ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_field-description.php b/classes/views/styles/_field-description.php
index a2b0134d15..abb54e5aef 100644
--- a/classes/views/styles/_field-description.php
+++ b/classes/views/styles/_field-description.php
@@ -23,7 +23,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_description_font_size-value"
+		data-slider-label-for="frm_description_font_size-value"
+		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['description_font_size'] ) ? 'for="frm_description_font_size-value"' : ''; ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_field-labels.php b/classes/views/styles/_field-labels.php
index fa476ee687..eaea6375a1 100644
--- a/classes/views/styles/_field-labels.php
+++ b/classes/views/styles/_field-labels.php
@@ -37,7 +37,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_font_size-value"
+							data-slider-label-for="frm_font_size-value"
+							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['font_size'] ) ? 'for="frm_font_size-value"' : ''; ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -109,7 +110,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Align', 'formidable' ); ?></la
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_width-value"
+							data-slider-label-for="frm_width-value"
+							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['width'] ) ? 'for="frm_width-value"' : ''; ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field frm-md-z-index">
diff --git a/classes/views/styles/_field-sizes.php b/classes/views/styles/_field-sizes.php
index 5da73a0cf1..bda970e10a 100644
--- a/classes/views/styles/_field-sizes.php
+++ b/classes/views/styles/_field-sizes.php
@@ -5,7 +5,8 @@
 ?>
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_field_font_size-value"
+		data-slider-label-for="frm_field_font_size-value"
+		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['field_font_size'] ) ? 'for="frm_field_font_size-value"' : ''; ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -41,7 +42,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></l
 
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_field_height-value"
+		data-slider-label-for="frm_field_height-value"
+		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['field_height'] ) ? 'for="frm_field_height-value"' : ''; ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -58,7 +60,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></l
 </div>
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_field_width-value"
+		data-slider-label-for="frm_field_width-value"
+		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['field_width'] ) ? 'for="frm_field_width-value"' : ''; ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -111,7 +114,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Margin', 'formidable' ); ?></l
 </div>
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_border_radius-value"
+		data-slider-label-for="frm_border_radius-value"
+		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['border_radius'] ) ? 'for="frm_border_radius-value"' : ''; ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_form-description.php b/classes/views/styles/_form-description.php
index 6e834f0d38..1589827a56 100644
--- a/classes/views/styles/_form-description.php
+++ b/classes/views/styles/_form-description.php
@@ -6,7 +6,8 @@
 
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_form_desc_size-value"
+		data-slider-label-for="frm_form_desc_size-value"
+		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['form_desc_size'] ) ? 'for="frm_form_desc_size-value"' : ''; ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?>
 	</label>
 </div>
diff --git a/classes/views/styles/_form-messages.php b/classes/views/styles/_form-messages.php
index 23211b0752..749d2c5e1a 100644
--- a/classes/views/styles/_form-messages.php
+++ b/classes/views/styles/_form-messages.php
@@ -73,7 +73,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_success_font_size-value"
+							data-slider-label-for="frm_success_font_size-value"
+							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['success_font_size'] ) ? 'for="frm_success_font_size-value"' : ''; ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -149,7 +150,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_error_font_size-value"
+							data-slider-label-for="frm_error_font_size-value"
+							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['error_font_size'] ) ? 'for="frm_error_font_size-value"' : ''; ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_form-title.php b/classes/views/styles/_form-title.php
index 0b1f34cc5c..fe9cb8253b 100644
--- a/classes/views/styles/_form-title.php
+++ b/classes/views/styles/_form-title.php
@@ -23,7 +23,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_title_size-value"
+		data-slider-label-for="frm_title_size-value"
+		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['title_size'] ) ? 'for="frm_title_size-value"' : ''; ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_general.php b/classes/views/styles/_general.php
index 5508b9d080..37c61b94d7 100644
--- a/classes/views/styles/_general.php
+++ b/classes/views/styles/_general.php
@@ -65,7 +65,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' );
 
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_fieldset-value"
+		data-slider-label-for="frm_fieldset-value"
+		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['fieldset'] ) ? 'for="frm_fieldset-value"' : ''; ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -102,7 +103,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></
 
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_form_width-value"
+		data-slider-label-for="frm_form_width-value"
+		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['form_width'] ) ? 'for="frm_form_width-value"' : ''; ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Form Width', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_quick-settings.php b/classes/views/styles/_quick-settings.php
index a86ece648e..9c3f6f71a9 100644
--- a/classes/views/styles/_quick-settings.php
+++ b/classes/views/styles/_quick-settings.php
@@ -161,7 +161,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Input Field Padding', 'formida
 <hr class="frm12"/>
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_base_font_size-value"
+		data-slider-label-for="frm_base_font_size-value"
+		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['base_font_size'] ) ? 'for="frm_base_font_size-value"' : ''; ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Base Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -207,7 +208,8 @@ class="frm-style-item-heading"><?php esc_html_e( 'Field Shape', 'formidable' );
 
 <div class="frm5 frm_form_field frm_hidden" data-frm-element="field-shape-corner-radius">
 	<label
-		for="frm_style_qsettings_border_radius-value"
+		data-slider-label-for="frm_style_qsettings_border_radius-value"
+		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['border_radius'] ) ? 'for="frm_style_qsettings_border_radius-value"' : ''; ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field frm_hidden frm-md-z-index" data-frm-element="field-shape-corner-radius">
diff --git a/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js b/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
index d0e798715e..3e268ed6d9 100644
--- a/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
+++ b/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
@@ -30,6 +30,33 @@ describe( 'Style builder labels focus their visible/interactive control', () =>
 		cy.focused().should( 'have.id', 'frm_fieldset-value' );
 	} );
 
+	it( 'A slider label outside Width/Height also drops its focus target once its unit is cleared to "Not set"', () => {
+		cy.intercept( 'POST', '**/admin-ajax.php', req => {
+			if ( req.body?.includes( 'action=frm_change_styling' ) ) {
+				req.alias = 'changeStyling';
+			}
+		} );
+
+		cy.visit( '/wp-admin/admin.php?page=formidable-styles&section=advanced-settings' );
+		cy.get( '#general-style' ).should( 'have.class', 'open' );
+
+		cy.log( '"Border Width" (frm_fieldset) ships with a measured default, so the label starts wired up' );
+		cy.get( '[data-slider-label-for="frm_fieldset-value"]' ).should( 'have.attr', 'for', 'frm_fieldset-value' );
+
+		cy.log( 'Clearing the unit to "Not set" disables the value input and drops the label\'s focus target' );
+		cy.get( '#frm_fieldset' ).closest( '.frm-slider-component' ).find( '.frm-slider-value select' ).select( '' );
+		cy.wait( '@changeStyling', { timeout: 10000 } );
+		cy.get( '#frm_fieldset-value' ).should( 'be.disabled' );
+		cy.get( '[data-slider-label-for="frm_fieldset-value"]' ).should( 'not.have.attr', 'for' );
+
+		cy.log( 'Choosing a measured unit again re-associates the label with the now-enabled input' );
+		cy.get( '#frm_fieldset' ).closest( '.frm-slider-component' ).find( '.frm-slider-value select' ).select( 'px' );
+		cy.wait( '@changeStyling', { timeout: 10000 } );
+		cy.get( '[data-slider-label-for="frm_fieldset-value"]' ).should( 'have.attr', 'for', 'frm_fieldset-value' );
+		cy.get( '[data-slider-label-for="frm_fieldset-value"]' ).click();
+		cy.focused().should( 'have.id', 'frm_fieldset-value' );
+	} );
+
 	it( 'A "Width"/"Height" label targets nothing while its unit defaults to "auto", and gets a working focus target once a measured unit is chosen', () => {
 		cy.intercept( 'POST', '**/admin-ajax.php', req => {
 			if ( req.body?.includes( 'action=frm_change_styling' ) ) {

From 510d6a442dbc377a96093d2ba9beac0745e37e0e Mon Sep 17 00:00:00 2001
From: "vivi-the-going-merry[bot]"
 <308115520+vivi-the-going-merry[bot]@users.noreply.github.com>
Date: Wed, 30 Sep 2026 11:38:47 -0600
Subject: [PATCH 07/14] Give the Styles page first element lookups a 10s
 timeout in the label focus spec

CI shard 1 timed out after 4s waiting for the Styles page markup; sliderComponent.cy.js
already uses 10s for the same first lookup.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js b/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
index 3e268ed6d9..38660fdc13 100644
--- a/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
+++ b/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
@@ -1,4 +1,7 @@
 describe( 'Style builder labels focus their visible/interactive control', () => {
+	// The Styles page is slow to render on a cold CI run, longer than the 4s default.
+	const STYLES_PAGE_TIMEOUT = 10000;
+
 	beforeEach( () => {
 		cy.login();
 		cy.viewport( 1280, 1600 );
@@ -15,14 +18,14 @@ describe( 'Style builder labels focus their visible/interactive control', () =>
 		// swatch button intentionally reveals it again afterward as WP core's own manual hex
 		// entry field (color-picker.js `open()` un-hides `.wp-picker-input-wrap`), so asserting
 		// it stays hidden post-click would fail against WP's own by-design behavior.
-		cy.get( '#frm_style_qsettings_submit_bg_color' ).should( 'not.be.visible' );
+		cy.get( '#frm_style_qsettings_submit_bg_color', { timeout: STYLES_PAGE_TIMEOUT } ).should( 'not.be.visible' );
 		cy.get( 'label[for="frm_style_qsettings_submit_bg_color_visible"]' ).click();
 		cy.focused().should( 'have.class', 'wp-color-result' );
 	} );
 
 	it( 'Clicking a single-value slider\'s own label focuses the visible number input, not the hidden real input', () => {
 		cy.visit( '/wp-admin/admin.php?page=formidable-styles&section=advanced-settings' );
-		cy.get( '#general-style' ).should( 'have.class', 'open' );
+		cy.get( '#general-style', { timeout: STYLES_PAGE_TIMEOUT } ).should( 'have.class', 'open' );
 
 		// "Border Width" lives directly in the General section, open by default.
 		cy.get( 'label[for="frm_fieldset-value"]' ).click();
@@ -38,7 +41,7 @@ describe( 'Style builder labels focus their visible/interactive control', () =>
 		} );
 
 		cy.visit( '/wp-admin/admin.php?page=formidable-styles&section=advanced-settings' );
-		cy.get( '#general-style' ).should( 'have.class', 'open' );
+		cy.get( '#general-style', { timeout: STYLES_PAGE_TIMEOUT } ).should( 'have.class', 'open' );
 
 		cy.log( '"Border Width" (frm_fieldset) ships with a measured default, so the label starts wired up' );
 		cy.get( '[data-slider-label-for="frm_fieldset-value"]' ).should( 'have.attr', 'for', 'frm_fieldset-value' );
@@ -65,7 +68,7 @@ describe( 'Style builder labels focus their visible/interactive control', () =>
 		} );
 
 		cy.visit( '/wp-admin/admin.php?page=formidable-styles&section=advanced-settings' );
-		cy.get( '#buttons-style button[aria-label="Buttons"]' ).click();
+		cy.get( '#buttons-style button[aria-label="Buttons"]', { timeout: STYLES_PAGE_TIMEOUT } ).click();
 		cy.get( '#frm_style_section_buttons-style' ).should( 'be.visible' );
 
 		cy.log( 'Width defaults to "auto" out of the box (FrmStyle.php), rendering the value input disabled' );

From cce54fc311035977ab977cc63463dcea5f4222b0 Mon Sep 17 00:00:00 2001
From: Mike Letellier <mike@crabcyb.org>
Date: Thu, 1 Oct 2026 14:45:56 -0300
Subject: [PATCH 08/14] New maybe echo for

---
 classes/views/styles/_buttons.php             | 10 +++++-----
 .../views/styles/_check-box-radio-fields.php  |  2 +-
 classes/views/styles/_field-colors.php        |  4 ++--
 classes/views/styles/_field-description.php   |  2 +-
 classes/views/styles/_field-labels.php        |  4 ++--
 classes/views/styles/_field-sizes.php         |  8 ++++----
 classes/views/styles/_form-description.php    |  2 +-
 classes/views/styles/_form-messages.php       |  4 ++--
 classes/views/styles/_form-title.php          |  2 +-
 classes/views/styles/_general.php             |  4 ++--
 classes/views/styles/_quick-settings.php      |  4 ++--
 .../components/FrmSliderStyleComponent.php    | 19 +++++++++++++++++++
 12 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/classes/views/styles/_buttons.php b/classes/views/styles/_buttons.php
index f7791fea78..09f00f4c1e 100644
--- a/classes/views/styles/_buttons.php
+++ b/classes/views/styles/_buttons.php
@@ -54,7 +54,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
 					<div class="frm5 frm_form_field">
 						<label
 							data-slider-label-for="frm_submit_font_size-value"
-							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['submit_font_size'] ) ? 'for="frm_submit_font_size-value"' : ''; ?>
+							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'submit_font_size', 'frm_submit_font_size-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -91,7 +91,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></l
 					<div class="frm5 frm_form_field">
 						<label
 							data-slider-label-for="frm_submit_width-value"
-							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['submit_width'] ) ? 'for="frm_submit_width-value"' : ''; ?>
+							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'submit_width', 'frm_submit_width-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -111,7 +111,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></la
 					<div class="frm5 frm_form_field">
 						<label
 							data-slider-label-for="frm_submit_height-value"
-							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['submit_height'] ) ? 'for="frm_submit_height-value"' : ''; ?>
+							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'submit_height', 'frm_submit_height-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -149,7 +149,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' );
 					<div class="frm5 frm_form_field">
 						<label
 							data-slider-label-for="frm_submit_border_width-value"
-							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['submit_border_width'] ) ? 'for="frm_submit_border_width-value"' : ''; ?>
+							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'submit_border_width', 'frm_submit_border_width-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -186,7 +186,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Shadow', 'formidable' ); ?></l
 					<div class="frm5 frm_form_field">
 						<label
 							data-slider-label-for="frm_submit_border_radius-value"
-							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['submit_border_radius'] ) ? 'for="frm_submit_border_radius-value"' : ''; ?>
+							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'submit_border_radius', 'frm_submit_border_radius-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_check-box-radio-fields.php b/classes/views/styles/_check-box-radio-fields.php
index a29a923493..843700f233 100644
--- a/classes/views/styles/_check-box-radio-fields.php
+++ b/classes/views/styles/_check-box-radio-fields.php
@@ -24,7 +24,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 <div class="frm5 frm_form_field">
 	<label
 		data-slider-label-for="frm_check_font_size-value"
-		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['check_font_size'] ) ? 'for="frm_check_font_size-value"' : ''; ?>
+		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'check_font_size', 'frm_check_font_size-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_field-colors.php b/classes/views/styles/_field-colors.php
index 6d2e60094d..e68b384ff9 100644
--- a/classes/views/styles/_field-colors.php
+++ b/classes/views/styles/_field-colors.php
@@ -76,7 +76,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></l
 					<div class="frm5 frm_form_field">
 						<label
 							data-slider-label-for="frm_field_border_width-value"
-							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['field_border_width'] ) ? 'for="frm_field_border_width-value"' : ''; ?>
+							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'field_border_width', 'frm_field_border_width-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -312,7 +312,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></l
 					<div class="frm5 frm_form_field">
 						<label
 							data-slider-label-for="frm_border_width_error-value"
-							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['border_width_error'] ) ? 'for="frm_border_width_error-value"' : ''; ?>
+							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'border_width_error', 'frm_border_width_error-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_field-description.php b/classes/views/styles/_field-description.php
index df5ff82c0f..9d8deb46ea 100644
--- a/classes/views/styles/_field-description.php
+++ b/classes/views/styles/_field-description.php
@@ -24,7 +24,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 <div class="frm5 frm_form_field">
 	<label
 		data-slider-label-for="frm_description_font_size-value"
-		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['description_font_size'] ) ? 'for="frm_description_font_size-value"' : ''; ?>
+		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'description_font_size', 'frm_description_font_size-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_field-labels.php b/classes/views/styles/_field-labels.php
index 12c47585b8..c3d5fdf46e 100644
--- a/classes/views/styles/_field-labels.php
+++ b/classes/views/styles/_field-labels.php
@@ -38,7 +38,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 					<div class="frm5 frm_form_field">
 						<label
 							data-slider-label-for="frm_font_size-value"
-							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['font_size'] ) ? 'for="frm_font_size-value"' : ''; ?>
+							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'font_size', 'frm_font_size-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -109,7 +109,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Align', 'formidable' ); ?></la
 					<div class="frm5 frm_form_field">
 						<label
 							data-slider-label-for="frm_width-value"
-							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['width'] ) ? 'for="frm_width-value"' : ''; ?>
+							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'width', 'frm_width-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field frm-md-z-index">
diff --git a/classes/views/styles/_field-sizes.php b/classes/views/styles/_field-sizes.php
index d2d01498d7..a73ebb07d3 100644
--- a/classes/views/styles/_field-sizes.php
+++ b/classes/views/styles/_field-sizes.php
@@ -6,7 +6,7 @@
 <div class="frm5 frm_form_field">
 	<label
 		data-slider-label-for="frm_field_font_size-value"
-		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['field_font_size'] ) ? 'for="frm_field_font_size-value"' : ''; ?>
+		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'field_font_size', 'frm_field_font_size-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -43,7 +43,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></l
 <div class="frm5 frm_form_field">
 	<label
 		data-slider-label-for="frm_field_height-value"
-		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['field_height'] ) ? 'for="frm_field_height-value"' : ''; ?>
+		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'field_height', 'frm_field_height-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -61,7 +61,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></l
 <div class="frm5 frm_form_field">
 	<label
 		data-slider-label-for="frm_field_width-value"
-		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['field_width'] ) ? 'for="frm_field_width-value"' : ''; ?>
+		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'field_width', 'frm_field_width-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -113,7 +113,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Margin', 'formidable' ); ?></l
 <div class="frm5 frm_form_field">
 	<label
 		data-slider-label-for="frm_border_radius-value"
-		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['border_radius'] ) ? 'for="frm_border_radius-value"' : ''; ?>
+		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'border_radius', 'frm_border_radius-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_form-description.php b/classes/views/styles/_form-description.php
index fa64975202..d46d98cc18 100644
--- a/classes/views/styles/_form-description.php
+++ b/classes/views/styles/_form-description.php
@@ -7,7 +7,7 @@
 <div class="frm5 frm_form_field">
 	<label
 		data-slider-label-for="frm_form_desc_size-value"
-		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['form_desc_size'] ) ? 'for="frm_form_desc_size-value"' : ''; ?>
+		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'form_desc_size', 'frm_form_desc_size-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?>
 	</label>
 </div>
diff --git a/classes/views/styles/_form-messages.php b/classes/views/styles/_form-messages.php
index 749d2c5e1a..77b6e67cb1 100644
--- a/classes/views/styles/_form-messages.php
+++ b/classes/views/styles/_form-messages.php
@@ -74,7 +74,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
 					<div class="frm5 frm_form_field">
 						<label
 							data-slider-label-for="frm_success_font_size-value"
-							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['success_font_size'] ) ? 'for="frm_success_font_size-value"' : ''; ?>
+							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'success_font_size', 'frm_success_font_size-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -151,7 +151,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
 					<div class="frm5 frm_form_field">
 						<label
 							data-slider-label-for="frm_error_font_size-value"
-							<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['error_font_size'] ) ? 'for="frm_error_font_size-value"' : ''; ?>
+							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'error_font_size', 'frm_error_font_size-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_form-title.php b/classes/views/styles/_form-title.php
index 5521fc670e..e4a74c93ba 100644
--- a/classes/views/styles/_form-title.php
+++ b/classes/views/styles/_form-title.php
@@ -24,7 +24,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 <div class="frm5 frm_form_field">
 	<label
 		data-slider-label-for="frm_title_size-value"
-		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['title_size'] ) ? 'for="frm_title_size-value"' : ''; ?>
+		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'title_size', 'frm_title_size-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_general.php b/classes/views/styles/_general.php
index 5a2494ca77..dbad303288 100644
--- a/classes/views/styles/_general.php
+++ b/classes/views/styles/_general.php
@@ -66,7 +66,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' );
 <div class="frm5 frm_form_field">
 	<label
 		data-slider-label-for="frm_fieldset-value"
-		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['fieldset'] ) ? 'for="frm_fieldset-value"' : ''; ?>
+		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'fieldset', 'frm_fieldset-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -104,7 +104,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></
 <div class="frm5 frm_form_field">
 	<label
 		data-slider-label-for="frm_form_width-value"
-		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['form_width'] ) ? 'for="frm_form_width-value"' : ''; ?>
+		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'form_width', 'frm_form_width-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Form Width', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_quick-settings.php b/classes/views/styles/_quick-settings.php
index 1704731d05..09a0fbba3b 100644
--- a/classes/views/styles/_quick-settings.php
+++ b/classes/views/styles/_quick-settings.php
@@ -169,7 +169,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Input Field Padding', 'formida
 <div class="frm5 frm_form_field">
 	<label
 		data-slider-label-for="frm_base_font_size-value"
-		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['base_font_size'] ) ? 'for="frm_base_font_size-value"' : ''; ?>
+		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'base_font_size', 'frm_base_font_size-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Base Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -213,7 +213,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Field Shape', 'formidable' );
 <div class="frm5 frm_form_field frm_hidden" data-frm-element="field-shape-corner-radius">
 	<label
 		data-slider-label-for="frm_style_qsettings_border_radius-value"
-		<?php echo FrmSliderStyleComponent::is_value_measured( $style->post_content['border_radius'] ) ? 'for="frm_style_qsettings_border_radius-value"' : ''; ?>
+		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'border_radius', 'frm_style_qsettings_border_radius-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field frm_hidden frm-md-z-index" data-frm-element="field-shape-corner-radius">
diff --git a/classes/views/styles/components/FrmSliderStyleComponent.php b/classes/views/styles/components/FrmSliderStyleComponent.php
index 59938633c5..b0d95b9e0c 100644
--- a/classes/views/styles/components/FrmSliderStyleComponent.php
+++ b/classes/views/styles/components/FrmSliderStyleComponent.php
@@ -384,6 +384,25 @@ public static function is_value_measured( $value ) {
 		return self::is_measured_unit( self::detect_unit_measurement( $value ) );
 	}
 
+	/**
+	 * Print a label's for attribute when its slider value input is enabled.
+	 *
+	 * @since x.x
+	 *
+	 * @param object $style    The style containing the saved values in post_content.
+	 * @param string $key      The style setting key.
+	 * @param string $input_id The slider value input ID.
+	 *
+	 * @return void
+	 */
+	public static function maybe_echo_for( $style, $key, $input_id ) {
+		if ( ! self::is_value_measured( $style->post_content[ $key ] ) ) {
+			return;
+		}
+
+		FrmAppHelper::array_to_html_params( array( 'for' => $input_id ), true );
+	}
+
 	/**
 	 * Init the field icon
 	 *

From 8510e0b51374168fa8b8f23bae6d49e34af1fa75 Mon Sep 17 00:00:00 2001
From: Mike Letellier <mike@crabcyb.org>
Date: Thu, 1 Oct 2026 14:56:29 -0300
Subject: [PATCH 09/14] Simplify further

---
 classes/views/styles/_buttons.php             | 15 +++++--------
 .../views/styles/_check-box-radio-fields.php  |  3 +--
 classes/views/styles/_field-colors.php        |  6 ++----
 classes/views/styles/_field-description.php   |  3 +--
 classes/views/styles/_field-labels.php        |  6 ++----
 classes/views/styles/_field-sizes.php         | 12 ++++-------
 classes/views/styles/_form-description.php    |  3 +--
 classes/views/styles/_form-messages.php       |  6 ++----
 classes/views/styles/_form-title.php          |  3 +--
 classes/views/styles/_general.php             |  6 ++----
 classes/views/styles/_quick-settings.php      |  6 ++----
 .../components/FrmSliderStyleComponent.php    | 21 +++++++++++++++++++
 12 files changed, 44 insertions(+), 46 deletions(-)

diff --git a/classes/views/styles/_buttons.php b/classes/views/styles/_buttons.php
index 09f00f4c1e..7bc5e9c334 100644
--- a/classes/views/styles/_buttons.php
+++ b/classes/views/styles/_buttons.php
@@ -53,8 +53,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
 
 					<div class="frm5 frm_form_field">
 						<label
-							data-slider-label-for="frm_submit_font_size-value"
-							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'submit_font_size', 'frm_submit_font_size-value' ); ?>
+							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'submit_font_size', 'frm_submit_font_size-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -90,8 +89,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></l
 
 					<div class="frm5 frm_form_field">
 						<label
-							data-slider-label-for="frm_submit_width-value"
-							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'submit_width', 'frm_submit_width-value' ); ?>
+							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'submit_width', 'frm_submit_width-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -110,8 +108,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></la
 
 					<div class="frm5 frm_form_field">
 						<label
-							data-slider-label-for="frm_submit_height-value"
-							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'submit_height', 'frm_submit_height-value' ); ?>
+							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'submit_height', 'frm_submit_height-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -148,8 +145,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' );
 
 					<div class="frm5 frm_form_field">
 						<label
-							data-slider-label-for="frm_submit_border_width-value"
-							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'submit_border_width', 'frm_submit_border_width-value' ); ?>
+							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'submit_border_width', 'frm_submit_border_width-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -185,8 +181,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Shadow', 'formidable' ); ?></l
 
 					<div class="frm5 frm_form_field">
 						<label
-							data-slider-label-for="frm_submit_border_radius-value"
-							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'submit_border_radius', 'frm_submit_border_radius-value' ); ?>
+							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'submit_border_radius', 'frm_submit_border_radius-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_check-box-radio-fields.php b/classes/views/styles/_check-box-radio-fields.php
index 843700f233..dbcc5b2ef4 100644
--- a/classes/views/styles/_check-box-radio-fields.php
+++ b/classes/views/styles/_check-box-radio-fields.php
@@ -23,8 +23,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 
 <div class="frm5 frm_form_field">
 	<label
-		data-slider-label-for="frm_check_font_size-value"
-		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'check_font_size', 'frm_check_font_size-value' ); ?>
+		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'check_font_size', 'frm_check_font_size-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_field-colors.php b/classes/views/styles/_field-colors.php
index e68b384ff9..65207af624 100644
--- a/classes/views/styles/_field-colors.php
+++ b/classes/views/styles/_field-colors.php
@@ -75,8 +75,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></l
 
 					<div class="frm5 frm_form_field">
 						<label
-							data-slider-label-for="frm_field_border_width-value"
-							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'field_border_width', 'frm_field_border_width-value' ); ?>
+							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'field_border_width', 'frm_field_border_width-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -311,8 +310,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></l
 
 					<div class="frm5 frm_form_field">
 						<label
-							data-slider-label-for="frm_border_width_error-value"
-							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'border_width_error', 'frm_border_width_error-value' ); ?>
+							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'border_width_error', 'frm_border_width_error-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_field-description.php b/classes/views/styles/_field-description.php
index 9d8deb46ea..69b3fbc6c1 100644
--- a/classes/views/styles/_field-description.php
+++ b/classes/views/styles/_field-description.php
@@ -23,8 +23,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 
 <div class="frm5 frm_form_field">
 	<label
-		data-slider-label-for="frm_description_font_size-value"
-		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'description_font_size', 'frm_description_font_size-value' ); ?>
+		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'description_font_size', 'frm_description_font_size-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_field-labels.php b/classes/views/styles/_field-labels.php
index c3d5fdf46e..e5ad974025 100644
--- a/classes/views/styles/_field-labels.php
+++ b/classes/views/styles/_field-labels.php
@@ -37,8 +37,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 
 					<div class="frm5 frm_form_field">
 						<label
-							data-slider-label-for="frm_font_size-value"
-							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'font_size', 'frm_font_size-value' ); ?>
+							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'font_size', 'frm_font_size-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -108,8 +107,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Align', 'formidable' ); ?></la
 
 					<div class="frm5 frm_form_field">
 						<label
-							data-slider-label-for="frm_width-value"
-							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'width', 'frm_width-value' ); ?>
+							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'width', 'frm_width-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field frm-md-z-index">
diff --git a/classes/views/styles/_field-sizes.php b/classes/views/styles/_field-sizes.php
index a73ebb07d3..eadc863a53 100644
--- a/classes/views/styles/_field-sizes.php
+++ b/classes/views/styles/_field-sizes.php
@@ -5,8 +5,7 @@
 ?>
 <div class="frm5 frm_form_field">
 	<label
-		data-slider-label-for="frm_field_font_size-value"
-		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'field_font_size', 'frm_field_font_size-value' ); ?>
+		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'field_font_size', 'frm_field_font_size-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -42,8 +41,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></l
 
 <div class="frm5 frm_form_field">
 	<label
-		data-slider-label-for="frm_field_height-value"
-		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'field_height', 'frm_field_height-value' ); ?>
+		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'field_height', 'frm_field_height-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -60,8 +58,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></l
 </div>
 <div class="frm5 frm_form_field">
 	<label
-		data-slider-label-for="frm_field_width-value"
-		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'field_width', 'frm_field_width-value' ); ?>
+		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'field_width', 'frm_field_width-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -112,8 +109,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Margin', 'formidable' ); ?></l
 </div>
 <div class="frm5 frm_form_field">
 	<label
-		data-slider-label-for="frm_border_radius-value"
-		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'border_radius', 'frm_border_radius-value' ); ?>
+		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'border_radius', 'frm_border_radius-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_form-description.php b/classes/views/styles/_form-description.php
index d46d98cc18..db66cede99 100644
--- a/classes/views/styles/_form-description.php
+++ b/classes/views/styles/_form-description.php
@@ -6,8 +6,7 @@
 
 <div class="frm5 frm_form_field">
 	<label
-		data-slider-label-for="frm_form_desc_size-value"
-		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'form_desc_size', 'frm_form_desc_size-value' ); ?>
+		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'form_desc_size', 'frm_form_desc_size-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?>
 	</label>
 </div>
diff --git a/classes/views/styles/_form-messages.php b/classes/views/styles/_form-messages.php
index 77b6e67cb1..5b722629ce 100644
--- a/classes/views/styles/_form-messages.php
+++ b/classes/views/styles/_form-messages.php
@@ -73,8 +73,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
 
 					<div class="frm5 frm_form_field">
 						<label
-							data-slider-label-for="frm_success_font_size-value"
-							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'success_font_size', 'frm_success_font_size-value' ); ?>
+							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'success_font_size', 'frm_success_font_size-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -150,8 +149,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
 
 					<div class="frm5 frm_form_field">
 						<label
-							data-slider-label-for="frm_error_font_size-value"
-							<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'error_font_size', 'frm_error_font_size-value' ); ?>
+							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'error_font_size', 'frm_error_font_size-value' ); ?>
 							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_form-title.php b/classes/views/styles/_form-title.php
index e4a74c93ba..b567d52ed8 100644
--- a/classes/views/styles/_form-title.php
+++ b/classes/views/styles/_form-title.php
@@ -23,8 +23,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 
 <div class="frm5 frm_form_field">
 	<label
-		data-slider-label-for="frm_title_size-value"
-		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'title_size', 'frm_title_size-value' ); ?>
+		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'title_size', 'frm_title_size-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_general.php b/classes/views/styles/_general.php
index dbad303288..efcd39dd0d 100644
--- a/classes/views/styles/_general.php
+++ b/classes/views/styles/_general.php
@@ -65,8 +65,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' );
 
 <div class="frm5 frm_form_field">
 	<label
-		data-slider-label-for="frm_fieldset-value"
-		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'fieldset', 'frm_fieldset-value' ); ?>
+		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'fieldset', 'frm_fieldset-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -103,8 +102,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></
 
 <div class="frm5 frm_form_field">
 	<label
-		data-slider-label-for="frm_form_width-value"
-		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'form_width', 'frm_form_width-value' ); ?>
+		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'form_width', 'frm_form_width-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Form Width', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_quick-settings.php b/classes/views/styles/_quick-settings.php
index 09a0fbba3b..36b473b903 100644
--- a/classes/views/styles/_quick-settings.php
+++ b/classes/views/styles/_quick-settings.php
@@ -168,8 +168,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Input Field Padding', 'formida
 <hr class="frm12"/>
 <div class="frm5 frm_form_field">
 	<label
-		data-slider-label-for="frm_base_font_size-value"
-		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'base_font_size', 'frm_base_font_size-value' ); ?>
+		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'base_font_size', 'frm_base_font_size-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Base Font Size', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -212,8 +211,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Field Shape', 'formidable' );
 
 <div class="frm5 frm_form_field frm_hidden" data-frm-element="field-shape-corner-radius">
 	<label
-		data-slider-label-for="frm_style_qsettings_border_radius-value"
-		<?php FrmSliderStyleComponent::maybe_echo_for( $style, 'border_radius', 'frm_style_qsettings_border_radius-value' ); ?>
+		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'border_radius', 'frm_style_qsettings_border_radius-value' ); ?>
 		class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field frm_hidden frm-md-z-index" data-frm-element="field-shape-corner-radius">
diff --git a/classes/views/styles/components/FrmSliderStyleComponent.php b/classes/views/styles/components/FrmSliderStyleComponent.php
index b0d95b9e0c..abbf2e2535 100644
--- a/classes/views/styles/components/FrmSliderStyleComponent.php
+++ b/classes/views/styles/components/FrmSliderStyleComponent.php
@@ -403,6 +403,27 @@ public static function maybe_echo_for( $style, $key, $input_id ) {
 		FrmAppHelper::array_to_html_params( array( 'for' => $input_id ), true );
 	}
 
+	/**
+	 * Print a slider label's target attributes, linking enabled value inputs.
+	 *
+	 * @since x.x
+	 *
+	 * @param object $style    The style containing the saved values in post_content.
+	 * @param string $key      The style setting key.
+	 * @param string $input_id The slider value input ID.
+	 *
+	 * @return void
+	 */
+	public static function echo_label_attributes( $style, $key, $input_id ) {
+		$attributes = array( 'data-slider-label-for' => $input_id );
+
+		if ( self::is_value_measured( $style->post_content[ $key ] ) ) {
+			$attributes['for'] = $input_id;
+		}
+
+		FrmAppHelper::array_to_html_params( $attributes, true );
+	}
+
 	/**
 	 * Init the field icon
 	 *

From f8fe922195d83be10bae1f2d80feeff8ff2581cc Mon Sep 17 00:00:00 2001
From: Mike Letellier <mike@crabcyb.org>
Date: Thu, 1 Oct 2026 14:59:49 -0300
Subject: [PATCH 10/14] Move the whole label into a function

---
 classes/views/styles/_buttons.php             | 20 +++++--------------
 .../views/styles/_check-box-radio-fields.php  |  4 +---
 classes/views/styles/_field-colors.php        |  8 ++------
 classes/views/styles/_field-description.php   |  4 +---
 classes/views/styles/_field-labels.php        |  8 ++------
 classes/views/styles/_field-sizes.php         | 16 ++++-----------
 classes/views/styles/_form-description.php    |  5 +----
 classes/views/styles/_form-messages.php       |  8 ++------
 classes/views/styles/_form-title.php          |  4 +---
 classes/views/styles/_general.php             |  8 ++------
 classes/views/styles/_quick-settings.php      |  8 ++------
 .../components/FrmSliderStyleComponent.php    | 18 +++++++++++++++++
 12 files changed, 41 insertions(+), 70 deletions(-)

diff --git a/classes/views/styles/_buttons.php b/classes/views/styles/_buttons.php
index 7bc5e9c334..125ece06f0 100644
--- a/classes/views/styles/_buttons.php
+++ b/classes/views/styles/_buttons.php
@@ -52,9 +52,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label
-							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'submit_font_size', 'frm_submit_font_size-value' ); ?>
-							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
+						<?php FrmSliderStyleComponent::style_item_heading( $style, 'submit_font_size', 'frm_submit_font_size-value', __( 'Font Size', 'formidable' ) ); ?>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -88,9 +86,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></l
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label
-							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'submit_width', 'frm_submit_width-value' ); ?>
-							class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
+						<?php FrmSliderStyleComponent::style_item_heading( $style, 'submit_width', 'frm_submit_width-value', __( 'Width', 'formidable' ) ); ?>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -107,9 +103,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></la
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label
-							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'submit_height', 'frm_submit_height-value' ); ?>
-							class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></label>
+						<?php FrmSliderStyleComponent::style_item_heading( $style, 'submit_height', 'frm_submit_height-value', __( 'Height', 'formidable' ) ); ?>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -144,9 +138,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' );
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label
-							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'submit_border_width', 'frm_submit_border_width-value' ); ?>
-							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
+						<?php FrmSliderStyleComponent::style_item_heading( $style, 'submit_border_width', 'frm_submit_border_width-value', __( 'Border Width', 'formidable' ) ); ?>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -180,9 +172,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Shadow', 'formidable' ); ?></l
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label
-							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'submit_border_radius', 'frm_submit_border_radius-value' ); ?>
-							class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
+						<?php FrmSliderStyleComponent::style_item_heading( $style, 'submit_border_radius', 'frm_submit_border_radius-value', __( 'Corner Radius', 'formidable' ) ); ?>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
diff --git a/classes/views/styles/_check-box-radio-fields.php b/classes/views/styles/_check-box-radio-fields.php
index dbcc5b2ef4..677985e454 100644
--- a/classes/views/styles/_check-box-radio-fields.php
+++ b/classes/views/styles/_check-box-radio-fields.php
@@ -22,9 +22,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 </div>
 
 <div class="frm5 frm_form_field">
-	<label
-		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'check_font_size', 'frm_check_font_size-value' ); ?>
-		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'check_font_size', 'frm_check_font_size-value', __( 'Font Size', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
diff --git a/classes/views/styles/_field-colors.php b/classes/views/styles/_field-colors.php
index 65207af624..ab428dd939 100644
--- a/classes/views/styles/_field-colors.php
+++ b/classes/views/styles/_field-colors.php
@@ -74,9 +74,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></l
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label
-							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'field_border_width', 'frm_field_border_width-value' ); ?>
-							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
+						<?php FrmSliderStyleComponent::style_item_heading( $style, 'field_border_width', 'frm_field_border_width-value', __( 'Border Width', 'formidable' ) ); ?>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -309,9 +307,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></l
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label
-							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'border_width_error', 'frm_border_width_error-value' ); ?>
-							class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
+						<?php FrmSliderStyleComponent::style_item_heading( $style, 'border_width_error', 'frm_border_width_error-value', __( 'Border Width', 'formidable' ) ); ?>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
diff --git a/classes/views/styles/_field-description.php b/classes/views/styles/_field-description.php
index 69b3fbc6c1..095d9165bb 100644
--- a/classes/views/styles/_field-description.php
+++ b/classes/views/styles/_field-description.php
@@ -22,9 +22,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 </div>
 
 <div class="frm5 frm_form_field">
-	<label
-		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'description_font_size', 'frm_description_font_size-value' ); ?>
-		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'description_font_size', 'frm_description_font_size-value', __( 'Font Size', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
diff --git a/classes/views/styles/_field-labels.php b/classes/views/styles/_field-labels.php
index e5ad974025..3a967129fa 100644
--- a/classes/views/styles/_field-labels.php
+++ b/classes/views/styles/_field-labels.php
@@ -36,9 +36,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label
-							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'font_size', 'frm_font_size-value' ); ?>
-							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
+						<?php FrmSliderStyleComponent::style_item_heading( $style, 'font_size', 'frm_font_size-value', __( 'Font Size', 'formidable' ) ); ?>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -106,9 +104,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Align', 'formidable' ); ?></la
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label
-							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'width', 'frm_width-value' ); ?>
-							class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
+						<?php FrmSliderStyleComponent::style_item_heading( $style, 'width', 'frm_width-value', __( 'Width', 'formidable' ) ); ?>
 					</div>
 					<div class="frm7 frm_form_field frm-md-z-index">
 						<?php
diff --git a/classes/views/styles/_field-sizes.php b/classes/views/styles/_field-sizes.php
index eadc863a53..8de74442f8 100644
--- a/classes/views/styles/_field-sizes.php
+++ b/classes/views/styles/_field-sizes.php
@@ -4,9 +4,7 @@
 }
 ?>
 <div class="frm5 frm_form_field">
-	<label
-		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'field_font_size', 'frm_field_font_size-value' ); ?>
-		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'field_font_size', 'frm_field_font_size-value', __( 'Font Size', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -40,9 +38,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></l
 </div>
 
 <div class="frm5 frm_form_field">
-	<label
-		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'field_height', 'frm_field_height-value' ); ?>
-		class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'field_height', 'frm_field_height-value', __( 'Height', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -57,9 +53,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Height', 'formidable' ); ?></l
 	?>
 </div>
 <div class="frm5 frm_form_field">
-	<label
-		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'field_width', 'frm_field_width-value' ); ?>
-		class="frm-style-item-heading"><?php esc_html_e( 'Width', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'field_width', 'frm_field_width-value', __( 'Width', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -108,9 +102,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Margin', 'formidable' ); ?></l
 	?>
 </div>
 <div class="frm5 frm_form_field">
-	<label
-		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'border_radius', 'frm_border_radius-value' ); ?>
-		class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'border_radius', 'frm_border_radius-value', __( 'Corner Radius', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
diff --git a/classes/views/styles/_form-description.php b/classes/views/styles/_form-description.php
index db66cede99..01888678c6 100644
--- a/classes/views/styles/_form-description.php
+++ b/classes/views/styles/_form-description.php
@@ -5,10 +5,7 @@
 ?>
 
 <div class="frm5 frm_form_field">
-	<label
-		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'form_desc_size', 'frm_form_desc_size-value' ); ?>
-		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?>
-	</label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'form_desc_size', 'frm_form_desc_size-value', __( 'Font Size', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
diff --git a/classes/views/styles/_form-messages.php b/classes/views/styles/_form-messages.php
index 5b722629ce..9001d8c909 100644
--- a/classes/views/styles/_form-messages.php
+++ b/classes/views/styles/_form-messages.php
@@ -72,9 +72,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label
-							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'success_font_size', 'frm_success_font_size-value' ); ?>
-							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
+						<?php FrmSliderStyleComponent::style_item_heading( $style, 'success_font_size', 'frm_success_font_size-value', __( 'Font Size', 'formidable' ) ); ?>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
@@ -148,9 +146,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label
-							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'error_font_size', 'frm_error_font_size-value' ); ?>
-							class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
+						<?php FrmSliderStyleComponent::style_item_heading( $style, 'error_font_size', 'frm_error_font_size-value', __( 'Font Size', 'formidable' ) ); ?>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
diff --git a/classes/views/styles/_form-title.php b/classes/views/styles/_form-title.php
index b567d52ed8..3c6627aa72 100644
--- a/classes/views/styles/_form-title.php
+++ b/classes/views/styles/_form-title.php
@@ -22,9 +22,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 </div>
 
 <div class="frm5 frm_form_field">
-	<label
-		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'title_size', 'frm_title_size-value' ); ?>
-		class="frm-style-item-heading"><?php esc_html_e( 'Font Size', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'title_size', 'frm_title_size-value', __( 'Font Size', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
diff --git a/classes/views/styles/_general.php b/classes/views/styles/_general.php
index efcd39dd0d..1d67fac6b9 100644
--- a/classes/views/styles/_general.php
+++ b/classes/views/styles/_general.php
@@ -64,9 +64,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' );
 </div>
 
 <div class="frm5 frm_form_field">
-	<label
-		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'fieldset', 'frm_fieldset-value' ); ?>
-		class="frm-style-item-heading"><?php esc_html_e( 'Border Width', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'fieldset', 'frm_fieldset-value', __( 'Border Width', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -101,9 +99,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></
 </div>
 
 <div class="frm5 frm_form_field">
-	<label
-		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'form_width', 'frm_form_width-value' ); ?>
-		class="frm-style-item-heading"><?php esc_html_e( 'Form Width', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'form_width', 'frm_form_width-value', __( 'Form Width', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
diff --git a/classes/views/styles/_quick-settings.php b/classes/views/styles/_quick-settings.php
index 36b473b903..6120ba3863 100644
--- a/classes/views/styles/_quick-settings.php
+++ b/classes/views/styles/_quick-settings.php
@@ -167,9 +167,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Input Field Padding', 'formida
 </div>
 <hr class="frm12"/>
 <div class="frm5 frm_form_field">
-	<label
-		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'base_font_size', 'frm_base_font_size-value' ); ?>
-		class="frm-style-item-heading"><?php esc_html_e( 'Base Font Size', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'base_font_size', 'frm_base_font_size-value', __( 'Base Font Size', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -210,9 +208,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Field Shape', 'formidable' );
 </div>
 
 <div class="frm5 frm_form_field frm_hidden" data-frm-element="field-shape-corner-radius">
-	<label
-		<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'border_radius', 'frm_style_qsettings_border_radius-value' ); ?>
-		class="frm-style-item-heading"><?php esc_html_e( 'Corner Radius', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'border_radius', 'frm_style_qsettings_border_radius-value', __( 'Corner Radius', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field frm_hidden frm-md-z-index" data-frm-element="field-shape-corner-radius">
 	<?php
diff --git a/classes/views/styles/components/FrmSliderStyleComponent.php b/classes/views/styles/components/FrmSliderStyleComponent.php
index abbf2e2535..98a612b013 100644
--- a/classes/views/styles/components/FrmSliderStyleComponent.php
+++ b/classes/views/styles/components/FrmSliderStyleComponent.php
@@ -424,6 +424,24 @@ public static function echo_label_attributes( $style, $key, $input_id ) {
 		FrmAppHelper::array_to_html_params( $attributes, true );
 	}
 
+	/**
+	 * Print a style item heading for a slider value input.
+	 *
+	 * @since x.x
+	 *
+	 * @param object $style    The style containing the saved values in post_content.
+	 * @param string $key      The style setting key.
+	 * @param string $input_id The slider value input ID.
+	 * @param string $label    The translated heading text.
+	 *
+	 * @return void
+	 */
+	public static function style_item_heading( $style, $key, $input_id, $label ) {
+		echo '<label class="frm-style-item-heading"';
+		self::echo_label_attributes( $style, $key, $input_id );
+		echo '>', esc_html( $label ), '</label>';
+	}
+
 	/**
 	 * Init the field icon
 	 *

From c44309acdce2e35605d9fab97c2cf246265dbd5b Mon Sep 17 00:00:00 2001
From: Mike Letellier <mike@crabcyb.org>
Date: Thu, 1 Oct 2026 15:08:02 -0300
Subject: [PATCH 11/14] Update additional labels

---
 classes/views/styles/_buttons.php                           | 6 ++----
 classes/views/styles/_field-colors.php                      | 2 +-
 classes/views/styles/_field-description.php                 | 3 +--
 classes/views/styles/_field-labels.php                      | 3 +--
 classes/views/styles/_field-sizes.php                       | 6 ++----
 classes/views/styles/_form-description.php                  | 6 +++---
 classes/views/styles/_form-title.php                        | 3 +--
 classes/views/styles/_general.php                           | 4 +---
 classes/views/styles/_quick-settings.php                    | 6 ++----
 classes/views/styles/components/FrmSliderStyleComponent.php | 5 +++--
 classes/views/styles/components/templates/slider.php        | 4 ++--
 11 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/classes/views/styles/_buttons.php b/classes/views/styles/_buttons.php
index 125ece06f0..acf16e6bea 100644
--- a/classes/views/styles/_buttons.php
+++ b/classes/views/styles/_buttons.php
@@ -189,6 +189,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Shadow', 'formidable' ); ?></l
 
 					<div class="frm5 frm_form_field">
 						<label
+							<?php FrmSliderStyleComponent::echo_label_attributes( $style, 'submit_margin', 'frm_submit_margin-value' ); ?>
 							class="frm-style-item-heading">
 							<?php esc_html_e( 'Margin', 'formidable' ); ?>
 							<span class="frm_help frmfont frm_tooltip_icon" data-placement="right" data-container="body" data-original-title="<?php esc_attr_e( 'Used for navigation buttons too', 'formidable' ); ?>"></span>
@@ -209,10 +210,7 @@ class="frm-style-item-heading">
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label
-							class="frm-style-item-heading">
-							<?php esc_html_e( 'Padding', 'formidable' ); ?>
-						</label>
+						<?php FrmSliderStyleComponent::style_item_heading( $style, 'submit_padding', 'frm_submit_padding-value', __( 'Padding', 'formidable' ) ); ?>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
diff --git a/classes/views/styles/_field-colors.php b/classes/views/styles/_field-colors.php
index ab428dd939..c5d15a2033 100644
--- a/classes/views/styles/_field-colors.php
+++ b/classes/views/styles/_field-colors.php
@@ -173,7 +173,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></l
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label class="frm-style-item-heading"><?php esc_html_e( 'Remove Box Shadow', 'formidable' ); ?></label>
+						<label for="remove_box_shadow_active" id="remove_box_shadow_active_label" class="frm-style-item-heading"><?php esc_html_e( 'Remove Box Shadow', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field frm-style-component">
 						<?php
diff --git a/classes/views/styles/_field-description.php b/classes/views/styles/_field-description.php
index 095d9165bb..36cd1aabf6 100644
--- a/classes/views/styles/_field-description.php
+++ b/classes/views/styles/_field-description.php
@@ -93,8 +93,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Align', 'formidable' ); ?></la
 </div>
 
 <div class="frm5 frm_form_field">
-	<label
-		class="frm-style-item-heading"><?php esc_html_e( 'Margin', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'description_margin', 'frm_description_margin-value', __( 'Margin', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field frm-md-z-index">
 	<?php
diff --git a/classes/views/styles/_field-labels.php b/classes/views/styles/_field-labels.php
index 3a967129fa..da2bd96a01 100644
--- a/classes/views/styles/_field-labels.php
+++ b/classes/views/styles/_field-labels.php
@@ -120,8 +120,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Align', 'formidable' ); ?></la
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label
-							class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></label>
+						<?php FrmSliderStyleComponent::style_item_heading( $style, 'label_padding', 'frm_label_padding-value', __( 'Padding', 'formidable' ) ); ?>
 					</div>
 					<div class="frm7 frm_form_field">
 						<?php
diff --git a/classes/views/styles/_field-sizes.php b/classes/views/styles/_field-sizes.php
index 8de74442f8..ab23a3394d 100644
--- a/classes/views/styles/_field-sizes.php
+++ b/classes/views/styles/_field-sizes.php
@@ -68,8 +68,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></l
 	?>
 </div>
 <div class="frm5 frm_form_field">
-	<label
-		class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'field_pad', 'frm_field_pad-value', __( 'Padding', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -85,8 +84,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></
 	?>
 </div>
 <div class="frm5 frm_form_field">
-	<label
-		class="frm-style-item-heading"><?php esc_html_e( 'Margin', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'field_margin', 'frm_field_margin-value', __( 'Margin', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
diff --git a/classes/views/styles/_form-description.php b/classes/views/styles/_form-description.php
index 01888678c6..41154da511 100644
--- a/classes/views/styles/_form-description.php
+++ b/classes/views/styles/_form-description.php
@@ -20,7 +20,7 @@
 	?>
 </div>
 
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field"><label for="frm_form_desc_color" class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></label></div>
 <div class="frm7 frm_form_field">
 	<?php
 	new FrmColorpickerStyleComponent(
@@ -34,7 +34,7 @@
 	?>
 </div>
 
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Margin', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field"><?php FrmSliderStyleComponent::style_item_heading( $style, 'form_desc_margin_top', 'frm_form_desc_margin_top-value', __( 'Margin', 'formidable' ) ); ?></div>
 <div class="frm7 frm_form_field">
 	<?php
 	new FrmSliderStyleComponent(
@@ -63,7 +63,7 @@
 	?>
 </div>
 
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></label></div>
+<div class="frm5 frm_form_field"><?php FrmSliderStyleComponent::style_item_heading( $style, 'form_desc_padding', 'frm_form_desc_padding-value', __( 'Padding', 'formidable' ) ); ?></div>
 <div class="frm7 frm_form_field">
 	<?php
 	new FrmSliderStyleComponent(
diff --git a/classes/views/styles/_form-title.php b/classes/views/styles/_form-title.php
index 3c6627aa72..f2a32881ef 100644
--- a/classes/views/styles/_form-title.php
+++ b/classes/views/styles/_form-title.php
@@ -38,8 +38,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 </div>
 
 <div class="frm5 frm_form_field">
-	<label
-		class="frm-style-item-heading"><?php esc_html_e( 'Margin', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'title_margin_top', 'frm_title_margins-value', __( 'Margin', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
diff --git a/classes/views/styles/_general.php b/classes/views/styles/_general.php
index 1d67fac6b9..989e54741c 100644
--- a/classes/views/styles/_general.php
+++ b/classes/views/styles/_general.php
@@ -80,9 +80,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' );
 </div>
 
 <div class="frm5 frm_form_field">
-	<label 
-		for="frm_fieldset_padding"
-		class="frm-style-item-heading"><?php esc_html_e( 'Padding', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'fieldset_padding', 'frm_fieldset_padding-value', __( 'Padding', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
diff --git a/classes/views/styles/_quick-settings.php b/classes/views/styles/_quick-settings.php
index 6120ba3863..c31713e8b2 100644
--- a/classes/views/styles/_quick-settings.php
+++ b/classes/views/styles/_quick-settings.php
@@ -127,8 +127,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Button Text', 'formidable' );
 <hr class="frm12"/>
 
 <div class="frm5 frm_form_field">
-	<label
-		class="frm-style-item-heading"><?php esc_html_e( 'Vertical Spacing', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'field_margin', 'frm_style_qsettings_field_margin-value', __( 'Vertical Spacing', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
@@ -147,8 +146,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Vertical Spacing', 'formidable
 </div>
 
 <div class="frm5 frm_form_field">
-	<label
-		class="frm-style-item-heading"><?php esc_html_e( 'Input Field Padding', 'formidable' ); ?></label>
+	<?php FrmSliderStyleComponent::style_item_heading( $style, 'field_pad', 'frm_style_qsettings_field_pad-value', __( 'Input Field Padding', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
diff --git a/classes/views/styles/components/FrmSliderStyleComponent.php b/classes/views/styles/components/FrmSliderStyleComponent.php
index 98a612b013..cb72313992 100644
--- a/classes/views/styles/components/FrmSliderStyleComponent.php
+++ b/classes/views/styles/components/FrmSliderStyleComponent.php
@@ -416,8 +416,9 @@ public static function maybe_echo_for( $style, $key, $input_id ) {
 	 */
 	public static function echo_label_attributes( $style, $key, $input_id ) {
 		$attributes = array( 'data-slider-label-for' => $input_id );
+		$values     = explode( ' ', $style->post_content[ $key ] );
 
-		if ( self::is_value_measured( $style->post_content[ $key ] ) ) {
+		if ( self::is_value_measured( $values[0] ) ) {
 			$attributes['for'] = $input_id;
 		}
 
@@ -439,7 +440,7 @@ public static function echo_label_attributes( $style, $key, $input_id ) {
 	public static function style_item_heading( $style, $key, $input_id, $label ) {
 		echo '<label class="frm-style-item-heading"';
 		self::echo_label_attributes( $style, $key, $input_id );
-		echo '>', esc_html( $label ), '</label>';
+		echo '>' . esc_html( $label ) . '</label>';
 	}
 
 	/**
diff --git a/classes/views/styles/components/templates/slider.php b/classes/views/styles/components/templates/slider.php
index 5a6dd376c7..f07d3ad3d2 100644
--- a/classes/views/styles/components/templates/slider.php
+++ b/classes/views/styles/components/templates/slider.php
@@ -26,7 +26,7 @@
 					<?php $this->print_range_input( __( 'Vertical value', 'formidable' ), $component['vertical']['value'], $component['vertical']['unit'] ); ?>
 				</div>
 				<div class="frm-slider-value">
-					<input aria-label="<?php esc_attr_e( 'Vertical value', 'formidable' ); ?>" type="text" value="<?php echo esc_attr( $component['vertical']['value'] ); ?>" <?php disabled( ! $this->is_measured_unit( $component['vertical']['unit'] ) ); ?> />
+					<input aria-label="<?php esc_attr_e( 'Vertical value', 'formidable' ); ?>" type="text" id="<?php echo esc_attr( $component['id'] ); ?>-value" value="<?php echo esc_attr( $component['vertical']['value'] ); ?>" <?php disabled( ! $this->is_measured_unit( $component['vertical']['unit'] ) ); ?> />
 					<select aria-label="<?php esc_attr_e( 'Value unit', 'formidable' ); ?>">
 						<?php foreach ( $component['units'] as $unit ) : ?>
 							<option <?php selected( $component['vertical']['unit'], $unit ); ?> value="<?php echo esc_attr( $unit ); ?>" aria-label="<?php echo esc_attr( $this->unit_label( $unit ) ); ?>"><?php echo esc_html( $unit ); ?></option>
@@ -148,7 +148,7 @@
 							<?php $this->print_range_input( __( 'Field value', 'formidable' ), $component['value_label'], $component['unit_measurement'] ); ?>
 						</div>
 						<div class="frm-slider-value">
-							<input aria-label="<?php esc_attr_e( 'Field value', 'formidable' ); ?>" type="text" value="<?php echo esc_attr( $component['value_label'] ); ?>" <?php disabled( ! $this->is_measured_unit( $component['unit_measurement'] ) ); ?> />
+							<input aria-label="<?php esc_attr_e( 'Field value', 'formidable' ); ?>" type="text" id="<?php echo esc_attr( $component['id'] ); ?>-value" value="<?php echo esc_attr( $component['value_label'] ); ?>" <?php disabled( ! $this->is_measured_unit( $component['unit_measurement'] ) ); ?> />
 							<select aria-label="<?php esc_attr_e( 'Value unit', 'formidable' ); ?>">
 								<?php foreach ( $component['units'] as $unit ) : ?>
 									<option <?php selected( $component['unit_measurement'], $unit ); ?> value="<?php echo esc_attr( $unit ); ?>" aria-label="<?php echo esc_attr( $this->unit_label( $unit ) ); ?>"><?php echo esc_html( $unit ); ?></option>

From a9a9966b1d3c4afa20dfd7f6ac0f931709fb8012 Mon Sep 17 00:00:00 2001
From: "vivi-the-going-merry[bot]"
 <308115520+vivi-the-going-merry[bot]@users.noreply.github.com>
Date: Thu, 1 Oct 2026 12:57:55 -0600
Subject: [PATCH 12/14] Address review nits: drop unused maybe_echo_for, unused
 label id, shorten JS doc

Delete the uncalled FrmSliderStyleComponent::maybe_echo_for(), remove the unreferenced remove_box_shadow_active_label id, and point the updateLabelFocusTarget doc at echo_label_attributes(). PHPUnit coverage for is_value_measured()/echo_label_attributes() still TODO.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 classes/views/styles/_field-colors.php        |  2 +-
 .../components/FrmSliderStyleComponent.php    | 19 -------------------
 .../components/slider-component.js            |  7 ++-----
 3 files changed, 3 insertions(+), 25 deletions(-)

diff --git a/classes/views/styles/_field-colors.php b/classes/views/styles/_field-colors.php
index c5d15a2033..85c69c7337 100644
--- a/classes/views/styles/_field-colors.php
+++ b/classes/views/styles/_field-colors.php
@@ -173,7 +173,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border', 'formidable' ); ?></l
 					</div>
 
 					<div class="frm5 frm_form_field">
-						<label for="remove_box_shadow_active" id="remove_box_shadow_active_label" class="frm-style-item-heading"><?php esc_html_e( 'Remove Box Shadow', 'formidable' ); ?></label>
+						<label for="remove_box_shadow_active" class="frm-style-item-heading"><?php esc_html_e( 'Remove Box Shadow', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field frm-style-component">
 						<?php
diff --git a/classes/views/styles/components/FrmSliderStyleComponent.php b/classes/views/styles/components/FrmSliderStyleComponent.php
index cb72313992..2d043b00d9 100644
--- a/classes/views/styles/components/FrmSliderStyleComponent.php
+++ b/classes/views/styles/components/FrmSliderStyleComponent.php
@@ -384,25 +384,6 @@ public static function is_value_measured( $value ) {
 		return self::is_measured_unit( self::detect_unit_measurement( $value ) );
 	}
 
-	/**
-	 * Print a label's for attribute when its slider value input is enabled.
-	 *
-	 * @since x.x
-	 *
-	 * @param object $style    The style containing the saved values in post_content.
-	 * @param string $key      The style setting key.
-	 * @param string $input_id The slider value input ID.
-	 *
-	 * @return void
-	 */
-	public static function maybe_echo_for( $style, $key, $input_id ) {
-		if ( ! self::is_value_measured( $style->post_content[ $key ] ) ) {
-			return;
-		}
-
-		FrmAppHelper::array_to_html_params( array( 'for' => $input_id ), true );
-	}
-
 	/**
 	 * Print a slider label's target attributes, linking enabled value inputs.
 	 *
diff --git a/js/src/settings-components/components/slider-component.js b/js/src/settings-components/components/slider-component.js
index aefe7c89c3..9e8de1d559 100644
--- a/js/src/settings-components/components/slider-component.js
+++ b/js/src/settings-components/components/slider-component.js
@@ -445,11 +445,8 @@ export default class frmSliderComponent {
 	}
 
 	/**
-	 * Keeps a value input's <label for="..."> pointed at it only while it is enabled - a label
-	 * click never focuses a disabled control, so leaving `for` set while the unit is non-measured
-	 * ('auto' or unset) makes the label a permanent no-op instead of clearing on the initial PHP
-	 * render alone (see `_buttons.php`'s `data-slider-label-for`, which templates use to mark the
-	 * label without committing to a `for` that may start out invalid).
+	 * Keep a slider label's `for` on its value input only while the input is enabled, since a label click never focuses a disabled control.
+	 * The label is found by `data-slider-label-for`, printed by `FrmSliderStyleComponent::echo_label_attributes()`.
 	 *
 	 * @since x.x
 	 *

From dcb95ff4c5449b3216a778607c573fd0ce82ff0a Mon Sep 17 00:00:00 2001
From: "vivi-the-going-merry[bot]"
 <308115520+vivi-the-going-merry[bot]@users.noreply.github.com>
Date: Thu, 1 Oct 2026 12:58:52 -0600
Subject: [PATCH 13/14] Add PHPUnit coverage for slider label
 for/data-slider-label-for rule

Pins is_value_measured() and echo_label_attributes() for px/em/%, unitless, auto, empty and multi-value inputs.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .../styles/test_FrmSliderStyleComponent.php   | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 tests/phpunit/styles/test_FrmSliderStyleComponent.php

diff --git a/tests/phpunit/styles/test_FrmSliderStyleComponent.php b/tests/phpunit/styles/test_FrmSliderStyleComponent.php
new file mode 100644
index 0000000000..96324c5729
--- /dev/null
+++ b/tests/phpunit/styles/test_FrmSliderStyleComponent.php
@@ -0,0 +1,63 @@
+<?php
+
+/**
+ * @group styles
+ *
+ * @covers FrmSliderStyleComponent
+ */
+#[\PHPUnit\Framework\Attributes\Group( 'styles' )]
+#[\PHPUnit\Framework\Attributes\CoversClass( FrmSliderStyleComponent::class )]
+class test_FrmSliderStyleComponent extends FrmUnitTest {
+
+	/**
+	 * @dataProvider is_value_measured_provider
+	 *
+	 * @param string $value
+	 * @param bool   $expected
+	 */
+	#[\PHPUnit\Framework\Attributes\DataProvider( 'is_value_measured_provider' )]
+	public function test_is_value_measured( $value, $expected ) {
+		$this->assertSame( $expected, FrmSliderStyleComponent::is_value_measured( $value ) );
+	}
+
+	public static function is_value_measured_provider() {
+		return array(
+			'px'        => array( '10px', true ),
+			'em'        => array( '1.5em', true ),
+			'percent'   => array( '50%', true ),
+			'unitless'  => array( '12.5', false ),
+			'auto'      => array( 'auto', false ),
+			'empty'     => array( '', false ),
+		);
+	}
+
+	/**
+	 * @dataProvider echo_label_attributes_provider
+	 *
+	 * @param string $value
+	 * @param string $expected
+	 */
+	#[\PHPUnit\Framework\Attributes\DataProvider( 'echo_label_attributes_provider' )]
+	public function test_echo_label_attributes( $value, $expected ) {
+		$style               = new stdClass();
+		$style->post_content = array( 'submit_width' => $value );
+
+		ob_start();
+		FrmSliderStyleComponent::echo_label_attributes( $style, 'submit_width', 'frm_submit_width-value' );
+
+		$this->assertSame( $expected, ob_get_clean() );
+	}
+
+	public static function echo_label_attributes_provider() {
+		$marker = ' data-slider-label-for="frm_submit_width-value"';
+
+		return array(
+			'measured'    => array( '10px', $marker . ' for="frm_submit_width-value"' ),
+			'unitless'    => array( '12.5', $marker ),
+			'auto'        => array( 'auto', $marker ),
+			'empty'       => array( '', $marker ),
+			'multi value' => array( '10px 5px', $marker . ' for="frm_submit_width-value"' ),
+			'multi auto'  => array( 'auto 5px', $marker ),
+		);
+	}
+}

From 8bb865b0551f603ee9e35570e2abe77ee4670112 Mon Sep 17 00:00:00 2001
From: Mike Letellier <mike@crabcyb.org>
Date: Fri, 2 Oct 2026 11:29:31 -0300
Subject: [PATCH 14/14] More improvements

---
 classes/helpers/FrmStylesHelper.php           |  3 +-
 classes/views/styles/_field-description.php   |  2 ++
 classes/views/styles/_field-labels.php        |  6 ++--
 classes/views/styles/_general.php             |  4 +--
 classes/views/styles/_quick-settings.php      | 19 ++++++-----
 .../styles/components/templates/align.php     | 11 +++++--
 .../components/templates/background-image.php |  2 +-
 .../styles/components/templates/direction.php | 11 ++++---
 js/admin/style.js                             | 32 +++++++++++++++++++
 .../e2e/Styles/styleLabelFocusTargets.cy.js   | 26 +++++++++++++++
 tests/phpunit/phpunit-attributes-stubs.php    |  7 ++++
 .../styles/test_FrmSliderStyleComponent.php   | 16 +++++-----
 12 files changed, 108 insertions(+), 31 deletions(-)

diff --git a/classes/helpers/FrmStylesHelper.php b/classes/helpers/FrmStylesHelper.php
index 27b750bd5b..4f35649213 100644
--- a/classes/helpers/FrmStylesHelper.php
+++ b/classes/helpers/FrmStylesHelper.php
@@ -198,7 +198,8 @@ public static function bs_icon_select( $style, $frm_style, $type = 'arrow' ) {
 		// phpcs:disable Generic.WhiteSpace.ScopeIndent
 		?>
 		<div class="btn-group" id="frm_<?php echo esc_attr( $name ); ?>_select">
-			<button class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" type="button">
+			<button id="frm_<?php echo esc_attr( $name ); ?>_button"
+				class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" type="button">
 				<?php FrmAppHelper::icon_by_class( 'frmfont ' . self::icon_key_to_class( $style->post_content[ $name ], '+', $type ) ); ?>
 				<?php FrmAppHelper::icon_by_class( 'frmfont ' . self::icon_key_to_class( $style->post_content[ $name ], '-', $type ) ); ?>
 				<b class="caret"></b>
diff --git a/classes/views/styles/_field-description.php b/classes/views/styles/_field-description.php
index 36cd1aabf6..fe6b9815b1 100644
--- a/classes/views/styles/_field-description.php
+++ b/classes/views/styles/_field-description.php
@@ -78,6 +78,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Style', 'formidable' ); ?></la
 
 <div class="frm5 frm_form_field">
 	<label
+		for="frm_description_align-left"
 		class="frm-style-item-heading"><?php esc_html_e( 'Align', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field frm-sm-z-index">
@@ -86,6 +87,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Align', 'formidable' ); ?></la
 		$frm_style->get_field_name( 'description_align' ),
 		$style->post_content['description_align'],
 		array(
+			'id'      => 'frm_description_align',
 			'options' => array( 'left', 'right' ),
 		)
 	);
diff --git a/classes/views/styles/_field-labels.php b/classes/views/styles/_field-labels.php
index da2bd96a01..f7df22ff81 100644
--- a/classes/views/styles/_field-labels.php
+++ b/classes/views/styles/_field-labels.php
@@ -53,7 +53,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Color', 'formidable' ); ?></la
 
 					<div class="frm5 frm_form_field">
 						<label
-							for="frm_required_weight"
+							for="frm_weight"
 							class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field">
@@ -62,7 +62,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Weight', 'formidable' ); ?></l
 							$frm_style->get_field_name( 'weight' ),
 							$style->post_content['weight'],
 							array(
-								'id'      => 'frm_required_weight',
+								'id'      => 'frm_weight',
 								'options' => FrmStyle::get_bold_options(),
 							)
 						);
@@ -89,6 +89,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Position', 'formidable' ); ?><
 
 					<div class="frm5 frm_form_field">
 						<label
+							for="frm_align-left"
 							class="frm-style-item-heading"><?php esc_html_e( 'Align', 'formidable' ); ?></label>
 					</div>
 					<div class="frm7 frm_form_field frm-sm-z-index">
@@ -97,6 +98,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Align', 'formidable' ); ?></la
 							$frm_style->get_field_name( 'align' ),
 							$style->post_content['align'],
 							array(
+								'id'      => 'frm_align',
 								'options' => array( 'left', 'right' ),
 							)
 						);
diff --git a/classes/views/styles/_general.php b/classes/views/styles/_general.php
index 989e54741c..209b7be8bf 100644
--- a/classes/views/styles/_general.php
+++ b/classes/views/styles/_general.php
@@ -30,7 +30,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Font Family', 'formidable' );
 
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_form_align"
+		for="frm_form_align-left"
 		class="frm-style-item-heading"><?php esc_html_e( 'Alignment', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
@@ -114,7 +114,7 @@ class="frm-style-item-heading"><?php esc_html_e( 'Border Color', 'formidable' );
 
 <div class="frm5 frm_form_field">
 	<label 
-		for="frm_direction"
+		for="frm_direction-left"
 		class="frm-style-item-heading"><?php esc_html_e( 'Direction', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field">
diff --git a/classes/views/styles/_quick-settings.php b/classes/views/styles/_quick-settings.php
index c31713e8b2..1e8c427ab2 100644
--- a/classes/views/styles/_quick-settings.php
+++ b/classes/views/styles/_quick-settings.php
@@ -164,35 +164,34 @@ class="frm-style-item-heading"><?php esc_html_e( 'Button Text', 'formidable' );
 	?>
 </div>
 <hr class="frm12"/>
+<?php if ( ! FrmStylesHelper::is_advanced_settings() ) : ?>
 <div class="frm5 frm_form_field">
 	<?php FrmSliderStyleComponent::style_item_heading( $style, 'base_font_size', 'frm_base_font_size-value', __( 'Base Font Size', 'formidable' ) ); ?>
 </div>
 <div class="frm7 frm_form_field">
 	<?php
-	if ( ! FrmStylesHelper::is_advanced_settings() ) {
-		// This is displayed only in "Quick Settings" and has a default value of "false." It is updated via JavaScript when the Base Font Size slider is adjusted.
-		// When set to false, the sizes in "Advanced Settings" will not be modified.
-		?>
-		<input type="hidden" name="<?php echo esc_attr( $frm_style->get_field_name( 'use_base_font_size' ) ); ?>" value="false" />
-	<?php } ?>
+	// Updated via JavaScript when Base Font Size changes. Otherwise, preserve the font sizes in Advanced Settings.
+	?>
+	<input type="hidden" name="<?php echo esc_attr( $frm_style->get_field_name( 'use_base_font_size' ) ); ?>" value="false" />
 	<?php
 	new FrmSliderStyleComponent(
 		$frm_style->get_field_name( 'base_font_size' ),
 		$style->post_content['base_font_size'],
 		array(
-			'id'          => 'frm_base_font_size',
-			'max_value'   => 100,
-			'not_show_in' => 'advanced-settings',
-			'classname'   => 'frm-base-font-size',
+			'id'        => 'frm_base_font_size',
+			'max_value' => 100,
+			'classname' => 'frm-base-font-size',
 		)
 	);
 	?>
 </div>
 
+<?php endif; ?>
 <hr class="frm12"/>
 
 <div class="frm5 frm_form_field">
 	<label
+		for="frm-field-shape-regular"
 		class="frm-style-item-heading"><?php esc_html_e( 'Field Shape', 'formidable' ); ?></label>
 </div>
 <div class="frm7 frm_form_field frm-sm-z-index">
diff --git a/classes/views/styles/components/templates/align.php b/classes/views/styles/components/templates/align.php
index bcc76ddadc..e14ff6bf45 100644
--- a/classes/views/styles/components/templates/align.php
+++ b/classes/views/styles/components/templates/align.php
@@ -6,14 +6,19 @@
 	<div class="frm-radio-container frm-flex-box frm-flex-justify">
 		<?php
 		$alignments = array( 'left', 'center', 'right' );
+		$labels     = array(
+			'left'   => __( 'Left', 'formidable' ),
+			'center' => __( 'Center', 'formidable' ),
+			'right'  => __( 'Right', 'formidable' ),
+		);
 
 		foreach ( $alignments as $align ) :
 			if ( empty( $component['options'] ) || in_array( $align, $component['options'], true ) ) :
-				$radio_id = 'frm-align-' . $align . '-' . esc_attr( $field_name );
+				$radio_id = ! empty( $component['id'] ) ? $component['id'] . '-' . $align : 'frm-align-' . $align . '-' . $field_name;
 				?>
 
-				<input id="<?php echo esc_attr( $radio_id ); ?>" <?php checked( $field_value, $align ); ?> type="radio" <?php echo esc_attr( $field_name ); ?> value="<?php echo esc_attr( $align ); ?>" />
-				<label class="frm-flex-center" for="<?php echo esc_attr( $radio_id ); ?>" tabindex="0">
+				<input aria-label="<?php echo esc_attr( $labels[ $align ] ); ?>" id="<?php echo esc_attr( $radio_id ); ?>" <?php checked( $field_value, $align ); ?> type="radio" <?php echo esc_attr( $field_name ); ?> value="<?php echo esc_attr( $align ); ?>" />
+				<label aria-label="<?php echo esc_attr( $labels[ $align ] ); ?>" class="frm-flex-center" for="<?php echo esc_attr( $radio_id ); ?>" tabindex="0">
 					<?php FrmAppHelper::icon_by_class( 'frmfont frm-align-' . $align ); ?>
 				</label>
 
diff --git a/classes/views/styles/components/templates/background-image.php b/classes/views/styles/components/templates/background-image.php
index cdaabfca90..03da4d1fc5 100644
--- a/classes/views/styles/components/templates/background-image.php
+++ b/classes/views/styles/components/templates/background-image.php
@@ -2,7 +2,7 @@
 	die( 'You are not allowed to call this page directly.' );
 }
 ?>
-<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php echo esc_html( $component['title'] ); ?></label></div>
+<div class="frm5 frm_form_field"><label for="<?php echo esc_attr( $component['id'] ); ?>" class="frm-style-item-heading"><?php echo esc_html( $component['title'] ); ?></label></div>
 <div class="frm7 frm_form_field">
 	<div class="frm-style-component frm-background-image-component">
 		<div class="frm-h-stack-xs frm-flex-wrap" tabindex="0">
diff --git a/classes/views/styles/components/templates/direction.php b/classes/views/styles/components/templates/direction.php
index c6a0189e3c..30e33b9f7d 100644
--- a/classes/views/styles/components/templates/direction.php
+++ b/classes/views/styles/components/templates/direction.php
@@ -1,16 +1,19 @@
 <?php if ( ! defined( 'ABSPATH' ) ) {
 	die( 'You are not allowed to call this page directly.' );
 }
+
+$left_id  = ! empty( $component['id'] ) ? $component['id'] . '-left' : 'frm-direction-left-' . $field_name;
+$right_id = ! empty( $component['id'] ) ? $component['id'] . '-right' : 'frm-direction-right-' . $field_name;
 ?>
 <span class="<?php echo esc_attr( $component_class ); ?> frm-direction-component frm-radio-component">
 	<div class="frm-radio-container frm-flex-box frm-flex-justify">
-		<input id="frm-direction-left-<?php echo esc_attr( $field_name ); ?>" <?php checked( $field_value, 'ltr' ); ?>  type="radio" <?php echo esc_attr( $field_name ); ?> value="ltr" />
-		<label class="frm-flex-center" for="frm-direction-left-<?php echo esc_attr( $field_name ); ?>" tabindex="0">
+		<input aria-label="<?php esc_attr_e( 'Left to Right', 'formidable' ); ?>" id="<?php echo esc_attr( $left_id ); ?>" <?php checked( $field_value, 'ltr' ); ?>  type="radio" <?php echo esc_attr( $field_name ); ?> value="ltr" />
+		<label aria-label="<?php esc_attr_e( 'Left to Right', 'formidable' ); ?>" class="frm-flex-center" for="<?php echo esc_attr( $left_id ); ?>" tabindex="0">
 			<?php FrmAppHelper::icon_by_class( 'frmfont frm-direction-right' ); ?>
 		</label>
 
-		<input id="frm-direction-right-<?php echo esc_attr( $field_name ); ?>" <?php checked( $field_value, 'rtl' ); ?> type="radio" <?php echo esc_attr( $field_name ); ?> value="rtl" />
-		<label class="frm-flex-center" for="frm-direction-right-<?php echo esc_attr( $field_name ); ?>" tabindex="0">
+		<input aria-label="<?php esc_attr_e( 'Right to Left', 'formidable' ); ?>" id="<?php echo esc_attr( $right_id ); ?>" <?php checked( $field_value, 'rtl' ); ?> type="radio" <?php echo esc_attr( $field_name ); ?> value="rtl" />
+		<label aria-label="<?php esc_attr_e( 'Right to Left', 'formidable' ); ?>" class="frm-flex-center" for="<?php echo esc_attr( $right_id ); ?>" tabindex="0">
 			<?php FrmAppHelper::icon_by_class( 'frmfont frm-direction-left' ); ?>
 		</label>
 		<span class="frm-radio-active-tracker"></span>
diff --git a/js/admin/style.js b/js/admin/style.js
index 63bba82fa0..c18e05b027 100644
--- a/js/admin/style.js
+++ b/js/admin/style.js
@@ -29,6 +29,37 @@
 		initListPage();
 	}
 
+	/**
+	 * Focus the visible control when a styler heading labels a hidden toggle or radio input.
+	 * Radio headings focus the selected option without changing the setting.
+	 *
+	 * @since x.x
+	 *
+	 * @return {void}
+	 */
+	function initLabelFocus() {
+		document.getElementById( 'frm_style_sidebar' ).addEventListener( 'click', event => {
+			const label = event.target.closest( 'label.frm-style-item-heading' );
+			const input = label?.control;
+			if ( ! input || input.disabled || ! [ 'radio', 'checkbox' ].includes( input.type ) ) {
+				return;
+			}
+
+			let target;
+			if ( 'checkbox' === input.type ) {
+				target = input.parentElement.querySelector( '[role="switch"]' );
+			} else {
+				const component = input.closest( '.frm-radio-component' );
+				const radio = component?.querySelector( 'input:checked' ) || input;
+				const option = radio.nextElementSibling;
+				target = option.querySelector( '[role="radio"]' ) || option;
+				event.preventDefault();
+			}
+
+			target?.focus();
+		} );
+	}
+
 	/**
 	 * The "Quick Settings" swatches (Primary, Field Text, Field Border, Button Text) each summarize a single
 	 * underlying setting, but have no name attribute of their own, so they can't be found and updated by the
@@ -44,6 +75,7 @@
 	};
 
 	initCommonEventListeners();
+	initLabelFocus();
 	initPreview();
 	fixWpAuthModal();
 
diff --git a/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js b/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
index 38660fdc13..b7f386149e 100644
--- a/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
+++ b/tests/cypress/e2e/Styles/styleLabelFocusTargets.cy.js
@@ -88,4 +88,30 @@ describe( 'Style builder labels focus their visible/interactive control', () =>
 		cy.wait( '@changeStyling', { timeout: 10000 } );
 		cy.get( '[data-slider-label-for="frm_submit_width-value"]' ).should( 'not.have.attr', 'for' );
 	} );
+	it( 'Background labels focus their color swatch', () => {
+		cy.visit( '/wp-admin/admin.php?page=formidable-styles&section=advanced-settings' );
+		cy.get( 'label[for="frm_fieldset_bg_color_visible"]', { timeout: STYLES_PAGE_TIMEOUT } ).click();
+		cy.focused().should( 'have.id', 'frm_fieldset_bg_color_visible' );
+	} );
+
+	it( 'Radio headings focus the selected option without changing it, and toggle headings focus the switch', () => {
+		cy.visit( '/wp-admin/admin.php?page=formidable-styles&section=advanced-settings' );
+		cy.get( '#general-style .frm-align-component label[for="frm_form_align-right"]', { timeout: STYLES_PAGE_TIMEOUT } ).click();
+		cy.contains( '#general-style .frm-style-item-heading', 'Alignment' ).click();
+		cy.focused().prev().should( 'have.value', 'right' ).and( 'be.checked' );
+		cy.get( '#general-style .frm-align-component input[value="right"]' ).should( 'be.checked' );
+		cy.get( 'label[for="frm_important_style"]' ).click();
+		cy.focused().should( 'have.attr', 'role', 'switch' ).and( 'have.attr', 'aria-label', 'Override Theme' );
+	} );
+
+	it( 'Required Indicator Weight focuses its own dropdown', () => {
+		cy.visit( '/wp-admin/admin.php?page=formidable-styles&section=advanced-settings' );
+		cy.get( '#field-labels-style button[aria-label="Field Labels"]', { timeout: STYLES_PAGE_TIMEOUT } ).click();
+		cy.get( 'label[for="frm_weight"]' ).click();
+		cy.focused().should( 'have.id', 'frm_weight' );
+		cy.contains( '#field-labels-style .frm-tabs-navs li', 'Required Indicator' ).click();
+		cy.get( 'label[for="frm_required_weight"]' ).click();
+		cy.focused().should( 'have.id', 'frm_required_weight' );
+		cy.get( '[id="frm_required_weight"]' ).should( 'have.length', 1 );
+	} );
 } );
diff --git a/tests/phpunit/phpunit-attributes-stubs.php b/tests/phpunit/phpunit-attributes-stubs.php
index 12b3e2c9fe..6b28835272 100644
--- a/tests/phpunit/phpunit-attributes-stubs.php
+++ b/tests/phpunit/phpunit-attributes-stubs.php
@@ -36,3 +36,10 @@ class CoversClass {
 	public function __construct( $className ) {
 	}
 }
+
+/**
+ * Marks tests whose target is outside the code coverage source directories.
+ */
+#[\Attribute( \Attribute::TARGET_CLASS | \Attribute::TARGET_METHOD )]
+class CoversNothing {
+}
diff --git a/tests/phpunit/styles/test_FrmSliderStyleComponent.php b/tests/phpunit/styles/test_FrmSliderStyleComponent.php
index 96324c5729..281f9b17da 100644
--- a/tests/phpunit/styles/test_FrmSliderStyleComponent.php
+++ b/tests/phpunit/styles/test_FrmSliderStyleComponent.php
@@ -3,10 +3,10 @@
 /**
  * @group styles
  *
- * @covers FrmSliderStyleComponent
+ * @coversNothing
  */
 #[\PHPUnit\Framework\Attributes\Group( 'styles' )]
-#[\PHPUnit\Framework\Attributes\CoversClass( FrmSliderStyleComponent::class )]
+#[\PHPUnit\Framework\Attributes\CoversNothing]
 class test_FrmSliderStyleComponent extends FrmUnitTest {
 
 	/**
@@ -22,12 +22,12 @@ public function test_is_value_measured( $value, $expected ) {
 
 	public static function is_value_measured_provider() {
 		return array(
-			'px'        => array( '10px', true ),
-			'em'        => array( '1.5em', true ),
-			'percent'   => array( '50%', true ),
-			'unitless'  => array( '12.5', false ),
-			'auto'      => array( 'auto', false ),
-			'empty'     => array( '', false ),
+			'px'       => array( '10px', true ),
+			'em'       => array( '1.5em', true ),
+			'percent'  => array( '50%', true ),
+			'unitless' => array( '12.5', false ),
+			'auto'     => array( 'auto', false ),
+			'empty'    => array( '', false ),
 		);
 	}