@compsych-ui-components/angular 5.1.8 → 6.0.8

package/esm2022/lib/sidebar/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/sidebar/sidebar.ts","../../../../../../packages/angular/src/lib/sidebar/sidebar.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  model,\n  input,\n  signal,\n} from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { LUCIDE_ICONS } from '@compsych-ui-components/shared/assets/lucide-icons.generated';\n\nexport interface SidebarItem {\n  id: string;\n  label: string;\n  /** Lucide icon name (kebab-case). */\n  icon: string;\n  /** Nested items — renders an expandable group with a chevron. */\n  children?: SidebarItem[];\n  /** Render a divider above this item. */\n  dividerBefore?: boolean;\n  disabled?: boolean;\n}\n\n/** Default content from the Figma (node 260:4700). */\nconst DEFAULT_ITEMS: SidebarItem[] = [\n  { id: 'home', label: 'Home', icon: 'house' },\n  { id: 'connect', label: 'Connect Me', icon: 'message-circle', dividerBefore: true },\n  { id: 'guide', label: 'Guide Me', icon: 'compass' },\n  { id: 'assess', label: 'Assess Me', icon: 'binoculars' },\n  {\n    id: 'resources',\n    label: 'Resource Library',\n    icon: 'folder',\n    dividerBefore: true,\n    children: [\n      { id: 'wellness', label: 'Wellness', icon: 'leaf' },\n      { id: 'relationships', label: 'Relationships', icon: 'users' },\n      { id: 'work', label: 'Work & Education', icon: 'briefcase' },\n      { id: 'financial', label: 'Financial', icon: 'landmark' },\n      { id: 'legal', label: 'Legal', icon: 'scale' },\n      { id: 'lifestyle', label: 'Lifestyle', icon: 'smile' },\n      { id: 'home-auto', label: 'Home & Auto', icon: 'car' },\n      { id: 'abroad', label: 'Working Abroad', icon: 'plane' },\n    ],\n  },\n];\n\nconst DEFAULT_FOOTER: SidebarItem[] = [\n  { id: 'location', label: 'Location & Language', icon: 'globe' },\n  { id: 'logout', label: 'Logout', icon: 'log-out' },\n];\n\n/**\n * Sidebar — vertical app navigation from the ComPsych Design System.\n *\n * Figma: Core Components — base 260:4700, parts 213:1585.\n *\n * Icon + label items with default / hover / selected / focus / disabled states,\n * section dividers, expandable groups (chevron), and a pinned footer\n * (location & language, logout). Data-driven via `items` / `footerItems`,\n * defaulting to the design's content. All values are sys tokens.\n */\n@Component({\n  selector: 'compsych-sidebar',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [],\n  templateUrl: './sidebar.html',\n  styleUrl: './sidebar.css',\n  host: { role: 'navigation', 'aria-label': 'Sidebar' },\n})\nexport class SidebarComponent {\n  readonly items = input<SidebarItem[]>(DEFAULT_ITEMS);\n  readonly footerItems = input<SidebarItem[]>(DEFAULT_FOOTER);\n  /** Currently selected item id — supports two-way binding via [(activeId)]. */\n  readonly activeId = model<string>('home');\n\n  private readonly expanded = signal<Set<string>>(new Set());\n\n  constructor(private readonly sanitizer: DomSanitizer) {}\n\n  isExpanded(id: string): boolean {\n    return this.expanded().has(id);\n  }\n\n  isActive(id: string): boolean {\n    return this.activeId() === id;\n  }\n\n  onItemClick(item: SidebarItem): void {\n    if (item.disabled) return;\n    if (item.children?.length) {\n      this.expanded.update((s) => {\n        const next = new Set(s);\n        next.has(item.id) ? next.delete(item.id) : next.add(item.id);\n        return next;\n      });\n      return;\n    }\n    this.activeId.set(item.id);\n  }\n\n  /**\n   * Looks up a Lucide icon by name and injects explicit width/height attributes\n   * so the SVG renders at the correct size when injected via [innerHTML].\n   * Angular's CSS encapsulation does not add _ngcontent attributes to dynamically\n   * injected content, so explicit SVG attributes are the reliable solution.\n   */\n  iconSvg(name: string, size = 20, strokeWidth = 1.5): SafeHtml {\n    let svg = LUCIDE_ICONS[name] ?? '';\n    svg = svg.replace('<svg ', `<svg width=\"${size}\" height=\"${size}\" `);\n    if (strokeWidth !== 1.5) {\n      svg = svg.replace('stroke-width=\"1.5\"', `stroke-width=\"${strokeWidth}\"`);\n    }\n    return this.sanitizer.bypassSecurityTrustHtml(svg);\n  }\n}\n","<div class=\"cs-sb__scroll\">\n  <ul class=\"cs-sb__list\">\n    @for (item of items(); track item.id) {\n      @if (item.dividerBefore) {\n        <li class=\"cs-sb__divider\" aria-hidden=\"true\"></li>\n      }\n      <li class=\"cs-sb__item\">\n        <button\n          type=\"button\"\n          class=\"cs-sb__row\"\n          [class.cs-sb__row--active]=\"isActive(item.id)\"\n          [disabled]=\"item.disabled || null\"\n          [attr.aria-current]=\"isActive(item.id) ? 'page' : null\"\n          [attr.aria-expanded]=\"item.children?.length ? isExpanded(item.id) : null\"\n          (click)=\"onItemClick(item)\"\n        >\n          <span\n            class=\"cs-sb__icon\"\n            [innerHTML]=\"iconSvg(item.icon, 20, isActive(item.id) ? 2 : 1.5)\"\n            aria-hidden=\"true\"\n          ></span>\n          <span class=\"cs-sb__label\">{{ item.label }}</span>\n          @if (item.children?.length) {\n            <span\n              class=\"cs-sb__chevron\"\n              [class.cs-sb__chevron--open]=\"isExpanded(item.id)\"\n              [innerHTML]=\"iconSvg('chevron-down', 18)\"\n              aria-hidden=\"true\"\n            ></span>\n          }\n        </button>\n\n        @if (item.children?.length && isExpanded(item.id)) {\n          <ul class=\"cs-sb__sublist\">\n            @for (child of item.children; track child.id) {\n              <li>\n                <button\n                  type=\"button\"\n                  class=\"cs-sb__row cs-sb__row--sub\"\n                  [class.cs-sb__row--active]=\"isActive(child.id)\"\n                  [disabled]=\"child.disabled || null\"\n                  [attr.aria-current]=\"isActive(child.id) ? 'page' : null\"\n                  (click)=\"onItemClick(child)\"\n                >\n                  <span\n                    class=\"cs-sb__icon\"\n                    [innerHTML]=\"iconSvg(child.icon, 20, isActive(child.id) ? 2 : 1.5)\"\n                    aria-hidden=\"true\"\n                  ></span>\n                  <span class=\"cs-sb__label\">{{ child.label }}</span>\n                </button>\n              </li>\n            }\n          </ul>\n        }\n      </li>\n    }\n  </ul>\n</div>\n\n<div class=\"cs-sb__footer\">\n  <ul class=\"cs-sb__list\">\n    @for (item of footerItems(); track item.id) {\n      <li class=\"cs-sb__item\">\n        <button\n          type=\"button\"\n          class=\"cs-sb__row\"\n          [class.cs-sb__row--active]=\"isActive(item.id)\"\n          [disabled]=\"item.disabled || null\"\n          (click)=\"onItemClick(item)\"\n        >\n          <span\n            class=\"cs-sb__icon\"\n            [innerHTML]=\"iconSvg(item.icon, 20, isActive(item.id) ? 2 : 1.5)\"\n            aria-hidden=\"true\"\n          ></span>\n          <span class=\"cs-sb__label\">{{ item.label }}</span>\n        </button>\n      </li>\n    }\n  </ul>\n</div>\n"]}
+{"version":3,"file":"sidebar.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/sidebar/sidebar.ts","../../../../../../packages/angular/src/lib/sidebar/sidebar.html"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  model,\r\n  input,\r\n  output,\r\n  signal,\r\n} from '@angular/core';\r\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\r\nimport { LUCIDE_ICONS } from '@compsych-ui-components/shared/assets/lucide-icons.generated';\r\n\r\nexport interface SidebarItem {\r\n  /** Stable identifier used by `activeId` and emitted by `itemClick`. */\r\n  id: string;\r\n  /** Text label displayed next to the icon. */\r\n  label: string;\r\n  /** Lucide icon name (kebab-case), e.g. `'house'` or `'folder'`. */\r\n  icon: string;\r\n  /** Child items — renders this item as an expandable group with a chevron toggle. Child items cannot have their own children. */\r\n  children?: SidebarItem[];\r\n  /** When true, renders a horizontal divider above this item in the list. */\r\n  dividerBefore?: boolean;\r\n  /** When true, the item is non-interactive — it cannot be clicked and receives no hover or active styling. */\r\n  disabled?: boolean;\r\n  /**\r\n   * When true, clicking the item emits `itemClick` but does not highlight it\r\n   * as active or update `activeId`. Use for action items (e.g. logout)\r\n   * that are not navigation destinations.\r\n   */\r\n  nonRoute?: boolean;\r\n}\r\n\r\n/** Default content from the Figma (node 260:4700). */\r\nconst DEFAULT_ITEMS: SidebarItem[] = [\r\n  { id: 'home', label: 'Home', icon: 'house' },\r\n  { id: 'connect', label: 'Connect Me', icon: 'message-circle', dividerBefore: true },\r\n  { id: 'guide', label: 'Guide Me', icon: 'compass' },\r\n  { id: 'assess', label: 'Assess Me', icon: 'binoculars' },\r\n  {\r\n    id: 'resources',\r\n    label: 'Resource Library',\r\n    icon: 'folder',\r\n    dividerBefore: true,\r\n    children: [\r\n      { id: 'wellness', label: 'Wellness', icon: 'leaf' },\r\n      { id: 'relationships', label: 'Relationships', icon: 'users' },\r\n      { id: 'work', label: 'Work & Education', icon: 'briefcase' },\r\n      { id: 'financial', label: 'Financial', icon: 'landmark' },\r\n      { id: 'legal', label: 'Legal', icon: 'scale' },\r\n      { id: 'lifestyle', label: 'Lifestyle', icon: 'smile' },\r\n      { id: 'home-auto', label: 'Home & Auto', icon: 'car' },\r\n      { id: 'abroad', label: 'Working Abroad', icon: 'plane' },\r\n    ],\r\n  },\r\n];\r\n\r\nconst DEFAULT_FOOTER: SidebarItem[] = [\r\n  { id: 'location', label: 'Location & Language', icon: 'globe' },\r\n  { id: 'logout', label: 'Logout', icon: 'log-out' },\r\n];\r\n\r\n/**\r\n * Sidebar — vertical app navigation from the ComPsych Design System.\r\n *\r\n * Figma: Core Components — base 260:4700, parts 213:1585.\r\n *\r\n * Icon + label items with default / hover / selected / focus / disabled states,\r\n * section dividers, expandable groups (chevron), and a pinned footer\r\n * (location & language, logout). Data-driven via `items` / `footerItems`,\r\n * defaulting to the design's content. All values are sys tokens.\r\n */\r\n@Component({\r\n  selector: 'compsych-sidebar',\r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [],\r\n  templateUrl: './sidebar.html',\r\n  styleUrl: './sidebar.css',\r\n  host: { role: 'navigation', 'aria-label': 'Sidebar' },\r\n})\r\nexport class SidebarComponent {\r\n  /** Navigation items rendered in the scrollable main area. Defaults to the standard ComPsych nav set. */\r\n  readonly items = input<SidebarItem[]>(DEFAULT_ITEMS);\r\n  /** Items pinned to the bottom of the sidebar, outside the scroll region. Intended for utility actions such as language selection and logout. */\r\n  readonly footerItems = input<SidebarItem[]>(DEFAULT_FOOTER);\r\n  /** Currently active item id — supports two-way binding via `[(activeId)]`. Updated on click for route items; unchanged for `nonRoute` items. */\r\n  readonly activeId = model<string>('home');\r\n  /**\r\n   * Emitted with the item's `id` whenever a non-disabled, non-group item is clicked.\r\n   * Fires for both route items and `nonRoute` items.\r\n   * Group items (those with `children`) do not emit — they only toggle their expanded state.\r\n   */\r\n  readonly itemClick = output<string>();\r\n\r\n  private readonly expanded = signal<Set<string>>(new Set());\r\n\r\n  constructor(private readonly sanitizer: DomSanitizer) {}\r\n\r\n  isExpanded(id: string): boolean {\r\n    return this.expanded().has(id);\r\n  }\r\n\r\n  isActive(id: string): boolean {\r\n    return this.activeId() === id;\r\n  }\r\n\r\n  onItemClick(item: SidebarItem): void {\r\n    if (item.disabled) return;\r\n    if (item.children?.length) {\r\n      this.expanded.update((s) => {\r\n        const next = new Set(s);\r\n        next.has(item.id) ? next.delete(item.id) : next.add(item.id);\r\n        return next;\r\n      });\r\n      return;\r\n    }\r\n    if (item.nonRoute) {\r\n      this.itemClick.emit(item.id);\r\n      return;\r\n    }\r\n    this.activeId.set(item.id);\r\n  }\r\n\r\n  /**\r\n   * Looks up a Lucide icon by name and injects explicit width/height attributes\r\n   * so the SVG renders at the correct size when injected via [innerHTML].\r\n   * Angular's CSS encapsulation does not add _ngcontent attributes to dynamically\r\n   * injected content, so explicit SVG attributes are the reliable solution.\r\n   */\r\n  iconSvg(name: string, size = 20, strokeWidth = 1.5): SafeHtml {\r\n    let svg = LUCIDE_ICONS[name] ?? '';\r\n    svg = svg.replace('<svg ', `<svg width=\"${size}\" height=\"${size}\" `);\r\n    if (strokeWidth !== 1.5) {\r\n      svg = svg.replace('stroke-width=\"1.5\"', `stroke-width=\"${strokeWidth}\"`);\r\n    }\r\n    return this.sanitizer.bypassSecurityTrustHtml(svg);\r\n  }\r\n}\r\n","<div class=\"cs-sb__scroll\">\r\n  <ul class=\"cs-sb__list\">\r\n    @for (item of items(); track item.id) {\r\n      @if (item.dividerBefore) {\r\n        <li class=\"cs-sb__divider\" aria-hidden=\"true\"></li>\r\n      }\r\n      <li class=\"cs-sb__item\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"cs-sb__row\"\r\n          [class.cs-sb__row--active]=\"!item.nonRoute && isActive(item.id)\"\r\n          [disabled]=\"item.disabled || null\"\r\n          [attr.aria-current]=\"!item.nonRoute && isActive(item.id) ? 'page' : null\"\r\n          [attr.aria-expanded]=\"item.children?.length ? isExpanded(item.id) : null\"\r\n          (click)=\"onItemClick(item)\"\r\n        >\r\n          <span\r\n            class=\"cs-sb__icon\"\r\n            [innerHTML]=\"iconSvg(item.icon, 20, !item.nonRoute && isActive(item.id) ? 2 : 1.5)\"\r\n            aria-hidden=\"true\"\r\n          ></span>\r\n          <span class=\"cs-sb__label\">{{ item.label }}</span>\r\n          @if (item.children?.length) {\r\n            <span\r\n              class=\"cs-sb__chevron\"\r\n              [class.cs-sb__chevron--open]=\"isExpanded(item.id)\"\r\n              [innerHTML]=\"iconSvg('chevron-down', 18)\"\r\n              aria-hidden=\"true\"\r\n            ></span>\r\n          }\r\n        </button>\r\n\r\n        @if (item.children?.length && isExpanded(item.id)) {\r\n          <ul class=\"cs-sb__sublist\">\r\n            @for (child of item.children; track child.id) {\r\n              <li>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"cs-sb__row cs-sb__row--sub\"\r\n                  [class.cs-sb__row--active]=\"isActive(child.id)\"\r\n                  [disabled]=\"child.disabled || null\"\r\n                  [attr.aria-current]=\"isActive(child.id) ? 'page' : null\"\r\n                  (click)=\"onItemClick(child)\"\r\n                >\r\n                  <span\r\n                    class=\"cs-sb__icon\"\r\n                    [innerHTML]=\"iconSvg(child.icon, 20, isActive(child.id) ? 2 : 1.5)\"\r\n                    aria-hidden=\"true\"\r\n                  ></span>\r\n                  <span class=\"cs-sb__label\">{{ child.label }}</span>\r\n                </button>\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n<div class=\"cs-sb__footer\">\r\n  <ul class=\"cs-sb__list\">\r\n    @for (item of footerItems(); track item.id) {\r\n      <li class=\"cs-sb__item\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"cs-sb__row\"\r\n          [class.cs-sb__row--active]=\"!item.nonRoute && isActive(item.id)\"\r\n          [disabled]=\"item.disabled || null\"\r\n          (click)=\"onItemClick(item)\"\r\n        >\r\n          <span\r\n            class=\"cs-sb__icon\"\r\n            [innerHTML]=\"iconSvg(item.icon, 20, !item.nonRoute && isActive(item.id) ? 2 : 1.5)\"\r\n            aria-hidden=\"true\"\r\n          ></span>\r\n          <span class=\"cs-sb__label\">{{ item.label }}</span>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n"]}

