@countermeasure-platform/web-components 0.2.0

package/src/navigation/stepper/index.ts

@@ -0,0 +1,270 @@
+/**
+ * Stepper - Multi-step wizard with visual step indicators
+ * @countermeasure/web-components/navigation/stepper
+ */
+
+import { resolveContainer, uniqueId } from '../../primitives/utils'
+import { type Step, type StepperConfig, type StepperOrientation, type StepStatus } from './types'
+
+export type { Step, StepperConfig, StepperOrientation, StepStatus } from './types'
+
+/** SVG icons for step status indicators */
+const STATUS_ICONS: Record<string, string> = {
+  complete:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 12 2 2 4-4"/></svg>',
+  error:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>',
+}
+
+export class Stepper {
+  private readonly container: HTMLElement
+  private readonly orientation: StepperOrientation
+  private readonly allowClick: boolean
+  private readonly linear: boolean
+  private readonly className: string | undefined
+  private readonly onChangeCallback: ((index: number) => void) | undefined
+  private readonly stepperId: string
+
+  private steps: Step[]
+  private currentIndex: number
+  private destroyed = false
+
+  constructor(config: StepperConfig) {
+    this.container = resolveContainer(config.container)
+    this.steps = [...config.steps]
+    this.orientation = config.orientation ?? 'horizontal'
+    this.allowClick = config.allowClick !== false
+    this.linear = config.linear === true
+    this.className = config.className
+    this.onChangeCallback = config.onChange
+    this.stepperId = uniqueId('cmm-stepper')
+
+    // Determine initial active step
+    this.currentIndex = this.steps.findIndex(s => s.status === 'active')
+    if (this.currentIndex < 0) {
+      this.currentIndex = 0
+    }
+
+    this.applyStatuses()
+    this.render()
+  }
+
+  /** Navigate to a specific step by index */
+  goTo(index: number): void {
+    if (this.destroyed || index < 0 || index >= this.steps.length) {
+      return
+    }
+
+    const targetStep = this.steps[index]
+    if (targetStep?.status === 'disabled') {
+      return
+    }
+
+    // In linear mode, only allow navigating to completed steps or the next step
+    if (this.linear && index > this.currentIndex + 1) {
+      return
+    }
+
+    this.setCurrentIndex(index)
+  }
+
+  /** Move to the next step */
+  next(): void {
+    if (this.currentIndex < this.steps.length - 1) {
+      this.goTo(this.currentIndex + 1)
+    }
+  }
+
+  /** Move to the previous step */
+  prev(): void {
+    if (this.currentIndex > 0) {
+      this.goTo(this.currentIndex - 1)
+    }
+  }
+
+  /** Get the current active step index */
+  getCurrentIndex(): number {
+    return this.currentIndex
+  }
+
+  /** Update the steps and re-render */
+  update(steps: Step[]): void {
+    if (this.destroyed) {
+      return
+    }
+    this.steps = [...steps]
+    this.applyStatuses()
+    this.render()
+  }
+
+  /** Remove all DOM elements and clean up */
+  destroy(): void {
+    if (this.destroyed) {
+      return
+    }
+    this.destroyed = true
+    this.container.innerHTML = ''
+  }
+
+  /** Set the current index and update statuses */
+  private setCurrentIndex(index: number): void {
+    // Mark steps before current as complete (if not already error/disabled)
+    for (let i = 0; i < this.steps.length; i++) {
+      const step = this.steps[i]
+      if (!step) {
+        continue
+      }
+
+      if (step.status === 'disabled') {
+        continue
+      }
+
+      if (i < index) {
+        if (step.status !== 'error') {
+          step.status = 'complete'
+        }
+      } else if (i === index) {
+        step.status = 'active'
+      } else {
+        if (step.status !== 'error') {
+          step.status = 'pending'
+        }
+      }
+    }
+
+    this.currentIndex = index
+    this.render()
+    this.onChangeCallback?.(index)
+  }
+
+  /** Apply default statuses if not explicitly set */
+  private applyStatuses(): void {
+    for (let i = 0; i < this.steps.length; i++) {
+      const step = this.steps[i]
+      if (!step) {
+        continue
+      }
+
+      if (step.status === undefined) {
+        if (i < this.currentIndex) {
+          step.status = 'complete'
+        } else if (i === this.currentIndex) {
+          step.status = 'active'
+        } else {
+          step.status = 'pending'
+        }
+      }
+    }
+  }
+
+  /** Render the stepper */
+  private render(): void {
+    this.container.innerHTML = ''
+
+    const root = document.createElement('div')
+    root.className = 'cmm-stepper'
+    root.id = this.stepperId
+    root.setAttribute('role', 'navigation')
+    root.setAttribute('aria-label', 'Progress')
+
+    if (this.orientation === 'vertical') {
+      root.classList.add('cmm-stepper--vertical')
+    }
+
+    if (this.className) {
+      root.classList.add(this.className)
+    }
+
+    const ol = document.createElement('ol')
+    ol.className = 'cmm-stepper__list'
+
+    for (let i = 0; i < this.steps.length; i++) {
+      const step = this.steps[i]
+      if (!step) {
+        continue
+      }
+
+      const status: StepStatus = step.status ?? 'pending'
+      const li = document.createElement('li')
+      li.className = `cmm-stepper__step cmm-stepper__step--${status}`
+
+      // Connector line (before each step except the first)
+      if (i > 0) {
+        const connector = document.createElement('div')
+        connector.className = 'cmm-stepper__connector'
+        connector.setAttribute('aria-hidden', 'true')
+
+        // Mark connector as complete if previous step is complete
+        const prevStep = this.steps[i - 1]
+        if (prevStep?.status === 'complete') {
+          connector.classList.add('cmm-stepper__connector--complete')
+        }
+
+        li.appendChild(connector)
+      }
+
+      // Step indicator circle
+      const indicator = document.createElement('div')
+      indicator.className = 'cmm-stepper__indicator'
+
+      if (step.icon) {
+        indicator.innerHTML = step.icon
+      } else if (status === 'complete' || status === 'error') {
+        indicator.innerHTML = STATUS_ICONS[status] ?? ''
+      } else {
+        indicator.textContent = String(i + 1)
+      }
+
+      // Click handler
+      if (this.allowClick && status !== 'disabled') {
+        const isClickable = !this.linear || i <= this.currentIndex + 1
+        if (isClickable) {
+          indicator.classList.add('cmm-stepper__indicator--clickable')
+          indicator.setAttribute('tabindex', '0')
+          indicator.setAttribute('role', 'button')
+          indicator.setAttribute('aria-label', `Go to step ${String(i + 1)}: ${step.label}`)
+
+          const stepIndex = i
+          indicator.addEventListener('click', () => {
+            this.goTo(stepIndex)
+          })
+          indicator.addEventListener('keydown', (e: KeyboardEvent) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              this.goTo(stepIndex)
+            }
+          })
+        }
+      }
+
+      li.appendChild(indicator)
+
+      // Step text content
+      const content = document.createElement('div')
+      content.className = 'cmm-stepper__content'
+
+      const label = document.createElement('div')
+      label.className = 'cmm-stepper__label'
+      label.textContent = step.label
+
+      if (status === 'active') {
+        label.setAttribute('aria-current', 'step')
+      }
+
+      content.appendChild(label)
+
+      if (step.description) {
+        const desc = document.createElement('div')
+        desc.className = 'cmm-stepper__description'
+        desc.textContent = step.description
+        content.appendChild(desc)
+      }
+
+      li.appendChild(content)
+      ol.appendChild(li)
+    }
+
+    root.appendChild(ol)
+    this.container.appendChild(root)
+  }
+}

