@countermeasure-platform/web-components 0.2.0

package/src/display/popover/index.ts

@@ -0,0 +1,320 @@
+/**
+ * Popover - Rich content popup on click
+ * @countermeasure/web-components/display/popover
+ */
+
+import { uniqueId } from '../../primitives/utils'
+import DOMPurify from 'dompurify'
+import { type PopoverConfig, type PopoverPlacement } from './types'
+
+export type { PopoverConfig, PopoverPlacement } from './types'
+
+/** Query all focusable elements within a container */
+function getFocusableElements(container: HTMLElement): HTMLElement[] {
+  const selector = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+  ].join(', ')
+
+  return Array.from(container.querySelectorAll<HTMLElement>(selector))
+}
+
+/** Gap in pixels between trigger and popover */
+const POPOVER_GAP = 8
+
+export class Popover {
+  private readonly trigger: HTMLElement
+  private readonly placement: PopoverPlacement
+  private readonly closeOnClickOutside: boolean
+  private readonly closeOnEscape: boolean
+  private readonly className: string | undefined
+  private readonly onOpenCallback: (() => void) | undefined
+  private readonly onCloseCallback: (() => void) | undefined
+  private readonly popoverId: string
+
+  private popoverEl: HTMLElement | null = null
+  private contentEl: HTMLElement | null = null
+  private content: HTMLElement | string
+  private opened = false
+  private destroyed = false
+
+  /** Bound event handlers for cleanup */
+  private readonly handleTriggerClick: () => void
+  private readonly handleDocumentClick: (e: MouseEvent) => void
+  private readonly handleKeyDown: (e: KeyboardEvent) => void
+
+  constructor(config: PopoverConfig) {
+    this.trigger = config.trigger
+    this.content = config.content
+    this.placement = config.placement ?? 'bottom'
+    this.closeOnClickOutside = config.closeOnClickOutside !== false
+    this.closeOnEscape = config.closeOnEscape !== false
+    this.className = config.className
+    this.onOpenCallback = config.onOpen
+    this.onCloseCallback = config.onClose
+    this.popoverId = uniqueId('cmm-popover')
+
+    this.handleTriggerClick = () => {
+      this.toggle()
+    }
+
+    this.handleDocumentClick = (e: MouseEvent) => {
+      const target = e.target
+      if (
+        target instanceof Node &&
+        this.popoverEl &&
+        !this.popoverEl.contains(target) &&
+        !this.trigger.contains(target)
+      ) {
+        this.close()
+      }
+    }
+
+    this.handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        this.close()
+        this.trigger.focus()
+      }
+    }
+
+    this.trigger.setAttribute('aria-haspopup', 'dialog')
+    this.trigger.setAttribute('aria-expanded', 'false')
+    this.trigger.addEventListener('click', this.handleTriggerClick)
+  }
+
+  /** Check whether the popover is currently open */
+  isOpen(): boolean {
+    return this.opened
+  }
+
+  /** Open the popover */
+  open(): void {
+    if (this.destroyed || this.opened) {
+      return
+    }
+
+    this.opened = true
+    this.createPopoverElement()
+    this.positionPopover()
+
+    if (this.popoverEl) {
+      // Force reflow before adding open class for transition
+      void this.popoverEl.offsetHeight
+      this.popoverEl.classList.add('cmm-popover--open')
+    }
+
+    this.trigger.setAttribute('aria-expanded', 'true')
+
+    // Add document listeners
+    if (this.closeOnClickOutside) {
+      // Delay adding click listener to avoid immediate close from the same click
+      setTimeout(() => {
+        document.addEventListener('click', this.handleDocumentClick)
+      }, 0)
+    }
+
+    if (this.closeOnEscape) {
+      document.addEventListener('keydown', this.handleKeyDown)
+    }
+
+    // Focus first focusable element inside popover
+    if (this.popoverEl) {
+      const focusable = getFocusableElements(this.popoverEl)
+      const first = focusable[0]
+      if (first) {
+        first.focus()
+      } else {
+        this.popoverEl.setAttribute('tabindex', '-1')
+        this.popoverEl.focus()
+      }
+    }
+
+    this.onOpenCallback?.()
+  }
+
+  /** Close the popover */
+  close(): void {
+    if (!this.opened) {
+      return
+    }
+
+    this.opened = false
+    this.trigger.setAttribute('aria-expanded', 'false')
+
+    document.removeEventListener('click', this.handleDocumentClick)
+    document.removeEventListener('keydown', this.handleKeyDown)
+
+    if (this.popoverEl) {
+      this.popoverEl.classList.remove('cmm-popover--open')
+
+      const el = this.popoverEl
+      // Remove after transition
+      setTimeout(() => {
+        el.remove()
+      }, 200)
+
+      this.popoverEl = null
+      this.contentEl = null
+    }
+
+    this.onCloseCallback?.()
+  }
+
+  /** Toggle the popover open/closed */
+  toggle(): void {
+    if (this.opened) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  /** Update the popover content */
+  setContent(content: HTMLElement | string): void {
+    this.content = content
+    if (this.contentEl) {
+      this.renderContent()
+    }
+  }
+
+  /** Remove all listeners and clean up */
+  destroy(): void {
+    if (this.destroyed) {
+      return
+    }
+    this.destroyed = true
+
+    this.close()
+
+    this.trigger.removeEventListener('click', this.handleTriggerClick)
+    this.trigger.removeAttribute('aria-haspopup')
+    this.trigger.removeAttribute('aria-expanded')
+  }
+
+  /** Create the popover DOM element and append to body */
+  private createPopoverElement(): void {
+    // Remove existing popover if present
+    if (this.popoverEl) {
+      this.popoverEl.remove()
+    }
+
+    const popover = document.createElement('div')
+    popover.className = 'cmm-popover'
+    popover.id = this.popoverId
+
+    if (this.className) {
+      popover.classList.add(this.className)
+    }
+
+    // Content container
+    const contentEl = document.createElement('div')
+    contentEl.className = 'cmm-popover__content'
+    popover.appendChild(contentEl)
+
+    document.body.appendChild(popover)
+
+    this.popoverEl = popover
+    this.contentEl = contentEl
+
+    this.renderContent()
+  }
+
+  /** Render the content into the content element */
+  private renderContent(): void {
+    if (!this.contentEl) {
+      return
+    }
+
+    this.contentEl.innerHTML = ''
+
+    if (typeof this.content === 'string') {
+      this.contentEl.innerHTML = DOMPurify.sanitize(this.content)
+    } else {
+      this.contentEl.appendChild(this.content)
+    }
+  }
+
+  /** Position the popover relative to the trigger element */
+  private positionPopover(): void {
+    if (!this.popoverEl) {
+      return
+    }
+
+    const triggerRect = this.trigger.getBoundingClientRect()
+    const popoverRect = this.popoverEl.getBoundingClientRect()
+    const viewportWidth = window.innerWidth
+    const viewportHeight = window.innerHeight
+
+    let top = 0
+    let left = 0
+
+    const basePlacement = this.placement.split('-')[0] as
+      | 'top'
+      | 'bottom'
+      | 'left'
+      | 'right'
+      | undefined
+    const alignment = this.placement.includes('-')
+      ? (this.placement.split('-')[1] as 'start' | 'end' | undefined)
+      : undefined
+
+    const effectivePlacement = basePlacement ?? 'bottom'
+
+    switch (effectivePlacement) {
+      case 'top': {
+        top = triggerRect.top - popoverRect.height - POPOVER_GAP
+        left = this.getAlignedLeft(triggerRect, popoverRect, alignment)
+        break
+      }
+      case 'bottom': {
+        top = triggerRect.bottom + POPOVER_GAP
+        left = this.getAlignedLeft(triggerRect, popoverRect, alignment)
+        break
+      }
+      case 'left': {
+        top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2
+        left = triggerRect.left - popoverRect.width - POPOVER_GAP
+        break
+      }
+      case 'right': {
+        top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2
+        left = triggerRect.right + POPOVER_GAP
+        break
+      }
+    }
+
+    // Auto-flip vertically if not enough space
+    if (effectivePlacement === 'top' && top < 0) {
+      top = triggerRect.bottom + POPOVER_GAP
+    } else if (effectivePlacement === 'bottom' && top + popoverRect.height > viewportHeight) {
+      top = triggerRect.top - popoverRect.height - POPOVER_GAP
+    }
+
+    // Clamp to viewport
+    left = Math.max(4, Math.min(left, viewportWidth - popoverRect.width - 4))
+    top = Math.max(4, Math.min(top, viewportHeight - popoverRect.height - 4))
+
+    this.popoverEl.style.left = `${String(left)}px`
+    this.popoverEl.style.top = `${String(top)}px`
+  }
+
+  /** Get the left position based on alignment */
+  private getAlignedLeft(
+    triggerRect: DOMRect,
+    popoverRect: DOMRect,
+    alignment: 'start' | 'end' | undefined
+  ): number {
+    if (alignment === 'start') {
+      return triggerRect.left
+    }
+    if (alignment === 'end') {
+      return triggerRect.right - popoverRect.width
+    }
+    return triggerRect.left + (triggerRect.width - popoverRect.width) / 2
+  }
+}

