@explorer02/cfm-survey-sdk 0.2.9 → 0.3.0

package/templates/docs/templates/CustomSliderTrack.tsx

@@ -7,7 +7,6 @@
  */
 
 import React from 'react';
-import { focusRingVar, cellSelectedVar } from '@/lib/surveyUi/selectionStyles';
 import { getEmojiForIndex } from './surveyUiIcons';
 
 type CustomSliderTrackProps = {
@@ -51,8 +50,7 @@ export function CustomSliderTrack({
     ? tooltipLabel.replace(/<[^>]*>/g, '')
     : String(Math.round(value));
 
-  const trackColor = disabled ? 'var(--cfm-slider-tick, #9ca3af)' : 'var(--cfm-slider-track, var(--cfm-primary))';
-  const thumbBorderColor = disabled ? 'var(--cfm-slider-tick, #9ca3af)' : focusRingVar;
+  const themeColor = disabled ? '#9ca3af' : 'var(--cfm-input-focus-ring, var(--cfm-primary))';
 
   return (
     <div
@@ -62,12 +60,12 @@ export function CustomSliderTrack({
     >
       <div style={{
         position: 'absolute', top: '50%', left: 0, right: 0, transform: 'translateY(-50%)',
-        height: '4px', borderRadius: '2px', backgroundColor: 'var(--cfm-slider-tick, #e5e7eb)',
+        height: '4px', borderRadius: '2px', backgroundColor: 'var(--cfm-slider-track, #e5e7eb)',
       }} />
 
       <div style={{
         position: 'absolute', top: '50%', left: 0, width: `${percentage}%`, transform: 'translateY(-50%)',
-        height: '4px', borderRadius: '2px', backgroundColor: trackColor,
+        height: '4px', borderRadius: '2px', backgroundColor: themeColor,
         transition: isDragging ? 'none' : 'width 0.15s ease-in-out',
       }} />
 
@@ -78,7 +76,7 @@ export function CustomSliderTrack({
             key={idx}
             style={{
               position: 'absolute', top: '50%', left: `${tickPct}%`, transform: 'translate(-50%, -50%)',
-              width: '1px', height: '8px', backgroundColor: 'var(--cfm-slider-tick, #d1d5db)', pointerEvents: 'none',
+              width: '1px', height: '8px', backgroundColor: '#d1d5db', pointerEvents: 'none',
             }}
           />
         );
@@ -115,22 +113,15 @@ export function CustomSliderTrack({
       ) : (
         <div style={{
           position: 'absolute', top: '50%', left: `${percentage}%`, transform: 'translate(-50%, -50%)',
-          width: '18px', height: '18px', borderRadius: '50%',
-          border: `2.5px solid ${thumbBorderColor}`,
-          backgroundColor: cellSelectedVar,
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          width: '18px', height: '18px', borderRadius: '50%', backgroundColor: '#ffffff',
+          border: `2.5px solid ${themeColor}`,
           boxShadow: (isHovered || isDragging) && !disabled
-            ? '0 0 0 6px var(--cfm-mcq-selected-bg, rgba(226, 0, 116, 0.2)), 0 1px 3px rgba(0,0,0,0.2)'
+            ? '0 0 0 6px rgba(226, 0, 116, 0.2), 0 1px 3px rgba(0,0,0,0.2)'
             : '0 1px 3px rgba(0,0,0,0.2)',
           pointerEvents: 'none',
           transition: isDragging ? 'none' : 'left 0.15s ease-in-out, box-shadow 0.15s, border-color 0.2s',
           boxSizing: 'border-box',
-        }}>
-          <div style={{
-            width: '33%', height: '33%', borderRadius: '50%',
-            backgroundColor: 'var(--cfm-slider-thumb, var(--cfm-primary))',
-          }} />
-        </div>
+        }} />
       )}
 
       {(isHovered || isDragging) && !disabled && (

package/templates/docs/templates/FileUploadScale.tsx

@@ -8,7 +8,6 @@
 
 import React, { useState, useRef } from 'react';
 import type { FileUploadQuestion } from '@explorer02/cfm-survey-sdk';
-import { focusRingVar } from '@/lib/surveyUi/selectionStyles';
 
 type UploadedFileAnswer = {
   id: string;
@@ -87,15 +86,8 @@ function FileUploadDropzone({
   onDrag: (e: React.DragEvent) => void;
   onDrop: (e: React.DragEvent) => void;
 }) {
-  const dropzoneStyleAttr =
-    typeof document !== 'undefined'
-      ? document.documentElement.getAttribute('data-cfm-dropzone-style') ?? undefined
-      : undefined;
-
   return (
     <div
-      className="cfm-dropzone"
-      {...(dropzoneStyleAttr ? { 'data-cfm-dropzone-style': dropzoneStyleAttr } : {})}
       onDragEnter={onDrag}
       onDragOver={onDrag}
       onDragLeave={onDrag}
@@ -106,10 +98,10 @@ function FileUploadDropzone({
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
-        border: `2px var(--cfm-upload-border-style, dashed) ${isDragActive ? focusRingVar : 'var(--cfm-upload-border-color)'}`,
-        borderRadius: '12px',
-        backgroundColor: isDragActive ? 'var(--cfm-mcq-selected-bg)' : 'var(--cfm-upload-fill)',
-        padding: 'var(--cfm-upload-padding)',
+        border: `2px ${isDragActive ? 'solid' : 'var(--cfm-upload-border-style, dashed)'} var(--cfm-upload-border-color, #d1d5db)`,
+        borderRadius: 'var(--cfm-border-radius, 12px)',
+        backgroundColor: isDragActive ? 'var(--cfm-mcq-selected-bg, #fdf2f8)' : 'var(--cfm-upload-fill, #f9fafb)',
+        padding: 'var(--cfm-upload-padding, 40px 24px)',
         cursor: disabled ? 'not-allowed' : 'pointer',
         opacity: disabled ? 0.6 : 1,
         textAlign: 'center',

package/templates/docs/templates/Header.tsx

@@ -2,7 +2,7 @@
  * Wizard-ready Header — copy to src/components/Header.tsx
  *
  * Brand row: [logo image] [company name] — company sits after logo when both exist.
- * Layout locked: logo left, name after (flex row only).
+ * When no logo file: text fallback via data-cfm-logo-text (company name or empty).
  *
  * After wizard save, logo src MUST come from survey-ui-config.json global.logo.fileName
  * via uiConfig.ts — never hardcode telekom-logo.svg or change fileName manually.
@@ -33,30 +33,42 @@ export default function Header({ embedded = false }: HeaderProps) {
       }}
     >
       <div
-        className="cfm-header-inner flex h-full w-full items-center"
+        className="cfm-header-inner grid h-full w-full items-center"
         style={{
+          gridTemplateColumns: '1fr 1fr 1fr',
           padding: `0 var(--cfm-header-padding-x, 40px)`,
         }}
       >
         <div
-          className="cfm-header-brand flex min-w-0 items-center"
+          className="cfm-header-brand flex items-center"
           style={{
+            gridColumn: 'var(--cfm-header-logo-col, 1)',
+            justifySelf: 'var(--cfm-header-logo-justify, start)',
             gap: 'var(--cfm-header-brand-gap, 16px)',
           }}
         >
-          <img
-            data-cfm-logo
-            src={hasLogoFile ? seedLogoSrc! : ''}
-            alt={seedCompany || 'Logo'}
-            className="shrink-0 object-contain"
-            style={{
-              display: hasLogoFile ? '' : 'none',
-              width: 'var(--cfm-header-logo-width, 120px)',
-              height: 'var(--cfm-header-logo-height, 120px)',
-              padding: 'var(--cfm-header-logo-padding, 0px)',
-              background: 'var(--cfm-header-logo-bg, transparent)',
-            }}
-          />
+          {hasLogoFile ? (
+            <img
+              data-cfm-logo
+              src={seedLogoSrc!}
+              alt={seedCompany || 'Logo'}
+              className="shrink-0 object-contain"
+              style={{
+                width: 'var(--cfm-header-logo-width, 120px)',
+                height: 'var(--cfm-header-logo-height, 120px)',
+                padding: 'var(--cfm-header-logo-padding, 10px)',
+                background: 'transparent',
+              }}
+            />
+          ) : (
+            <img
+              data-cfm-logo
+              src=""
+              alt="Logo"
+              className="shrink-0 object-contain"
+              style={{ display: 'none' }}
+            />
+          )}
 
           <span
             data-cfm-logo-text
@@ -71,22 +83,26 @@ export default function Header({ embedded = false }: HeaderProps) {
             {seedCompany}
           </span>
 
-          {seedShowCompany && seedCompany ? (
-            <span
-              data-cfm-company
-              className="truncate font-semibold"
-              style={{
-                display: hasLogoFile ? '' : 'none',
-                color: 'var(--cfm-header-company-color, var(--cfm-text))',
-                fontSize: 'var(--cfm-header-company-size, 18px)',
-                fontWeight: 'var(--cfm-header-company-weight, 600)',
-              }}
-            >
-              {seedCompany}
-            </span>
-          ) : (
-            <span data-cfm-company className="hidden" aria-hidden />
-          )}
+          <span
+            data-cfm-company
+            className="font-semibold"
+            style={{
+              display:
+                seedShowCompany && (hasLogoFile || seedCompany)
+                  ? hasLogoFile
+                    ? ''
+                    : 'none'
+                  : 'none',
+              marginTop: 'var(--cfm-header-company-margin-top, 0)',
+              marginLeft: 'var(--cfm-header-company-margin-left, 0)',
+              marginRight: 'var(--cfm-header-company-margin-right, 0)',
+              color: 'var(--cfm-header-company-color, var(--cfm-text))',
+              fontSize: 'var(--cfm-header-company-size, 18px)',
+              fontWeight: 'var(--cfm-header-company-weight, 600)',
+            }}
+          >
+            {seedCompany}
+          </span>
         </div>
       </div>
     </header>

package/templates/docs/templates/HeatmapScale.tsx

@@ -29,8 +29,8 @@ function HeatmapSpot({ spot }: { spot: { id: string; x: number; y: number } }) {
         width: 'var(--cfm-heatmap-pin-size, 16px)',
         height: 'var(--cfm-heatmap-pin-size, 16px)',
         transform: 'translate(-50%, -50%)',
-        backgroundColor: 'var(--cfm-heatmap-pin)',
-        border: '2px solid var(--cfm-heatmap-pin-border, white)',
+        backgroundColor: 'var(--cfm-heatmap-pin, #F97316)',
+        border: '2px solid var(--cfm-heatmap-pin-border, #fff)',
         boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
       }}
     />
@@ -63,9 +63,6 @@ export function HeatmapScale({ question, selectedValue = [], onSelect }: Heatmap
     }
 
     onSelect([...spots, createNewSpot(x, y)]);
-    if (typeof window !== 'undefined' && window.parent !== window) {
-      window.parent.postMessage({ type: 'CFM_HEATMAP_PIN', pin: { x, y } }, '*');
-    }
   }
 
   function handleImageLoad() {

package/templates/docs/templates/LikertMatrixScale.tsx

@@ -1,14 +1,10 @@
 import React, { useState } from 'react';
 import type { CfmMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-survey-sdk';
-import { matrixColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
-import {
-  cellSelectedVar,
-  focusRingVar,
-  matrixRadioDotStyle,
-  matrixRadioRingStyle,
-} from '@/lib/surveyUi/selectionStyles';
 import { columnSubmitValue } from './surveyUiScaleUtils';
 import MatrixDropdown from './MatrixDropdown';
+import { matrixColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
+
+const MATRIX_ROW_LABEL_WIDTH = 'var(--cfm-matrix-row-width, 180px)';
 
 type LikertMatrixScaleProps = {
   question: CfmMatrixQuestion;
@@ -118,8 +114,8 @@ function LikertMatrixCarouselLayout({
                 <div style={{
                   display: 'flex', alignItems: 'center', justifyContent: 'center',
                   width: '18px', height: '18px', borderRadius: '4px',
-                  border: selected ? `2px solid ${focusRingVar}` : '2px solid #d1d5db',
-                  backgroundColor: selected ? cellSelectedVar : '#fff',
+                  border: selected ? '2px solid #e20074' : '2px solid #d1d5db',
+                  backgroundColor: selected ? '#e20074' : '#fff',
                   flexShrink: 0, transition: 'all 0.15s'
                 }}>
                   {selected && (
@@ -129,8 +125,13 @@ function LikertMatrixCarouselLayout({
                   )}
                 </div>
               ) : (
-                <div style={matrixRadioRingStyle(selected)}>
-                  {selected && <div style={matrixRadioDotStyle(selected, '10px')} />}
+                <div style={{
+                  display: 'flex', width: '18px', height: '18px', flexShrink: 0,
+                  alignItems: 'center', justifyContent: 'center', borderRadius: '50%',
+                  border: selected ? '2px solid #e20074' : '1.5px solid #9ca3af',
+                  backgroundColor: '#fff',
+                }}>
+                  {selected && <div style={{ width: '10px', height: '10px', borderRadius: '50%', backgroundColor: '#e20074' }} />}
                 </div>
               )}
               <span style={{ fontSize: '15px', fontWeight: 400, color: '#374151', userSelect: 'none' }} dangerouslySetInnerHTML={{ __html: col.label }} />
@@ -208,7 +209,7 @@ function LikertMatrixGridLayout({
       <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '16px' }}>
         {hasLabels && (
           <div style={{ display: 'flex', alignItems: 'flex-end', minHeight: '24px', marginBottom: '8px' }}>
-            <div style={{ flex: `0 0 var(--cfm-matrix-bipolar-width, 25%)`, paddingRight: '16px', boxSizing: 'border-box' }} />
+            <div style={{ flex: '0 0 25%', paddingRight: '16px', boxSizing: 'border-box' }} />
             <div style={{ flex: 1, position: 'relative', height: '20px' }}>
               {labels.map((lbl, idx) => {
                 let leftPos = '50%';
@@ -226,12 +227,12 @@ function LikertMatrixGridLayout({
                 );
               })}
             </div>
-            <div style={{ flex: `0 0 var(--cfm-matrix-bipolar-width, 25%)`, paddingLeft: '16px', boxSizing: 'border-box' }} />
+            <div style={{ flex: '0 0 25%', paddingLeft: '16px', boxSizing: 'border-box' }} />
           </div>
         )}
         {showColumnHeaders && (
           <div style={{ display: 'flex', alignItems: 'flex-end', minHeight: '24px' }}>
-            <div style={{ flex: isBipolar ? '0 0 var(--cfm-matrix-bipolar-width, 25%)' : '0 0 var(--cfm-matrix-row-width, 180px)', paddingRight: '16px', boxSizing: 'border-box' }} />
+            <div style={{ flex: isBipolar ? '0 0 25%' : `0 0 ${MATRIX_ROW_LABEL_WIDTH}`, paddingRight: '16px', boxSizing: 'border-box' }} />
             <div style={{ flex: 1, display: 'flex' }}>
               <div style={{ flex: 1, display: 'grid', gridTemplateColumns: `repeat(${gridCols.length}, 1fr)` }}>
                 {gridCols.map((col) => (
@@ -242,7 +243,7 @@ function LikertMatrixGridLayout({
                 ))}
               </div>
             </div>
-            {isBipolar && <div style={{ flex: `0 0 var(--cfm-matrix-bipolar-width, 25%)`, paddingLeft: '16px', boxSizing: 'border-box' }} />}
+            {isBipolar && <div style={{ flex: '0 0 25%', paddingLeft: '16px', boxSizing: 'border-box' }} />}
           </div>
         )}
       </div>
@@ -260,10 +261,10 @@ function LikertMatrixGridLayout({
               {repeatColumnHeaders && renderHeader()}
               <div style={{
                 display: 'flex', alignItems: 'center', borderRadius: '8px',
-                padding: '12px 0', backgroundColor: !repeatColumnHeaders && rowIdx % 2 === 0 ? 'var(--cfm-zebra-row)' : '#fff',
+                padding: '12px 0', backgroundColor: !repeatColumnHeaders && rowIdx % 2 === 0 ? 'rgba(249, 250, 251, 0.8)' : '#fff',
                 boxSizing: 'border-box'
               }}>
-                <div style={{ flex: isBipolar ? '0 0 var(--cfm-matrix-bipolar-width, 25%)' : '0 0 var(--cfm-matrix-row-width, 180px)', padding: '0 16px', boxSizing: 'border-box' }}>
+                <div style={{ flex: isBipolar ? '0 0 25%' : `0 0 ${MATRIX_ROW_LABEL_WIDTH}`, padding: '0 16px', boxSizing: 'border-box' }}>
                   <span style={{ fontSize: '14px', fontWeight: 500, color: '#111827', lineHeight: 1.4, wordWrap: 'break-word', display: 'block' }}
                     dangerouslySetInnerHTML={{ __html: transposeTable ? ('label' in rowItem ? rowItem.label : '') : ('statementText' in rowItem ? rowItem.statementText : '') }} />
                 </div>
@@ -281,45 +282,32 @@ function LikertMatrixGridLayout({
 
                       return (
                         <div key={colItem.id} style={{ display: 'flex', justifyContent: 'center' }}>
-                          <button
-                            type="button"
-                            disabled={isDisabled}
-                            onClick={() => {
-                              if (isDisabled) return;
-                              if (!isMultiple && selected) {
-                                onCellSelect(actualRowId, undefined);
-                              } else {
-                                onCellSelect(actualRowId, actualColValue);
-                              }
-                            }}
-                            style={{
-                              cursor: isDisabled ? 'not-allowed' : 'pointer',
-                              opacity: isDisabled ? 0.4 : 1,
-                              padding: 'var(--cfm-matrix-cell-padding, 8px)',
-                              display: 'flex', alignItems: 'center', justifyContent: 'center',
-                              border: 'none', background: 'transparent',
-                            }}
-                          >
-                            {isMultiple ? (
-                              <div style={{
-                                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                width: '18px', height: '18px', borderRadius: '4px',
-                                border: selected ? `2px solid ${focusRingVar}` : '2px solid #d1d5db',
-                                backgroundColor: selected ? cellSelectedVar : '#fff',
-                                transition: 'all 0.15s',
-                              }}>
-                                {selected && (
-                                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
-                                    <polyline points="20 6 9 17 4 12" />
-                                  </svg>
-                                )}
-                              </div>
-                            ) : (
-                              <div style={matrixRadioRingStyle(selected)}>
-                                {selected && <div style={matrixRadioDotStyle(selected)} />}
-                              </div>
-                            )}
-                          </button>
+                          <label style={{ 
+                            cursor: isDisabled ? 'not-allowed' : 'pointer', 
+                            opacity: isDisabled ? 0.4 : 1,
+                            padding: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center' 
+                          }}>
+                            <input 
+                              type={isMultiple ? "checkbox" : "radio"} 
+                              checked={selected}
+                              disabled={isDisabled}
+                              onClick={(e) => {
+                                if (!isMultiple && selected) {
+                                  onCellSelect(actualRowId, undefined);
+                                }
+                              }}
+                              onChange={(e) => {
+                                if (isMultiple || !selected) {
+                                  onCellSelect(actualRowId, actualColValue);
+                                }
+                              }}
+                              style={{ 
+                                width: '18px', height: '18px', accentColor: 'var(--cfm-input-focus-ring)', 
+                                cursor: isDisabled ? 'not-allowed' : 'pointer',
+                                ...(isMultiple ? { borderRadius: '4px' } : {})
+                              }} 
+                            />
+                          </label>
                         </div>
                       );
                     })}
@@ -327,7 +315,7 @@ function LikertMatrixGridLayout({
                 </div>
 
                 {isBipolar && (
-                  <div style={{ flex: '0 0 var(--cfm-matrix-bipolar-width, 25%)', padding: '0 16px', textAlign: 'right', boxSizing: 'border-box' }}>
+                  <div style={{ flex: '0 0 25%', padding: '0 16px', textAlign: 'right', boxSizing: 'border-box' }}>
                     <span style={{ fontSize: '14px', fontWeight: 500, color: '#111827', lineHeight: 1.4, wordWrap: 'break-word', display: 'block' }}
                       dangerouslySetInnerHTML={{ __html: transposeTable ? '' : ('oppositeStatementText' in rowItem ? rowItem.oppositeStatementText ?? '' : '') }} />
                   </div>

package/templates/docs/templates/MatrixDropdown.tsx

@@ -9,7 +9,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import type { ScaleColumn } from '@explorer02/cfm-survey-sdk';
 import { matrixColumnStoredValue } from '@explorer02/cfm-survey-sdk';
-import { cellSelectedVar, focusRingVar } from '@/lib/surveyUi/selectionStyles';
 
 type MatrixDropdownProps = {
   options: ScaleColumn[];
@@ -73,9 +72,9 @@ export default function MatrixDropdown({
           style={{
             display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '8px',
             width: '100%', padding: '10px 14px', backgroundColor: '#fff',
-            border: `1px solid ${isOpen ? focusRingVar : '#d1d5db'}`, borderRadius: '8px',
+            border: `1px solid ${isOpen ? '#e20074' : '#d1d5db'}`, borderRadius: '8px',
             cursor: 'pointer', transition: 'all 0.2s', minHeight: '44px',
-            boxShadow: isOpen ? '0 0 0 3px var(--cfm-mcq-selected-bg)' : '0 1px 2px rgba(0,0,0,0.05)',
+            boxShadow: isOpen ? '0 0 0 3px rgba(226, 0, 116, 0.1)' : '0 1px 2px rgba(0,0,0,0.05)',
           }}
         >
           {multiValues.length === 0 ? (
@@ -125,9 +124,9 @@ export default function MatrixDropdown({
         style={{
           display: 'flex', alignItems: 'center', justifyContent: 'space-between',
           width: '100%', padding: '14px 16px', backgroundColor: '#fff',
-          border: `1px solid ${isOpen ? focusRingVar : '#d1d5db'}`, borderRadius: '8px',
+          border: `1px solid ${isOpen ? '#e20074' : '#d1d5db'}`, borderRadius: '8px',
           cursor: 'pointer', transition: 'all 0.2s',
-          boxShadow: isOpen ? '0 0 0 3px var(--cfm-mcq-selected-bg)' : '0 1px 2px rgba(0,0,0,0.05)',
+          boxShadow: isOpen ? '0 0 0 3px rgba(226, 0, 116, 0.1)' : '0 1px 2px rgba(0,0,0,0.05)',
         }}
       >
         <span
@@ -166,12 +165,12 @@ export default function MatrixDropdown({
                 key={col.id}
                 style={{
                   padding: '12px 16px', cursor: isDisabled ? 'not-allowed' : 'pointer', transition: 'background-color 0.15s',
-                  backgroundColor: isSelected ? 'var(--cfm-mcq-selected-bg)' : '#fff',
+                  backgroundColor: isSelected ? '#fdf2f8' : '#fff',
                   opacity: isDisabled ? 0.5 : 1,
                   display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px',
                 }}
-                onMouseEnter={e => { if (!isDisabled) e.currentTarget.style.backgroundColor = 'var(--cfm-mcq-selected-bg)'; }}
-                onMouseLeave={e => { if (!isDisabled) e.currentTarget.style.backgroundColor = isSelected ? 'var(--cfm-mcq-selected-bg)' : '#fff'; }}
+                onMouseEnter={e => { if (!isDisabled) e.currentTarget.style.backgroundColor = '#fdf2f8'; }}
+                onMouseLeave={e => { if (!isDisabled) e.currentTarget.style.backgroundColor = isSelected ? '#fdf2f8' : '#fff'; }}
                 onClick={e => {
                   e.preventDefault();
                   if (isDisabled) return;
@@ -188,8 +187,8 @@ export default function MatrixDropdown({
                     <div style={{
                       display: 'flex', alignItems: 'center', justifyContent: 'center',
                       width: '18px', height: '18px', borderRadius: '4px',
-                      border: isSelected ? `2px solid ${focusRingVar}` : '2px solid #d1d5db',
-                      backgroundColor: isSelected ? cellSelectedVar : '#fff',
+                      border: isSelected ? '2px solid #e20074' : '2px solid #d1d5db',
+                      backgroundColor: isSelected ? '#e20074' : '#fff',
                       flexShrink: 0, transition: 'all 0.15s',
                     }}>
                       {isSelected && (
@@ -199,11 +198,11 @@ export default function MatrixDropdown({
                       )}
                     </div>
                   )}
-                  <span style={{ fontSize: '15px', fontWeight: isSelected ? 600 : 400, color: isSelected ? focusRingVar : '#374151', userSelect: 'none' }}
+                  <span style={{ fontSize: '15px', fontWeight: isSelected ? 600 : 400, color: isSelected ? '#e20074' : '#374151', userSelect: 'none' }}
                         dangerouslySetInnerHTML={{ __html: col.label }} />
                 </div>
                 {!multiple && isSelected && (
-                  <svg style={{ width: '18px', height: '18px', color: focusRingVar, flexShrink: 0 }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg style={{ width: '18px', height: '18px', color: '#e20074', flexShrink: 0 }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
                   </svg>
                 )}

package/templates/docs/templates/Question.tsx

@@ -19,6 +19,7 @@ import { FileUploadScale } from './FileUploadScale';
 import { HeatmapScale } from './HeatmapScale';
 import { RankOrderScale } from './RankOrderScale';
 import RatingScale from './RatingScale';
+import { hintLabelStyle } from '@/lib/surveyUi/labelStyles';
 
 type QuestionProps = {
   question: SurveyQuestion;
@@ -140,6 +141,29 @@ export default function Question({
 
       {question.type === QUESTION_TYPE.NPS_SCALE && (
         <div className="space-y-3">
+          {(question.minLabel || question.midLabel || question.maxLabel) && (
+            <div className="relative w-full h-6 text-xs font-semibold" style={hintLabelStyle()}>
+              <span
+                className="absolute left-0 top-0 max-w-[30%] text-left leading-tight"
+                dangerouslySetInnerHTML={{ __html: question.minLabel ?? '' }}
+              />
+              {question.midLabel && (
+                <span
+                  className="absolute top-0 -translate-x-1/2 text-center max-w-[40%] leading-tight"
+                  style={{
+                    left: `${question.midLabelIndex !== undefined && question.options.length > 1
+                      ? (question.midLabelIndex / (question.options.length - 1)) * 100
+                      : 50}%`,
+                  }}
+                  dangerouslySetInnerHTML={{ __html: question.midLabel }}
+                />
+              )}
+              <span
+                className="absolute right-0 top-0 max-w-[30%] text-right leading-tight"
+                dangerouslySetInnerHTML={{ __html: question.maxLabel ?? '' }}
+              />
+            </div>
+          )}
           <RatingScale
             questionId={question.id}
             options={question.options}
@@ -147,10 +171,6 @@ export default function Question({
             onSelect={onSelect}
             variant="nps"
             buttonStyle={question.buttonStyle}
-            minLabel={question.minLabel}
-            midLabel={question.midLabel}
-            maxLabel={question.maxLabel}
-            midLabelIndex={question.midLabelIndex}
           />
         </div>
       )}

package/templates/docs/templates/RankOrderScale.tsx

@@ -25,7 +25,6 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { focusRingVar } from '@/lib/surveyUi/selectionStyles';
 import type {
   RankOrderAnswers,
   RankOrderOption,
@@ -121,35 +120,15 @@ function RankOrderOptionRow({
 }: RankOrderOptionRowProps) {
   return (
     <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 'var(--cfm-rank-item-gap, 12px)',
-        borderRadius: '8px',
-        border: '1px solid #e5e5e5',
-        backgroundColor: 'var(--cfm-rank-item-bg, #fff)',
-        padding: 'var(--cfm-rank-item-padding, 12px 16px)',
-        transition: 'background-color 0.15s',
-      }}
-      className="hover:bg-gray-50/50"
+      className="flex items-center gap-3 rounded-lg border border-[#e5e5e5] px-4 py-3 transition-colors"
+      style={{ backgroundColor: 'var(--cfm-rank-item-bg, #fff)', padding: 'var(--cfm-rank-item-padding, 12px 16px)', marginBottom: 'var(--cfm-rank-item-gap, 12px)' }}
     >
       {rankSelect}
       {dragHandle}
       {rankBadge !== undefined && (
         <span
-          style={{
-            display: 'flex',
-            height: '28px',
-            width: '28px',
-            flexShrink: 0,
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: '9999px',
-            backgroundColor: 'var(--cfm-rank-badge)',
-            fontSize: '14px',
-            fontWeight: 600,
-            color: '#fff',
-          }}
+          className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-sm font-semibold text-white"
+          style={{ backgroundColor: 'var(--cfm-rank-badge, var(--cfm-primary))' }}
         >
           {rankBadge}
         </span>
@@ -174,7 +153,7 @@ function DropdownRankLayout({
   };
 
   return (
-    <div className="space-y-3" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--cfm-rank-item-gap, 12px)' }}>
+    <div className="space-y-3">
       {question.options.map(option => {
         const currentRank = rankAnswers[option.id];
 
@@ -188,19 +167,8 @@ function DropdownRankLayout({
                 aria-label={`Rank for ${option.optionLabel || option.id}`}
                 value={currentRank ?? ''}
                 onChange={event => handleRankChange(option.id, event.target.value)}
-                style={{
-                  height: '40px',
-                  width: '64px',
-                  flexShrink: 0,
-                  borderRadius: '4px',
-                  border: '1px solid var(--cfm-rank-select-border, #d1d5db)',
-                  backgroundColor: '#fff',
-                  padding: '0 8px',
-                  fontSize: '14px',
-                  outline: 'none',
-                }}
-                onFocus={e => { e.currentTarget.style.borderColor = focusRingVar; }}
-                onBlur={e => { e.currentTarget.style.borderColor = 'var(--cfm-rank-select-border, #d1d5db)'; }}
+                className="h-10 w-16 shrink-0 rounded border bg-white px-2 text-sm outline-none"
+                style={{ borderColor: 'var(--cfm-rank-select-border, #d1d5db)' }}
               >
                 <option value="">-</option>
                 {rankChoices.map(rank => (
@@ -257,8 +225,7 @@ function SortableRankItem({
           <button
             type="button"
             aria-label={`Drag to reorder ${option.optionLabel || option.id}`}
-            className="flex h-10 w-8 shrink-0 cursor-grab items-center justify-center rounded active:cursor-grabbing"
-            style={{ color: 'var(--cfm-rank-handle, #6b7280)' }}
+            className="flex h-10 w-8 shrink-0 cursor-grab items-center justify-center rounded text-gray-500 hover:bg-gray-100 active:cursor-grabbing"
             {...attributes}
             {...listeners}
           >
@@ -356,7 +323,7 @@ function DragDropRankLayout({
   return (
     <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
       <SortableContext items={orderedOptionIds} strategy={verticalListSortingStrategy}>
-        <div className="space-y-3" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--cfm-rank-item-gap, 12px)' }}>
+        <div className="space-y-3">
           {orderedOptionIds.map((optionId, index) => {
             const option = question.options.find(item => item.id === optionId);
             if (!option) {