@explorer02/cfm-survey-sdk 0.3.1 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer02/cfm-survey-sdk",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/templates/docs/templates/CsatMatrixScale.tsx

@@ -7,11 +7,14 @@ import MatrixDropdown from './MatrixDropdown';
 import {
   matrixRadioRingStyle,
   matrixRadioDotStyle,
+  matrixRowBackgroundStyle,
   scaleCellSelectedStyle,
   unselectedOpacityStyle,
   emojiSizeStyle,
   cellSelectedVar,
   focusRingVar,
+  mcqSelectedAccentVar,
+  mcqSelectedBgVar,
 } from '@/lib/surveyUi/selectionStyles';
 import { csatColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
 
@@ -106,10 +109,10 @@ function CsatMatrixVerticalList({
                     onClick={() => onCellSelect(row.id, submitValue)}
                     style={{
                       width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'flex-start',
-                      borderRadius: '8px', border: `1px solid ${isSelected ? '#e20074' : '#d1d5db'}`,
+                      borderRadius: '8px', border: `1px solid ${isSelected ? mcqSelectedAccentVar : '#d1d5db'}`,
                       padding: '14px 18px', cursor: 'pointer', transition: 'all 0.15s',
-                      backgroundColor: isSelected ? '#fdf2f8' : '#fff',
-                      color: isSelected ? '#e20074' : '#374151',
+                      backgroundColor: isSelected ? mcqSelectedBgVar : '#fff',
+                      color: isSelected ? mcqSelectedAccentVar : '#374151',
                       fontWeight: isSelected ? 600 : 400, fontSize: '15px', textAlign: 'left',
                     }}
                   >
@@ -128,9 +131,9 @@ function CsatMatrixVerticalList({
                     key={col.id}
                     style={{
                       display: 'flex', alignItems: 'center', gap: '16px',
-                      borderRadius: '8px', border: `1px solid ${isSelected ? '#e20074' : '#e5e5e5'}`,
+                      borderRadius: '8px', border: `1px solid ${isSelected ? mcqSelectedAccentVar : '#e5e5e5'}`,
                       padding: '16px 20px', cursor: 'pointer', transition: 'all 0.15s',
-                      backgroundColor: isSelected ? '#fdf2f8' : '#fff',
+                      backgroundColor: isSelected ? mcqSelectedBgVar : '#fff',
                     }}
                   >
                     <input type="radio" name={`${question.id}-${row.id}`}
@@ -138,13 +141,8 @@ function CsatMatrixVerticalList({
                       onChange={() => onCellSelect(row.id, submitValue)}
                       style={{ position: 'absolute', width: 0, height: 0, opacity: 0 }}
                     />
-                    <div style={{
-                      display: 'flex', width: '20px', height: '20px', flexShrink: 0,
-                      alignItems: 'center', justifyContent: 'center', borderRadius: '50%',
-                      border: isSelected ? '2px solid #e20074' : '1.5px solid #9ca3af',
-                      backgroundColor: '#fff',
-                    }}>
-                      {isSelected && <div style={{ width: '10px', height: '10px', borderRadius: '50%', backgroundColor: '#e20074' }} />}
+                    <div style={matrixRadioRingStyle(isSelected, '20px')}>
+                      <div style={matrixRadioDotStyle(isSelected, '10px')} />
                     </div>
                     <span style={{ fontSize: '15px', fontWeight: 500, color: '#111827' }}
                       dangerouslySetInnerHTML={{ __html: col.label }} />
@@ -158,7 +156,7 @@ function CsatMatrixVerticalList({
             <label style={{ display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer', userSelect: 'none' }}>
               <input type="checkbox" checked={selectedValue[row.id] === null}
                 onChange={() => onCellSelect(row.id, selectedValue[row.id] === null ? undefined : null)}
-                style={{ width: '16px', height: '16px', accentColor: '#e20074', cursor: 'pointer' }} />
+                style={{ width: '16px', height: '16px', accentColor: focusRingVar, cursor: 'pointer' }} />
               <span style={{ fontSize: '14px', fontWeight: 500, color: '#4b5563' }}>Not Applicable</span>
             </label>
           )}
@@ -241,8 +239,8 @@ function CsatMatrixGrid({
         </div>
       )}
 
-      {/* Column Headers for non-graphics */}
-      {!isGraphics && !showLabels && m > 0 && (
+      {/* Column Headers for non-graphics — star format always shows labels above stars */}
+      {!isGraphics && (!showLabels || isStar) && m > 0 && (
         <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '16px', minHeight: '24px' }}>
           <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0 }} />
           <div style={{ flex: 1, display: 'flex' }}>
@@ -270,7 +268,7 @@ function CsatMatrixGrid({
         {statementRows.map((row, rowIdx) => (
           <div key={row.id} style={{
             display: 'flex', alignItems: 'center', borderRadius: '8px',
-            padding: '12px 0', backgroundColor: rowIdx % 2 === 0 ? 'rgba(249, 250, 251, 0.8)' : '#fff',
+            padding: '12px 0', ...matrixRowBackgroundStyle(rowIdx),
           }}>
             <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0, padding: '0 16px' }}>
               <span style={{ fontSize: '14px', fontWeight: 500, color: '#111827', lineHeight: 1.4 }}
@@ -387,7 +385,7 @@ function CsatMatrixGrid({
                 <label style={{ cursor: 'pointer' }}>
                   <input type="checkbox" checked={selectedValue[row.id] === null}
                     onChange={() => onCellSelect(row.id, selectedValue[row.id] === null ? undefined : null)}
-                    style={{ width: '16px', height: '16px', accentColor: '#e20074', cursor: 'pointer' }} />
+                    style={{ width: '16px', height: '16px', accentColor: focusRingVar, cursor: 'pointer' }} />
                 </label>
               </div>
             )}
@@ -490,13 +488,8 @@ function CsatMatrixCarousel({
             const EmojiNode = isEmoji ? getEmojiForIndex(displayIdx, scaleColumns.length) : null;
             const StarNode = isStar ? (isSelected ? (CsatStarIcons.filled as any) : (CsatStarIcons.empty as any)) : null;
             const RadioNode = (
-              <div style={{
-                display: 'flex', width: '18px', height: '18px',
-                alignItems: 'center', justifyContent: 'center', borderRadius: '50%',
-                margin: '0 auto', border: isSelected ? '2px solid #e20074' : '2px solid #d1d5db',
-                backgroundColor: '#fff',
-              }}>
-                {isSelected && <div style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#e20074' }} />}
+              <div style={matrixRadioRingStyle(isSelected, '18px')}>
+                <div style={matrixRadioDotStyle(isSelected, '8px')} />
               </div>
             );
 
@@ -518,7 +511,9 @@ function CsatMatrixCarousel({
                       padding: '4px', transform: isHovered ? 'scale(1.1)' : 'scale(1)', opacity: isSelected ? 1 : isHovered ? 1 : 0.5,
                     } : isNumbered ? {
                       width: '40px', height: '40px', borderRadius: '8px', fontSize: '14px', fontWeight: 500,
-                      border: `1px solid ${isSelected ? '#e20074' : '#d1d5db'}`, backgroundColor: isSelected ? '#e20074' : '#fff', color: isSelected ? '#fff' : '#111827',
+                      ...(isSelected
+                        ? scaleCellSelectedStyle(true)
+                        : { border: '1px solid #d1d5db', backgroundColor: '#fff', color: '#111827' }),
                     } : { padding: '8px' }),
                   }}
                 >
@@ -537,7 +532,7 @@ function CsatMatrixCarousel({
           <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
             <input type="checkbox" checked={selectedValue[row.id] === null}
                    onChange={() => onCellSelect(row.id, selectedValue[row.id] === null ? undefined : null)}
-                   style={{ width: '16px', height: '16px', accentColor: '#e20074', cursor: 'pointer' }} />
+                   style={{ width: '16px', height: '16px', accentColor: focusRingVar, cursor: 'pointer' }} />
             <span style={{ fontSize: '14px', fontWeight: 500, color: '#4b5563' }}>N/A</span>
           </label>
         </div>
@@ -559,7 +554,7 @@ function CsatMatrixCarousel({
             <button key={i} type="button" onClick={() => setActiveCarouselIndex(i)}
                     style={{
                       width: i === activeCarouselIndex ? '20px' : '8px', height: '8px', borderRadius: '4px',
-                      backgroundColor: i === activeCarouselIndex ? '#e20074' : '#d1d5db', border: 'none', padding: 0,
+                      backgroundColor: i === activeCarouselIndex ? mcqSelectedAccentVar : '#d1d5db', border: 'none', padding: 0,
                       cursor: 'pointer', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
                     }} />
           ))}

package/templates/docs/templates/CustomSliderTrack.tsx

@@ -50,7 +50,9 @@ export function CustomSliderTrack({
     ? tooltipLabel.replace(/<[^>]*>/g, '')
     : String(Math.round(value));
 
-  const themeColor = disabled ? '#9ca3af' : 'var(--cfm-input-focus-ring, var(--cfm-primary))';
+  const themeColor = disabled
+    ? '#9ca3af'
+    : 'var(--cfm-slider-thumb, var(--cfm-input-focus-ring, var(--cfm-primary)))';
 
   return (
     <div
@@ -127,7 +129,7 @@ export function CustomSliderTrack({
       {(isHovered || isDragging) && !disabled && (
         <div style={{
           position: 'absolute', bottom: '100%', left: `${percentage}%`, transform: 'translate(-50%, -10px)',
-          backgroundColor: '#1f2937', color: '#fff', fontSize: '13px', fontWeight: 600,
+          backgroundColor: 'var(--cfm-tooltip-bg, #1f2937)', color: '#fff', fontSize: '13px', fontWeight: 600,
           padding: '4px 10px', borderRadius: '6px', pointerEvents: 'none',
           boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', zIndex: 20,
         }}>
@@ -135,7 +137,7 @@ export function CustomSliderTrack({
           <div style={{
             position: 'absolute', top: '100%', left: '50%', transform: 'translateX(-50%)',
             borderWidth: '5px', borderStyle: 'solid',
-            borderColor: '#1f2937 transparent transparent transparent',
+            borderColor: 'var(--cfm-tooltip-bg, #1f2937) transparent transparent transparent',
           }} />
         </div>
       )}

package/templates/docs/templates/FileUploadScale.tsx

@@ -8,6 +8,7 @@
 
 import React, { useState, useRef } from 'react';
 import type { FileUploadQuestion } from '@explorer02/cfm-survey-sdk';
+import { focusRingVar, mcqSelectedBgVar } from '@/lib/surveyUi/selectionStyles';
 
 type UploadedFileAnswer = {
   id: string;
@@ -86,8 +87,20 @@ function FileUploadDropzone({
   onDrag: (e: React.DragEvent) => void;
   onDrop: (e: React.DragEvent) => void;
 }) {
+  const baseBorder = 'var(--cfm-upload-border-color, #d1d5db)';
+  const activeBorder = focusRingVar;
+  const baseBg = 'var(--cfm-upload-fill, #f9fafb)';
+  const activeBg = mcqSelectedBgVar;
+  const borderStyle =
+    typeof document !== 'undefined'
+      ? getComputedStyle(document.documentElement).getPropertyValue('--cfm-upload-border-style').trim() ||
+        'dashed'
+      : 'dashed';
+
   return (
     <div
+      data-cfm-dropzone
+      className="cfm-dropzone"
       onDragEnter={onDrag}
       onDragOver={onDrag}
       onDragLeave={onDrag}
@@ -98,17 +111,45 @@ function FileUploadDropzone({
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
-        border: `2px ${isDragActive ? 'solid' : 'var(--cfm-upload-border-style, dashed)'} var(--cfm-upload-border-color, #d1d5db)`,
+        border: `2px ${borderStyle} ${isDragActive ? activeBorder : baseBorder}`,
         borderRadius: 'var(--cfm-border-radius, 12px)',
-        backgroundColor: isDragActive ? 'var(--cfm-mcq-selected-bg, #fdf2f8)' : 'var(--cfm-upload-fill, #f9fafb)',
+        backgroundColor: isDragActive ? activeBg : baseBg,
         padding: 'var(--cfm-upload-padding, 40px 24px)',
         cursor: disabled ? 'not-allowed' : 'pointer',
         opacity: disabled ? 0.6 : 1,
         textAlign: 'center',
         boxSizing: 'border-box',
+        transition: 'all 0.2s ease-in-out',
+      }}
+      onMouseEnter={e => {
+        if (disabled) return;
+        e.currentTarget.style.borderColor = activeBorder;
+        e.currentTarget.style.backgroundColor = activeBg;
+      }}
+      onMouseLeave={e => {
+        if (disabled || isDragActive) return;
+        e.currentTarget.style.borderColor = baseBorder;
+        e.currentTarget.style.backgroundColor = baseBg;
       }}
     >
-      <div style={{ fontSize: '16px', fontWeight: 600, color: '#374151', marginBottom: '8px' }}
+      <div style={{ marginBottom: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <svg
+          width="40"
+          height="40"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="var(--cfm-upload-icon-color, #9ca3af)"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          <polyline points="17 8 12 3 7 8" />
+          <line x1="12" y1="3" x2="12" y2="15" />
+        </svg>
+      </div>
+      <div
+        style={{ fontSize: '16px', fontWeight: 600, color: '#374151', marginBottom: '8px' }}
         dangerouslySetInnerHTML={{ __html: uploadMessage }}
       />
       <div style={{ fontSize: '13px', color: '#6b7280', lineHeight: 1.5 }}>
@@ -120,6 +161,104 @@ function FileUploadDropzone({
   );
 }
 
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+
+function UploadedFileList({
+  files,
+  onRemoveFile,
+}: {
+  files: UploadedFileAnswer[];
+  onRemoveFile: (index: number) => void;
+}) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      {files.map((file, idx) => (
+        <div
+          key={file.id}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '12px 16px',
+            backgroundColor: 'var(--cfm-card-bg, #fff)',
+            border: '1px solid var(--cfm-card-border-color, #e5e7eb)',
+            borderRadius: 'var(--cfm-border-radius, 8px)',
+            boxSizing: 'border-box',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px', overflow: 'hidden' }}>
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#6b7280"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+              <polyline points="14 2 14 8 20 8" />
+            </svg>
+            <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+              <span
+                style={{
+                  fontSize: '14px',
+                  fontWeight: 500,
+                  color: '#374151',
+                  textOverflow: 'ellipsis',
+                  overflow: 'hidden',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {file.name ?? file.mediaUrl}
+              </span>
+              {file.size != null && (
+                <span style={{ fontSize: '12px', color: '#9ca3af' }}>{formatFileSize(file.size)}</span>
+              )}
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={() => onRemoveFile(idx)}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '24px',
+              height: '24px',
+              borderRadius: '50%',
+              backgroundColor: '#f3f4f6',
+              border: 'none',
+              color: '#6b7280',
+              cursor: 'pointer',
+              fontSize: '14px',
+              fontWeight: 'bold',
+              transition: 'background-color 0.2s',
+            }}
+            onMouseEnter={e => {
+              e.currentTarget.style.backgroundColor = '#fee2e2';
+              e.currentTarget.style.color = '#ef4444';
+            }}
+            onMouseLeave={e => {
+              e.currentTarget.style.backgroundColor = '#f3f4f6';
+              e.currentTarget.style.color = '#6b7280';
+            }}
+          >
+            &times;
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export function FileUploadScale({ question, selectedValue, onSelect }: FileUploadScaleProps) {
   const {
     uploadMessage = 'Drag attachments here or browse',
@@ -241,21 +380,7 @@ export function FileUploadScale({ question, selectedValue, onSelect }: FileUploa
       )}
 
       {currentFiles.length > 0 && (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-          {currentFiles.map((file, idx) => (
-            <div key={file.id} style={{
-              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-              padding: '12px 16px', backgroundColor: '#fff', border: '1px solid #e5e7eb', borderRadius: '8px',
-            }}>
-              <span style={{ fontSize: '14px', fontWeight: 500, color: '#374151' }}>{file.name ?? file.mediaUrl}</span>
-              <button type="button" onClick={() => removeFile(idx)} style={{
-                border: 'none', background: '#f3f4f6', borderRadius: '50%', width: 24, height: 24, cursor: 'pointer',
-              }}>
-                ×
-              </button>
-            </div>
-          ))}
-        </div>
+        <UploadedFileList files={currentFiles} onRemoveFile={removeFile} />
       )}
     </div>
   );

package/templates/docs/templates/HeatmapScale.tsx

@@ -2,7 +2,7 @@
 
 /**
  * Portable HeatmapScale — copy to src/components/HeatmapScale.tsx
- * Also copy templates/heatmapCoords.ts to src/lib/heatmapCoords.ts
+ * Also copy templates/heatmapCoords.ts to src/lib/surveyUi/heatmapCoords.ts
  */
 
 import React, { useState } from 'react';
@@ -11,7 +11,7 @@ import {
   createNewSpot,
   findSpotNearClick,
   getNormalizedClickFromImage,
-} from './heatmapCoords';
+} from '@/lib/surveyUi/heatmapCoords';
 
 type HeatmapScaleProps = {
   question: HeatmapQuestion;
@@ -91,6 +91,15 @@ export function HeatmapScale({ question, selectedValue = [], onSelect }: Heatmap
           className="block max-w-full h-auto select-none rounded-md"
           style={{ cursor: isImageReady ? 'crosshair' : 'default' }}
         />
+        {isImageReady && (
+          <div
+            className="pointer-events-none absolute inset-0 rounded-md"
+            style={{
+              backgroundColor: '#000000',
+              opacity: 'var(--cfm-heatmap-overlay-opacity, 0)',
+            }}
+          />
+        )}
         {isImageReady && (
           <div className="pointer-events-none absolute inset-0">
             {spots.map(spot => (

package/templates/docs/templates/LanguageSelector.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import type { SurveyLanguage } from '@explorer02/cfm-survey-sdk';
+import { focusRingVar } from '@/lib/surveyUi/selectionStyles';
 
 type LanguageSelectorProps = {
   languages: SurveyLanguage[];
@@ -14,27 +15,49 @@ export default function LanguageSelector({
   selectedLanguage,
   onChange,
 }: LanguageSelectorProps) {
-  if (languages.length <= 1) return null;
+  if (!languages || languages.length <= 1) return null;
 
   return (
-    <div data-cfm-language className="mb-6 flex justify-end">
-      <select
-        value={selectedLanguage}
-        onChange={(e) => onChange(e.target.value)}
-        className="rounded border px-3 py-1.5 text-sm outline-none"
-        style={{
-          background: 'var(--cfm-language-bg, #fff)',
-          color: 'var(--cfm-language-text, #2563eb)',
-          borderColor: 'var(--cfm-language-border, #2563eb)',
-          borderRadius: 'var(--cfm-border-radius, 8px)',
-        }}
-      >
-        {languages.map((lang) => (
-          <option key={lang.code} value={lang.code}>
-            {lang.label}
-          </option>
-        ))}
-      </select>
+    <div data-cfm-language className="mb-6 mt-4 flex justify-end">
+      <div className="relative">
+        <select
+          value={selectedLanguage}
+          onChange={(e) => onChange(e.target.value)}
+          className="cursor-pointer appearance-none py-2 pl-4 pr-10 text-sm font-semibold outline-none focus:ring-2"
+          style={{
+            background: 'var(--cfm-language-bg, #fff)',
+            color: 'var(--cfm-language-text, #2563eb)',
+            borderColor: 'var(--cfm-language-border, #2563eb)',
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderRadius: 'var(--cfm-border-radius, 8px)',
+            boxShadow: `0 0 0 0px ${focusRingVar}`,
+          }}
+          onFocus={e => {
+            e.currentTarget.style.boxShadow = `0 0 0 2px ${focusRingVar}`;
+          }}
+          onBlur={e => {
+            e.currentTarget.style.boxShadow = 'none';
+          }}
+        >
+          {languages.map((lang) => (
+            <option key={lang.code} value={lang.code} className="text-gray-900">
+              {lang.name}
+            </option>
+          ))}
+        </select>
+        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+          <svg
+            className="h-4 w-4"
+            style={{ color: 'var(--cfm-language-text, #2563eb)' }}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
+          </svg>
+        </div>
+      </div>
     </div>
   );
 }

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, matrixRowBackgroundStyle } 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,11 @@ 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',
-                boxSizing: 'border-box'
+                padding: 'var(--cfm-matrix-cell-padding, 12px) 0',
+                ...(!repeatColumnHeaders ? matrixRowBackgroundStyle(rowIdx) : { backgroundColor: '#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 +280,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>
                       );