@cdc/core 4.25.10 → 4.26.1

package/components/EditorPanel/components/MarkupVariablesEditor.tsx

@@ -1,15 +1,21 @@
-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo, useCallback } from 'react'
 import { MarkupVariable, MarkupCondition } from '../../../types/MarkupVariable'
 import Button from '../../elements/Button'
 import { TextField, Select, CheckBox } from '../Inputs'
 import Icon from '../../ui/Icon'
 import Accordion from '../../ui/Accordion'
+import { Datasets } from '../../../types/DataSet'
+import _ from 'lodash'
 
 type MarkupVariablesEditorProps = {
   /** Array of markup variable configurations */
   markupVariables: MarkupVariable[]
-  /** Dataset to extract column names and values from */
-  data: any[]
+  /** Dataset to extract column names and values from (for backward compatibility) */
+  data?: any[]
+  /** Available datasets for multi-dataset support */
+  datasets?: Datasets
+  /** Configuration object containing dataKey for dataset assignment */
+  config?: { dataKey?: string }
   /** Callback when variables are added, updated, or removed */
   onChange: (variables: MarkupVariable[]) => void
   /** Whether markup variables feature is enabled */
@@ -27,6 +33,8 @@ export type { MarkupVariablesEditorProps }
 const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
   markupVariables = [],
   data = [],
+  datasets,
+  config,
   onChange,
   enableMarkupVariables = false,
   onToggleEnable
@@ -34,9 +42,46 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
   const [editingIndex, setEditingIndex] = useState<number | null>(null)
   const [validationErrors, setValidationErrors] = useState<Record<number, string[]>>({})
 
-  // Ensure we always have a valid array
-  const safeMarkupVariables = markupVariables || []
-  const availableColumns = data.length > 0 ? Object.keys(data[0]) : []
+  // Ensure we always have a valid array (memoized with deep equality to prevent unnecessary re-renders)
+  const safeMarkupVariables = useMemo(() => markupVariables || [], [JSON.stringify(markupVariables)])
+
+  // Get the target dataset with fallback logic (memoized for performance)
+  const getTargetData = useCallback((): any[] => {
+    // First try to use the data prop
+    if (data && data.length > 0) {
+      return data
+    }
+
+    // Fallback to assigned dataset using config.dataKey
+    if (datasets && config?.dataKey) {
+      const assignedDataset = datasets[config.dataKey]
+      if (assignedDataset?.data?.length > 0) {
+        return assignedDataset.data
+      }
+    }
+
+    return []
+  }, [data, datasets, config?.dataKey])
+
+  // Get columns from the available data (memoized for performance)
+  const getAvailableColumns = useMemo((): string[] => {
+    const targetData = getTargetData()
+    return targetData.length > 0 ? Object.keys(targetData[0]) : []
+  }, [getTargetData])
+
+  // Get column values for a specific column (memoized for performance)
+  const getColumnValues = useCallback((columnName: string): string[] => {
+    const targetData = getTargetData()
+    if (targetData.length === 0) return []
+
+    const uniqueValues = new Set<string>()
+    targetData.forEach(row => {
+      if (row[columnName] !== undefined && row[columnName] !== null) {
+        uniqueValues.add(String(row[columnName]))
+      }
+    })
+    return Array.from(uniqueValues).sort()
+  }, [data, datasets, config?.dataKey])
 
   // Validate a variable and return array of error messages
   const validateVariable = React.useCallback((variable: MarkupVariable): string[] => {
@@ -71,7 +116,12 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
         errors[index] = variableErrors
       }
     })
-    setValidationErrors(errors)
+
+    // Only update if errors have actually changed (use deep equality)
+    setValidationErrors(prev => {
+      const errorsChanged = !_.isEqual(prev, errors)
+      return errorsChanged ? errors : prev
+    })
   }, [safeMarkupVariables, validateVariable]) // Re-validate when variables change
 
 
@@ -125,18 +175,7 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
     return `{{${name.toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '')}}}`
   }
 
