@countermeasure-platform/web-components 1.2.0 → 1.2.1-dev.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@countermeasure-platform/web-components",
-  "version": "1.2.0",
+  "version": "1.2.1-dev.6.1",
   "description": "Shared web components for CounterMeasure applications - consolidates common frontend functionality across projects.",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/theme/accent-switcher.ts

@@ -42,6 +42,7 @@ export function applyAccentFromUrl(): void {
 
 export class AccentSwitcher {
   public readonly el: HTMLElement
+  private readonly _onThemeChange: () => void
 
   constructor() {
     this.el = document.createElement('div')
@@ -76,11 +77,17 @@ export class AccentSwitcher {
     }
 
     this.el.appendChild(buttons)
-    document.addEventListener('preview:accent-change', () => this.updateActive())
-    document.addEventListener('cm:theme-change', () => this.updateActive())
+    this._onThemeChange = () => this.updateActive()
+    document.addEventListener('preview:accent-change', this._onThemeChange)
+    document.addEventListener('cm:theme-change', this._onThemeChange)
     this.updateActive()
   }
 
+  destroy(): void {
+    document.removeEventListener('preview:accent-change', this._onThemeChange)
+    document.removeEventListener('cm:theme-change', this._onThemeChange)
+  }
+
   private updateActive(): void {
     const current = getCurrentAccent()
     const buttons = this.el.querySelectorAll<HTMLButtonElement>('.preview-accent-switcher__btn')

package/src/components/theme/density-switcher.ts

@@ -16,6 +16,7 @@ const DENSITIES: ReadonlyArray<{ id: Density; label: string; px: number }> = [
 
 export class DensitySwitcher {
   public readonly el: HTMLElement
+  private readonly _onThemeChange: () => void
 
   constructor() {
     this.el = document.createElement('div')
@@ -44,10 +45,15 @@ export class DensitySwitcher {
     }
 
     this.el.appendChild(buttons)
-    document.addEventListener('cm:theme-change', () => this.updateActive())
+    this._onThemeChange = () => this.updateActive()
+    document.addEventListener('cm:theme-change', this._onThemeChange)
     this.updateActive()
   }
 
+  destroy(): void {
+    document.removeEventListener('cm:theme-change', this._onThemeChange)
+  }
+
   private updateActive(): void {
     const current = getTheme().density
     const buttons = this.el.querySelectorAll<HTMLButtonElement>('.preview-density-switcher__btn')

package/src/components/theme/font-stack-picker.ts

@@ -16,12 +16,18 @@ import type { FontId } from '../../services/theme-engine'
 
 export class FontStackPicker {
   public readonly el: HTMLElement
+  private readonly _onThemeChange: () => void
 
   constructor() {
     this.el = document.createElement('div')
     this.el.className = 'theme-studio-fonts'
     this.render()
-    document.addEventListener('cm:theme-change', () => this.updateActive())
+    this._onThemeChange = () => this.updateActive()
+    document.addEventListener('cm:theme-change', this._onThemeChange)
+  }
+
+  destroy(): void {
+    document.removeEventListener('cm:theme-change', this._onThemeChange)
   }
 
   private render(): void {

package/src/components/theme/glass-slider.ts

@@ -11,6 +11,10 @@
 
 import { getTheme, setThemePartial } from '../../services/theme-engine'
 
+function clamp(v: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, v))
+}
+
 const MIN = 0
 const MAX = 0.2
 const STEP = 0.01
@@ -24,6 +28,7 @@ export class GlassSlider {
   public readonly el: HTMLElement
   private readonly input: HTMLInputElement
   private readonly value: HTMLSpanElement
+  private readonly _onThemeChange: () => void
 
   constructor(options: GlassSliderOptions = {}) {
     const expanded = options.expanded === true
@@ -59,6 +64,9 @@ export class GlassSlider {
     this.input.value = String(initial)
     this.input.className = 'preview-glass-slider__input'
     this.input.setAttribute('aria-label', 'Surface transparency')
+    const valueId = `cm-glass-value-${Math.random().toString(36).slice(2, 8)}`
+    this.input.setAttribute('aria-describedby', valueId)
+    this.input.setAttribute('aria-valuetext', `${Math.round(initial * 100)}% transparency`)
     row.appendChild(this.input)
 
     if (expanded) {
@@ -70,6 +78,8 @@ export class GlassSlider {
 
     this.value = document.createElement('span')
     this.value.className = 'preview-glass-slider__value'
+    this.value.id = valueId
+    this.value.setAttribute('aria-live', 'polite')
     this.value.textContent = formatLevel(initial)
     row.appendChild(this.value)
 
@@ -81,12 +91,18 @@ export class GlassSlider {
       setThemePartial({ transparency: next })
     })
 
-    document.addEventListener('cm:theme-change', () => {
+    this._onThemeChange = () => {
       const t = clamp(getTheme().transparency, MIN, MAX)
-      if (Number(this.input.value) !== t) this.input.value = String(t)
+      if (this.input.value !== String(t)) this.input.value = String(t)
+      this.input.setAttribute('aria-valuetext', `${Math.round(t * 100)}% transparency`)
       this.value.textContent = formatLevel(t)
       this.applySliderFill(t)
-    })
+    }
+    document.addEventListener('cm:theme-change', this._onThemeChange)
+  }
+
+  destroy(): void {
+    document.removeEventListener('cm:theme-change', this._onThemeChange)
   }
 
   private applySliderFill(level: number): void {
@@ -95,11 +111,6 @@ export class GlassSlider {
   }
 }
 
-function clamp(value: number, min: number, max: number): number {
-  if (!Number.isFinite(value)) return min
-  return Math.max(min, Math.min(max, value))
-}
-
 function formatLevel(level: number): string {
   return `${Math.round(level * 100)}%`
 }

package/src/components/theme/icon-gallery-browser.ts

@@ -0,0 +1,191 @@
+import { getTheme } from '../../services/theme-engine'
+import type { IconSetId } from '../../services/theme-engine'
+import { LUCIDE_ICON_NAMES, getLucideIconPath } from '../../icons/lucide'
+
+type GalleryIconStyle = {
+  label: string
+  strokeWidth: number
+  linecap: 'round' | 'square' | 'butt'
+  linejoin: 'round' | 'miter' | 'bevel'
+  brand: boolean
+}
+
+type GallerySection = {
+  section: HTMLElement
+  grid: HTMLElement
+}
+
+function getGalleryIconStyle(id: IconSetId): GalleryIconStyle {
+  switch (id) {
+    case 'heroicons':
+      return { label: 'Heroicons', strokeWidth: 2.4, linecap: 'round', linejoin: 'round', brand: false }
+    case 'phosphor':
+      return { label: 'Phosphor', strokeWidth: 1.5, linecap: 'round', linejoin: 'round', brand: false }
+    case 'material':
+      return { label: 'Material', strokeWidth: 2, linecap: 'square', linejoin: 'miter', brand: false }
+    case 'countermeasure':
+      return { label: 'CounterMeasure', strokeWidth: 1.75, linecap: 'round', linejoin: 'round', brand: true }
+    case 'lucide':
+      return { label: 'Lucide', strokeWidth: 2, linecap: 'round', linejoin: 'round', brand: false }
+  }
+}
+
+function buildGalleryIcon(name: string, pathData: string, set: GalleryIconStyle): HTMLElement {
+  const cell = document.createElement('div')
+  cell.className = 'theme-studio-icon-gallery__cell'
+  cell.tabIndex = 0
+  cell.setAttribute('role', 'img')
+  cell.setAttribute('aria-label', name)
+
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+  svg.setAttribute('viewBox', '0 0 24 24')
+  svg.setAttribute('width', '28')
+  svg.setAttribute('height', '28')
+  svg.setAttribute('fill', 'none')
+  svg.setAttribute('stroke', 'currentColor')
+  svg.setAttribute('stroke-width', String(set.strokeWidth))
+  svg.setAttribute('stroke-linecap', set.linecap)
+  svg.setAttribute('stroke-linejoin', set.linejoin)
+  svg.setAttribute('aria-hidden', 'true')
+
+  for (const segment of pathData.split(/(?=M)/g)) {
+    const trimmed = segment.trim()
+    if (!trimmed) continue
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+    path.setAttribute('d', trimmed)
+    svg.appendChild(path)
+  }
+
+  cell.appendChild(svg)
+
+  const label = document.createElement('span')
+  label.className = 'theme-studio-icon-gallery__label'
+  label.textContent = name
+  cell.appendChild(label)
+
+  return cell
+}
+
+export class IconGalleryBrowser {
+  public readonly el: HTMLElement
+  private gallery: HTMLElement | null = null
+  private toggle: HTMLButtonElement | null = null
+  private expanded = false
+  private readonly onThemeChange: () => void
+
+  constructor() {
+    this.el = document.createElement('div')
+    this.el.className = 'theme-studio-icon-gallery-browser'
+    this.render()
+    this.onThemeChange = () => {
+      if (this.expanded) this.renderGallery()
+    }
+    document.addEventListener('cm:theme-change', this.onThemeChange)
+  }
+
+  destroy(): void {
+    document.removeEventListener('cm:theme-change', this.onThemeChange)
+  }
+
+  private render(): void {
+    this.el.innerHTML = ''
+
+    const toggle = document.createElement('button')
+    toggle.type = 'button'
+    toggle.className = 'theme-studio-icon-gallery__toggle'
+    const toggleText = document.createElement('span')
+    toggleText.className = 'theme-studio-icon-gallery__toggle-text'
+    toggleText.textContent = 'Browse all icons'
+    toggle.appendChild(toggleText)
+
+    const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    icon.setAttribute('aria-hidden', 'true')
+    icon.setAttribute('focusable', 'false')
+    icon.setAttribute('width', '14')
+    icon.setAttribute('height', '14')
+    icon.setAttribute('viewBox', '0 0 24 24')
+    icon.setAttribute('fill', 'none')
+    icon.setAttribute('stroke', 'currentColor')
+    icon.setAttribute('stroke-width', '2')
+    icon.setAttribute('stroke-linecap', 'round')
+    icon.setAttribute('stroke-linejoin', 'round')
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+    path.setAttribute('d', 'm6 9 6 6 6-6')
+    icon.appendChild(path)
+    toggle.appendChild(icon)
+
+    toggle.setAttribute('aria-expanded', 'false')
+    toggle.addEventListener('click', () => this.toggleGallery())
+    this.toggle = toggle
+    this.el.appendChild(toggle)
+
+    this.gallery = document.createElement('div')
+    this.gallery.className = 'theme-studio-icon-gallery'
+    this.gallery.hidden = true
+    this.el.appendChild(this.gallery)
+  }
+
+  private toggleGallery(): void {
+    this.expanded = !this.expanded
+    if (this.gallery) {
+      this.gallery.hidden = !this.expanded
+      if (this.expanded) this.renderGallery()
+    }
+    if (this.toggle) {
+      this.toggle.setAttribute('aria-expanded', String(this.expanded))
+      this.toggle.classList.toggle('is-expanded', this.expanded)
+      const label = this.toggle.querySelector('.theme-studio-icon-gallery__toggle-text')
+      if (label) label.textContent = this.expanded ? 'Hide icons' : 'Browse all icons'
+    }
+  }
+
+  private renderGallery(): void {
+    if (!this.gallery) return
+    this.gallery.innerHTML = ''
+
+    const style = getGalleryIconStyle(getTheme().iconSet)
+    const section = style.brand ? this.buildBrandGallerySection(style) : this.buildGallerySection(style)
+    this.gallery.appendChild(section)
+  }
+
+  private buildBrandGallerySection(style: GalleryIconStyle): HTMLElement {
+    const shell = this.buildSectionShell('CounterMeasure Brand Icons')
+    shell.grid.appendChild(buildGalleryIcon('Search', 'M11 4l5 3v6l-5 3-5-3V7z M20 21l-4-4', style))
+    shell.grid.appendChild(
+      buildGalleryIcon('Shield', 'M12 2l9 4-3 11-6 5-6-5-3-11z M12 7v10 M7.5 10l9 4 M16.5 10l-9 4', style)
+    )
+    shell.grid.appendChild(
+      buildGalleryIcon(
+        'Settings',
+        'M12 2l1.5 2.6L16 4l.5 3 3 .5L19 10l2.6 1.5L20 14l1 3-3 1-1 3-3-1-1.5 2.6L11 20l-1 2-3-1L6 18l-3-1 1-3-2.6-1.5L4 11 2 9.5 5 8l-1-3 3-1z M12 9l3 3-3 3-3-3z',
+        style
+      )
+    )
+    return shell.section
+  }
+
+  private buildGallerySection(style: GalleryIconStyle): HTMLElement {
+    const shell = this.buildSectionShell(`All Icons — ${style.label} style`)
+    for (const name of LUCIDE_ICON_NAMES) {
+      const pathData = getLucideIconPath(name)
+      if (pathData) shell.grid.appendChild(buildGalleryIcon(name, pathData, style))
+    }
+    return shell.section
+  }
+
+  private buildSectionShell(title: string): GallerySection {
+    const section = document.createElement('div')
+    section.className = 'theme-studio-icon-gallery__section'
+
+    const heading = document.createElement('div')
+    heading.className = 'theme-studio-icon-gallery__heading'
+    heading.textContent = title
+    section.appendChild(heading)
+
+    const grid = document.createElement('div')
+    grid.className = 'theme-studio-icon-gallery__grid'
+    section.appendChild(grid)
+
+    return { section, grid }
+  }
+}

package/src/components/theme/icon-set-picker.ts

@@ -8,6 +8,17 @@
 import { CM_ICON_PATHS, ICON_SETS, getTheme, setThemePartial } from '../../services/theme-engine'
 import type { IconSet, IconSetId } from '../../services/theme-engine'
 
+/** Split an SVG path-data string on `M` commands and append each as a child `<path>`. */
+function appendSvgPaths(parent: SVGElement, pathData: string): void {
+  for (const segment of pathData.split(/(?=M)/g)) {
+    const trimmed = segment.trim()
+    if (!trimmed) continue
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+    path.setAttribute('d', trimmed)
+    parent.appendChild(path)
+  }
+}
+
 const PREVIEW_ICON_PATHS: Record<string, string> = {
   Search: 'M11 11m-7 0a7 7 0 1 0 14 0 7 7 0 1 0-14 0 M21 21l-4.35-4.35',
   Shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
@@ -21,6 +32,7 @@ function buildIconRow(set: IconSet, names: ReadonlyArray<string>): SVGElement {
   wrap.setAttribute('width', String(24 * names.length + 8))
   wrap.setAttribute('height', '24')
   wrap.setAttribute('class', 'theme-studio-icon-tile__row')
+  wrap.setAttribute('aria-hidden', 'true')
 
   for (let i = 0; i < names.length; i++) {
     const name = names[i]
@@ -36,13 +48,7 @@ function buildIconRow(set: IconSet, names: ReadonlyArray<string>): SVGElement {
     g.setAttribute('stroke-linecap', set.linecap)
     g.setAttribute('stroke-linejoin', set.linejoin)
 
-    for (const segment of raw.split(/(?=M)/g)) {
-      const trimmed = segment.trim()
-      if (!trimmed) continue
-      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
-      path.setAttribute('d', trimmed)
-      g.appendChild(path)
-    }
+    appendSvgPaths(g, raw)
     wrap.appendChild(g)
   }
   return wrap
@@ -50,12 +56,17 @@ function buildIconRow(set: IconSet, names: ReadonlyArray<string>): SVGElement {
 
 export class IconSetPicker {
   public readonly el: HTMLElement
+  private _onThemeChange = () => this.updateActive()
 
   constructor() {
     this.el = document.createElement('div')
     this.el.className = 'theme-studio-iconsets'
     this.render()
-    document.addEventListener('cm:theme-change', () => this.updateActive())
+    document.addEventListener('cm:theme-change', this._onThemeChange)
+  }
+
+  destroy(): void {
+    document.removeEventListener('cm:theme-change', this._onThemeChange)
   }
 
   private render(): void {

package/src/components/theme/icon-usage-matrix.ts

@@ -11,12 +11,20 @@ import type { IconUsage } from '../../services/theme-engine'
 
 export class IconUsageMatrix {
   public readonly el: HTMLElement
+  private readonly _onThemeChange: () => void
 
   constructor() {
     this.el = document.createElement('div')
     this.el.className = 'theme-studio-icon-matrix'
+    this.el.setAttribute('role', 'table')
+    this.el.setAttribute('aria-label', 'Per-icon mapping')
     this.render()
-    document.addEventListener('cm:theme-change', () => this.refreshLabels())
+    this._onThemeChange = () => this.refreshLabels()
+    document.addEventListener('cm:theme-change', this._onThemeChange)
+  }
+
+  destroy(): void {
+    document.removeEventListener('cm:theme-change', this._onThemeChange)
   }
 
   private currentIcon(usage: IconUsage): string {
@@ -50,24 +58,29 @@ export class IconUsageMatrix {
       const row = document.createElement('div')
       row.className = 'theme-studio-icon-matrix__row'
       row.dataset.slot = usage.id
+      row.setAttribute('role', 'row')
 
       const label = document.createElement('div')
       label.className = 'theme-studio-icon-matrix__label'
       label.textContent = usage.label
+      label.setAttribute('role', 'cell')
       row.appendChild(label)
 
       const value = document.createElement('code')
       value.className = 'theme-studio-icon-matrix__icon'
       value.textContent = this.currentIcon(usage)
+      value.setAttribute('role', 'cell')
       row.appendChild(value)
 
       const actions = document.createElement('div')
       actions.className = 'theme-studio-icon-matrix__actions'
+      actions.setAttribute('role', 'cell')
 
       const change = document.createElement('button')
       change.type = 'button'
       change.className = 'theme-studio-icon-matrix__change'
       change.textContent = 'Change'
+      change.setAttribute('aria-label', `Cycle icon for ${usage.label}`)
       change.addEventListener('click', () => this.cycle(usage))
       actions.appendChild(change)
 
@@ -75,6 +88,7 @@ export class IconUsageMatrix {
       reset.type = 'button'
       reset.className = 'theme-studio-icon-matrix__reset'
       reset.textContent = 'Reset'
+      reset.setAttribute('aria-label', `Reset ${usage.label} icon to default`)
       reset.addEventListener('click', () => this.reset(usage))
       actions.appendChild(reset)
 

package/src/components/theme/radius-slider.ts

@@ -7,6 +7,10 @@
 
 import { getTheme, setThemePartial } from '../../services/theme-engine'
 
+function clamp(v: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, v))
+}
+
 const MIN = 0
 const MAX = 20
 const STEP = 1
@@ -15,6 +19,7 @@ export class RadiusSlider {
   public readonly el: HTMLElement
   private readonly input: HTMLInputElement
   private readonly value: HTMLSpanElement
+  private readonly _onThemeChange: () => void
 
   constructor() {
     const initial = clamp(getTheme().radius, MIN, MAX)
@@ -49,15 +54,22 @@ export class RadiusSlider {
 
     this.input.addEventListener('input', () => {
       const next = clamp(Number(this.input.value), MIN, MAX)
+      this.value.textContent = `${next}px`
+      this.applySliderFill(next)
       setThemePartial({ radius: next })
     })
 
-    document.addEventListener('cm:theme-change', () => {
+    this._onThemeChange = () => {
       const r = clamp(getTheme().radius, MIN, MAX)
       if (Number(this.input.value) !== r) this.input.value = String(r)
       this.value.textContent = `${r}px`
       this.applySliderFill(r)
-    })
+    }
+    document.addEventListener('cm:theme-change', this._onThemeChange)
+  }
+
+  destroy(): void {
+    document.removeEventListener('cm:theme-change', this._onThemeChange)
   }
 
   private applySliderFill(level: number): void {
@@ -66,7 +78,3 @@ export class RadiusSlider {
   }
 }
 
-function clamp(value: number, min: number, max: number): number {
-  if (!Number.isFinite(value)) return min
-  return Math.max(min, Math.min(max, value))
-}

package/src/components/theme/theme-preset-grid.ts

@@ -44,7 +44,7 @@ function buildArt(preset: ThemePreset): HTMLElement {
   const card = document.createElement('div')
   card.className = 'theme-studio-preset__art-card'
   card.style.background = mode.swatch[2]
-  card.style.borderColor = 'rgba(255,255,255,0.10)'
+  card.style.borderColor = 'var(--border-2)'
 
   const pill = document.createElement('span')
   pill.className = 'theme-studio-preset__art-pill'
@@ -72,12 +72,18 @@ function buildArt(preset: ThemePreset): HTMLElement {
 
 export class ThemePresetGrid {
   public readonly el: HTMLElement
+  private readonly _onThemeChange: () => void
 
   constructor() {
     this.el = document.createElement('div')
     this.el.className = 'theme-studio-presets'
     this.render()
-    document.addEventListener('cm:theme-change', () => this.updateActive())
+    this._onThemeChange = () => this.updateActive()
+    document.addEventListener('cm:theme-change', this._onThemeChange)
+  }
+
+  destroy(): void {
+    document.removeEventListener('cm:theme-change', this._onThemeChange)
   }
 
   private render(): void {

package/src/components/theme/theme-preview-tile.ts

@@ -28,6 +28,7 @@ function svgIcon(d: string, size = 14): SVGElement {
   svg.setAttribute('stroke-width', '2')
   svg.setAttribute('stroke-linecap', 'round')
   svg.setAttribute('stroke-linejoin', 'round')
+  svg.setAttribute('aria-hidden', 'true')
   for (const segment of d.split(/(?=M)/g)) {
     const trimmed = segment.trim()
     if (!trimmed) continue
@@ -48,12 +49,18 @@ interface RowSpec {
 
 export class ThemePreviewTile {
   public readonly el: HTMLElement
+  private readonly _onThemeChange: () => void
 
   constructor() {
     this.el = document.createElement('div')
     this.el.className = 'theme-studio-preview-tile'
     this.render()
-    document.addEventListener('cm:theme-change', () => this.render())
+    this._onThemeChange = () => this.render()
+    document.addEventListener('cm:theme-change', this._onThemeChange)
+  }
+
+  destroy(): void {
+    document.removeEventListener('cm:theme-change', this._onThemeChange)
   }
 
   private render(): void {
@@ -117,8 +124,8 @@ export class ThemePreviewTile {
         iconPath: BUG_PATH,
         label: 'Lateral movement (PsExec)',
         pillText: 'HIGH',
-        pillBg: 'rgba(239,68,68,0.10)',
-        pillColor: '#f87171',
+        pillBg: 'hsl(var(--accent-rose) / 0.15)',
+        pillColor: 'hsl(var(--accent-rose))',
       },
       {
         iconPath: SKULL_PATH,
@@ -154,6 +161,7 @@ export class ThemePreviewTile {
     cta.type = 'button'
     cta.className = 'theme-studio-preview-tile__cta'
     cta.style.background = accent.brand
+    cta.disabled = true
     cta.appendChild(svgIcon(PLUG_PATH, 12))
     const ctaLabel = document.createElement('span')
     ctaLabel.textContent = 'Connect source'