fix: sync SM Lab cascade captions with signal controls

Fixes #107

Author: georgeolaru

dist/js/lab-showcase.js

@@ -420,7 +420,10 @@ class="sm-lab-signal-cascade__signal"
 				<span data-sm-lab-cascade-value="signal"><?php echo esc_html( $node['signal_label'] ); ?></span>
 			</button>
 			<strong><?php echo esc_html( $node['label'] ); ?></strong>
-			<small><?php echo esc_html( $node['caption'] ); ?></small>
+			<small>
+				<span data-sm-lab-cascade-caption-signal><?php echo esc_html( sprintf( __( 'Color Signal: %s.', '__plugin_txtd' ), $node['signal_label'] ) ); ?></span>
+				<?php echo esc_html( $node['caption'] ); ?>
+			</small>
 			<div class="sm-lab-cascade-chips" aria-hidden="true">
 				<span class="sm-lab-cascade-chip" data-sm-lab-cascade-chip="signal-label" data-sm-lab-cascade-chip-signal-label>
 					<?php esc_html_e( 'Color Signal:', '__plugin_txtd' ); ?> <?php echo esc_html( $node['signal_label'] ); ?>
@@ -493,42 +496,42 @@ private function get_signal_cascade_nodes( QueryParams $params, int $root_variat
 				'parent'  => '',
 				'signal'  => 0,
 				'label'   => __( 'Page container', '__plugin_txtd' ),
-				'caption' => __( 'Color Signal: None. Sets the page surface — everything below resolves against it.', '__plugin_txtd' ),
+				'caption' => __( 'Sets the page surface — everything below resolves against it.', '__plugin_txtd' ),
 			],
 			[
 				'id'      => 'header',
 				'parent'  => 'page',
 				'signal'  => 3,
 				'label'   => __( 'Header block', '__plugin_txtd' ),
-				'caption' => __( 'Color Signal: High. Resolved against the page surface, not against another block.', '__plugin_txtd' ),
+				'caption' => __( 'Resolved against the page surface, not against another block.', '__plugin_txtd' ),
 			],
 			[
 				'id'      => 'content',
 				'parent'  => 'page',
 				'signal'  => 1,
 				'label'   => __( 'Content block', '__plugin_txtd' ),
-				'caption' => __( 'Color Signal: Low. First layer below page; the parent for any nested block.', '__plugin_txtd' ),
+				'caption' => __( 'First layer below page; the parent for any nested block.', '__plugin_txtd' ),
 			],
 			[
 				'id'      => 'inner',
 				'parent'  => 'content',
 				'signal'  => 2,
 				'label'   => __( 'First inner block', '__plugin_txtd' ),
-				'caption' => __( 'Color Signal: Medium. Resolved against the content surface, not against page.', '__plugin_txtd' ),
+				'caption' => __( 'Resolved against the content surface, not against page.', '__plugin_txtd' ),
 			],
 			[
 				'id'      => 'second-inner',
 				'parent'  => 'inner',
 				'signal'  => 3,
 				'label'   => __( 'Second inner block', '__plugin_txtd' ),
-				'caption' => __( 'Color Signal: High. Resolved against inner — flips to the opposite end of the rail.', '__plugin_txtd' ),
+				'caption' => __( 'Resolved against inner — flips to the opposite end of the rail.', '__plugin_txtd' ),
 			],
 			[
 				'id'      => 'footer',
 				'parent'  => 'page',
 				'signal'  => 3,
 				'label'   => __( 'Footer block', '__plugin_txtd' ),
-				'caption' => __( 'Color Signal: High. Same input as Header, same parent — same resolved grade.', '__plugin_txtd' ),
+				'caption' => __( 'Same input as Header, same parent — same resolved grade.', '__plugin_txtd' ),
 			],
 		];
 		$resolved_by_id = [];

src/Lab/ShowcaseRenderer.php

@@ -933,6 +933,10 @@ const updateCascadeSignalUi = ( node, signal ) => {
     chip.textContent = `Color Signal: ${ label }`;
   } );
 
+  node.querySelectorAll( '[data-sm-lab-cascade-caption-signal]' ).forEach( ( caption ) => {
+    caption.textContent = `Color Signal: ${ label }.`;
+  } );
+
   node.querySelectorAll( '[data-sm-lab-cascade-chip-signal-input]' ).forEach( ( chip ) => {
     chip.setAttribute( 'data-sm-lab-cascade-chip-signal-input', String( signal ) );
   } );

src/_js/lab-showcase/runtime.js

@@ -398,6 +398,10 @@ const createShowcaseDocument = () => {
       node.appendChild( createCascadeValue( documentRef, key ) );
     } );
 
+    const captionSignal = documentRef.createElement( 'small' );
+    captionSignal.setAttribute( 'data-sm-lab-cascade-caption-signal', '1' );
+    node.appendChild( captionSignal );
+
     const signalLabelChip = documentRef.createElement( 'span' );
     signalLabelChip.setAttribute( 'data-sm-lab-cascade-chip', 'signal-label' );
     signalLabelChip.setAttribute( 'data-sm-lab-cascade-chip-signal-label', '1' );
@@ -736,6 +740,11 @@ export const runLabShowcaseRuntimeTests = async ( assert ) => {
       'Color Signal: Low',
       'signal cascade should expose the human Color Signal label separately from the saved value'
     );
+    assert.equal(
+      documentRef.querySelector( '[data-sm-lab-cascade-node="content"] [data-sm-lab-cascade-caption-signal]' )?.textContent,
+      'Color Signal: Low.',
+      'signal cascade captions should expose the current human Color Signal label'
+    );
     assert.equal(
       documentRef.querySelector( '[data-sm-lab-cascade-node="content"] [data-sm-lab-cascade-chip-signal-input-code]' )?.textContent,
       'data-color-signal="1"',
@@ -850,6 +859,11 @@ export const runLabShowcaseRuntimeTests = async ( assert ) => {
       'Color Signal: Medium',
       'clicking a cascade signal control should update the human signal chip'
     );
+    assert.equal(
+      documentRef.querySelector( '[data-sm-lab-cascade-node="content"] [data-sm-lab-cascade-caption-signal]' )?.textContent,
+      'Color Signal: Medium.',
+      'clicking a cascade signal control should update the human signal caption'
+    );
     assert.equal(
       documentRef.querySelector( '[data-sm-lab-cascade-node="content"] [data-sm-lab-cascade-chip-signal-input-code]' )?.textContent,
       'data-color-signal="2"',

tests/js/lab-showcase-runtime.test.js

@@ -65,6 +65,7 @@ public function test_render_outputs_unique_value_showcase_sections(): void {
 		$this->assertStringContainsString( 'data-sm-lab-cascade-signal-control', $html );
 		$this->assertStringContainsString( 'type="button"', $html );
 		$this->assertStringContainsString( 'Change Page container Color Signal. Current: None', $html );
+		$this->assertStringContainsString( 'data-sm-lab-cascade-caption-signal', $html );
 		$this->assertStringContainsString( 'data-sm-lab-cascade-active="true"', $html );
 		$this->assertStringContainsString( 'data-sm-lab-cascade-value="parent"', $html );
 		$this->assertStringContainsString( '--sm-lab-cascade-surface-color', $html );