package/lib/accordion/accordion-types.d.ts

@@ -1,14 +1,35 @@
+/**
+ * Visual style variant applied to the accordion and all its items.
+ * - `'default'` — standard card style with borders and a background surface.
+ * - `'level-2'` — compact nested style used inside another accordion panel.
+ * - `'text-only'` — no card chrome; plain text trigger rows.
+ */
 export type AccordionVariant = 'default' | 'level-2' | 'text-only';
+/** An action button rendered at the bottom of an accordion panel. */
 export interface AccordionButton {
+    /** Text displayed on the button. */
     label: string;
+    /** Called when the button is clicked. */
     action: () => void;
 }
+/**
+ * A simplified accordion item used inside `AccordionItem.nestedContent`.
+ * Identical to `AccordionItem` but without `buttons` and `nestedContent` —
+ * nesting beyond one level is not supported.
+ */
 export type NestedAccordionItem = Omit<AccordionItem, 'buttons' | 'nestedContent'>;
+/** Data model for a single expandable row in a `compsych-accordion`. */
 export interface AccordionItem {
+    /** Text shown in the trigger button header. */
     title: string;
+    /** HTML string rendered in the panel body when expanded. Sanitized before display. Omit when using `nestedContent`. */
     content?: string;
+    /** Lucide icon name (kebab-case) shown to the left of the title, e.g. `'globe'` or `'folder'`. */
     icon?: string;
+    /** Whether this panel starts expanded on initial render. Defaults to false. */
     expanded?: boolean;
+    /** Action buttons rendered at the bottom of the panel, below `content`. */
     buttons?: AccordionButton[];
+    /** Items rendered as a nested level-2 accordion inside this panel. Cannot contain `buttons` or further nesting. */
     nestedContent?: NestedAccordionItem[];
 }

