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

package/package.json

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

package/src/components/brand/index.ts

@@ -4,6 +4,7 @@
  */
 
 import {
+  type BrandLockupConfig,
   type BrandSize,
   type ConnectorLogoConfig,
   type ConnectorLogoSize,
@@ -14,6 +15,7 @@ import { resolveContainer, uniqueId } from '../../primitives/utils'
 
 export type {
   BrandSize,
+  BrandLockupConfig,
   ConnectorLogoConfig,
   ConnectorLogoSize,
   DiamondConfig,
@@ -132,6 +134,23 @@ export class Wordmark {
   }
 }
 
+export class BrandLockup {
+  public readonly el: HTMLSpanElement
+
+  constructor(config: BrandLockupConfig = {}) {
+    this.el = createBrandLockupElement(config)
+
+    if (config.container !== undefined) {
+      const parent = resolveContainer(config.container)
+      parent.appendChild(this.el)
+    }
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}
+
 export class ConnectorLogo {
   public readonly el: HTMLSpanElement
 
@@ -230,6 +249,40 @@ export function createWordmarkSvg(config: WordmarkConfig = {}): SVGSVGElement {
   return svg
 }
 
+export function createBrandLockupElement(config: BrandLockupConfig = {}): HTMLSpanElement {
+  const el = document.createElement('span')
+  el.id = uniqueId('cmm-brand-lockup')
+  el.className = buildBrandLockupClassName(config)
+
+  if (config.decorative === true) {
+    el.setAttribute('aria-hidden', 'true')
+  } else {
+    el.setAttribute('role', 'img')
+    el.setAttribute('aria-label', config.label ?? 'CounterMeasure')
+  }
+
+  el.appendChild(createDiamondSvg({ size: config.markSize ?? 22, decorative: true }))
+
+  if (config.showWordmark !== false) {
+    const wordmark = document.createElement('span')
+    wordmark.className = 'cmm-brand-lockup__wordmark'
+    wordmark.setAttribute('aria-hidden', 'true')
+
+    const counter = document.createElement('span')
+    counter.className = 'cmm-brand-lockup__counter'
+    counter.textContent = 'COUNTER'
+
+    const measure = document.createElement('span')
+    measure.className = 'cmm-brand-lockup__measure'
+    measure.textContent = 'MEASURE'
+
+    wordmark.append(counter, measure)
+    el.appendChild(wordmark)
+  }
+
+  return el
+}
+
 export function getConnectorLogoColor(name: string): string {
   const paletteKey = getConnectorPaletteKey(name)
   return CONNECTOR_LOGO_PALETTE[paletteKey]
@@ -268,6 +321,16 @@ function buildWordmarkClassName(config: WordmarkConfig): string {
   return classes.join(' ')
 }
 
+function buildBrandLockupClassName(config: BrandLockupConfig): string {
+  const classes = ['cmm-brand-lockup']
+
+  if (config.className) {
+    classes.push(config.className)
+  }
+
+  return classes.join(' ')
+}
+
 function buildConnectorLogoClassName(config: ConnectorLogoConfig): string {
   const classes = [
     'cmm-connector-logo',

package/src/components/brand/types.ts

@@ -25,6 +25,15 @@ export interface WordmarkConfig {
   className?: string
 }
 
+export interface BrandLockupConfig {
+  container?: HTMLElement | string
+  markSize?: BrandSize | number
+  label?: string
+  decorative?: boolean
+  showWordmark?: boolean
+  className?: string
+}
+
 export interface ConnectorLogoConfig {
   container?: HTMLElement | string
   name: string

package/src/react/brand/index.test.tsx

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '@testing-library/react'
+
+import { BrandLockup, CounterMeasureBrandLockup } from './index'
+
+describe('React brand lockup', () => {
+  it('renders the shared CounterMeasure lockup with split brand text', () => {
+    const { container } = render(<BrandLockup />)
+    const lockup = container.querySelector('.cmm-brand-lockup')
+
+    expect(lockup).toBeTruthy()
+    expect(lockup?.getAttribute('role')).toBe('img')
+    expect(lockup?.getAttribute('aria-label')).toBe('CounterMeasure')
+    expect(lockup?.querySelector('.cmm-diamond')).toBeTruthy()
+    expect(lockup?.textContent).toBe('COUNTERMEASURE')
+    expect(lockup?.querySelector('.cmm-brand-lockup__counter')?.textContent).toBe('COUNTER')
+    expect(lockup?.querySelector('.cmm-brand-lockup__measure')?.textContent).toBe('MEASURE')
+  })
+
+  it('can render mark-only for collapsed sidebars', () => {
+    const { container } = render(<CounterMeasureBrandLockup showWordmark={false} decorative />)
+    const lockup = container.querySelector('.cmm-brand-lockup')
+
+    expect(lockup?.getAttribute('aria-hidden')).toBe('true')
+    expect(lockup?.querySelector('.cmm-diamond')).toBeTruthy()
+    expect(lockup?.querySelector('.cmm-brand-lockup__wordmark')).toBeNull()
+  })
+})

package/src/react/brand/index.tsx

@@ -13,6 +13,7 @@ import {
   getConnectorLogoSizeClass,
   getConnectorLogoTone,
   type BrandSize,
+  type BrandLockupConfig,
   type ConnectorLogoSize,
   type WordmarkVariant,
 } from '../../components/brand'
@@ -159,6 +160,38 @@ export function Wordmark({
   )
 }
 
+export interface BrandLockupProps extends React.HTMLAttributes<HTMLSpanElement> {
+  markSize?: BrandSize | number
+  label?: string
+  decorative?: boolean
+  showWordmark?: boolean
+}
+
+export function BrandLockup({
+  className,
+  markSize = 22,
+  label = 'CounterMeasure',
+  decorative = false,
+  showWordmark = true,
+  ...props
+}: BrandLockupProps) {
+  const accessibilityProps = decorative
+    ? { 'aria-hidden': true }
+    : { role: 'img', 'aria-label': label }
+
+  return (
+    <span className={cn('cmm-brand-lockup', className)} {...accessibilityProps} {...props}>
+      <Diamond size={markSize} decorative />
+      {showWordmark ? (
+        <span className="cmm-brand-lockup__wordmark" aria-hidden="true">
+          <span className="cmm-brand-lockup__counter">COUNTER</span>
+          <span className="cmm-brand-lockup__measure">MEASURE</span>
+        </span>
+      ) : null}
+    </span>
+  )
+}
+
 export interface ConnectorLogoProps extends React.HTMLAttributes<HTMLSpanElement> {
   name: string
   src?: string
@@ -211,8 +244,13 @@ export type CountermeasureLogoProps = DiamondProps
 export type CounterMeasureLogoProps = DiamondProps
 export type CountermeasureWordmarkProps = WordmarkProps
 export type CounterMeasureWordmarkProps = WordmarkProps
+export type CountermeasureBrandLockupProps = BrandLockupProps
+export type CounterMeasureBrandLockupProps = BrandLockupProps
+export type { BrandLockupConfig }
 
 export const CountermeasureLogo = Diamond
 export const CounterMeasureLogo = Diamond
 export const CountermeasureWordmark = Wordmark
 export const CounterMeasureWordmark = Wordmark
+export const CountermeasureBrandLockup = BrandLockup
+export const CounterMeasureBrandLockup = BrandLockup

package/src/react/sidebar.test.tsx

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '@testing-library/react'
+
+import { SidebarCollapseButton } from './sidebar'
+
+describe('SidebarCollapseButton', () => {
+  it('renders the shared edge-docked collapse control', () => {
+    const { container } = render(<SidebarCollapseButton edge />)
+    const button = container.querySelector('button')
+
+    expect(button).toBeTruthy()
+    expect(button?.getAttribute('aria-label')).toBe('Collapse sidebar')
+    expect(button?.getAttribute('aria-expanded')).toBe('true')
+    expect(button?.getAttribute('title')).toBe('Collapse sidebar')
+    expect(button?.classList.contains('sidebar__collapse-btn')).toBe(true)
+    expect(button?.classList.contains('sidebar__collapse-btn--edge')).toBe(true)
+    expect(button?.querySelector('path')?.getAttribute('d')).toBe('m15 18-6-6 6-6')
+  })
+
+  it('switches affordance metadata for collapsed sidebars', () => {
+    const { container } = render(<SidebarCollapseButton collapsed edge visible />)
+    const button = container.querySelector('button')
+
+    expect(button?.getAttribute('aria-label')).toBe('Expand sidebar')
+    expect(button?.getAttribute('aria-expanded')).toBe('false')
+    expect(button?.getAttribute('data-collapsed')).toBe('true')
+    expect(button?.getAttribute('data-visible')).toBe('true')
+    expect(button?.querySelector('path')?.getAttribute('d')).toBe('m9 18 6-6-6-6')
+  })
+})

package/src/react/sidebar.tsx

@@ -35,6 +35,14 @@ export interface SidebarProps extends Omit<
 
 export type { SidebarNavItem, SidebarSection, SidebarUser, SidebarFooterAction }
 
+export interface SidebarCollapseButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  collapsed?: boolean
+  edge?: boolean
+  visible?: boolean
+  label?: string
+}
+
 function Sidebar({ activeItemId, onNavigate, onCollapse, className, ...config }: SidebarProps) {
   const containerRef = React.useRef<HTMLDivElement>(null)
   const sidebarRef = React.useRef<SidebarComponent | null>(null)
@@ -73,4 +81,47 @@ function Sidebar({ activeItemId, onNavigate, onCollapse, className, ...config }:
 
 Sidebar.displayName = 'Sidebar'
 
-export { Sidebar }
+function SidebarCollapseButton({
+  collapsed = false,
+  edge = false,
+  visible = false,
+  label,
+  className,
+  type = 'button',
+  children,
+  ...props
+}: SidebarCollapseButtonProps) {
+  const resolvedLabel = label ?? (collapsed ? 'Expand sidebar' : 'Collapse sidebar')
+  const path = collapsed ? 'm9 18 6-6-6-6' : 'm15 18-6-6 6-6'
+
+  return (
+    <button
+      type={type}
+      className={cn('sidebar__collapse-btn', edge && 'sidebar__collapse-btn--edge', className)}
+      aria-label={resolvedLabel}
+      aria-expanded={!collapsed}
+      title={resolvedLabel}
+      data-collapsed={collapsed ? 'true' : 'false'}
+      data-visible={visible ? 'true' : undefined}
+      {...props}
+    >
+      {children ?? (
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d={path} />
+        </svg>
+      )}
+    </button>
+  )
+}
+
+SidebarCollapseButton.displayName = 'SidebarCollapseButton'
+
+export { Sidebar, SidebarCollapseButton }

package/src/sidebar/component.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { SidebarComponent } from './component'
+
+function createContainer(): HTMLElement {
+  const container = document.createElement('div')
+  container.style.height = '320px'
+  document.body.appendChild(container)
+  return container
+}
+
+describe('SidebarComponent', () => {
+  it('renders brand header, scroll body, and edge collapse control when configured', () => {
+    const container = createContainer()
+    const sidebar = new SidebarComponent({
+      container,
+      variant: 'product',
+      brand: { label: 'CounterMeasure' },
+      collapsible: true,
+      collapseButtonVisible: true,
+      sections: [
+        {
+          id: 'main',
+          label: 'Main',
+          items: [
+            { id: 'dashboard', label: 'Dashboard', icon: 'dashboard', badge: 3, badgeTone: 'amber' },
+          ],
+        },
+      ],
+    })
+
+    expect(container.querySelector('.sidebar')?.classList.contains('sidebar--product')).toBe(true)
+    expect(container.querySelector('.sidebar')?.getAttribute('data-sidebar')).toBe('product')
+    expect(container.querySelector('.sidebar__header .cmm-brand-lockup')).toBeTruthy()
+    expect(container.querySelector('.sidebar__body .sidebar__section')).toBeTruthy()
+    expect(container.querySelector('.sidebar__badge--amber')?.textContent).toBe('3')
+    expect(container.querySelector('.sidebar__item')?.getAttribute('data-badge-visible')).toBe('true')
+    expect(container.querySelector('.sidebar__item')?.getAttribute('data-badge-tone')).toBe('amber')
+
+    const collapseButton = container.querySelector<HTMLButtonElement>('.sidebar__collapse-btn--edge')
+    expect(collapseButton).toBeTruthy()
+    expect(collapseButton?.getAttribute('aria-label')).toBe('Collapse sidebar')
+    expect(collapseButton?.getAttribute('aria-expanded')).toBe('true')
+    expect(collapseButton?.getAttribute('data-visible')).toBe('true')
+
+    sidebar.destroy()
+    container.remove()
+  })
+
+  it('updates collapse control state and emits collapse callbacks', () => {
+    const container = createContainer()
+    const onCollapse = vi.fn()
+    const sidebar = new SidebarComponent({
+      container,
+      collapsible: true,
+      sections: [
+        {
+          id: 'main',
+          items: [{ id: 'dashboard', label: 'Dashboard' }],
+        },
+      ],
+      onCollapse,
+    })
+
+    const collapseButton = container.querySelector<HTMLButtonElement>('.sidebar__collapse-btn--edge')
+    collapseButton?.click()
+
+    expect(container.querySelector('.sidebar')?.classList.contains('sidebar--collapsed')).toBe(true)
+    expect(collapseButton?.getAttribute('aria-label')).toBe('Expand sidebar')
+    expect(collapseButton?.getAttribute('aria-expanded')).toBe('false')
+    expect(onCollapse).toHaveBeenCalledWith(true)
+
+    sidebar.expand()
+    expect(collapseButton?.getAttribute('aria-label')).toBe('Collapse sidebar')
+    expect(collapseButton?.getAttribute('aria-expanded')).toBe('true')
+    expect(onCollapse).toHaveBeenLastCalledWith(false)
+
+    sidebar.destroy()
+    container.remove()
+  })
+
+  it('updates compact badge-dot visibility state when badge counts change', () => {
+    const container = createContainer()
+    const sidebar = new SidebarComponent({
+      container,
+      sections: [
+        {
+          id: 'main',
+          items: [{ id: 'alerts', label: 'Alerts', badge: 5, badgeTone: 'rose' }],
+        },
+      ],
+    })
+
+    const item = container.querySelector<HTMLElement>('[data-item-id="alerts"]')
+    expect(item?.getAttribute('data-badge-visible')).toBe('true')
+    expect(item?.getAttribute('data-badge-tone')).toBe('rose')
+
+    sidebar.updateBadge('alerts', 0)
+    expect(item?.getAttribute('data-badge-visible')).toBe('false')
+    expect(container.querySelector('[data-badge="alerts"]')?.textContent).toBe('')
+
+    sidebar.updateBadge('alerts', 9)
+    expect(item?.getAttribute('data-badge-visible')).toBe('true')
+    expect(container.querySelector('[data-badge="alerts"]')?.textContent).toBe('9')
+
+    sidebar.destroy()
+    container.remove()
+  })
+})

package/src/sidebar/component.ts

@@ -20,8 +20,14 @@
 
 import { getIconSvgInner, type IconSet } from '../icons/index'
 import { resolveContainer } from '../primitives/utils'
+import { createBrandLockupElement } from '../components/brand'
 import { type SidebarComponentConfig } from './types'
 
+function toSidebarVariantClassName(variant: string): string {
+  const normalized = variant.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
+  return `sidebar--${normalized || 'app'}`
+}
+
 /** Create an SVG element populated with icon content from the registry. */
 function createIconSvg(iconSet: IconSet, name: string): SVGElement {
   const svgNs = 'http://www.w3.org/2000/svg'
@@ -52,6 +58,7 @@ export class SidebarComponent {
   private readonly aside: HTMLElement
   private readonly config: SidebarComponentConfig
   private readonly iconSet: IconSet
+  private collapseButton: HTMLButtonElement | null = null
 
   constructor(config: SidebarComponentConfig) {
     this.config = config
@@ -59,14 +66,24 @@ export class SidebarComponent {
     this.iconSet = config.iconSet ?? 'lucide'
 
     this.aside = document.createElement('aside')
-    this.aside.classList.add('sidebar')
-    this.aside.setAttribute('data-sidebar', config.variant ?? 'app')
+    const variant = config.variant ?? 'app'
+    this.aside.classList.add('sidebar', toSidebarVariantClassName(variant))
+    this.aside.setAttribute('data-sidebar', variant)
 
     this.render()
     this.container.appendChild(this.aside)
   }
 
   private render(): void {
+    if (this.config.collapsible === true) {
+      this.renderCollapseButton()
+    }
+
+    this.renderHeader()
+
+    const body = document.createElement('div')
+    body.classList.add('sidebar__body')
+
     for (const section of this.config.sections) {
       const sectionEl = document.createElement('div')
       sectionEl.classList.add('sidebar__section')
@@ -82,6 +99,7 @@ export class SidebarComponent {
         const link = document.createElement('a')
         link.classList.add('sidebar__item')
         link.setAttribute('data-item-id', item.id)
+        link.setAttribute('title', item.label)
 
         if (item.icon) {
           const icon = createIconSvg(this.iconSet, item.icon)
@@ -95,7 +113,10 @@ export class SidebarComponent {
 
         if (item.badge !== undefined && item.badge > 0) {
           const badge = document.createElement('span')
-          badge.classList.add('sidebar__badge')
+          const tone = item.badgeTone ?? 'primary'
+          link.setAttribute('data-badge-visible', 'true')
+          link.setAttribute('data-badge-tone', tone)
+          badge.classList.add('sidebar__badge', `sidebar__badge--${tone}`)
           badge.setAttribute('data-badge', item.id)
           badge.textContent = String(item.badge)
           link.appendChild(badge)
@@ -113,12 +134,94 @@ export class SidebarComponent {
         sectionEl.appendChild(link)
       }
 
-      this.aside.appendChild(sectionEl)
+      body.appendChild(sectionEl)
     }
 
+    this.aside.appendChild(body)
     this.renderFooter()
   }
 
+  private renderHeader(): void {
+    const brand = this.config.brand
+    if (brand === undefined) {
+      return
+    }
+
+    const header = document.createElement('div')
+    header.classList.add('sidebar__header')
+
+    const row = document.createElement('div')
+    row.classList.add('sidebar__header-row')
+
+    const brandEl =
+      brand.href !== undefined
+        ? document.createElement('a')
+        : brand.onClick !== undefined
+          ? document.createElement('button')
+          : document.createElement('span')
+
+    brandEl.classList.add('sidebar__brand')
+
+    if (brandEl instanceof HTMLAnchorElement) {
+      brandEl.href = brand.href ?? '#'
+      brandEl.setAttribute('aria-label', brand.label ?? 'CounterMeasure')
+    }
+
+    if (brandEl instanceof HTMLButtonElement) {
+      brandEl.type = 'button'
+      brandEl.setAttribute('aria-label', brand.label ?? 'CounterMeasure')
+    }
+
+    if (brand.onClick !== undefined) {
+      brandEl.addEventListener('click', brand.onClick)
+    }
+
+    brandEl.appendChild(
+      createBrandLockupElement({
+        label: brand.label ?? 'CounterMeasure',
+        markSize: brand.markSize ?? 22,
+        showWordmark: brand.showWordmark ?? true,
+        decorative: brand.decorative ?? false,
+      })
+    )
+
+    row.appendChild(brandEl)
+    header.appendChild(row)
+    this.aside.appendChild(header)
+  }
+
+  private renderCollapseButton(): void {
+    const button = document.createElement('button')
+    button.type = 'button'
+    button.classList.add('sidebar__collapse-btn', 'sidebar__collapse-btn--edge')
+    button.setAttribute('data-sidebar-toggle', '')
+
+    if (this.config.collapseButtonVisible === true) {
+      button.setAttribute('data-visible', 'true')
+    }
+
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    svg.setAttribute('aria-hidden', 'true')
+    svg.setAttribute('viewBox', '0 0 24 24')
+    svg.setAttribute('fill', 'none')
+    svg.setAttribute('stroke', 'currentColor')
+    svg.setAttribute('stroke-width', '2')
+    svg.setAttribute('stroke-linecap', 'round')
+    svg.setAttribute('stroke-linejoin', 'round')
+
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+    svg.appendChild(path)
+    button.appendChild(svg)
+
+    button.addEventListener('click', () => {
+      this.toggleCollapse()
+    })
+
+    this.collapseButton = button
+    this.updateCollapseButton()
+    this.aside.appendChild(button)
+  }
+
   private renderFooter(): void {
     const hasUser = this.config.user !== undefined
     const hasActions =
@@ -195,12 +298,15 @@ export class SidebarComponent {
     const badge = this.aside.querySelector<HTMLElement>(`[data-badge="${itemId}"]`)
     if (badge) {
       badge.textContent = count > 0 ? String(count) : ''
+      const item = badge.closest<HTMLElement>('.sidebar__item')
+      item?.setAttribute('data-badge-visible', String(count > 0))
     }
   }
 
   /** Toggle the sidebar between collapsed and expanded states. */
   toggleCollapse(): void {
     const isCollapsed = this.aside.classList.toggle('sidebar--collapsed')
+    this.updateCollapseButton()
     if (this.config.onCollapse) {
       this.config.onCollapse(isCollapsed)
     }
@@ -208,16 +314,42 @@ export class SidebarComponent {
 
   /** Collapse the sidebar. */
   collapse(): void {
+    const wasCollapsed = this.aside.classList.contains('sidebar--collapsed')
     this.aside.classList.add('sidebar--collapsed')
+    this.updateCollapseButton()
+    if (!wasCollapsed && this.config.onCollapse) {
+      this.config.onCollapse(true)
+    }
   }
 
   /** Expand the sidebar. */
   expand(): void {
+    const wasCollapsed = this.aside.classList.contains('sidebar--collapsed')
     this.aside.classList.remove('sidebar--collapsed')
+    this.updateCollapseButton()
+    if (wasCollapsed && this.config.onCollapse) {
+      this.config.onCollapse(false)
+    }
   }
 
   /** Remove the sidebar from the DOM. */
   destroy(): void {
     this.aside.remove()
   }
+
+  private updateCollapseButton(): void {
+    if (this.collapseButton === null) {
+      return
+    }
+
+    const isCollapsed = this.aside.classList.contains('sidebar--collapsed')
+    const label = isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'
+    this.collapseButton.setAttribute('aria-label', label)
+    this.collapseButton.setAttribute('aria-expanded', String(!isCollapsed))
+    this.collapseButton.setAttribute('title', label)
+    this.collapseButton.setAttribute('data-collapsed', String(isCollapsed))
+    this.collapseButton
+      .querySelector('path')
+      ?.setAttribute('d', isCollapsed ? 'm9 18 6-6-6-6' : 'm15 18-6-6 6-6')
+  }
 }

package/src/sidebar/index.ts

@@ -15,6 +15,7 @@
 export { SidebarComponent } from './component'
 export type {
   SidebarComponentConfig,
+  SidebarBrandConfig,
   SidebarNavItem,
   SidebarSection,
   SidebarUser,