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

package/src/sidebar/component.ts

@@ -18,17 +18,23 @@
  *   sidebar.setActive('dashboard')
  */
 
+import { createBrandLockupElement } from '../components/brand'
 import { getIconSvgInner, type IconSet } from '../icons/index'
 import { resolveContainer } from '../primitives/utils'
-import { type SidebarComponentConfig } from './types'
+import { type SidebarComponentConfig, type SidebarSection } 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'
   const svg = document.createElementNS(svgNs, 'svg')
   svg.setAttribute('xmlns', svgNs)
-  svg.setAttribute('width', '18')
-  svg.setAttribute('height', '18')
+  svg.setAttribute('width', '16')
+  svg.setAttribute('height', '16')
   svg.setAttribute('viewBox', '0 0 24 24')
   svg.setAttribute('fill', 'none')
   svg.setAttribute('stroke', 'currentColor')
@@ -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,64 +66,217 @@ 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)
+    if (config.collapsed === true) {
+      this.aside.classList.add('sidebar--collapsed')
+    }
 
     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')
-
-      if (section.label) {
-        const labelEl = document.createElement('div')
-        labelEl.classList.add('sidebar__section-label')
-        labelEl.textContent = section.label
-        sectionEl.appendChild(labelEl)
+      body.appendChild(this.buildSection(section))
+    }
+
+    this.aside.appendChild(body)
+    this.renderFooter()
+  }
+
+  private buildSection(section: SidebarSection): HTMLElement {
+    const sectionEl = document.createElement('div')
+    sectionEl.classList.add('sidebar__section')
+    sectionEl.setAttribute('data-section-id', section.id)
+
+    const collapsible = section.collapsible === true
+    const expanded = section.defaultExpanded !== false
+
+    if (collapsible && section.label) {
+      sectionEl.classList.add('sidebar__section--collapsible')
+      if (expanded) sectionEl.classList.add('sidebar__section--expanded')
+
+      const header = document.createElement('button')
+      header.type = 'button'
+      header.classList.add('sidebar__group-header')
+      header.setAttribute('aria-expanded', String(expanded))
+      header.setAttribute('aria-controls', `sidebar-group-${section.id}`)
+
+      if (section.icon) {
+        header.appendChild(createIconSvg(this.iconSet, section.icon))
       }
 
-      for (const item of section.items) {
-        const link = document.createElement('a')
-        link.classList.add('sidebar__item')
-        link.setAttribute('data-item-id', item.id)
+      const labelSpan = document.createElement('span')
+      labelSpan.classList.add('sidebar__group-label')
+      labelSpan.textContent = section.label
+      header.appendChild(labelSpan)
+
+      const chevron = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+      chevron.setAttribute('class', 'sidebar__group-chevron')
+      chevron.setAttribute('viewBox', '0 0 24 24')
+      chevron.setAttribute('width', '14')
+      chevron.setAttribute('height', '14')
+      chevron.setAttribute('fill', 'none')
+      chevron.setAttribute('stroke', 'currentColor')
+      chevron.setAttribute('stroke-width', '2')
+      chevron.setAttribute('stroke-linecap', 'round')
+      chevron.setAttribute('stroke-linejoin', 'round')
+      chevron.setAttribute('aria-hidden', 'true')
+      const chevronPath = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+      chevronPath.setAttribute('d', 'm6 9 6 6 6-6')
+      chevron.appendChild(chevronPath)
+      header.appendChild(chevron)
+
+      header.addEventListener('click', () => {
+        const nowExpanded = sectionEl.classList.toggle('sidebar__section--expanded')
+        header.setAttribute('aria-expanded', String(nowExpanded))
+      })
+
+      sectionEl.appendChild(header)
+    } else if (section.label) {
+      const labelEl = document.createElement('div')
+      labelEl.classList.add('sidebar__section-label')
+      labelEl.textContent = section.label
+      sectionEl.appendChild(labelEl)
+    }
 
-        if (item.icon) {
-          const icon = createIconSvg(this.iconSet, item.icon)
-          link.appendChild(icon)
-        }
+    const itemsWrap = document.createElement('div')
+    itemsWrap.classList.add('sidebar__items')
+    itemsWrap.id = `sidebar-group-${section.id}`
 
-        const label = document.createElement('span')
-        label.classList.add('sidebar__item-label')
-        label.textContent = item.label
-        link.appendChild(label)
-
-        if (item.badge !== undefined && item.badge > 0) {
-          const badge = document.createElement('span')
-          badge.classList.add('sidebar__badge')
-          badge.setAttribute('data-badge', item.id)
-          badge.textContent = String(item.badge)
-          link.appendChild(badge)
-        }
+    for (const item of section.items) {
+      const link = document.createElement('a')
+      link.classList.add('sidebar__item')
+      link.setAttribute('data-item-id', item.id)
+      link.setAttribute('title', item.label)
 
-        link.addEventListener('click', () => {
-          if (this.config.onNavigate) {
-            this.config.onNavigate(item)
-          }
-          if (item.onClick) {
-            item.onClick()
-          }
-        })
+      if (item.icon) {
+        const icon = createIconSvg(this.iconSet, item.icon)
+        link.appendChild(icon)
+      }
 
-        sectionEl.appendChild(link)
+      const label = document.createElement('span')
+      label.classList.add('sidebar__item-label')
+      label.textContent = item.label
+      link.appendChild(label)
+
+      if (item.badge !== undefined && item.badge > 0) {
+        const badge = document.createElement('span')
+        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)
       }
 
-      this.aside.appendChild(sectionEl)
+      link.addEventListener('click', () => {
+        if (this.config.onNavigate) {
+          this.config.onNavigate(item)
+        }
+        if (item.onClick) {
+          item.onClick()
+        }
+      })
+
+      itemsWrap.appendChild(link)
     }
 
-    this.renderFooter()
+    sectionEl.appendChild(itemsWrap)
+    return sectionEl
+  }
+
+  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 {
@@ -195,12 +355,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 +371,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,

package/src/sidebar/types.ts

@@ -3,6 +3,7 @@
  * @countermeasure/web-components/sidebar/component
  */
 
+import { type BrandSize } from '../components/brand'
 import { type IconSet } from '../icons/index'
 
 export interface SidebarNavItem {
@@ -14,6 +15,11 @@ export interface SidebarNavItem {
   icon?: string
   /** Numeric badge displayed at the trailing edge of the row. */
   badge?: number
+  /**
+   * Visual tone for the badge.
+   * @default 'primary'
+   */
+  badgeTone?: 'default' | 'primary' | 'amber' | 'cyan' | 'rose' | 'warning' | 'error'
   /** Called when the item is activated. */
   onClick?: () => void
 }
@@ -25,6 +31,20 @@ export interface SidebarSection {
   label?: string
   /** Nav items rendered within this section. */
   items: SidebarNavItem[]
+  /**
+   * Render the section as a collapsible accordion group with a clickable
+   * header instead of a flat label. When set, `label` is rendered as the
+   * toggle and items collapse/expand on click.
+   * @default false
+   */
+  collapsible?: boolean
+  /**
+   * Initial expanded state when `collapsible` is true.
+   * @default true
+   */
+  defaultExpanded?: boolean
+  /** Optional icon for the collapsible group header. */
+  icon?: string
 }
 
 export interface SidebarUser {
@@ -48,6 +68,27 @@ export interface SidebarFooterAction {
   onClick?: () => void
 }
 
+export interface SidebarBrandConfig {
+  /** Accessible brand label. */
+  label?: string
+  /** Brand mark size. */
+  markSize?: BrandSize | number
+  /**
+   * Show the COUNTERMEASURE wordmark next to the diamond.
+   * @default true
+   */
+  showWordmark?: boolean
+  /** Optional link target for the brand surface. */
+  href?: string
+  /** Called when the brand surface is activated. */
+  onClick?: () => void
+  /**
+   * Render the brand as decorative.
+   * @default false
+   */
+  decorative?: boolean
+}
+
 export interface SidebarComponentConfig {
   /** Container element (or selector) the sidebar is mounted into. */
   container: HTMLElement | string
@@ -55,6 +96,19 @@ export interface SidebarComponentConfig {
   variant?: string
   /** Sections rendered top-to-bottom. */
   sections: SidebarSection[]
+  /** Optional brand header rendered above the navigation. */
+  brand?: SidebarBrandConfig
+  /**
+   * Render the shared edge-docked collapse control.
+   * @default false
+   */
+  collapsible?: boolean
+  /**
+   * Keep the collapse control visible instead of hover/focus-only.
+   * Useful for docs and constrained previews.
+   * @default false
+   */
+  collapseButtonVisible?: boolean
   /** Optional user surface rendered in the footer. */
   user?: SidebarUser
   /** Footer action buttons rendered next to the user surface. */
@@ -64,6 +118,12 @@ export interface SidebarComponentConfig {
    * @default 'lucide'
    */
   iconSet?: IconSet
+  /**
+   * Initial collapsed state. When `collapsible` is true the collapse button
+   * starts pointing the matching direction.
+   * @default false
+   */
+  collapsed?: boolean
   /** Called when a nav item is activated. */
   onNavigate?: (item: SidebarNavItem) => void
   /** Called when the sidebar's collapsed state changes. */

package/src/styles/components/brand.css

@@ -95,6 +95,36 @@
   text-transform: uppercase;
 }
 
+.cmm-brand-lockup {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  max-width: 100%;
+  color: var(--color-text, hsl(var(--foreground)));
+  vertical-align: middle;
+}
+
+.cmm-brand-lockup__wordmark {
+  display: inline-flex;
+  align-items: baseline;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  font-family: var(--font-display, var(--font-sans, Outfit, sans-serif));
+  font-size: 0.8125rem;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0.08em;
+}
+
+.cmm-brand-lockup__counter {
+  color: currentColor;
+}
+
+.cmm-brand-lockup__measure {
+  color: var(--color-orange-500, hsl(var(--primary)));
+}
+
 .cmm-connector-logo {
   --cmm-connector-logo-bg: #475569;