package/src/display/popover/types.ts

@@ -0,0 +1,25 @@
+/**
+ * Popover type definitions
+ * @countermeasure/web-components/display/popover
+ */
+
+export type PopoverPlacement =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom-end'
+
+export interface PopoverConfig {
+  trigger: HTMLElement
+  content: HTMLElement | string
+  placement?: PopoverPlacement
+  closeOnClickOutside?: boolean
+  closeOnEscape?: boolean
+  className?: string
+  onOpen?: () => void
+  onClose?: () => void
+}

package/src/display/progress/index.ts

@@ -0,0 +1,209 @@
+/**
+ * Progress - Linear and circular progress indicator
+ * @countermeasure/web-components/display/progress
+ */
+
+import { resolveContainer, uniqueId } from '../../primitives/utils'
+import { type ProgressConfig, type ProgressVariant, type ProgressSize } from './types'
+
+export type { ProgressConfig, ProgressVariant, ProgressSize } from './types'
+
+/** Circumference for SVG circle with r=16: 2 * PI * 16 */
+const CIRCUMFERENCE = 2 * Math.PI * 16
+
+/** Clamp a number between 0 and 100 */
+function clampValue(value: number): number {
+  return Math.min(100, Math.max(0, value))
+}
+
+export class Progress {
+  public readonly el: HTMLDivElement
+
+  private readonly progressId: string
+  private readonly variant: ProgressVariant
+  private readonly size: ProgressSize
+  private readonly showLabel: boolean
+  private currentValue: number | undefined
+  private currentLabel: string | undefined
+
+  /** References to inner elements for updates */
+  private fillEl: HTMLDivElement | null = null
+  private labelEl: HTMLSpanElement | SVGTextElement | null = null
+  private circleFillEl: SVGCircleElement | null = null
+
+  constructor(config: ProgressConfig) {
+    this.progressId = uniqueId('cmm-progress')
+    this.variant = config.variant ?? 'linear'
+    this.size = config.size ?? 'md'
+    this.showLabel = config.showLabel === true
+    this.currentLabel = config.label
+    this.currentValue = config.value !== undefined ? clampValue(config.value) : undefined
+
+    // Create root element
+    this.el = document.createElement('div')
+    this.el.id = this.progressId
+    this.el.setAttribute('role', 'progressbar')
+    this.el.setAttribute('aria-valuemin', '0')
+    this.el.setAttribute('aria-valuemax', '100')
+
+    if (this.currentValue !== undefined) {
+      this.el.setAttribute('aria-valuenow', String(this.currentValue))
+    }
+
+    this.el.setAttribute('aria-label', config.ariaLabel ?? 'Progress')
+
+    this.el.className = this.buildClassName(config.className)
+
+    if (config.color) {
+      this.el.style.setProperty('--cmm-progress-color', config.color)
+    }
+
+    if (this.variant === 'linear') {
+      this.buildLinear()
+    } else {
+      this.buildCircular()
+    }
+
+    // Mount if container provided
+    if (config.container !== undefined) {
+      const parent = resolveContainer(config.container)
+      parent.appendChild(this.el)
+    }
+  }
+
+  /** Update the progress value (0-100) */
+  setValue(value: number): void {
+    this.currentValue = clampValue(value)
+    this.el.setAttribute('aria-valuenow', String(this.currentValue))
+    this.el.classList.remove('cmm-progress--indeterminate')
+
+    if (this.variant === 'linear') {
+      if (this.fillEl) {
+        this.fillEl.style.width = `${String(this.currentValue)}%`
+      }
+    } else if (this.circleFillEl) {
+      const offset = CIRCUMFERENCE * (1 - this.currentValue / 100)
+      this.circleFillEl.setAttribute('stroke-dashoffset', String(offset))
+    }
+
+    this.updateLabelText()
+  }
+
+  /** Set a custom label or null to revert to percentage */
+  setLabel(label: string | null): void {
+    if (label !== null) {
+      this.currentLabel = label
+    } else {
+      this.currentLabel = undefined
+    }
+    this.updateLabelText()
+  }
+
+  /** Remove the progress from the DOM */
+  destroy(): void {
+    this.el.remove()
+  }
+
+  private buildClassName(extra?: string): string {
+    const classes = ['cmm-progress', `cmm-progress--${this.variant}`, `cmm-progress--${this.size}`]
+
+    if (this.currentValue === undefined) {
+      classes.push('cmm-progress--indeterminate')
+    }
+
+    if (extra) {
+      classes.push(extra)
+    }
+
+    return classes.join(' ')
+  }
+
+  private buildLinear(): void {
+    const track = document.createElement('div')
+    track.className = 'cmm-progress__track'
+
+    const fill = document.createElement('div')
+    fill.className = 'cmm-progress__fill'
+
+    if (this.currentValue !== undefined) {
+      fill.style.width = `${String(this.currentValue)}%`
+    }
+
+    track.appendChild(fill)
+    this.el.appendChild(track)
+    this.fillEl = fill
+
+    if (this.showLabel) {
+      const label = document.createElement('span')
+      label.className = 'cmm-progress__label'
+      label.textContent = this.getLabelText()
+      this.el.appendChild(label)
+      this.labelEl = label
+    }
+  }
+
+  private buildCircular(): void {
+    const ns = 'http://www.w3.org/2000/svg'
+    const svg = document.createElementNS(ns, 'svg')
+    svg.setAttribute('viewBox', '0 0 36 36')
+
+    // Background circle
+    const bgCircle = document.createElementNS(ns, 'circle')
+    bgCircle.setAttribute('class', 'cmm-progress__circle-bg')
+    bgCircle.setAttribute('cx', '18')
+    bgCircle.setAttribute('cy', '18')
+    bgCircle.setAttribute('r', '16')
+    bgCircle.setAttribute('stroke-width', '3')
+    svg.appendChild(bgCircle)
+
+    // Progress circle
+    const fillCircle = document.createElementNS(ns, 'circle')
+    fillCircle.setAttribute('class', 'cmm-progress__circle-fill')
+    fillCircle.setAttribute('cx', '18')
+    fillCircle.setAttribute('cy', '18')
+    fillCircle.setAttribute('r', '16')
+    fillCircle.setAttribute('stroke-width', '3')
+    fillCircle.setAttribute('stroke-dasharray', String(CIRCUMFERENCE))
+
+    if (this.currentValue !== undefined) {
+      const offset = CIRCUMFERENCE * (1 - this.currentValue / 100)
+      fillCircle.setAttribute('stroke-dashoffset', String(offset))
+    } else {
+      // Indeterminate: show a partial arc
+      const offset = CIRCUMFERENCE * 0.75
+      fillCircle.setAttribute('stroke-dashoffset', String(offset))
+    }
+
+    svg.appendChild(fillCircle)
+    this.circleFillEl = fillCircle
+
+    // Optional label inside circle
+    if (this.showLabel) {
+      const text = document.createElementNS(ns, 'text')
+      text.setAttribute('class', 'cmm-progress__circle-label')
+      text.setAttribute('x', '18')
+      text.setAttribute('y', '18')
+      text.textContent = this.getLabelText()
+      svg.appendChild(text)
+      this.labelEl = text
+    }
+
+    this.el.appendChild(svg)
+  }
+
+  private getLabelText(): string {
+    if (this.currentLabel !== undefined) {
+      return this.currentLabel
+    }
+    if (this.currentValue !== undefined) {
+      return `${String(this.currentValue)}%`
+    }
+    return ''
+  }
+
+  private updateLabelText(): void {
+    if (this.labelEl) {
+      this.labelEl.textContent = this.getLabelText()
+    }
+  }
+}

