@countermeasure-platform/web-components 1.3.3-dev.33.1 → 1.3.4-dev.35.1

package/src/sidebar/enhance.ts

@@ -24,6 +24,12 @@ export interface EnhanceOptions {
   skeletonTimeoutMs?: number
   /** CSS class for collapsed state (default: 'sidebar--collapsed') */
   collapsedClass?: string
+  /** Variants that should opt into product sidebar visuals. */
+  productVariants?: string[]
+  /** Derive the active nav item from window.location on enhancement. */
+  activeFromLocation?: boolean
+  /** Close an open mobile sidebar after clicking a route link. */
+  closeOnNavigate?: boolean
 }
 
 const DEFAULT_OPTIONS: Required<EnhanceOptions> = {
@@ -31,10 +37,36 @@ const DEFAULT_OPTIONS: Required<EnhanceOptions> = {
   mobileBreakpoint: 900,
   skeletonTimeoutMs: 3000,
   collapsedClass: 'sidebar--collapsed',
+  productVariants: ['app', 'cm', 'threat-library'],
+  activeFromLocation: true,
+  closeOnNavigate: true,
 }
 
 const ENHANCED_ATTR = 'data-sidebar-enhanced'
 
+function normalizePathname(pathname: string): string {
+  if (pathname === '/') {
+    return pathname
+  }
+
+  return pathname.replace(/\/+$/, '')
+}
+
+function routeMatches(pathname: string, href: string): boolean {
+  try {
+    const hrefPathname = normalizePathname(new URL(href, window.location.href).pathname)
+    const currentPathname = normalizePathname(pathname)
+
+    if (hrefPathname === '/') {
+      return currentPathname === '/'
+    }
+
+    return currentPathname === hrefPathname || currentPathname.startsWith(`${hrefPathname}/`)
+  } catch {
+    return false
+  }
+}
+
 export class Sidebar {
   readonly element: HTMLElement
   private readonly options: Required<EnhanceOptions>
@@ -50,11 +82,75 @@ export class Sidebar {
   }
 
   private init(): void {
+    this.setupProductChrome()
+    this.setupRouteState()
     this.setupCollapse()
     this.setupKeyboardNav()
     this.setupSkeletonTimeout()
   }
 
+  private setupProductChrome(): void {
+    const shouldUseProductStyle =
+      this.element.hasAttribute('data-sidebar-product') ||
+      this.element.classList.contains('sidebar--cm') ||
+      this.options.productVariants.includes(this.variant)
+
+    if (shouldUseProductStyle) {
+      this.element.classList.add('sidebar--product')
+    }
+
+    this.element
+      .querySelectorAll<HTMLElement>('.sidebar__item, .sidebar__nav-link')
+      .forEach(item => {
+        if (!item.hasAttribute('data-nav-item')) {
+          item.setAttribute('data-nav-item', '')
+        }
+      })
+  }
+
+  private setupRouteState(): void {
+    if (this.options.activeFromLocation !== true || typeof window === 'undefined') {
+      return
+    }
+
+    const items = Array.from(
+      this.element.querySelectorAll<HTMLElement>(
+        'a.sidebar__item[href], a.sidebar__nav-link[href], a[data-nav-item][href]'
+      )
+    )
+
+    let active: HTMLElement | null = null
+    let activeLength = -1
+
+    for (const item of items) {
+      const href = item.getAttribute('href')
+      if (href === null || !routeMatches(window.location.pathname, href)) {
+        continue
+      }
+
+      try {
+        const pathname = normalizePathname(new URL(href, window.location.href).pathname)
+        if (pathname.length > activeLength) {
+          active = item
+          activeLength = pathname.length
+        }
+      } catch {
+        // Ignore malformed href values; they cannot represent the current route.
+      }
+    }
+
+    if (active === null) {
+      return
+    }
+
+    this.element.querySelectorAll<HTMLElement>('.sidebar__item--active').forEach(item => {
+      item.classList.remove('sidebar__item--active')
+      item.removeAttribute('aria-current')
+    })
+    active.classList.add('sidebar__item--active')
+    active.setAttribute('aria-current', 'page')
+  }
+
   /**
    * Collapse/expand toggle with localStorage persistence.
    */
@@ -99,6 +195,28 @@ export class Sidebar {
       })
     })
 