package/src/navigation/stepper/types.ts

@@ -0,0 +1,25 @@
+/**
+ * Stepper type definitions
+ * @countermeasure/web-components/navigation/stepper
+ */
+
+export type StepStatus = 'pending' | 'active' | 'complete' | 'error' | 'disabled'
+
+export interface Step {
+  label: string
+  description?: string
+  icon?: string
+  status?: StepStatus
+}
+
+export type StepperOrientation = 'horizontal' | 'vertical'
+
+export interface StepperConfig {
+  container: HTMLElement | string
+  steps: Step[]
+  orientation?: StepperOrientation
+  allowClick?: boolean
+  linear?: boolean
+  className?: string
+  onChange?: (index: number) => void
+}

package/src/overlays/alert-dialog/index.ts

@@ -0,0 +1,313 @@
+/**
+ * AlertDialog - Blocking confirmation overlay with variant support
+ * @countermeasure/web-components/overlays/alert-dialog
+ */
+
+import { uniqueId } from '../../primitives/utils'
+import { type AlertDialogConfig, type AlertDialogVariant } from './types'
+
+export type { AlertDialogConfig, AlertDialogVariant } 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))
+}
+
+export class AlertDialog {
+  private overlayEl: HTMLElement | null = null
+  private dialogEl: HTMLElement | null = null
+  private confirmBtn: HTMLButtonElement | null = null
+  private cancelBtn: HTMLButtonElement | null = null
+  private confirmInput: HTMLInputElement | null = null
+  private readonly config: AlertDialogConfig
+  private isLoading = false
+  private readonly titleId: string
+  private readonly descId: string
+
+  /** Bound handler for cleanup */
+  private readonly handleKeyDown: (e: KeyboardEvent) => void
+
+  private constructor(config: AlertDialogConfig) {
+    this.config = config
+    this.titleId = uniqueId('cmm-alert-title')
+    this.descId = uniqueId('cmm-alert-desc')
+    this.handleKeyDown = (e: KeyboardEvent) => {
+      this.onKeyDown(e)
+    }
+  }
+
+  /** Factory method: create and show an alert dialog */
+  static open(config: AlertDialogConfig): AlertDialog {
+    const dialog = new AlertDialog(config)
+    dialog.show()
+    return dialog
+  }
+
+  /** Close the dialog and remove from DOM */
+  close(): void {
+    document.removeEventListener('keydown', this.handleKeyDown)
+
+    if (this.overlayEl) {
+      this.overlayEl.classList.remove('cmm-alert-dialog--open')
+
+      const overlay = this.overlayEl
+      setTimeout(() => {
+        overlay.remove()
+      }, 200)
+
+      this.overlayEl = null
+      this.dialogEl = null
+      this.confirmBtn = null
+      this.cancelBtn = null
+      this.confirmInput = null
+    }
+  }
+
+  /** Build and show the alert dialog DOM */
+  private show(): void {
+    const variant: AlertDialogVariant = this.config.variant ?? 'info'
+
+    // Overlay (not dismissible by click)
+    const overlay = document.createElement('div')
+    overlay.className = `cmm-alert-dialog cmm-alert-dialog--${variant}`
+    this.overlayEl = overlay
+
+    // Dialog
+    const dialog = document.createElement('div')
+    dialog.className = 'cmm-alert-dialog__dialog'
+    dialog.setAttribute('role', 'alertdialog')
+    dialog.setAttribute('aria-modal', 'true')
+    dialog.setAttribute('aria-labelledby', this.titleId)
+    dialog.setAttribute('aria-describedby', this.descId)
+    dialog.setAttribute('tabindex', '-1')
+    this.dialogEl = dialog
+
+    // Header
+    const header = document.createElement('div')
+    header.className = 'cmm-alert-dialog__header'
+
+    const title = document.createElement('h2')
+    title.className = 'cmm-alert-dialog__title'
+    title.id = this.titleId
+    title.textContent = this.config.title
+    header.appendChild(title)
+
+    const description = document.createElement('p')
+    description.className = 'cmm-alert-dialog__description'
+    description.id = this.descId
+    description.textContent = this.config.description
+    header.appendChild(description)
+
+    dialog.appendChild(header)
+
+    // Confirm text input for destructive variant
+    if (variant === 'destructive' && this.config.confirmText) {
+      const confirmGroup = document.createElement('div')
+      confirmGroup.className = 'cmm-alert-dialog__confirm-group'
+
+      const confirmLabel = document.createElement('label')
+      confirmLabel.className = 'cmm-alert-dialog__confirm-label'
+      const inputId = uniqueId('cmm-alert-confirm-input')
+      confirmLabel.setAttribute('for', inputId)
+      confirmLabel.textContent = `Type "${this.config.confirmText}" to confirm`
+      confirmGroup.appendChild(confirmLabel)
+
+      const confirmInput = document.createElement('input')
+      confirmInput.className = 'cmm-alert-dialog__confirm-input'
+      confirmInput.id = inputId
+      confirmInput.type = 'text'
+      confirmInput.autocomplete = 'off'
+      confirmInput.spellcheck = false
+      confirmInput.setAttribute('aria-required', 'true')
+      confirmInput.addEventListener('input', () => {
+        this.updateConfirmButtonState()
+      })
+      confirmGroup.appendChild(confirmInput)
+
+      this.confirmInput = confirmInput
+      dialog.appendChild(confirmGroup)
+    }
+
+    // Footer
+    const footer = document.createElement('div')
+    footer.className = 'cmm-alert-dialog__footer'
+
+    const cancelBtn = document.createElement('button')
+    cancelBtn.className = 'cmm-alert-dialog__btn cmm-alert-dialog__btn--cancel'
+    cancelBtn.type = 'button'
+    cancelBtn.textContent = this.config.cancelLabel ?? 'Cancel'
+    cancelBtn.addEventListener('click', () => {
+      this.handleCancel()
+    })
+    footer.appendChild(cancelBtn)
+    this.cancelBtn = cancelBtn
+
+    const confirmBtn = document.createElement('button')
+    confirmBtn.className = 'cmm-alert-dialog__btn cmm-alert-dialog__btn--confirm'
+    confirmBtn.type = 'button'
+    confirmBtn.textContent = this.config.confirmLabel ?? 'Confirm'
+    confirmBtn.addEventListener('click', () => {
+      void this.handleConfirm()
+    })
+    footer.appendChild(confirmBtn)
+    this.confirmBtn = confirmBtn
+
+    dialog.appendChild(footer)
+    overlay.appendChild(dialog)
+    document.body.appendChild(overlay)
+
+    // Disable confirm button if type-to-confirm is required
+    this.updateConfirmButtonState()
+
+    // Show with transition
+    requestAnimationFrame(() => {
+      overlay.classList.add('cmm-alert-dialog--open')
+    })
+
+    // Keyboard handler (no escape dismissal, only focus trap)
+    document.addEventListener('keydown', this.handleKeyDown)
+
+    // Focus the first interactive element
+    if (this.confirmInput) {
+      this.confirmInput.focus()
+    } else {
+      cancelBtn.focus()
+    }
+  }
+
+  /** Check if the confirm input matches the required text */
+  private isConfirmTextValid(): boolean {
+    if (this.config.variant !== 'destructive' || !this.config.confirmText) {
+      return true
+    }
+    if (!this.confirmInput) {
+      return true
+    }
+    return this.confirmInput.value === this.config.confirmText
+  }
+
+  /** Enable or disable the confirm button based on input match */
+  private updateConfirmButtonState(): void {
+    if (!this.confirmBtn) {
+      return
+    }
+
+    if (this.config.variant === 'destructive' && this.config.confirmText) {
+      this.confirmBtn.disabled = !this.isConfirmTextValid() || this.isLoading
+    } else {
+      this.confirmBtn.disabled = this.isLoading
+    }
+  }
+
+  /** Set loading state on both buttons */
+  private setLoading(loading: boolean): void {
+    this.isLoading = loading
+
+    if (this.confirmBtn) {
+      this.confirmBtn.disabled = loading
+      if (loading) {
+        const spinner = document.createElement('span')
+        spinner.className = 'cmm-alert-dialog__spinner'
+        this.confirmBtn.prepend(spinner)
+      } else {
+        const spinner = this.confirmBtn.querySelector('.cmm-alert-dialog__spinner')
+        if (spinner) {
+          spinner.remove()
+        }
+      }
+    }
+
+    if (this.cancelBtn) {
+      this.cancelBtn.disabled = loading
+    }
+
+    if (this.confirmInput) {
+      this.confirmInput.disabled = loading
+    }
+  }
+
+  /** Handle the confirm button click, supporting async callbacks */
+  private async handleConfirm(): Promise<void> {
+    if (this.isLoading) {
+      return
+    }
+
+    if (!this.isConfirmTextValid()) {
+      return
+    }
+
+    if (this.config.onConfirm === undefined) {
+      this.close()
+      return
+    }
+
+    const result: void | Promise<void> = this.config.onConfirm()
+
+    if (result !== undefined && typeof result.then === 'function') {
+      this.setLoading(true)
+      try {
+        await result
+      } finally {
+        this.setLoading(false)
+      }
+    }
+
+    this.close()
+  }
+
+  /** Handle cancel button click */
+  private handleCancel(): void {
+    if (this.isLoading) {
+      return
+    }
+    this.config.onCancel?.()
+    this.close()
+  }
+
+  /** Handle keyboard events for focus trapping (no escape dismissal) */
+  private onKeyDown(e: KeyboardEvent): void {
+    // AlertDialog does NOT close on Escape - explicit action required
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      return
+    }
+
+    // Focus trap: Tab key cycles within the dialog
+    if (e.key === 'Tab' && this.dialogEl) {
+      const focusable = getFocusableElements(this.dialogEl)
+      if (focusable.length === 0) {
+        e.preventDefault()
+        return
+      }
+
+      const first = focusable[0]
+      const last = focusable[focusable.length - 1]
+
+      if (first === undefined || last === undefined) {
+        e.preventDefault()
+        return
+      }
+
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault()
+          last.focus()
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault()
+          first.focus()
+        }
+      }
+    }
+  }
+}

package/src/overlays/alert-dialog/types.ts

@@ -0,0 +1,18 @@
+/**
+ * AlertDialog type definitions
+ * @countermeasure/web-components/overlays/alert-dialog
+ */
+
+export type AlertDialogVariant = 'info' | 'warning' | 'destructive'
+
+export interface AlertDialogConfig {
+  title: string
+  description: string
+  variant?: AlertDialogVariant
+  confirmLabel?: string
+  cancelLabel?: string
+  /** For destructive: text user must type to confirm (e.g., resource name) */
+  confirmText?: string
+  onConfirm?: () => void | Promise<void>
+  onCancel?: () => void
+}