-  // Get unique values for a given column for condition dropdowns
-  const getColumnValues = useMemo(() => {
-    if (!data || data.length === 0) return {}
 
-    const columnValues: Record<string, (string | number)[]> = {}
-    availableColumns.forEach(column => {
-      const uniqueValues = Array.from(new Set(data.map(row => row[column])))
-        .filter(val => val !== null && val !== undefined && val !== '')
-      columnValues[column] = uniqueValues
-    })
-    return columnValues
-  }, [data, availableColumns])
 
   const addCondition = (variableIndex: number) => {
     const variable = safeMarkupVariables[variableIndex]
@@ -265,7 +304,7 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
                               label='Data Column'
                               options={[
                                 { value: '', label: 'Select Column...' },
-                                ...availableColumns.map(col => ({ value: col, label: col }))
+                                ...getAvailableColumns.map(col => ({ value: col, label: col }))
                               ]}
                               updateField={(_section, _subsection, _fieldName, value) => {
                                 updateVariable(index, { columnName: value })
@@ -290,7 +329,7 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
                                       label='Column'
                                       options={[
                                         { value: '', label: 'Select Column...' },
-                                        ...availableColumns.map(col => ({ value: col, label: col }))
+                                        ...getAvailableColumns.map(col => ({ value: col, label: col }))
                                       ]}
                                       updateField={(_section, _subsection, _fieldName, newColumnName) => {
                                         // Reset value when column changes
@@ -322,8 +361,8 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
                                       label='Value'
                                       options={[
                                         { value: '', label: 'Select Value...' },
-                                        ...(condition.columnName && getColumnValues[condition.columnName]
-                                          ? getColumnValues[condition.columnName].map(val => ({
+                                        ...(condition.columnName
+                                          ? getColumnValues(condition.columnName).map(val => ({
                                             value: String(val),
                                             label: String(val)
                                           }))

package/components/EditorPanel/sections/VisualSection.tsx

@@ -0,0 +1,169 @@
+import { ReactNode } from 'react'
+import { CheckBox } from '../Inputs'
+import { HeaderThemeSelector } from '../../HeaderThemeSelector'
+import { UpdateFieldFunc } from '../../../types/UpdateFieldFunc'
+
+export interface VisualSectionConfig {
+  visual?: {
+    border?: boolean
+    borderColorTheme?: boolean
+    accent?: boolean
+    background?: boolean
+    hideBackgroundColor?: boolean
+  }
+  theme?: string
+}
+
+export interface VisualSectionProps<TConfig extends VisualSectionConfig = VisualSectionConfig> {
+  /** The visualization config object */
+  config: TConfig
+
+  /** Update function for individual fields */
+  updateField: UpdateFieldFunc<TConfig>
+
+  /** Update function for the entire config (used by HeaderThemeSelector) */
+  updateConfig: (config: TConfig) => void
+
+  /** Optional content to render before the standard checkboxes */
+  beforeCheckboxes?: ReactNode
+
+  /** Optional content to render after the standard checkboxes */
+  afterCheckboxes?: ReactNode
+
+  /** Position of HeaderThemeSelector. Defaults to 'before' */
+  themeSelectorPosition?: 'before' | 'after' | 'none'
+
+  /** Whether to show the border checkbox. Defaults to true */
+  showBorder?: boolean
+
+  /** Whether to show the borderColorTheme checkbox. Defaults to true */
+  showBorderColorTheme?: boolean
+
+  /** Whether to show the accent checkbox. Defaults to true */
+  showAccent?: boolean
+
+  /** Whether to show the background checkbox. Defaults to true */
+  showBackground?: boolean
+
+  /** Whether to show the hideBackgroundColor checkbox. Defaults to true */
+  showHideBackgroundColor?: boolean
+}
+
+/**
+ * Reusable Visual section component for EditorPanels
+ *
+ * Provides common visual configuration options including:
+ * - Theme selection
+ * - Border controls
+ * - Background and accent styling
+ *
+ * Note: Must be wrapped in an Accordion.Section when used
+ *
+ * @example
+ * ```tsx
+ * <Accordion.Section title='Visual'>
+ *   <VisualSection
+ *     config={config}
+ *     updateField={updateField}
+ *     updateConfig={updateConfig}
+ *     beforeCheckboxes={
+ *       <Select
+ *         value={config.fontSize}
+ *         fieldName='fontSize'
+ *         label='Font Size'
+ *         updateField={updateField}
+ *         options={['small', 'medium', 'large']}
+ *       />
+ *     }
+ *   />
+ * </Accordion.Section>
+ * ```
+ */
+export const VisualSection = <TConfig extends VisualSectionConfig = VisualSectionConfig>({
+  config,
+  updateField,
+  updateConfig,
+  beforeCheckboxes,
+  afterCheckboxes,
+  themeSelectorPosition = 'before',
+  showBorder = true,
+  showBorderColorTheme = true,
+  showAccent = true,
+  showBackground = true,
+  showHideBackgroundColor = true
+}: VisualSectionProps<TConfig>) => {
+  const visual = config.visual || {}
+  const theme = config.theme
+
+  const renderThemeSelector = () => {
+    if (themeSelectorPosition === 'none') return null
+
+    return (
+      <HeaderThemeSelector
+        selectedTheme={theme}
+        onThemeSelect={theme => updateConfig({ ...config, theme } as TConfig)}
+        label='Theme'
+      />
+    )
+  }
+
+  const renderCheckboxes = () => (
+    <div className='checkbox-group'>
+      {showBorder && (
+        <CheckBox
+          value={visual.border}
+          section='visual'
+          fieldName='border'
+          label='Display Border'
+          updateField={updateField}
+        />
+      )}
+      {showBorderColorTheme && (
+        <CheckBox
+          value={visual.borderColorTheme}
+          section='visual'
+          fieldName='borderColorTheme'
+          label='Use Border Color Theme'
+          updateField={updateField}
+        />
+      )}
+      {showAccent && (
+        <CheckBox
+          value={visual.accent}
+          section='visual'
+          fieldName='accent'
+          label='Use Accent Style'
+          updateField={updateField}
+        />
+      )}
+      {showBackground && (
+        <CheckBox
+          value={visual.background}
+          section='visual'
+          fieldName='background'
+          label='Use Theme Background Color'
+          updateField={updateField}
+        />
+      )}
+      {showHideBackgroundColor && (
+        <CheckBox
+          value={visual.hideBackgroundColor}
+          section='visual'
+          fieldName='hideBackgroundColor'
+          label='Hide Background Color'
+          updateField={updateField}
+        />
+      )}
+    </div>
+  )
+
+  return (
+    <>
+      {beforeCheckboxes}
+      {themeSelectorPosition === 'before' && renderThemeSelector()}
+      {renderCheckboxes()}
+      {themeSelectorPosition === 'after' && renderThemeSelector()}
+      {afterCheckboxes}
+    </>
+  )
+}

package/components/Filters/Filters.tsx

@@ -5,6 +5,7 @@ import parse from 'html-react-parser'
 // CDC
 import Button from '../elements/Button'
 import MultiSelect from '../MultiSelect'
+import ComboBox from '../ComboBox'
 import { Visualization } from '../../types/Visualization'
 import { MultiSelectFilter, VizFilter } from '../../types/VizFilter'
 import { addValuesToFilters } from '../../helpers/addValuesToFilters'
@@ -14,7 +15,7 @@ import { getNestedOptions } from './helpers/getNestedOptions'
 import { getWrappingStatuses } from './helpers/filterWrapping'
 import { handleSorting } from './helpers/handleSorting'
 import { getChangedFilters } from './helpers/getChangedFilters'
-import { getUniqueValues } from '@cdc/map/src/helpers'
+import { getUniqueValues } from '../../helpers/getUniqueValues'
 import { getQueryParams, updateQueryString } from '../../helpers/queryStringUtils'
 import { applyQueuedActive } from './helpers/applyQueuedActive'
 import Tabs from './components/Tabs'
@@ -23,13 +24,14 @@ import { publishAnalyticsEvent } from '../../helpers/metrics/helpers'
 import { getVizSubType, getVizTitle } from '@cdc/core/helpers/metrics/utils'
 
 export const VIZ_FILTER_STYLE = {
+  combobox: 'combobox',
   dropdown: 'dropdown',
+  multiSelect: 'multi-select',
   nestedDropdown: 'nested-dropdown',
   pill: 'pill',
   tab: 'tab',
   tabSimple: 'tab-simple',
-  tabBar: 'tab bar',
-  multiSelect: 'multi-select'
+  tabBar: 'tab bar'
 } as const
 
 export type VizFilterStyle = (typeof VIZ_FILTER_STYLE)[keyof typeof VIZ_FILTER_STYLE]
@@ -95,7 +97,9 @@ const Filters: React.FC<FilterProps> = ({
       eventAction: 'change',
       eventLabel: interactionLabel,
       vizTitle: getVizTitle(visualizationConfig),
-      specifics: `key: ${String(newFilters?.[index]?.columnName).toLowerCase()}, value: ${String(newFilters?.[index]?.active).toLowerCase()}`
+      specifics: `key: ${String(newFilters?.[index]?.columnName).toLowerCase()}, value: ${String(
+        newFilters?.[index]?.active
+      ).toLowerCase()}`
     })
   }
 
@@ -141,10 +145,31 @@ const Filters: React.FC<FilterProps> = ({
         filter.values = getUniqueValues(visualizationConfig.data, filter.columnName)
       }
 
-      newFilters[i].active = handleSorting(filter).values[0]
+      // Determine reset value based on filter configuration
+      let resetValue
 
-      if (filter.setByQueryParameter && queryParams[filter.setByQueryParameter] !== filter.active) {
-        queryParams[filter.setByQueryParameter] = filter.active
+      // If filter has a resetLabel, reset to empty state (shows "- Select -")
+      if (filter.resetLabel) {
+        resetValue = filter.resetLabel
+      }
+      // If filter has a defaultValue, use that
+      else if (filter.defaultValue) {
+        resetValue = filter.defaultValue
+      }
+      // Otherwise, use first value in sorted values array
+      else if (filter.values && filter.values.length > 0) {
+        resetValue = handleSorting(filter).values[0]
+      }
+
+      // Handle multi-select filters
+      if (filter.filterStyle === 'multi-select') {
+        newFilters[i].active = resetValue ? [resetValue] : []
+      } else {
+        newFilters[i].active = resetValue
+      }
+
+      if (filter.setByQueryParameter && queryParams[filter.setByQueryParameter] !== newFilters[i].active) {
+        queryParams[filter.setByQueryParameter] = newFilters[i].active
         needsQueryUpdate = true
       }
     })
@@ -181,6 +206,9 @@ const Filters: React.FC<FilterProps> = ({
 
   if (visualizationConfig?.filters?.length === 0) return <></>
 
+  const hasVisibleFilters = filters?.some(filter => filter.showDropdown !== false)
+  if (!hasVisibleFilters) return <></>
+
   const getClasses = () => {
     const { visualizationType, legend } = visualizationConfig || {}
     const baseClass = 'filters-section'
@@ -195,6 +223,12 @@ const Filters: React.FC<FilterProps> = ({
     return (singleFilter.queuedActive || [singleFilter.active, singleFilter.subGrouping?.active]) as [string, string]
   }
 
+  // Don't render filter section if all filters are hidden
+  const allFiltersHidden = vizFiltersWithValues.every(filter => filter.showDropdown === false)
+  if (allFiltersHidden) {
+    return null
+  }
+
   return (
     <section className={getClasses().join(' ')}>
       {visualizationConfig.filterIntro && (
@@ -214,7 +248,9 @@ const Filters: React.FC<FilterProps> = ({
               'form-group',
               mobileFilterStyle ? 'single-filters--dropdown' : `single-filters--${filterStyle}`
             ]
-            const mobileExempt = ['nested-dropdown', 'multi-select', VIZ_FILTER_STYLE.tabSimple].includes(filterStyle)
+            const mobileExempt = ['nested-dropdown', 'multi-select', 'combobox', VIZ_FILTER_STYLE.tabSimple].includes(
+              filterStyle
+            )
             const { isDropdown } = wrappingFilters[columnName] || {}
             const showDefaultDropdown =
               ((filterStyle === 'dropdown' || mobileFilterStyle) && !mobileExempt) || isDropdown
@@ -281,6 +317,17 @@ const Filters: React.FC<FilterProps> = ({
                     handleSelectedItems={value => changeFilterActive(outerIndex, value)}
                   />
                 )}
+                {filterStyle === 'combobox' && (
+                  <ComboBox
+                    options={singleFilter.values.map(v => ({ value: v, label: v }))}
+                    fieldName={outerIndex}
+                    updateField={(_section, _subSection, fieldName, value) => {
+                      changeFilterActive(fieldName, value)
+                    }}
+                    selected={(singleFilter.queuedActive || singleFilter.active) as string}
+                    label={label}
+                  />
+                )}
               </div>
             )
           })}
@@ -295,9 +342,9 @@ const Filters: React.FC<FilterProps> = ({
               >
                 Apply
               </Button>
-              <Button secondary disabled={initialFiltersActive} onClick={handleFiltersReset}>
+              <button className='btn btn-link' disabled={initialFiltersActive} onClick={handleFiltersReset}>
                 Clear Filters
-              </Button>
+              </button>
             </div>
           ) : (
             <></>

package/components/Filters/components/Dropdown.tsx

@@ -10,7 +10,7 @@ type DropdownProps = {
 }
 
 const Dropdown: React.FC<DropdownProps> = ({ index: outerIndex, label, filter, changeFilterActive }) => {
-  const { active, queuedActive } = filter
+  const { active, queuedActive, resetLabel } = filter
 
   return (
     <select
@@ -25,6 +25,11 @@ const Dropdown: React.FC<DropdownProps> = ({ index: outerIndex, label, filter, c
         changeFilterActive(outerIndex, e.target.value)
       }}
     >
+      {resetLabel && (
+        <option key='reset-option' value={resetLabel} aria-label={resetLabel}>
+          {resetLabel}
+        </option>
+      )}
       {filter.values?.map((value, index) => {
         return (
           <option key={index} value={value} aria-label={value}>

package/components/Filters/helpers/getNestedOptions.ts

@@ -8,9 +8,10 @@ type GetOptionsMemoParams = {
 }
 
 export const getNestedOptions = ({ orderedValues, values, subGrouping }: GetOptionsMemoParams): NestedOptions => {
+  if (!values?.length && !orderedValues?.length) return []
   // keep custom ordered value order
   const filteredValues = orderedValues?.length
-    ? orderedValues.filter(orderedValue => values.includes(orderedValue))
+    ? orderedValues.filter(orderedValue => values?.includes(orderedValue))
     : values
   const options: NestedOptions = filteredValues.map<[ValueTextPair, ValueTextPair[]]>(value => {
     if (!subGrouping) return [[value], []]

package/components/Filters/helpers/handleSorting.ts

@@ -2,7 +2,7 @@ import _ from 'lodash'
 
 export const handleSorting = singleFilter => {
   const singleFilterValues = _.cloneDeep(singleFilter.values)
-  if (singleFilter.order === 'cust' && singleFilter.filterStyle !== 'nested-dropdown') {
+  if (singleFilter.order === 'cust') {
     singleFilter.values = singleFilter.orderedValues?.length ? singleFilter.orderedValues : singleFilterValues
     return singleFilter
   }

package/components/Footnotes/Footnotes.tsx

@@ -1,25 +1,35 @@
-import { Footnote } from '../../types/Footnotes'
-import './footnotes.css'
-
-type FootnotesProps = {
-  footnotes: Footnote[]
-}
-
-const Footnotes: React.FC<FootnotesProps> = ({ footnotes }) => {
-  return (
-    <footer className='col-12 m-3 mt-1 mb-0'>
-      <ul className='cove-footnotes'>
-        {footnotes.map((note, i) => {
-          return (
-            <li key={`${note.symbol || 'footnote-'}${i}`} className='mb-1'>
-              {note.symbol && <span className='me-1'>{note.symbol}</span>}
-              {note.text}
-            </li>
-          )
-        })}
-      </ul>
-    </footer>
-  )
-}
-
-export default Footnotes
+import { Footnote } from '../../types/Footnotes'
+import parse from 'html-react-parser'
+import './footnotes.css'
+
+type FootnotesProps = {
+  footnotes: Footnote[]
+}
+
+const Footnotes: React.FC<FootnotesProps> = ({ footnotes }) => {
+  // Convert newlines to <br> tags and parse HTML
+  const processFootnoteText = (text: string) => {
+    if (!text) return ''
+    // Convert newline characters to <br> tags
+    const textWithBreaks = text.replace(/\n/g, '<br>')
+    // Parse HTML (html-react-parser handles sanitization)
+    return parse(textWithBreaks)
+  }
+
+  return (
+    <footer className='col-12 m-3 mt-1 mb-0'>
+      <ul className='cove-footnotes'>
+        {footnotes.map((note, i) => {
+          return (
+            <li key={`${note.symbol || 'footnote-'}${i}`} className='mb-1'>
+              {note.symbol && <span className='me-1'>{note.symbol}</span>}
+              {processFootnoteText(note.text)}
+            </li>
+          )
+        })}
+      </ul>
+    </footer>
+  )
+}
+
+export default Footnotes

package/components/Footnotes/FootnotesStandAlone.tsx

@@ -1,17 +1,45 @@
 import Footnotes from './Footnotes'
-import FootnotesConfig from '../../types/Footnotes'
+import FootnotesConfig, { Footnote } from '../../types/Footnotes'
 import _ from 'lodash'
 import { useMemo } from 'react'
 import { filterVizData } from '../../helpers/filterVizData'
 import { VizFilter } from '../../types/VizFilter'
+import { MarkupVariable } from '../../types/MarkupVariable'
+import { processMarkupVariables } from '../../helpers/markupProcessor'
 
 type StandAloneProps = {
   config: FootnotesConfig
   filters?: VizFilter[]
+  markupVariables?: MarkupVariable[]
+  enableMarkupVariables?: boolean
+  data?: Object[]
 }
 
-const FootnotesStandAlone: React.FC<StandAloneProps> = ({ config, filters }) => {
+const FootnotesStandAlone: React.FC<StandAloneProps> = ({ config, filters, markupVariables = [], enableMarkupVariables = false, data = [] }) => {
   if (!config) return null
+
+  // Helper function to process markup variables in footnote text
+  const processFootnoteText = (text: string): string => {
+    if (!enableMarkupVariables || !markupVariables || markupVariables.length === 0) {
+      return text
+    }
+
+    // Use data from props if available, otherwise use config.data
+    const footnoteData = data.length > 0 ? data : config.data || []
+
+    const { processedContent } = processMarkupVariables(
+      text,
+      footnoteData,
+      markupVariables,
+      {
+        filters,
+        isEditor: false
+      }
+    )
+
+    return processedContent
+  }
+
   // get the api footnotes from the config
   const apiFootnotes = useMemo(() => {
     // If filters exist and should filter footnotes, apply them, otherwise use data as-is
@@ -20,13 +48,21 @@ const FootnotesStandAlone: React.FC<StandAloneProps> = ({ config, filters }) =>
       const { symbolColumn, textColumn, orderColumn } = config.dynamicFootnotes
       const _data = configData.map(row => _.pick(row, [symbolColumn, textColumn, orderColumn]))
       _data.sort((a, b) => a[orderColumn] - b[orderColumn])
-      return _data.map(row => ({ symbol: row[symbolColumn], text: row[textColumn] }))
+      return _data.map(row => ({
+        symbol: row[symbolColumn],
+        text: processFootnoteText(row[textColumn])
+      }))
     }
     return []
-  }, [config.dynamicFootnotes, config.data, filters])
+  }, [config.dynamicFootnotes, config.data, filters, markupVariables, enableMarkupVariables, data])
 
-  // get static footnotes from the config.footnotes
-  const staticFootnotes = config.staticFootnotes || []
+  // get static footnotes from the config.footnotes and process their text
+  const staticFootnotes: Footnote[] = useMemo(() => {
+    return (config.staticFootnotes || []).map(footnote => ({
+      ...footnote,
+      text: processFootnoteText(footnote.text)
+    }))
+  }, [config.staticFootnotes, markupVariables, enableMarkupVariables, data, filters])
 
   return <Footnotes footnotes={[...apiFootnotes, ...staticFootnotes]} />
 }

package/components/HeaderThemeSelector/HeaderThemeSelector.css

@@ -0,0 +1,43 @@
+/* HeaderThemeSelector component styles */
+
+.header {
+  margin-bottom: 1rem;
+}
+
+.header .edit-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.header .color-palette {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.header .color-palette button {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+}
+
+.header .color-palette button:hover {
+  transform: scale(1.1);
+}
+
+.header .color-palette button.selected {
+  border-color: #000;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+}
+
+.header .color-palette button:focus {
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
+}