package/src/display/progress/types.ts

@@ -0,0 +1,19 @@
+/**
+ * Progress type definitions
+ * @countermeasure/web-components/display/progress
+ */
+
+export type ProgressVariant = 'linear' | 'circular'
+export type ProgressSize = 'sm' | 'md' | 'lg'
+
+export interface ProgressConfig {
+  container?: HTMLElement | string
+  value?: number
+  variant?: ProgressVariant
+  size?: ProgressSize
+  showLabel?: boolean
+  label?: string
+  color?: string
+  className?: string
+  ariaLabel?: string
+}

package/src/display/severity-indicator/index.ts

@@ -0,0 +1,96 @@
+/**
+ * SeverityIndicator - Visual severity level display for CVEs, alerts, etc.
+ * @countermeasure/web-components/display/severity-indicator
+ */
+
+import { type SeverityIndicatorConfig, type SeverityLevel } from './types'
+import { resolveContainer, uniqueId } from '../../primitives/utils'
+
+export type { SeverityIndicatorConfig, SeverityLevel } from './types'
+
+/** Capitalized labels for each severity level */
+const LEVEL_LABELS: Record<SeverityLevel, string> = {
+  critical: 'Critical',
+  high: 'High',
+  medium: 'Medium',
+  low: 'Low',
+  info: 'Info',
+  none: 'None',
+}
+
+export class SeverityIndicator {
+  public readonly el: HTMLDivElement
+
+  private readonly indicatorId: string
+  private currentLevel: SeverityLevel
+  private iconEl: HTMLSpanElement | null = null
+  private labelEl: HTMLSpanElement | null = null
+  private readonly showLabel: boolean
+  private readonly showIcon: boolean
+  private readonly compact: boolean
+
+  constructor(config: SeverityIndicatorConfig) {
+    this.indicatorId = uniqueId('cmm-severity')
+    this.currentLevel = config.level
+    this.showLabel = config.showLabel !== false
+    this.showIcon = config.showIcon !== false
+    this.compact = config.compact === true
+
+    // Create root element
+    this.el = document.createElement('div')
+    this.el.id = this.indicatorId
+    this.el.className = this.buildClassName(config.className)
+    this.el.setAttribute('role', 'status')
+    this.el.setAttribute('aria-label', `Severity: ${LEVEL_LABELS[this.currentLevel]}`)
+
+    // Create icon (colored dot)
+    if (this.showIcon) {
+      this.iconEl = document.createElement('span')
+      this.iconEl.className = 'cmm-severity__icon'
+      this.iconEl.setAttribute('aria-hidden', 'true')
+      this.el.appendChild(this.iconEl)
+    }
+
+    // Create label
+    if (this.showLabel) {
+      this.labelEl = document.createElement('span')
+      this.labelEl.className = 'cmm-severity__label'
+      this.labelEl.textContent = LEVEL_LABELS[this.currentLevel]
+      this.el.appendChild(this.labelEl)
+    }
+
+    // Mount if container provided
+    if (config.container !== undefined) {
+      const parent = resolveContainer(config.container)
+      parent.appendChild(this.el)
+    }
+  }
+
+  /** Update the displayed severity level */
+  setLevel(level: SeverityLevel): void {
+    this.el.classList.remove(`cmm-severity--${this.currentLevel}`)
+    this.currentLevel = level
+    this.el.classList.add(`cmm-severity--${this.currentLevel}`)
+    this.el.setAttribute('aria-label', `Severity: ${LEVEL_LABELS[this.currentLevel]}`)
+
+    if (this.labelEl !== null) {
+      this.labelEl.textContent = LEVEL_LABELS[this.currentLevel]
+    }
+  }
+
+  /** Remove the element from the DOM and clean up */
+  destroy(): void {
+    this.el.remove()
+  }
+
+  private buildClassName(extra?: string): string {
+    const classes = ['cmm-severity', `cmm-severity--${this.currentLevel}`]
+    if (this.compact) {
+      classes.push('cmm-severity--compact')
+    }
+    if (extra) {
+      classes.push(extra)
+    }
+    return classes.join(' ')
+  }
+}

package/src/display/severity-indicator/types.ts

@@ -0,0 +1,15 @@
+/**
+ * SeverityIndicator type definitions
+ * @countermeasure/web-components/display/severity-indicator
+ */
+
+export type SeverityLevel = 'critical' | 'high' | 'medium' | 'low' | 'info' | 'none'
+
+export interface SeverityIndicatorConfig {
+  container?: HTMLElement | string
+  level: SeverityLevel
+  showLabel?: boolean
+  showIcon?: boolean
+  compact?: boolean
+  className?: string
+}