@explorer02/cfm-survey-sdk 0.3.1 → 0.3.2

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}
           >

package/templates/docs/templates/RatingScale.tsx

@@ -20,7 +20,7 @@ type RatingScaleProps = {
   selectedValue?: AnswerValue;
   onSelect: (value: AnswerValue) => void;
   variant?: 'nps' | 'star';
-  buttonStyle?: 'standard' | 'numbered' | 'emoji';
+  buttonStyle?: 'standard' | 'numbered' | 'emoji' | 'pill';
 };
 
 function resolveBadgeColor(index: number, value: number): string {
@@ -68,6 +68,7 @@ export default function RatingScale({
     gap: 'var(--cfm-nps-cell-gap, 2px)',
   };
   const showNumberBadges = buttonStyle !== 'standard';
+  const usePillCells = buttonStyle === 'pill';
 
   if (buttonStyle === 'emoji') {
     return (
@@ -92,7 +93,7 @@ export default function RatingScale({
                   style={{
                     ...scaleRadioRingStyle(isSelected, {
                       pill: false,
-                      size: 'var(--cfm-csat-emoji-size, 48px)',
+                      size: 'var(--cfm-csat-emoji-size, 40px)',
                     }),
                     fontSize: 'var(--cfm-csat-emoji-size, 24px)',
                   }}
@@ -158,9 +159,10 @@ export default function RatingScale({
                   className="flex items-center justify-center rounded-full border-2 transition-all"
                   style={scaleRadioRingStyle(isSelected, {
                     size: 'var(--cfm-nps-cell-size, 40px)',
+                    pill: usePillCells,
                   })}
                 >
-                  <div style={scaleRadioDotStyle(isSelected)} />
+                  <div style={scaleRadioDotStyle(isSelected, { pill: usePillCells })} />
                 </div>
               </label>
             );

package/templates/docs/templates/SliderMatrixScale.tsx

@@ -9,6 +9,10 @@ import React from 'react';
 import type { SliderMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-survey-sdk';
 import { tickColorFromIndex } from './surveyUiScaleUtils';
 import { CustomSliderTrack } from './CustomSliderTrack';
+import { hintLabelStyle, sliderTickLabelStyle } from '@/lib/surveyUi/labelStyles';
+
+const MATRIX_ROW_LABEL_WIDTH = 'var(--cfm-matrix-row-width, 180px)';
+const SLIDER_ROW_BAND = 'var(--cfm-slider-row-band, var(--cfm-row-band, #f3f4f6))';
 
 type SliderMatrixScaleProps = {
   question: SliderMatrixQuestion;
@@ -67,14 +71,22 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
         display: 'flex', width: '100%', marginBottom: '4px', alignItems: 'flex-end',
         padding: '0 16px', boxSizing: 'border-box',
       }}>
-        <div style={{ flex: '0 0 25%', paddingRight: '16px' }} />
+        <div style={{ flex: `0 0 ${MATRIX_ROW_LABEL_WIDTH}`, paddingRight: '16px' }} />
 
         <div style={{ flex: '1', position: 'relative' }}>
           {labels && labels.length > 0 && (
-            <div style={{
-              position: 'relative', display: 'flex', justifyContent: 'space-between',
-              margin: '0 16px', marginBottom: '16px', color: '#111827', fontSize: '14px', fontWeight: 500,
-            }}>
+            <div
+              style={{
+                position: 'relative',
+                display: 'flex',
+                justifyContent: 'space-between',
+                margin: '0 16px',
+                marginBottom: '16px',
+                fontSize: '14px',
+                fontWeight: 500,
+                ...hintLabelStyle(),
+              }}
+            >
               {labels.map((lbl, idx) => (
                 <div key={idx} style={{ width: 0, display: 'flex', justifyContent: 'center' }}>
                   <span style={{ whiteSpace: 'nowrap' }}>{lbl}</span>
@@ -83,10 +95,17 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
             </div>
           )}
 
-          <div style={{
-            position: 'relative', margin: '0 16px', marginBottom: '8px',
-            color: '#4b5563', fontSize: '14px', fontWeight: 400, height: '28px',
-          }}>
+          <div
+            style={{
+              position: 'relative',
+              margin: '0 16px',
+              marginBottom: '8px',
+              fontSize: '14px',
+              fontWeight: 400,
+              height: '28px',
+              ...sliderTickLabelStyle(),
+            }}
+          >
             {tickValues.length > 0 ? (
               tickValues.map((tv, idx) => {
                 const percentage = max !== min ? ((tv.value - min) / (max - min)) * 100 : 0;
@@ -101,11 +120,20 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
                         {tv.label}
                       </div>
                     ) : (
-                      <div style={{
-                        backgroundColor: tv.color, color: 'white', padding: '4px 8px', borderRadius: '4px',
-                        fontWeight: 600, wordBreak: 'break-word', textAlign: 'center', lineHeight: '1.2',
-                        boxShadow: '0 1px 2px rgba(0,0,0,0.1)',
-                      }}>
+                      <div
+                        style={{
+                          backgroundColor: tv.color,
+                          color: 'white',
+                          padding: '4px 8px',
+                          borderRadius: '4px',
+                          fontWeight: 600,
+                          wordBreak: 'break-word',
+                          textAlign: 'center',
+                          lineHeight: '1.2',
+                          boxShadow: '0 1px 2px rgba(0,0,0,0.1)',
+                          minWidth: 'var(--cfm-slider-tick-size, 28px)',
+                        }}
+                      >
                         {tv.label}
                       </div>
                     )}
@@ -151,9 +179,9 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
         return (
           <div key={row.id} style={{
             display: 'flex', width: '100%', alignItems: 'center',
-            backgroundColor: '#f3f4f6', borderRadius: '12px', padding: '16px', boxSizing: 'border-box',
+            backgroundColor: SLIDER_ROW_BAND, borderRadius: '12px', padding: '16px', boxSizing: 'border-box',
           }}>
-            <div style={{ flex: '0 0 25%', paddingRight: '16px', fontSize: '15px', color: '#111827', wordWrap: 'break-word', display: 'flex', alignItems: 'center' }}>
+            <div style={{ flex: `0 0 ${MATRIX_ROW_LABEL_WIDTH}`, paddingRight: '16px', fontSize: '15px', color: '#111827', wordWrap: 'break-word', display: 'flex', alignItems: 'center' }}>
               {row.statementText !== 'Question' && row.statementText !== '' ? (
                 <span dangerouslySetInnerHTML={{ __html: row.statementText }} />
               ) : null}

package/templates/docs/templates/selectionStyles.ts

@@ -8,9 +8,96 @@
  */
 import type { CSSProperties } from 'react';
 
-/** Terminal hex fallbacks match apps/client RatingScale — visible before survey-theme.css loads. */
+/** Terminal hex fallbacks match apps/client — visible before survey-theme.css loads. */
 export const cellSelectedVar = 'var(--cfm-matrix-selected, var(--cfm-primary, #fbe8f3))';
 export const focusRingVar = 'var(--cfm-input-focus-ring, var(--cfm-primary, #e20074))';
+export const mcqSelectedAccentVar = focusRingVar;
+export const mcqSelectedBgVar = 'var(--cfm-mcq-selected-bg, var(--cfm-secondary, #fdf2f8))';
+export const matrixCarouselDotVar = 'var(--cfm-matrix-carousel-dot, #2563eb)';
+
+const unselectedBorder = 'var(--cfm-card-border-color, #e5e5e5)';
+
+function readMcqOptionStyle(): string {
+  if (typeof document === 'undefined') return 'outlined';
+  const root = document.documentElement;
+  return (
+    root.getAttribute('data-cfm-mcq-style') ||
+    getComputedStyle(root).getPropertyValue('--cfm-mcq-option-style').trim() ||
+    'outlined'
+  );
+}
+
+/** MCQ option card — border, background, padding (wizard: --cfm-mcq-*). */
+export function mcqOptionCardStyle(isSelected: boolean): CSSProperties {
+  const optionStyle = readMcqOptionStyle();
+  const base: CSSProperties = {
+    borderRadius: 'var(--cfm-mcq-border-radius, 8px)',
+    border: `2px solid ${isSelected ? focusRingVar : unselectedBorder}`,
+    background: isSelected ? mcqSelectedBgVar : 'var(--cfm-card-bg, #fff)',
+    padding: 'var(--cfm-mcq-card-padding, 16px 20px)',
+    marginBottom: 'var(--cfm-mcq-option-gap, 8px)',
+  };
+
+  if (optionStyle === 'filled') {
+    return {
+      ...base,
+      background: isSelected ? mcqSelectedBgVar : 'var(--cfm-secondary, #f9fafb)',
+    };
+  }
+
+  if (optionStyle === 'minimal') {
+    return {
+      ...base,
+      border: isSelected ? `2px solid ${focusRingVar}` : '2px solid transparent',
+      boxShadow: 'none',
+      background: isSelected ? mcqSelectedBgVar : 'transparent',
+    };
+  }
+
+  return base;
+}
+
+/** MCQ checkbox control indicator. */
+export function mcqCheckboxControlStyle(isSelected: boolean): CSSProperties {
+  return {
+    display: 'flex',
+    height: '20px',
+    width: '20px',
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '4px',
+    border: `1px solid ${isSelected ? focusRingVar : '#9ca3af'}`,
+    backgroundColor: isSelected ? focusRingVar : '#fff',
+    transition: 'all 0.15s',
+  };
+}
+
+/** MCQ radio outer ring. */
+export function mcqRadioOuterStyle(isSelected: boolean): CSSProperties {
+  return {
+    display: 'flex',
+    height: '20px',
+    width: '20px',
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '50%',
+    border: isSelected ? `2px solid ${focusRingVar}` : '1px solid #9ca3af',
+    backgroundColor: isSelected ? cellSelectedVar : '#fff',
+    transition: 'all 0.15s',
+  };
+}
+
+/** MCQ radio inner dot — focus ring color. */
+export function mcqRadioInnerStyle(): CSSProperties {
+  return {
+    height: '10px',
+    width: '10px',
+    borderRadius: '50%',
+    backgroundColor: focusRingVar,
+  };
+}
 
 const unselectedRing = '#d1d5db';
 const unselectedDot = '#d1d5db';

package/templates/docs/templates/surveyUiIcons.tsx

@@ -55,9 +55,9 @@ export function getEmojiForIndex(index: number, total: number): React.ReactNode
 
 export const CsatStarIcons: { filled: React.ReactNode; empty: React.ReactNode } = {
   filled: React.createElement(FaStar as React.ElementType, {
-    style: { color: '#e20074', fontSize: '28px' },
+    style: { color: 'var(--cfm-csat-accent, var(--cfm-primary, #e20074))', fontSize: 'var(--cfm-csat-emoji-size, 28px)' },
   }),
   empty: React.createElement(FaRegStar as React.ElementType, {
-    style: { color: '#d1d5db', fontSize: '28px', stroke: '#d1d5db', strokeWidth: '16px' },
+    style: { color: '#d1d5db', fontSize: 'var(--cfm-csat-emoji-size, 28px)', stroke: '#d1d5db', strokeWidth: '16px' },
   }),
 };