+    if (this.options.closeOnNavigate === true) {
+      const navigateHandler = (event: MouseEvent): void => {
+        const target = event.target
+        const navItem =
+          target instanceof Element
+            ? target.closest<HTMLElement>(
+                'a.sidebar__item[href], a.sidebar__nav-link[href], a[data-nav-item][href]'
+              )
+            : null
+        if (navItem !== null && this.element.getAttribute('data-open') === 'true') {
+          this.element.setAttribute('data-open', 'false')
+          if (backdrop) {
+            backdrop.setAttribute('data-visible', 'false')
+          }
+        }
+      }
+      this.element.addEventListener('click', navigateHandler)
+      this.cleanupFns.push(() => {
+        this.element.removeEventListener('click', navigateHandler)
+      })
+    }
+
     // Backdrop click closes sidebar
     if (backdrop) {
       const handler = (): void => {

package/src/sidebar/index.ts

@@ -26,6 +26,9 @@ export interface SidebarConfig {
   storageKey?: string
   mobileBreakpoint?: number
   collapsedClass?: string
+  productVariants?: string[]
+  activeFromLocation?: boolean
+  closeOnNavigate?: boolean
 }
 
 export interface LegacySidebarConfig {
@@ -40,9 +43,13 @@ const DEFAULT_CONFIG: Required<SidebarConfig> = {
   storageKey: 'sidebar-collapsed',
   mobileBreakpoint: 900,
   collapsedClass: 'sidebar--collapsed',
+  productVariants: ['app', 'cm', 'threat-library'],
+  activeFromLocation: true,
+  closeOnNavigate: true,
 }
 
 let currentConfig: Required<SidebarConfig> = { ...DEFAULT_CONFIG }
+const INITIALIZED_ATTR = 'data-sidebar-initialized'
 
 /**
  * Configure sidebar settings.
@@ -103,6 +110,119 @@ interface SidebarHandlerParams {
   key: string
 }
 
+function normalizePathname(pathname: string): string {
+  if (pathname === '/') {
+    return pathname
+  }
+
+  return pathname.replace(/\/+$/, '')
+}
+
+function routeMatches(pathname: string, href: string): boolean {
+  try {
+    const hrefPathname = normalizePathname(new URL(href, window.location.href).pathname)
+    const currentPathname = normalizePathname(pathname)
+
+    if (hrefPathname === '/') {
+      return currentPathname === '/'
+    }
+
+    return currentPathname === hrefPathname || currentPathname.startsWith(`${hrefPathname}/`)
+  } catch {
+    return false
+  }
+}
+
+function resolveActiveRouteItem(sidebar: HTMLElement): HTMLElement | null {
+  const items = Array.from(
+    sidebar.querySelectorAll<HTMLElement>(
+      'a.sidebar__item[href], a.sidebar__nav-link[href], a[data-nav-item][href]'
+    )
+  )
+
+  let active: HTMLElement | null = null
+  let activeLength = -1
+
+  for (const item of items) {
+    const href = item.getAttribute('href')
+    if (href === null || !routeMatches(window.location.pathname, href)) {
+      continue
+    }
+
+    try {
+      const pathname = normalizePathname(new URL(href, window.location.href).pathname)
+      if (pathname.length > activeLength) {
+        active = item
+        activeLength = pathname.length
+      }
+    } catch {
+      // Ignore malformed href values; they cannot represent the current route.
+    }
+  }
+
+  return active
+}
+
+function syncRouteActiveState(sidebar: HTMLElement): void {
+  if (currentConfig.activeFromLocation !== true || typeof window === 'undefined') {
+    return
+  }
+
+  const active = resolveActiveRouteItem(sidebar)
+  if (active === null) {
+    return
+  }
+
+  sidebar.querySelectorAll<HTMLElement>('.sidebar__item--active').forEach(item => {
+    item.classList.remove('sidebar__item--active')
+    item.removeAttribute('aria-current')
+  })
+  active.classList.add('sidebar__item--active')
+  active.setAttribute('aria-current', 'page')
+}
+
+function prepareUnifiedSidebar(sidebar: HTMLElement, variant: string): void {
+  const shouldUseProductStyle =
+    sidebar.hasAttribute('data-sidebar-product') ||
+    sidebar.classList.contains('sidebar--cm') ||
+    currentConfig.productVariants.includes(variant)
+
+  if (shouldUseProductStyle) {
+    sidebar.classList.add('sidebar--product')
+  }
+
+  sidebar.querySelectorAll<HTMLElement>('.sidebar__item, .sidebar__nav-link').forEach(item => {
+    if (!item.hasAttribute('data-nav-item')) {
+      item.setAttribute('data-nav-item', '')
+    }
+  })
+
+  syncRouteActiveState(sidebar)
+}
+
+function setupKeyboardNavigation(sidebar: HTMLElement): void {
+  sidebar.addEventListener('keydown', event => {
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
+
+    const items = Array.from(
+      sidebar.querySelectorAll<HTMLElement>('[data-nav-item]:not([aria-disabled="true"])')
+    ).filter(item => !item.hidden && item.offsetParent !== null)
+
+    if (items.length === 0) return
+
+    const currentIndex = items.indexOf(document.activeElement as HTMLElement)
+    if (currentIndex === -1) return
+
+    event.preventDefault()
+    const nextIndex =
+      event.key === 'ArrowDown'
+        ? (currentIndex + 1) % items.length
+        : (currentIndex - 1 + items.length) % items.length
+
+    items[nextIndex]?.focus()
+  })
+}
+
 /**
  * Attach all sidebar event handlers (shared between unified and legacy init).
  */
@@ -141,6 +261,21 @@ function attachSidebarHandlers({
     })
   }
 
+  if (currentConfig.closeOnNavigate === true) {
+    sidebar.addEventListener('click', event => {
+      const target = event.target
+      const navItem =
+        target instanceof Element
+          ? target.closest<HTMLElement>(
+              'a.sidebar__item[href], a.sidebar__nav-link[href], a[data-nav-item][href]'
+            )
+          : null
+      if (navItem !== null && sidebar.getAttribute('data-open') === 'true') {
+        closeSidebar(sidebar, backdrop)
+      }
+    })
+  }
+
   // Handle window resize
   window.addEventListener('resize', () => {
     if (isMobile()) {
@@ -154,6 +289,9 @@ function attachSidebarHandlers({
       closeSidebar(sidebar, backdrop)
     }
   })
+
+  setupKeyboardNavigation(sidebar)
+  sidebar.setAttribute(INITIALIZED_ATTR, 'true')
 }
 
 /**
@@ -165,6 +303,12 @@ function initUnifiedSidebar(sidebar: HTMLElement): void {
     return
   }
 
+  prepareUnifiedSidebar(sidebar, variant)
+
+  if (sidebar.getAttribute(INITIALIZED_ATTR) === 'true') {
+    return
+  }
+
   attachSidebarHandlers({
     sidebar,
     toggle: sidebar.querySelector<HTMLButtonElement>('[data-sidebar-toggle]'),

package/src/sidebar/types.ts

@@ -6,22 +6,84 @@
 import { type BrandSize } from '../components/brand'
 import { type IconSet } from '../icons/index'
 
+export type SidebarBadgeTone =
+  | 'default'
+  | 'primary'
+  | 'amber'
+  | 'cyan'
+  | 'rose'
+  | 'warning'
+  | 'error'
+
+export type SidebarActiveMatcher =
+  | 'exact'
+  | 'prefix'
+  | string
+  | RegExp
+  | ((pathname: string, item: SidebarNavItem) => boolean)
+
+export interface SidebarBadgeConfig {
+  /** Visible badge text. Use short labels such as "9", "99+", or "Soon". */
+  label: string
+  /** Optional accessible title used in collapsed tooltips and native titles. */
+  title?: string
+  /**
+   * Visual tone for the badge.
+   * @default 'primary'
+   */
+  tone?: SidebarBadgeTone
+  /**
+   * Keep the collapsed rail dot visible even when label is empty.
+   * @default false
+   */
+  dot?: boolean
+}
+
 export interface SidebarNavItem {
   /** Stable identifier used for selection and badge updates. */
   id: string
   /** Visible label rendered alongside the icon. */
   label: string
+  /** Optional navigation target. When omitted, the item renders as a button. */
+  href?: string
+  /** Optional target for link navigation. */
+  target?: string
+  /** Optional rel for external links. */
+  rel?: string
+  /** Accessible label override. */
+  ariaLabel?: string
   /** Icon name resolved through the active icon set. */
   icon?: string
-  /** Numeric badge displayed at the trailing edge of the row. */
-  badge?: number
+  /** Numeric or rich badge displayed at the trailing edge of the row. */
+  badge?: number | SidebarBadgeConfig
   /**
    * Visual tone for the badge.
    * @default 'primary'
    */
-  badgeTone?: 'default' | 'primary' | 'amber' | 'cyan' | 'rose' | 'warning' | 'error'
+  badgeTone?: SidebarBadgeTone
+  /** Static pill label such as "Admin" or "Soon". */
+  tag?: string
+  /** Tooltip/title shown when the sidebar is collapsed. */
+  tooltip?: string
+  /**
+   * Whether this item is the current page. If omitted, active state can be
+   * derived from `activeItemId`, `href`, or `activeMatch`.
+   */
+  active?: boolean
+  /** Route matching rule used against the current configured/browser pathname. */
+  activeMatch?: SidebarActiveMatcher
+  /**
+   * Treat href matching as exact instead of prefix matching.
+   * @default false
+   */
+  end?: boolean
+  /**
+   * Render the item as unavailable while preserving its position.
+   * @default false
+   */
+  disabled?: boolean
   /** Called when the item is activated. */
-  onClick?: () => void
+  onClick?: (event: MouseEvent) => void
 }
 
 export interface SidebarSection {
@@ -50,6 +112,18 @@ export interface SidebarSection {
 export interface SidebarUser {
   /** Display name shown in the footer. */
   name: string
+  /** Secondary user metadata such as email or role. */
+  detail?: string
+  /** Avatar image URL. */
+  avatarUrl?: string
+  /** Initials fallback when no avatar URL is provided. */
+  initials?: string
+  /** Presence dot tone shown on the avatar. */
+  presence?: 'online' | 'away' | 'busy' | 'dnd' | 'offline'
+  /** Accessible label for the user trigger. */
+  label?: string
+  /** Called when the user surface is activated. */
+  onClick?: () => void
 }
 
 export interface SidebarFooterAction {
@@ -89,6 +163,28 @@ export interface SidebarBrandConfig {
   decorative?: boolean
 }
 
+export interface SidebarScopeOption {
+  id: string
+  label: string
+  status?: 'active' | 'suspended' | 'archived' | 'warning' | 'error' | 'neutral'
+  disabled?: boolean
+}
+
+export interface SidebarScopeConfig {
+  /** Label shown above/inside the selector. */
+  label?: string
+  /** Icon name resolved through the active icon set. */
+  icon?: string
+  /** Current selected option id. */
+  value?: string
+  /** Fallback label when `value` does not match an option. */
+  placeholder?: string
+  /** Options rendered in the selector menu. */
+  options: SidebarScopeOption[]
+  /** Called when the selected option changes. */
+  onChange?: (option: SidebarScopeOption) => void
+}
+
 export interface SidebarComponentConfig {
   /** Container element (or selector) the sidebar is mounted into. */
   container: HTMLElement | string
@@ -98,6 +194,12 @@ export interface SidebarComponentConfig {
   sections: SidebarSection[]
   /** Optional brand header rendered above the navigation. */
   brand?: SidebarBrandConfig
+  /** Optional scope/tenant selector rendered below the brand. */
+  scope?: SidebarScopeConfig
+  /** Optional element inserted between the header/scope area and navigation. */
+  beforeNav?: HTMLElement | HTMLElement[]
+  /** Optional element inserted after navigation and before footer. */
+  afterNav?: HTMLElement | HTMLElement[]
   /**
    * Render the shared edge-docked collapse control.
    * @default false
@@ -124,6 +226,41 @@ export interface SidebarComponentConfig {
    * @default false
    */
   collapsed?: boolean
+  /**
+   * Current active nav item ID. Applied during initial render and when React
+   * wrappers call `setActive`.
+   */
+  activeItemId?: string
+  /**
+   * Current route path used to derive active link state. When omitted, browser
+   * consumers fall back to `window.location.pathname`.
+   */
+  pathname?: string
+  /**
+   * Persist collapsed state under this localStorage key.
+   * When omitted, collapsed state remains in memory only.
+   */
+  storageKey?: string
+  /**
+   * Persist collapsed state when `storageKey` is supplied.
+   * @default true
+   */
+  persistCollapsed?: boolean
+  /**
+   * Viewport width below which the sidebar behaves as a mobile drawer.
+   * @default 900
+   */
+  mobileBreakpoint?: number
+  /**
+   * Render and control a mobile backdrop alongside the sidebar.
+   * @default false
+   */
+  mobileBackdrop?: boolean
+  /**
+   * Close the mobile drawer after a nav item activates.
+   * @default true
+   */
+  closeOnNavigate?: boolean
   /**
    * Controlled mobile open state. Reflected to `data-open` for the mobile
    * sidebar visibility contract.
@@ -134,4 +271,6 @@ export interface SidebarComponentConfig {
   onNavigate?: (item: SidebarNavItem) => void
   /** Called when the sidebar's collapsed state changes. */
   onCollapse?: (collapsed: boolean) => void
+  /** Called when the mobile open state changes. */
+  onOpenChange?: (open: boolean) => void
 }