package/lib/accordion/accordion.d.ts

@@ -9,19 +9,28 @@ export declare class AccordionItemComponent {
     private readonly el;
     readonly triggerId: string;
     readonly panelId: string;
+    /** Text shown in the trigger button header. */
     title: string;
+    /** HTML string rendered in the panel body when expanded. Sanitized before display. */
     content: string;
+    /** Action buttons rendered at the bottom of the panel. */
     buttons: AccordionButton[];
+    /** Items rendered as a nested level-2 accordion inside this panel. */
     nestedContent: NestedAccordionItem[];
+    /** Visual style — inherited from the parent AccordionComponent. */
     variant: AccordionVariant;
+    /** True when this item is rendered inside a parent accordion panel. Adds nested styling. Set automatically by AccordionComponent — do not set directly. */
     nested: boolean;
+    /** Lucide icon name (kebab-case) shown to the left of the title. Pass an empty string to show no icon. */
     set icon(name: string);
     iconSvg: SafeHtml | null;
     get sanitizedContent(): SafeHtml;
     constructor(sanitizer: DomSanitizer, el: ElementRef<HTMLElement>);
+    /** Whether this panel is currently open. Supports boolean coercion (e.g. `[expanded]="true"`). */
     get expanded(): boolean;
     set expanded(value: BooleanInput);
     private _expanded;
+    /** Emitted when the panel is toggled. `true` = opening, `false` = closing. */
     expandedChange: EventEmitter<boolean>;
     toggle(): void;
     onKeydown(event: KeyboardEvent): void;
@@ -29,9 +38,13 @@ export declare class AccordionItemComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<AccordionItemComponent, "compsych-accordion-item", never, { "title": { "alias": "title"; "required": false; }; "content": { "alias": "content"; "required": false; }; "buttons": { "alias": "buttons"; "required": false; }; "nestedContent": { "alias": "nestedContent"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "nested": { "alias": "nested"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; }, { "expandedChange": "expandedChange"; }, never, never, true, never>;
 }
 export declare class AccordionComponent {
+    /** Items to render as expandable rows. */
     items: AccordionItem[];
+    /** Visual style applied to all items. `'default'` is the standard card style; `'level-2'` is compact nested style; `'text-only'` removes card chrome. */
     variant: AccordionVariant;
+    /** Set automatically when this accordion is rendered inside another accordion panel. Do not set directly. */
     nested: boolean;
+    /** When true, multiple panels can be open simultaneously. Defaults to false — opening one panel closes any others. Supports boolean coercion. */
     get multi(): boolean;
     set multi(value: BooleanInput);
     private _multi;

package/lib/button/button.d.ts

@@ -2,17 +2,24 @@ import { AfterViewInit, OnDestroy } from '@angular/core';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { BooleanInput } from '@angular/cdk/coercion';
 import * as i0 from "@angular/core";
+/** Visual style of a `compsych-button`. Controls color, border, and elevation. */
 export type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'elevated' | 'text' | 'danger' | 'danger-outlined';
 export declare class ButtonComponent implements AfterViewInit, OnDestroy {
     private readonly focusMonitor;
     private readonly elementRef;
+    /** Text label rendered on the button. */
     label: string;
+    /** Visual style of the button. Defaults to `'filled'`. */
     variant: ButtonVariant;
+    /** Button dimensions — controls height, padding, and font size. Defaults to `'small'`. */
     size: 'small' | 'medium' | 'large' | 'xlarge';
+    /** Material Symbols icon name shown to the left of the label (e.g. `'search'`, `'add'`). Omit to show label only. */
     icon?: string;
+    /** When true, hides the label and renders a square icon-only button. Requires `icon` to be set. Supports boolean coercion. */
     get iconOnly(): boolean;
     set iconOnly(value: BooleanInput);
     private _iconOnly;
+    /** When true, the button is non-interactive — `disabled` and `aria-disabled` attributes are set and `tabIndex` is set to `-1`. Supports boolean coercion. */
     get disabled(): boolean;
     set disabled(value: BooleanInput);
     private _disabled;

package/lib/header-nav/header-nav.d.ts

@@ -5,31 +5,37 @@ import * as i0 from "@angular/core";
 export type HeaderNavLevel = 'main' | 'sub-page' | 'not-logged';
 /**
  * A navigation item used for both breadcrumbs and action buttons.
- * Use `id` to identify which item was clicked in the parent's `action` handler.
  * - Breadcrumb: provide `id` and `label`.
- * - Action button: provide `id`, `label`, and `variant`.
+ * - Action button: provide `id`, `label`, and optionally `variant`.
  */
 export interface NavAction {
+    /** Stable identifier emitted by the `action` output when this item is clicked. */
     id: string;
+    /** Text displayed in the breadcrumb trail or on the action button. */
     label: string;
+    /** Button style for action buttons. Defaults to `'filled'` when omitted. Not used for breadcrumbs. */
     variant?: ButtonVariant;
 }
 /**
  * Header Navigation — top app bar from the ComPsych Design System.
  *
- * Three levels × sidebar-open state:
- * - `main`       — menu toggle, brand logo + wordmark, logged-in action cluster.
- * - `sub-page`   — menu toggle, logo mark + breadcrumb trail, logged-in action cluster.
- * - `not-logged` — menu toggle, brand, public action cluster (language, help, CTA).
+ * Three layout levels controlled by `level`:
+ * - `'main'`       — menu toggle, brand logo + wordmark, logged-in action cluster.
+ * - `'sub-page'`   — menu toggle, logo mark + breadcrumb trail, logged-in action cluster.
+ * - `'not-logged'` — menu toggle, brand, public action cluster (language, help, CTA buttons).
  *
- * Pass `breadcrumbs` as an ordered list of `NavAction` items. The last item is
- * rendered as the current-page indicator (non-interactive); all others are
- * buttons that emit `action` with `{ type: 'breadcrumb', item }` on click.
- * Use `item.id` in the handler to identify which crumb was clicked.
+ * All interactive elements emit a string id via the `action` output.
+ * For breadcrumbs and action buttons the emitted value is the `NavAction.id`.
+ * For built-in icon buttons a fixed string is emitted (see `action` docs).
  */
 export declare class HeaderNavComponent {
     private readonly sanitizer;
-    /** Which header level to render. */
+    /**
+     * Layout and feature set of the header.
+     * - `'main'` — logo + brand label, logged-in action cluster (search, notifications, documents, language, avatar, logout).
+     * - `'sub-page'` — symbol mark + breadcrumb trail, same logged-in action cluster.
+     * - `'not-logged'` — logo + brand label, public action cluster (language, help, action buttons).
+     */
     level: HeaderNavLevel;
     /** Whether the paired sidebar is open — toggles the menu icon (☰ ↔ ✕). */
     sidebarOpen: boolean;
@@ -39,15 +45,19 @@ export declare class HeaderNavComponent {
     brandLabelAria: string;
     /** Brand wordmark text rendered next to the logo on `main` and `not-logged` levels. */
     brandLabel: string;
+    /** Optional hex color (e.g. `'#ff0000'`) applied to the brand label text. Overrides the default inherited color. */
+    brandLabelColor?: string;
     /**
-     * URL of a client logo image. When provided, replaces the ComPsych SVG with
-     * `<img [src]="clientLogoUrl" alt="">` at the same position.
+     * URL of a client logo image. When provided, replaces the ComPsych SVG logo
+     * with an `<img>` at the same position. The image receives `brandLabelAria`
+     * as its accessible label.
      */
     clientLogoUrl?: string;
     /**
-     * Ordered breadcrumb trail for `sub-page` level.
-     * Each item requires an `id` and `label`. The last item is rendered as the
-     * current page (non-interactive); all others emit `{ type: 'breadcrumb', item }`.
+     * Ordered breadcrumb trail rendered at `'sub-page'` level.
+     * Each item requires `id` and `label`. The last item is the current page
+     * (non-interactive). All preceding items are buttons that emit their `id`
+     * via the `action` output when clicked.
      */
     breadcrumbs: NavAction[];
     /** Notification badge count. Badge is hidden when 0. */
@@ -56,6 +66,8 @@ export declare class HeaderNavComponent {
     avatarInitials: string;
     /** Show the search icon button (logged-in levels). */
     showSearch: boolean;
+    /** Show the calendar-check icon button (logged-in levels). */
+    showCalendarChecked: boolean;
     /** Show the notifications icon button (logged-in levels). */
     showNotifications: boolean;
     /** Show the documents icon button (logged-in levels). */
@@ -70,14 +82,29 @@ export declare class HeaderNavComponent {
     showLogout: boolean;
     /**
      * Additional configurable buttons rendered in the actions area.
-     * Each entry is `{ id, label, variant? }` where `variant` is a `ButtonVariant`
-     * (defaults to `'filled'`) and `id` is a required stable identifier.
-     * Clicking any of these emits `action` with `{ type: 'action-button', item }`.
+     * Each entry requires `id` and `label`; `variant` defaults to `'filled'`.
+     * Clicking any button emits its `id` via the `action` output.
      */
     actionButtons: NavAction[];
-    /** Emitted for every interactive element. Emits a string id: the `NavAction` id for breadcrumb/action-button, or the action name for icon buttons. */
+    /**
+     * Emitted as a string whenever any interactive element is activated.
+     * Fixed values for built-in controls:
+     * - `'menu-toggle'` — hamburger / close button
+     * - `'logo'` — brand / logo button
+     * - `'search'` — search icon button
+     * - `'calendar-checked'` — calendar-check icon button
+     * - `'notifications'` — notifications icon button
+     * - `'documents'` — documents icon button
+     * - `'language'` — language icon button
+     * - `'help'` — help icon button
+     * - `'avatar'` — avatar button
+     * - `'logout'` — logout icon button
+     *
+     * For `breadcrumbs` and `actionButtons` items, the item's `NavAction.id` is emitted.
+     */
     readonly action: EventEmitter<string>;
     readonly searchIconSvg: SafeHtml;
+    readonly calendarCheckedIconSvg: SafeHtml;
     readonly bellIconSvg: SafeHtml;
     readonly fileTextIconSvg: SafeHtml;
     readonly globeIconSvg: SafeHtml;
@@ -99,5 +126,5 @@ export declare class HeaderNavComponent {
      */
     private trustedIcon;
     static ɵfac: i0.ɵɵFactoryDeclaration<HeaderNavComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HeaderNavComponent, "compsych-header-nav", never, { "level": { "alias": "level"; "required": false; }; "sidebarOpen": { "alias": "sidebarOpen"; "required": false; }; "showMenuToggle": { "alias": "showMenuToggle"; "required": false; }; "brandLabelAria": { "alias": "brandLabelAria"; "required": false; }; "brandLabel": { "alias": "brandLabel"; "required": false; }; "clientLogoUrl": { "alias": "clientLogoUrl"; "required": false; }; "breadcrumbs": { "alias": "breadcrumbs"; "required": false; }; "notificationCount": { "alias": "notificationCount"; "required": false; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; }; "showSearch": { "alias": "showSearch"; "required": false; }; "showNotifications": { "alias": "showNotifications"; "required": false; }; "showDocuments": { "alias": "showDocuments"; "required": false; }; "showAvatar": { "alias": "showAvatar"; "required": false; }; "showLanguage": { "alias": "showLanguage"; "required": false; }; "showHelp": { "alias": "showHelp"; "required": false; }; "showLogout": { "alias": "showLogout"; "required": false; }; "actionButtons": { "alias": "actionButtons"; "required": false; }; }, { "action": "action"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HeaderNavComponent, "compsych-header-nav", never, { "level": { "alias": "level"; "required": false; }; "sidebarOpen": { "alias": "sidebarOpen"; "required": false; }; "showMenuToggle": { "alias": "showMenuToggle"; "required": false; }; "brandLabelAria": { "alias": "brandLabelAria"; "required": false; }; "brandLabel": { "alias": "brandLabel"; "required": false; }; "brandLabelColor": { "alias": "brandLabelColor"; "required": false; }; "clientLogoUrl": { "alias": "clientLogoUrl"; "required": false; }; "breadcrumbs": { "alias": "breadcrumbs"; "required": false; }; "notificationCount": { "alias": "notificationCount"; "required": false; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; }; "showSearch": { "alias": "showSearch"; "required": false; }; "showCalendarChecked": { "alias": "showCalendarChecked"; "required": false; }; "showNotifications": { "alias": "showNotifications"; "required": false; }; "showDocuments": { "alias": "showDocuments"; "required": false; }; "showAvatar": { "alias": "showAvatar"; "required": false; }; "showLanguage": { "alias": "showLanguage"; "required": false; }; "showHelp": { "alias": "showHelp"; "required": false; }; "showLogout": { "alias": "showLogout"; "required": false; }; "actionButtons": { "alias": "actionButtons"; "required": false; }; }, { "action": "action"; }, never, never, true, never>;
 }

package/lib/sidebar/sidebar.d.ts

@@ -1,15 +1,24 @@
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import * as i0 from "@angular/core";
 export interface SidebarItem {
+    /** Stable identifier used by `activeId` and emitted by `itemClick`. */
     id: string;
+    /** Text label displayed next to the icon. */
     label: string;
-    /** Lucide icon name (kebab-case). */
+    /** Lucide icon name (kebab-case), e.g. `'house'` or `'folder'`. */
     icon: string;
-    /** Nested items — renders an expandable group with a chevron. */
+    /** Child items — renders this item as an expandable group with a chevron toggle. Child items cannot have their own children. */
     children?: SidebarItem[];
-    /** Render a divider above this item. */
+    /** When true, renders a horizontal divider above this item in the list. */
     dividerBefore?: boolean;
+    /** When true, the item is non-interactive — it cannot be clicked and receives no hover or active styling. */
     disabled?: boolean;
+    /**
+     * When true, clicking the item emits `itemClick` but does not highlight it
+     * as active or update `activeId`. Use for action items (e.g. logout)
+     * that are not navigation destinations.
+     */
+    nonRoute?: boolean;
 }
 /**
  * Sidebar — vertical app navigation from the ComPsych Design System.
@@ -23,10 +32,18 @@ export interface SidebarItem {
  */
 export declare class SidebarComponent {
     private readonly sanitizer;
+    /** Navigation items rendered in the scrollable main area. Defaults to the standard ComPsych nav set. */
     readonly items: import("@angular/core").InputSignal<SidebarItem[]>;
+    /** Items pinned to the bottom of the sidebar, outside the scroll region. Intended for utility actions such as language selection and logout. */
     readonly footerItems: import("@angular/core").InputSignal<SidebarItem[]>;
-    /** Currently selected item id — supports two-way binding via [(activeId)]. */
+    /** Currently active item id — supports two-way binding via `[(activeId)]`. Updated on click for route items; unchanged for `nonRoute` items. */
     readonly activeId: import("@angular/core").ModelSignal<string>;
+    /**
+     * Emitted with the item's `id` whenever a non-disabled, non-group item is clicked.
+     * Fires for both route items and `nonRoute` items.
+     * Group items (those with `children`) do not emit — they only toggle their expanded state.
+     */
+    readonly itemClick: import("@angular/core").OutputEmitterRef<string>;
     private readonly expanded;
     constructor(sanitizer: DomSanitizer);
     isExpanded(id: string): boolean;
@@ -40,5 +57,5 @@ export declare class SidebarComponent {
      */
     iconSvg(name: string, size?: number, strokeWidth?: number): SafeHtml;
     static ɵfac: i0.ɵɵFactoryDeclaration<SidebarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarComponent, "compsych-sidebar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "footerItems": { "alias": "footerItems"; "required": false; "isSignal": true; }; "activeId": { "alias": "activeId"; "required": false; "isSignal": true; }; }, { "activeId": "activeIdChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarComponent, "compsych-sidebar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "footerItems": { "alias": "footerItems"; "required": false; "isSignal": true; }; "activeId": { "alias": "activeId"; "required": false; "isSignal": true; }; }, { "activeId": "activeIdChange"; "itemClick": "itemClick"; }, never, never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych-ui-components/angular",
-  "version": "5.1.8",
+  "version": "6.0.8",
   "description": "Angular UI components for compsych",
   "publishConfig": {
     "access": "public",