@explorer02/cfm-survey-sdk 0.3.0 → 0.3.2

package/templates/docs/templates/LikertMatrixScale.tsx

@@ -3,8 +3,10 @@ import type { CfmMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-survey
 import { columnSubmitValue } from './surveyUiScaleUtils';
 import MatrixDropdown from './MatrixDropdown';
 import { matrixColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
+import { focusRingVar, matrixCarouselDotVar, matrixRadioDotStyle, matrixRadioRingStyle } from '@/lib/surveyUi/selectionStyles';
 
 const MATRIX_ROW_LABEL_WIDTH = 'var(--cfm-matrix-row-width, 180px)';
+const BIPOLAR_COL_WIDTH = 'var(--cfm-matrix-bipolar-width, 25%)';
 
 type LikertMatrixScaleProps = {
   question: CfmMatrixQuestion;
@@ -114,8 +116,8 @@ function LikertMatrixCarouselLayout({
                 <div style={{
                   display: 'flex', alignItems: 'center', justifyContent: 'center',
                   width: '18px', height: '18px', borderRadius: '4px',
-                  border: selected ? '2px solid #e20074' : '2px solid #d1d5db',
-                  backgroundColor: selected ? '#e20074' : '#fff',
+                  border: selected ? `2px solid ${focusRingVar}` : '2px solid #d1d5db',
+                  backgroundColor: selected ? focusRingVar : '#fff',
                   flexShrink: 0, transition: 'all 0.15s'
                 }}>
                   {selected && (
@@ -125,13 +127,8 @@ function LikertMatrixCarouselLayout({
                   )}
                 </div>
               ) : (
-                <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 style={matrixRadioRingStyle(selected, '18px')}>
+                  <div style={matrixRadioDotStyle(selected, '8px')} />
                 </div>
               )}
               <span style={{ fontSize: '15px', fontWeight: 400, color: '#374151', userSelect: 'none' }} dangerouslySetInnerHTML={{ __html: col.label }} />
@@ -154,7 +151,7 @@ function LikertMatrixCarouselLayout({
           {statementRows.map((_, i) => (
             <div key={i} style={{ 
               width: '10px', height: '10px', borderRadius: '50%', 
-              backgroundColor: i === activeCarouselIndex ? '#2563eb' : '#e5e7eb',
+              backgroundColor: i === activeCarouselIndex ? matrixCarouselDotVar : '#e5e7eb',
               cursor: 'pointer', transition: 'background-color 0.2s'
             }} onClick={() => setActiveCarouselIndex(i)} />
           ))}
@@ -209,7 +206,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 25%', paddingRight: '16px', boxSizing: 'border-box' }} />
+            <div style={{ flex: `0 0 ${BIPOLAR_COL_WIDTH}`, paddingRight: '16px', boxSizing: 'border-box' }} />
             <div style={{ flex: 1, position: 'relative', height: '20px' }}>
               {labels.map((lbl, idx) => {
                 let leftPos = '50%';
@@ -227,12 +224,12 @@ function LikertMatrixGridLayout({
                 );
               })}
             </div>
-            <div style={{ flex: '0 0 25%', paddingLeft: '16px', boxSizing: 'border-box' }} />
+            <div style={{ flex: `0 0 ${BIPOLAR_COL_WIDTH}`, paddingLeft: '16px', boxSizing: 'border-box' }} />
           </div>
         )}
         {showColumnHeaders && (
           <div style={{ display: 'flex', alignItems: 'flex-end', minHeight: '24px' }}>
-            <div style={{ flex: isBipolar ? '0 0 25%' : `0 0 ${MATRIX_ROW_LABEL_WIDTH}`, paddingRight: '16px', boxSizing: 'border-box' }} />
+            <div style={{ flex: isBipolar ? `0 0 ${BIPOLAR_COL_WIDTH}` : `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) => (
@@ -243,7 +240,7 @@ function LikertMatrixGridLayout({
                 ))}
               </div>
             </div>
-            {isBipolar && <div style={{ flex: '0 0 25%', paddingLeft: '16px', boxSizing: 'border-box' }} />}
+            {isBipolar && <div style={{ flex: `0 0 ${BIPOLAR_COL_WIDTH}`, paddingLeft: '16px', boxSizing: 'border-box' }} />}
           </div>
         )}
       </div>
@@ -261,10 +258,10 @@ function LikertMatrixGridLayout({
               {repeatColumnHeaders && renderHeader()}
               <div style={{
                 display: 'flex', alignItems: 'center', borderRadius: '8px',
-                padding: '12px 0', backgroundColor: !repeatColumnHeaders && rowIdx % 2 === 0 ? 'rgba(249, 250, 251, 0.8)' : '#fff',
+                padding: 'var(--cfm-matrix-cell-padding, 12px) 0', backgroundColor: !repeatColumnHeaders && rowIdx % 2 === 0 ? 'var(--cfm-zebra-row, rgba(249, 250, 251, 0.8))' : '#fff',
                 boxSizing: 'border-box'
               }}>
-                <div style={{ flex: isBipolar ? '0 0 25%' : `0 0 ${MATRIX_ROW_LABEL_WIDTH}`, padding: '0 16px', boxSizing: 'border-box' }}>
+                <div style={{ flex: isBipolar ? `0 0 ${BIPOLAR_COL_WIDTH}` : `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>
@@ -282,31 +279,44 @@ function LikertMatrixGridLayout({
 
                       return (
                         <div key={colItem.id} style={{ display: 'flex', justifyContent: 'center' }}>
-                          <label style={{ 
-                            cursor: isDisabled ? 'not-allowed' : 'pointer', 
+                          <label style={{
+                            cursor: isDisabled ? 'not-allowed' : 'pointer',
                             opacity: isDisabled ? 0.4 : 1,
-                            padding: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center' 
+                            padding: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center',
                           }}>
-                            <input 
-                              type={isMultiple ? "checkbox" : "radio"} 
+                            <input
+                              type="checkbox"
+                              className="sr-only"
                               checked={selected}
                               disabled={isDisabled}
-                              onClick={(e) => {
-                                if (!isMultiple && selected) {
-                                  onCellSelect(actualRowId, undefined);
-                                }
-                              }}
-                              onChange={(e) => {
-                                if (isMultiple || !selected) {
+                              onChange={() => {
+                                if (isDisabled) return;
+                                if (isMultiple) {
+                                  onCellSelect(actualRowId, selected ? undefined : actualColValue);
+                                } else if (!selected) {
                                   onCellSelect(actualRowId, actualColValue);
+                                } else {
+                                  onCellSelect(actualRowId, undefined);
                                 }
                               }}
-                              style={{ 
-                                width: '18px', height: '18px', accentColor: 'var(--cfm-input-focus-ring)', 
-                                cursor: isDisabled ? 'not-allowed' : 'pointer',
-                                ...(isMultiple ? { borderRadius: '4px' } : {})
-                              }} 
                             />
+                            {isMultiple ? (
+                              <div style={{
+                                display: 'flex', width: '18px', height: '18px', alignItems: 'center', justifyContent: 'center',
+                                borderRadius: '4px', border: selected ? `2px solid ${focusRingVar}` : '2px solid #d1d5db',
+                                backgroundColor: selected ? focusRingVar : '#fff',
+                              }}>
+                                {selected && (
+                                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3">
+                                    <polyline points="20 6 9 17 4 12" />
+                                  </svg>
+                                )}
+                              </div>
+                            ) : (
+                              <div style={matrixRadioRingStyle(selected, '18px')}>
+                                <div style={matrixRadioDotStyle(selected, '8px')} />
+                              </div>
+                            )}
                           </label>
                         </div>
                       );

package/templates/docs/templates/MatrixDropdown.tsx

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

@@ -11,7 +11,7 @@
 
 import React, { useMemo } from 'react';
 import type { SurveyQuestion, AnswerValue, SurveyAnswers, CustomFieldValueMap, HeatmapAnswer, HeatmapQuestion } from '@explorer02/cfm-survey-sdk';
-import { QUESTION_TYPE, resolveSurveyQuestionPlaceholders, getVisibleMatrixItemsForAnswers, getVisibleMcqOptionsForAnswers, getVisibleRankOrderOptionsForAnswers } from '@explorer02/cfm-survey-sdk';
+import { QUESTION_TYPE, resolveSurveyQuestionPlaceholders, getVisibleMatrixItemsForAnswers, getVisibleMcqOptionsForAnswers, getVisibleRankOrderOptionsForAnswers, normalizeRankOrderAnswers } from '@explorer02/cfm-survey-sdk';
 import { CsatMatrixScale } from './CsatMatrixScale';
 import { SliderMatrixScale } from './SliderMatrixScale';
 import { LikertMatrixScale } from './LikertMatrixScale';
@@ -20,6 +20,13 @@ import { HeatmapScale } from './HeatmapScale';
 import { RankOrderScale } from './RankOrderScale';
 import RatingScale from './RatingScale';
 import { hintLabelStyle } from '@/lib/surveyUi/labelStyles';
+import {
+  mcqCheckboxControlStyle,
+  mcqOptionCardStyle,
+  mcqRadioInnerStyle,
+  mcqRadioOuterStyle,
+  focusRingVar,
+} from '@/lib/surveyUi/selectionStyles';
 
 type QuestionProps = {
   question: SurveyQuestion;
@@ -205,14 +212,8 @@ export default function Question({
                 return (
                   <label
                     key={option.id}
-                    className="flex cursor-pointer items-center gap-4 transition-all"
-                    style={{
-                      borderRadius: 'var(--cfm-mcq-border-radius, 8px)',
-                      border: `2px solid ${isSelected ? 'var(--cfm-mcq-selected-accent, var(--cfm-primary))' : 'var(--cfm-card-border-color, #e5e7eb)'}`,
-                      background: isSelected ? 'var(--cfm-mcq-selected-bg, var(--cfm-secondary))' : 'var(--cfm-card-bg, #fff)',
-                      padding: 'var(--cfm-mcq-card-padding, 12px)',
-                      marginBottom: 'var(--cfm-mcq-option-gap, 8px)',
-                    }}
+                    className="cfm-mcq-option flex cursor-pointer items-center gap-4 transition-all hover:bg-gray-50/50"
+                    style={mcqOptionCardStyle(isSelected)}
                   >
                     <input
                       type="checkbox"
@@ -221,6 +222,13 @@ export default function Question({
                       onChange={() => handleToggle(option.id)}
                       className="sr-only"
                     />
+                    <div style={mcqCheckboxControlStyle(isSelected)}>
+                      {isSelected && (
+                        <svg className="h-3 w-3 text-white" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+                          <path d="M2 6l3 3 5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                        </svg>
+                      )}
+                    </div>
                     <span
                       className="text-[15px] font-medium text-gray-900 leading-tight"
                       dangerouslySetInnerHTML={{ __html: option.optionLabel }}
@@ -241,14 +249,8 @@ export default function Question({
               return (
                 <label
                   key={option.id}
-                  className="flex cursor-pointer items-center gap-4 transition-all"
-                  style={{
-                    borderRadius: 'var(--cfm-mcq-border-radius, 8px)',
-                    border: `2px solid ${isSelected ? 'var(--cfm-mcq-selected-accent, var(--cfm-primary))' : 'var(--cfm-card-border-color, #e5e7eb)'}`,
-                    background: isSelected ? 'var(--cfm-mcq-selected-bg, var(--cfm-secondary))' : 'var(--cfm-card-bg, #fff)',
-                    padding: 'var(--cfm-mcq-card-padding, 12px)',
-                    marginBottom: 'var(--cfm-mcq-option-gap, 8px)',
-                  }}
+                  className="cfm-mcq-option flex cursor-pointer items-center gap-4 transition-all hover:bg-gray-50/50"
+                  style={mcqOptionCardStyle(isSelected)}
                 >
                   <input
                     type="radio"
@@ -257,6 +259,9 @@ export default function Question({
                     onChange={() => onSelect(option.id)}
                     className="sr-only"
                   />
+                  <div style={mcqRadioOuterStyle(isSelected)}>
+                    {isSelected && <div style={mcqRadioInnerStyle()} />}
+                  </div>
                   <span
                     className="text-[15px] font-medium text-gray-900 leading-tight"
                     dangerouslySetInnerHTML={{ __html: option.optionLabel }}
@@ -271,31 +276,48 @@ export default function Question({
       {question.type === QUESTION_TYPE.RANK_ORDER && rankOrderQuestion && (
         <RankOrderScale
           question={rankOrderQuestion}
-          selectedValue={
-            typeof selectedValue === 'object' && selectedValue !== null && !Array.isArray(selectedValue)
-              ? selectedValue
-              : undefined
-          }
+          selectedValue={normalizeRankOrderAnswers(selectedValue)}
           onSelect={onSelect}
         />
       )}
 
       {question.type === QUESTION_TYPE.TEXTFIELD && (
-        <textarea
-          data-cfm-textfield
-          rows={question.inputVariant === 'long' ? 4 : 1}
-          value={(selectedValue as string) ?? ''}
-          onChange={e => onSelect(e.target.value)}
-          placeholder={question.placeholder || 'Type your response here...'}
-          className="w-full outline-none"
-          style={{
-            height: question.inputVariant === 'long' ? undefined : 'var(--cfm-input-height, 44px)',
-            borderRadius: 'var(--cfm-input-radius, 8px)',
-            border: '1px solid var(--cfm-input-border, #d1d5db)',
-            padding: 'var(--cfm-input-padding, 12px)',
-            color: 'var(--cfm-text)',
-          }}
-        />
+        <div className="space-y-1.5">
+          <textarea
+            data-cfm-textfield
+            rows={question.inputVariant === 'long' ? 4 : 1}
+            value={(selectedValue as string) ?? ''}
+            onChange={e => onSelect(e.target.value)}
+            placeholder={question.placeholder || 'Type your response here...'}
+            className="w-full text-sm outline-none transition-colors"
+            style={{
+              height: question.inputVariant === 'long' ? undefined : 'var(--cfm-input-height, 44px)',
+              borderRadius: 'var(--cfm-input-radius, 4px)',
+              border: '1px solid var(--cfm-input-border, #d1d5db)',
+              padding: 'var(--cfm-input-padding, 16px)',
+              color: 'var(--cfm-text)',
+            }}
+            onFocus={e => {
+              e.currentTarget.style.borderColor = focusRingVar;
+              e.currentTarget.style.boxShadow = `0 0 0 1px ${focusRingVar}`;
+            }}
+            onBlur={e => {
+              e.currentTarget.style.borderColor = 'var(--cfm-input-border, #d1d5db)';
+              e.currentTarget.style.boxShadow = 'none';
+            }}
+          />
+          <div
+            className="text-right text-xs pr-1"
+            style={{ color: 'var(--cfm-input-placeholder, #6b7280)' }}
+          >
+            {Math.max(
+              0,
+              (question.maxCharacterCount ?? 1000) -
+                (typeof selectedValue === 'string' ? selectedValue.length : 0)
+            )}{' '}
+            characters remaining
+          </div>
+        </div>
       )}
 
       {question.type === QUESTION_TYPE.CFM_MATRIX && (
@@ -336,21 +358,64 @@ export default function Question({
       )}
 
       {question.type === QUESTION_TYPE.TEXT_AND_MEDIA && question.media?.url && (
-        <div className={`mt-4 flex w-full ${question.media.alignment?.includes('CENTER') ? 'justify-center' : question.media.alignment?.includes('RIGHT') ? 'justify-end' : 'justify-start'}`}>
-          <div style={{ width: question.media.size ? `${question.media.size}%` : '100%' }}>
+        <div
+          className={`mt-4 flex w-full ${
+            question.media.alignment === 'TOP_CENTER' || question.media.alignment === 'BOTTOM_CENTER'
+              ? 'justify-center'
+              : question.media.alignment === 'TOP_RIGHT' || question.media.alignment === 'BOTTOM_RIGHT'
+                ? 'justify-end'
+                : 'justify-start'
+          }`}
+        >
+          <div
+            style={{
+              width: question.media.size
+                ? `${question.media.size}%`
+                : 'var(--cfm-media-max-width, 100%)',
+              maxWidth: 'var(--cfm-media-max-width, 100%)',
+            }}
+            className="flex flex-col gap-2"
+          >
             {question.media.mimeType?.startsWith('video/') || question.media.mimeType === 'VIDEO' ? (
-              <video controls src={question.media.url} className="max-w-full rounded-md" />
+              <video
+                controls
+                src={question.media.url}
+                className="max-w-full shadow-sm"
+                style={{ borderRadius: 'var(--cfm-media-radius, 8px)' }}
+              />
             ) : (
-              <img src={question.media.url} alt={question.media.title || ''} className="max-w-full rounded-md" />
+              <img
+                src={question.media.url}
+                alt={question.media.title || ''}
+                className="max-w-full shadow-sm"
+                style={{ borderRadius: 'var(--cfm-media-radius, 8px)' }}
+              />
+            )}
+            {question.media.title && (
+              <p
+                className="text-center"
+                style={{
+                  color: 'var(--cfm-media-caption-color, #6b7280)',
+                  fontSize: 'var(--cfm-media-caption-size, 14px)',
+                }}
+              >
+                {question.media.title}
+              </p>
             )}
-            {question.media.title && <p className="text-sm text-gray-500 text-center mt-2">{question.media.title}</p>}
           </div>
         </div>
       )}
 
       {validationError && (
-        <div className="mt-4 rounded border border-gray-800 bg-gray-200 py-3 px-4">
-          <p className="text-sm font-bold text-gray-900">{validationError}</p>
+        <div
+          className="mt-4 rounded py-3.5 px-4 text-left"
+          style={{
+            border: '1px solid var(--cfm-validation-border, #333333)',
+            backgroundColor: 'var(--cfm-validation-bg, #d9d9d9)',
+            borderRadius: 'var(--cfm-input-radius, 4px)',
+          }}
+        >
+          <p className="text-[13px] sm:text-sm font-bold text-gray-900 leading-tight">{validationError}</p>
         </div>
       )}
     </section>

package/templates/docs/templates/RankOrderScale.tsx

@@ -37,6 +37,7 @@ import {
   getOrderedOptionIdsFromRanks,
   normalizeRankOrderAnswers,
 } from '@explorer02/cfm-survey-sdk';
+import { focusRingVar } from '@/lib/surveyUi/selectionStyles';
 
 type RankOrderScaleProps = {
   question: RankOrderQuestion;
@@ -120,15 +121,22 @@ function RankOrderOptionRow({
 }: RankOrderOptionRowProps) {
   return (
     <div
-      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)' }}
+      className="flex items-center gap-3 rounded-lg border border-[#e5e5e5] transition-colors hover:bg-gray-50/50"
+      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
-          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))' }}
+          className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-sm font-semibold"
+          style={{
+            backgroundColor: 'var(--cfm-rank-badge-bg, var(--cfm-mcq-selected-bg, #fdf2f8))',
+            color: 'var(--cfm-rank-badge-text, var(--cfm-mcq-selected-accent, var(--cfm-primary, #e20074)))',
+          }}
         >
           {rankBadge}
         </span>
@@ -169,6 +177,14 @@ function DropdownRankLayout({
                 onChange={event => handleRankChange(option.id, event.target.value)}
                 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)' }}
+                onFocus={e => {
+                  e.currentTarget.style.borderColor = focusRingVar;
+                  e.currentTarget.style.boxShadow = `0 0 0 1px ${focusRingVar}`;
+                }}
+                onBlur={e => {
+                  e.currentTarget.style.borderColor = 'var(--cfm-rank-select-border, #d1d5db)';
+                  e.currentTarget.style.boxShadow = 'none';
+                }}
               >
                 <option value="">-</option>
                 {rankChoices.map(rank => (
@@ -225,7 +241,8 @@ 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 text-gray-500 hover:bg-gray-100 active:cursor-grabbing"
+            className="flex h-10 w-8 shrink-0 cursor-grab items-center justify-center rounded active:cursor-grabbing"
+            style={{ color: 'var(--cfm-rank-handle, #9ca3af)' }}
             {...attributes}
             {...listeners}
           >