@countermeasure-platform/web-components 0.2.0

package/dist/display/notification-center/types.d.ts

@@ -0,0 +1,30 @@
+/**
+ * NotificationCenter type definitions
+ * @countermeasure/web-components/display/notification-center
+ */
+export type NotificationLevel = 'info' | 'success' | 'warning' | 'error';
+export interface NotificationItem {
+    id: string;
+    title: string;
+    description?: string;
+    level?: NotificationLevel;
+    timestamp: Date;
+    read?: boolean;
+    icon?: string;
+    action?: {
+        label: string;
+        onClick: (id: string) => void;
+    };
+}
+export interface NotificationCenterConfig {
+    container?: HTMLElement | string;
+    notifications?: NotificationItem[];
+    maxVisible?: number;
+    emptyMessage?: string;
+    onMarkRead?: (id: string) => void;
+    onMarkAllRead?: () => void;
+    onDismiss?: (id: string) => void;
+    onClearAll?: () => void;
+    className?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/display/notification-center/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/display/notification-center/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAExE,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,SAAS,EAAE,IAAI,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAA;QACb,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;KAC9B,CAAA;CACF;AAED,MAAM,WAAW,wBAAwB;IACvC,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAChC,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB"}

package/dist/display/popover/index.d.ts

@@ -0,0 +1,43 @@
+import { PopoverConfig } from './types';
+export type { PopoverConfig, PopoverPlacement } from './types';
+export declare class Popover {
+    private readonly trigger;
+    private readonly placement;
+    private readonly closeOnClickOutside;
+    private readonly closeOnEscape;
+    private readonly className;
+    private readonly onOpenCallback;
+    private readonly onCloseCallback;
+    private readonly popoverId;
+    private popoverEl;
+    private contentEl;
+    private content;
+    private opened;
+    private destroyed;
+    /** Bound event handlers for cleanup */
+    private readonly handleTriggerClick;
+    private readonly handleDocumentClick;
+    private readonly handleKeyDown;
+    constructor(config: PopoverConfig);
+    /** Check whether the popover is currently open */
+    isOpen(): boolean;
+    /** Open the popover */
+    open(): void;
+    /** Close the popover */
+    close(): void;
+    /** Toggle the popover open/closed */
+    toggle(): void;
+    /** Update the popover content */
+    setContent(content: HTMLElement | string): void;
+    /** Remove all listeners and clean up */
+    destroy(): void;
+    /** Create the popover DOM element and append to body */
+    private createPopoverElement;
+    /** Render the content into the content element */
+    private renderContent;
+    /** Position the popover relative to the trigger element */
+    private positionPopover;
+    /** Get the left position based on alignment */
+    private getAlignedLeft;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/display/popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/display/popover/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,EAAE,KAAK,aAAa,EAAyB,MAAM,SAAS,CAAA;AAEnE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAmB9D,qBAAa,OAAO;IAClB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAa;IACrC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAkB;IAC5C,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAS;IAC7C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAS;IACvC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoB;IAC9C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAA0B;IACzD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA0B;IAC1D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAQ;IAElC,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,OAAO,CAAsB;IACrC,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,SAAS,CAAQ;IAEzB,uCAAuC;IACvC,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAY;IAC/C,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAyB;IAC7D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA4B;gBAE9C,MAAM,EAAE,aAAa;IAwCjC,kDAAkD;IAClD,MAAM,IAAI,OAAO;IAIjB,uBAAuB;IACvB,IAAI,IAAI,IAAI;IA4CZ,wBAAwB;IACxB,KAAK,IAAI,IAAI;IA2Bb,qCAAqC;IACrC,MAAM,IAAI,IAAI;IAQd,iCAAiC;IACjC,UAAU,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI;IAO/C,wCAAwC;IACxC,OAAO,IAAI,IAAI;IAaf,wDAAwD;IACxD,OAAO,CAAC,oBAAoB;IA2B5B,kDAAkD;IAClD,OAAO,CAAC,aAAa;IAcrB,2DAA2D;IAC3D,OAAO,CAAC,eAAe;IA+DvB,+CAA+C;IAC/C,OAAO,CAAC,cAAc;CAavB"}

package/dist/display/popover/index.js

@@ -0,0 +1,113 @@
+import { t as e } from "../../purify.es-oNgIHWpC.js";
+import { n as t } from "../../utils-Cn_W3h3f.js";
+//#region src/display/popover/index.ts
+function n(e) {
+	let t = [
+		"a[href]",
+		"button:not([disabled])",
+		"input:not([disabled])",
+		"select:not([disabled])",
+		"textarea:not([disabled])",
+		"[tabindex]:not([tabindex=\"-1\"])"
+	].join(", ");
+	return Array.from(e.querySelectorAll(t));
+}
+var r = 8, i = class {
+	trigger;
+	placement;
+	closeOnClickOutside;
+	closeOnEscape;
+	className;
+	onOpenCallback;
+	onCloseCallback;
+	popoverId;
+	popoverEl = null;
+	contentEl = null;
+	content;
+	opened = !1;
+	destroyed = !1;
+	handleTriggerClick;
+	handleDocumentClick;
+	handleKeyDown;
+	constructor(e) {
+		this.trigger = e.trigger, this.content = e.content, this.placement = e.placement ?? "bottom", this.closeOnClickOutside = e.closeOnClickOutside !== !1, this.closeOnEscape = e.closeOnEscape !== !1, this.className = e.className, this.onOpenCallback = e.onOpen, this.onCloseCallback = e.onClose, this.popoverId = t("cmm-popover"), this.handleTriggerClick = () => {
+			this.toggle();
+		}, this.handleDocumentClick = (e) => {
+			let t = e.target;
+			t instanceof Node && this.popoverEl && !this.popoverEl.contains(t) && !this.trigger.contains(t) && this.close();
+		}, this.handleKeyDown = (e) => {
+			e.key === "Escape" && (e.preventDefault(), this.close(), this.trigger.focus());
+		}, this.trigger.setAttribute("aria-haspopup", "dialog"), this.trigger.setAttribute("aria-expanded", "false"), this.trigger.addEventListener("click", this.handleTriggerClick);
+	}
+	isOpen() {
+		return this.opened;
+	}
+	open() {
+		if (!(this.destroyed || this.opened)) {
+			if (this.opened = !0, this.createPopoverElement(), this.positionPopover(), this.popoverEl && (this.popoverEl.offsetHeight, this.popoverEl.classList.add("cmm-popover--open")), this.trigger.setAttribute("aria-expanded", "true"), this.closeOnClickOutside && setTimeout(() => {
+				document.addEventListener("click", this.handleDocumentClick);
+			}, 0), this.closeOnEscape && document.addEventListener("keydown", this.handleKeyDown), this.popoverEl) {
+				let e = n(this.popoverEl)[0];
+				e ? e.focus() : (this.popoverEl.setAttribute("tabindex", "-1"), this.popoverEl.focus());
+			}
+			this.onOpenCallback?.();
+		}
+	}
+	close() {
+		if (this.opened) {
+			if (this.opened = !1, this.trigger.setAttribute("aria-expanded", "false"), document.removeEventListener("click", this.handleDocumentClick), document.removeEventListener("keydown", this.handleKeyDown), this.popoverEl) {
+				this.popoverEl.classList.remove("cmm-popover--open");
+				let e = this.popoverEl;
+				setTimeout(() => {
+					e.remove();
+				}, 200), this.popoverEl = null, this.contentEl = null;
+			}
+			this.onCloseCallback?.();
+		}
+	}
+	toggle() {
+		this.opened ? this.close() : this.open();
+	}
+	setContent(e) {
+		this.content = e, this.contentEl && this.renderContent();
+	}
+	destroy() {
+		this.destroyed || (this.destroyed = !0, this.close(), this.trigger.removeEventListener("click", this.handleTriggerClick), this.trigger.removeAttribute("aria-haspopup"), this.trigger.removeAttribute("aria-expanded"));
+	}
+	createPopoverElement() {
+		this.popoverEl && this.popoverEl.remove();
+		let e = document.createElement("div");
+		e.className = "cmm-popover", e.id = this.popoverId, this.className && e.classList.add(this.className);
+		let t = document.createElement("div");
+		t.className = "cmm-popover__content", e.appendChild(t), document.body.appendChild(e), this.popoverEl = e, this.contentEl = t, this.renderContent();
+	}
+	renderContent() {
+		this.contentEl && (this.contentEl.innerHTML = "", typeof this.content == "string" ? this.contentEl.innerHTML = e.sanitize(this.content) : this.contentEl.appendChild(this.content));
+	}
+	positionPopover() {
+		if (!this.popoverEl) return;
+		let e = this.trigger.getBoundingClientRect(), t = this.popoverEl.getBoundingClientRect(), n = window.innerWidth, i = window.innerHeight, a = 0, o = 0, s = this.placement.split("-")[0], c = this.placement.includes("-") ? this.placement.split("-")[1] : void 0, l = s ?? "bottom";
+		switch (l) {
+			case "top":
+				a = e.top - t.height - r, o = this.getAlignedLeft(e, t, c);
+				break;
+			case "bottom":
+				a = e.bottom + r, o = this.getAlignedLeft(e, t, c);
+				break;
+			case "left":
+				a = e.top + (e.height - t.height) / 2, o = e.left - t.width - r;
+				break;
+			case "right":
+				a = e.top + (e.height - t.height) / 2, o = e.right + r;
+				break;
+		}
+		l === "top" && a < 0 ? a = e.bottom + r : l === "bottom" && a + t.height > i && (a = e.top - t.height - r), o = Math.max(4, Math.min(o, n - t.width - 4)), a = Math.max(4, Math.min(a, i - t.height - 4)), this.popoverEl.style.left = `${String(o)}px`, this.popoverEl.style.top = `${String(a)}px`;
+	}
+	getAlignedLeft(e, t, n) {
+		return n === "start" ? e.left : n === "end" ? e.right - t.width : e.left + (e.width - t.width) / 2;
+	}
+};
+//#endregion
+export { i as Popover };
+
+//# sourceMappingURL=index.js.map

package/dist/display/popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/display/popover/index.ts"],"sourcesContent":["/**\n * Popover - Rich content popup on click\n * @countermeasure/web-components/display/popover\n */\n\nimport { uniqueId } from '../../primitives/utils'\nimport DOMPurify from 'dompurify'\nimport { type PopoverConfig, type PopoverPlacement } from './types'\n\nexport type { PopoverConfig, PopoverPlacement } from './types'\n\n/** Query all focusable elements within a container */\nfunction getFocusableElements(container: HTMLElement): HTMLElement[] {\n  const selector = [\n    'a[href]',\n    'button:not([disabled])',\n    'input:not([disabled])',\n    'select:not([disabled])',\n    'textarea:not([disabled])',\n    '[tabindex]:not([tabindex=\"-1\"])',\n  ].join(', ')\n\n  return Array.from(container.querySelectorAll<HTMLElement>(selector))\n}\n\n/** Gap in pixels between trigger and popover */\nconst POPOVER_GAP = 8\n\nexport class Popover {\n  private readonly trigger: HTMLElement\n  private readonly placement: PopoverPlacement\n  private readonly closeOnClickOutside: boolean\n  private readonly closeOnEscape: boolean\n  private readonly className: string | undefined\n  private readonly onOpenCallback: (() => void) | undefined\n  private readonly onCloseCallback: (() => void) | undefined\n  private readonly popoverId: string\n\n  private popoverEl: HTMLElement | null = null\n  private contentEl: HTMLElement | null = null\n  private content: HTMLElement | string\n  private opened = false\n  private destroyed = false\n\n  /** Bound event handlers for cleanup */\n  private readonly handleTriggerClick: () => void\n  private readonly handleDocumentClick: (e: MouseEvent) => void\n  private readonly handleKeyDown: (e: KeyboardEvent) => void\n\n  constructor(config: PopoverConfig) {\n    this.trigger = config.trigger\n    this.content = config.content\n    this.placement = config.placement ?? 'bottom'\n    this.closeOnClickOutside = config.closeOnClickOutside !== false\n    this.closeOnEscape = config.closeOnEscape !== false\n    this.className = config.className\n    this.onOpenCallback = config.onOpen\n    this.onCloseCallback = config.onClose\n    this.popoverId = uniqueId('cmm-popover')\n\n    this.handleTriggerClick = () => {\n      this.toggle()\n    }\n\n    this.handleDocumentClick = (e: MouseEvent) => {\n      const target = e.target\n      if (\n        target instanceof Node &&\n        this.popoverEl &&\n        !this.popoverEl.contains(target) &&\n        !this.trigger.contains(target)\n      ) {\n        this.close()\n      }\n    }\n\n    this.handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault()\n        this.close()\n        this.trigger.focus()\n      }\n    }\n\n    this.trigger.setAttribute('aria-haspopup', 'dialog')\n    this.trigger.setAttribute('aria-expanded', 'false')\n    this.trigger.addEventListener('click', this.handleTriggerClick)\n  }\n\n  /** Check whether the popover is currently open */\n  isOpen(): boolean {\n    return this.opened\n  }\n\n  /** Open the popover */\n  open(): void {\n    if (this.destroyed || this.opened) {\n      return\n    }\n\n    this.opened = true\n    this.createPopoverElement()\n    this.positionPopover()\n\n    if (this.popoverEl) {\n      // Force reflow before adding open class for transition\n      void this.popoverEl.offsetHeight\n      this.popoverEl.classList.add('cmm-popover--open')\n    }\n\n    this.trigger.setAttribute('aria-expanded', 'true')\n\n    // Add document listeners\n    if (this.closeOnClickOutside) {\n      // Delay adding click listener to avoid immediate close from the same click\n      setTimeout(() => {\n        document.addEventListener('click', this.handleDocumentClick)\n      }, 0)\n    }\n\n    if (this.closeOnEscape) {\n      document.addEventListener('keydown', this.handleKeyDown)\n    }\n\n    // Focus first focusable element inside popover\n    if (this.popoverEl) {\n      const focusable = getFocusableElements(this.popoverEl)\n      const first = focusable[0]\n      if (first) {\n        first.focus()\n      } else {\n        this.popoverEl.setAttribute('tabindex', '-1')\n        this.popoverEl.focus()\n      }\n    }\n\n    this.onOpenCallback?.()\n  }\n\n  /** Close the popover */\n  close(): void {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n    this.trigger.setAttribute('aria-expanded', 'false')\n\n    document.removeEventListener('click', this.handleDocumentClick)\n    document.removeEventListener('keydown', this.handleKeyDown)\n\n    if (this.popoverEl) {\n      this.popoverEl.classList.remove('cmm-popover--open')\n\n      const el = this.popoverEl\n      // Remove after transition\n      setTimeout(() => {\n        el.remove()\n      }, 200)\n\n      this.popoverEl = null\n      this.contentEl = null\n    }\n\n    this.onCloseCallback?.()\n  }\n\n  /** Toggle the popover open/closed */\n  toggle(): void {\n    if (this.opened) {\n      this.close()\n    } else {\n      this.open()\n    }\n  }\n\n  /** Update the popover content */\n  setContent(content: HTMLElement | string): void {\n    this.content = content\n    if (this.contentEl) {\n      this.renderContent()\n    }\n  }\n\n  /** Remove all listeners and clean up */\n  destroy(): void {\n    if (this.destroyed) {\n      return\n    }\n    this.destroyed = true\n\n    this.close()\n\n    this.trigger.removeEventListener('click', this.handleTriggerClick)\n    this.trigger.removeAttribute('aria-haspopup')\n    this.trigger.removeAttribute('aria-expanded')\n  }\n\n  /** Create the popover DOM element and append to body */\n  private createPopoverElement(): void {\n    // Remove existing popover if present\n    if (this.popoverEl) {\n      this.popoverEl.remove()\n    }\n\n    const popover = document.createElement('div')\n    popover.className = 'cmm-popover'\n    popover.id = this.popoverId\n\n    if (this.className) {\n      popover.classList.add(this.className)\n    }\n\n    // Content container\n    const contentEl = document.createElement('div')\n    contentEl.className = 'cmm-popover__content'\n    popover.appendChild(contentEl)\n\n    document.body.appendChild(popover)\n\n    this.popoverEl = popover\n    this.contentEl = contentEl\n\n    this.renderContent()\n  }\n\n  /** Render the content into the content element */\n  private renderContent(): void {\n    if (!this.contentEl) {\n      return\n    }\n\n    this.contentEl.innerHTML = ''\n\n    if (typeof this.content === 'string') {\n      this.contentEl.innerHTML = DOMPurify.sanitize(this.content)\n    } else {\n      this.contentEl.appendChild(this.content)\n    }\n  }\n\n  /** Position the popover relative to the trigger element */\n  private positionPopover(): void {\n    if (!this.popoverEl) {\n      return\n    }\n\n    const triggerRect = this.trigger.getBoundingClientRect()\n    const popoverRect = this.popoverEl.getBoundingClientRect()\n    const viewportWidth = window.innerWidth\n    const viewportHeight = window.innerHeight\n\n    let top = 0\n    let left = 0\n\n    const basePlacement = this.placement.split('-')[0] as\n      | 'top'\n      | 'bottom'\n      | 'left'\n      | 'right'\n      | undefined\n    const alignment = this.placement.includes('-')\n      ? (this.placement.split('-')[1] as 'start' | 'end' | undefined)\n      : undefined\n\n    const effectivePlacement = basePlacement ?? 'bottom'\n\n    switch (effectivePlacement) {\n      case 'top': {\n        top = triggerRect.top - popoverRect.height - POPOVER_GAP\n        left = this.getAlignedLeft(triggerRect, popoverRect, alignment)\n        break\n      }\n      case 'bottom': {\n        top = triggerRect.bottom + POPOVER_GAP\n        left = this.getAlignedLeft(triggerRect, popoverRect, alignment)\n        break\n      }\n      case 'left': {\n        top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2\n        left = triggerRect.left - popoverRect.width - POPOVER_GAP\n        break\n      }\n      case 'right': {\n        top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2\n        left = triggerRect.right + POPOVER_GAP\n        break\n      }\n    }\n\n    // Auto-flip vertically if not enough space\n    if (effectivePlacement === 'top' && top < 0) {\n      top = triggerRect.bottom + POPOVER_GAP\n    } else if (effectivePlacement === 'bottom' && top + popoverRect.height > viewportHeight) {\n      top = triggerRect.top - popoverRect.height - POPOVER_GAP\n    }\n\n    // Clamp to viewport\n    left = Math.max(4, Math.min(left, viewportWidth - popoverRect.width - 4))\n    top = Math.max(4, Math.min(top, viewportHeight - popoverRect.height - 4))\n\n    this.popoverEl.style.left = `${String(left)}px`\n    this.popoverEl.style.top = `${String(top)}px`\n  }\n\n  /** Get the left position based on alignment */\n  private getAlignedLeft(\n    triggerRect: DOMRect,\n    popoverRect: DOMRect,\n    alignment: 'start' | 'end' | undefined\n  ): number {\n    if (alignment === 'start') {\n      return triggerRect.left\n    }\n    if (alignment === 'end') {\n      return triggerRect.right - popoverRect.width\n    }\n    return triggerRect.left + (triggerRect.width - popoverRect.width) / 2\n  }\n}\n"],"mappings":"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"}

package/dist/display/popover/types.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Popover type definitions
+ * @countermeasure/web-components/display/popover
+ */
+export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+export interface PopoverConfig {
+    trigger: HTMLElement;
+    content: HTMLElement | string;
+    placement?: PopoverPlacement;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    className?: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/display/popover/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/display/popover/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,gBAAgB,GACxB,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,WAAW,GACX,SAAS,GACT,cAAc,GACd,YAAY,CAAA;AAEhB,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,WAAW,CAAA;IACpB,OAAO,EAAE,WAAW,GAAG,MAAM,CAAA;IAC7B,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB"}

package/dist/display/progress/index.d.ts

@@ -0,0 +1,28 @@
+import { ProgressConfig } from './types';
+export type { ProgressConfig, ProgressVariant, ProgressSize } from './types';
+export declare class Progress {
+    readonly el: HTMLDivElement;
+    private readonly progressId;
+    private readonly variant;
+    private readonly size;
+    private readonly showLabel;
+    private currentValue;
+    private currentLabel;
+    /** References to inner elements for updates */
+    private fillEl;
+    private labelEl;
+    private circleFillEl;
+    constructor(config: ProgressConfig);
+    /** Update the progress value (0-100) */
+    setValue(value: number): void;
+    /** Set a custom label or null to revert to percentage */
+    setLabel(label: string | null): void;
+    /** Remove the progress from the DOM */
+    destroy(): void;
+    private buildClassName;
+    private buildLinear;
+    private buildCircular;
+    private getLabelText;
+    private updateLabelText;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/display/progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/display/progress/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,KAAK,cAAc,EAA2C,MAAM,SAAS,CAAA;AAEtF,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAU5E,qBAAa,QAAQ;IACnB,SAAgB,EAAE,EAAE,cAAc,CAAA;IAElC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAQ;IACnC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiB;IACzC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAc;IACnC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAS;IACnC,OAAO,CAAC,YAAY,CAAoB;IACxC,OAAO,CAAC,YAAY,CAAoB;IAExC,+CAA+C;IAC/C,OAAO,CAAC,MAAM,CAA8B;IAC5C,OAAO,CAAC,OAAO,CAAgD;IAC/D,OAAO,CAAC,YAAY,CAAgC;gBAExC,MAAM,EAAE,cAAc;IAwClC,wCAAwC;IACxC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAiB7B,yDAAyD;IACzD,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IASpC,uCAAuC;IACvC,OAAO,IAAI,IAAI;IAIf,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,WAAW;IAwBnB,OAAO,CAAC,aAAa;IAiDrB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,eAAe;CAKxB"}

package/dist/display/progress/index.js

@@ -0,0 +1,81 @@
+import { n as e, t } from "../../utils-Cn_W3h3f.js";
+//#region src/display/progress/index.ts
+var n = 2 * Math.PI * 16;
+function r(e) {
+	return Math.min(100, Math.max(0, e));
+}
+var i = class {
+	el;
+	progressId;
+	variant;
+	size;
+	showLabel;
+	currentValue;
+	currentLabel;
+	fillEl = null;
+	labelEl = null;
+	circleFillEl = null;
+	constructor(n) {
+		this.progressId = e("cmm-progress"), this.variant = n.variant ?? "linear", this.size = n.size ?? "md", this.showLabel = n.showLabel === !0, this.currentLabel = n.label, this.currentValue = n.value === void 0 ? void 0 : r(n.value), this.el = document.createElement("div"), this.el.id = this.progressId, this.el.setAttribute("role", "progressbar"), this.el.setAttribute("aria-valuemin", "0"), this.el.setAttribute("aria-valuemax", "100"), this.currentValue !== void 0 && this.el.setAttribute("aria-valuenow", String(this.currentValue)), this.el.setAttribute("aria-label", n.ariaLabel ?? "Progress"), this.el.className = this.buildClassName(n.className), n.color && this.el.style.setProperty("--cmm-progress-color", n.color), this.variant === "linear" ? this.buildLinear() : this.buildCircular(), n.container !== void 0 && t(n.container).appendChild(this.el);
+	}
+	setValue(e) {
+		if (this.currentValue = r(e), this.el.setAttribute("aria-valuenow", String(this.currentValue)), this.el.classList.remove("cmm-progress--indeterminate"), this.variant === "linear") this.fillEl && (this.fillEl.style.width = `${String(this.currentValue)}%`);
+		else if (this.circleFillEl) {
+			let e = n * (1 - this.currentValue / 100);
+			this.circleFillEl.setAttribute("stroke-dashoffset", String(e));
+		}
+		this.updateLabelText();
+	}
+	setLabel(e) {
+		e === null ? this.currentLabel = void 0 : this.currentLabel = e, this.updateLabelText();
+	}
+	destroy() {
+		this.el.remove();
+	}
+	buildClassName(e) {
+		let t = [
+			"cmm-progress",
+			`cmm-progress--${this.variant}`,
+			`cmm-progress--${this.size}`
+		];
+		return this.currentValue === void 0 && t.push("cmm-progress--indeterminate"), e && t.push(e), t.join(" ");
+	}
+	buildLinear() {
+		let e = document.createElement("div");
+		e.className = "cmm-progress__track";
+		let t = document.createElement("div");
+		if (t.className = "cmm-progress__fill", this.currentValue !== void 0 && (t.style.width = `${String(this.currentValue)}%`), e.appendChild(t), this.el.appendChild(e), this.fillEl = t, this.showLabel) {
+			let e = document.createElement("span");
+			e.className = "cmm-progress__label", e.textContent = this.getLabelText(), this.el.appendChild(e), this.labelEl = e;
+		}
+	}
+	buildCircular() {
+		let e = "http://www.w3.org/2000/svg", t = document.createElementNS(e, "svg");
+		t.setAttribute("viewBox", "0 0 36 36");
+		let r = document.createElementNS(e, "circle");
+		r.setAttribute("class", "cmm-progress__circle-bg"), r.setAttribute("cx", "18"), r.setAttribute("cy", "18"), r.setAttribute("r", "16"), r.setAttribute("stroke-width", "3"), t.appendChild(r);
+		let i = document.createElementNS(e, "circle");
+		if (i.setAttribute("class", "cmm-progress__circle-fill"), i.setAttribute("cx", "18"), i.setAttribute("cy", "18"), i.setAttribute("r", "16"), i.setAttribute("stroke-width", "3"), i.setAttribute("stroke-dasharray", String(n)), this.currentValue !== void 0) {
+			let e = n * (1 - this.currentValue / 100);
+			i.setAttribute("stroke-dashoffset", String(e));
+		} else {
+			let e = n * .75;
+			i.setAttribute("stroke-dashoffset", String(e));
+		}
+		if (t.appendChild(i), this.circleFillEl = i, this.showLabel) {
+			let n = document.createElementNS(e, "text");
+			n.setAttribute("class", "cmm-progress__circle-label"), n.setAttribute("x", "18"), n.setAttribute("y", "18"), n.textContent = this.getLabelText(), t.appendChild(n), this.labelEl = n;
+		}
+		this.el.appendChild(t);
+	}
+	getLabelText() {
+		return this.currentLabel === void 0 ? this.currentValue === void 0 ? "" : `${String(this.currentValue)}%` : this.currentLabel;
+	}
+	updateLabelText() {
+		this.labelEl && (this.labelEl.textContent = this.getLabelText());
+	}
+};
+//#endregion
+export { i as Progress };
+
+//# sourceMappingURL=index.js.map

package/dist/display/progress/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/display/progress/index.ts"],"sourcesContent":["/**\n * Progress - Linear and circular progress indicator\n * @countermeasure/web-components/display/progress\n */\n\nimport { resolveContainer, uniqueId } from '../../primitives/utils'\nimport { type ProgressConfig, type ProgressVariant, type ProgressSize } from './types'\n\nexport type { ProgressConfig, ProgressVariant, ProgressSize } from './types'\n\n/** Circumference for SVG circle with r=16: 2 * PI * 16 */\nconst CIRCUMFERENCE = 2 * Math.PI * 16\n\n/** Clamp a number between 0 and 100 */\nfunction clampValue(value: number): number {\n  return Math.min(100, Math.max(0, value))\n}\n\nexport class Progress {\n  public readonly el: HTMLDivElement\n\n  private readonly progressId: string\n  private readonly variant: ProgressVariant\n  private readonly size: ProgressSize\n  private readonly showLabel: boolean\n  private currentValue: number | undefined\n  private currentLabel: string | undefined\n\n  /** References to inner elements for updates */\n  private fillEl: HTMLDivElement | null = null\n  private labelEl: HTMLSpanElement | SVGTextElement | null = null\n  private circleFillEl: SVGCircleElement | null = null\n\n  constructor(config: ProgressConfig) {\n    this.progressId = uniqueId('cmm-progress')\n    this.variant = config.variant ?? 'linear'\n    this.size = config.size ?? 'md'\n    this.showLabel = config.showLabel === true\n    this.currentLabel = config.label\n    this.currentValue = config.value !== undefined ? clampValue(config.value) : undefined\n\n    // Create root element\n    this.el = document.createElement('div')\n    this.el.id = this.progressId\n    this.el.setAttribute('role', 'progressbar')\n    this.el.setAttribute('aria-valuemin', '0')\n    this.el.setAttribute('aria-valuemax', '100')\n\n    if (this.currentValue !== undefined) {\n      this.el.setAttribute('aria-valuenow', String(this.currentValue))\n    }\n\n    this.el.setAttribute('aria-label', config.ariaLabel ?? 'Progress')\n\n    this.el.className = this.buildClassName(config.className)\n\n    if (config.color) {\n      this.el.style.setProperty('--cmm-progress-color', config.color)\n    }\n\n    if (this.variant === 'linear') {\n      this.buildLinear()\n    } else {\n      this.buildCircular()\n    }\n\n    // Mount if container provided\n    if (config.container !== undefined) {\n      const parent = resolveContainer(config.container)\n      parent.appendChild(this.el)\n    }\n  }\n\n  /** Update the progress value (0-100) */\n  setValue(value: number): void {\n    this.currentValue = clampValue(value)\n    this.el.setAttribute('aria-valuenow', String(this.currentValue))\n    this.el.classList.remove('cmm-progress--indeterminate')\n\n    if (this.variant === 'linear') {\n      if (this.fillEl) {\n        this.fillEl.style.width = `${String(this.currentValue)}%`\n      }\n    } else if (this.circleFillEl) {\n      const offset = CIRCUMFERENCE * (1 - this.currentValue / 100)\n      this.circleFillEl.setAttribute('stroke-dashoffset', String(offset))\n    }\n\n    this.updateLabelText()\n  }\n\n  /** Set a custom label or null to revert to percentage */\n  setLabel(label: string | null): void {\n    if (label !== null) {\n      this.currentLabel = label\n    } else {\n      this.currentLabel = undefined\n    }\n    this.updateLabelText()\n  }\n\n  /** Remove the progress from the DOM */\n  destroy(): void {\n    this.el.remove()\n  }\n\n  private buildClassName(extra?: string): string {\n    const classes = ['cmm-progress', `cmm-progress--${this.variant}`, `cmm-progress--${this.size}`]\n\n    if (this.currentValue === undefined) {\n      classes.push('cmm-progress--indeterminate')\n    }\n\n    if (extra) {\n      classes.push(extra)\n    }\n\n    return classes.join(' ')\n  }\n\n  private buildLinear(): void {\n    const track = document.createElement('div')\n    track.className = 'cmm-progress__track'\n\n    const fill = document.createElement('div')\n    fill.className = 'cmm-progress__fill'\n\n    if (this.currentValue !== undefined) {\n      fill.style.width = `${String(this.currentValue)}%`\n    }\n\n    track.appendChild(fill)\n    this.el.appendChild(track)\n    this.fillEl = fill\n\n    if (this.showLabel) {\n      const label = document.createElement('span')\n      label.className = 'cmm-progress__label'\n      label.textContent = this.getLabelText()\n      this.el.appendChild(label)\n      this.labelEl = label\n    }\n  }\n\n  private buildCircular(): void {\n    const ns = 'http://www.w3.org/2000/svg'\n    const svg = document.createElementNS(ns, 'svg')\n    svg.setAttribute('viewBox', '0 0 36 36')\n\n    // Background circle\n    const bgCircle = document.createElementNS(ns, 'circle')\n    bgCircle.setAttribute('class', 'cmm-progress__circle-bg')\n    bgCircle.setAttribute('cx', '18')\n    bgCircle.setAttribute('cy', '18')\n    bgCircle.setAttribute('r', '16')\n    bgCircle.setAttribute('stroke-width', '3')\n    svg.appendChild(bgCircle)\n\n    // Progress circle\n    const fillCircle = document.createElementNS(ns, 'circle')\n    fillCircle.setAttribute('class', 'cmm-progress__circle-fill')\n    fillCircle.setAttribute('cx', '18')\n    fillCircle.setAttribute('cy', '18')\n    fillCircle.setAttribute('r', '16')\n    fillCircle.setAttribute('stroke-width', '3')\n    fillCircle.setAttribute('stroke-dasharray', String(CIRCUMFERENCE))\n\n    if (this.currentValue !== undefined) {\n      const offset = CIRCUMFERENCE * (1 - this.currentValue / 100)\n      fillCircle.setAttribute('stroke-dashoffset', String(offset))\n    } else {\n      // Indeterminate: show a partial arc\n      const offset = CIRCUMFERENCE * 0.75\n      fillCircle.setAttribute('stroke-dashoffset', String(offset))\n    }\n\n    svg.appendChild(fillCircle)\n    this.circleFillEl = fillCircle\n\n    // Optional label inside circle\n    if (this.showLabel) {\n      const text = document.createElementNS(ns, 'text')\n      text.setAttribute('class', 'cmm-progress__circle-label')\n      text.setAttribute('x', '18')\n      text.setAttribute('y', '18')\n      text.textContent = this.getLabelText()\n      svg.appendChild(text)\n      this.labelEl = text\n    }\n\n    this.el.appendChild(svg)\n  }\n\n  private getLabelText(): string {\n    if (this.currentLabel !== undefined) {\n      return this.currentLabel\n    }\n    if (this.currentValue !== undefined) {\n      return `${String(this.currentValue)}%`\n    }\n    return ''\n  }\n\n  private updateLabelText(): void {\n    if (this.labelEl) {\n      this.labelEl.textContent = this.getLabelText()\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/display/progress/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Progress type definitions
+ * @countermeasure/web-components/display/progress
+ */
+export type ProgressVariant = 'linear' | 'circular';
+export type ProgressSize = 'sm' | 'md' | 'lg';
+export interface ProgressConfig {
+    container?: HTMLElement | string;
+    value?: number;
+    variant?: ProgressVariant;
+    size?: ProgressSize;
+    showLabel?: boolean;
+    label?: string;
+    color?: string;
+    className?: string;
+    ariaLabel?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/display/progress/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/display/progress/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,UAAU,CAAA;AACnD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE7C,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB"}

package/dist/display/severity-indicator/index.d.ts

@@ -0,0 +1,19 @@
+import { SeverityIndicatorConfig, SeverityLevel } from './types';
+export type { SeverityIndicatorConfig, SeverityLevel } from './types';
+export declare class SeverityIndicator {
+    readonly el: HTMLDivElement;
+    private readonly indicatorId;
+    private currentLevel;
+    private iconEl;
+    private labelEl;
+    private readonly showLabel;
+    private readonly showIcon;
+    private readonly compact;
+    constructor(config: SeverityIndicatorConfig);
+    /** Update the displayed severity level */
+    setLevel(level: SeverityLevel): void;
+    /** Remove the element from the DOM and clean up */
+    destroy(): void;
+    private buildClassName;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/display/severity-indicator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/display/severity-indicator/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,uBAAuB,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAA;AAG1E,YAAY,EAAE,uBAAuB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAYrE,qBAAa,iBAAiB;IAC5B,SAAgB,EAAE,EAAE,cAAc,CAAA;IAElC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAQ;IACpC,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,OAAO,CAA+B;IAC9C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAS;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAClC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;gBAErB,MAAM,EAAE,uBAAuB;IAqC3C,0CAA0C;IAC1C,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAWpC,mDAAmD;IACnD,OAAO,IAAI,IAAI;IAIf,OAAO,CAAC,cAAc;CAUvB"}

package/dist/display/severity-indicator/index.js

@@ -0,0 +1,36 @@
+import { n as e, t } from "../../utils-Cn_W3h3f.js";
+//#region src/display/severity-indicator/index.ts
+var n = {
+	critical: "Critical",
+	high: "High",
+	medium: "Medium",
+	low: "Low",
+	info: "Info",
+	none: "None"
+}, r = class {
+	el;
+	indicatorId;
+	currentLevel;
+	iconEl = null;
+	labelEl = null;
+	showLabel;
+	showIcon;
+	compact;
+	constructor(r) {
+		this.indicatorId = e("cmm-severity"), this.currentLevel = r.level, this.showLabel = r.showLabel !== !1, this.showIcon = r.showIcon !== !1, this.compact = r.compact === !0, this.el = document.createElement("div"), this.el.id = this.indicatorId, this.el.className = this.buildClassName(r.className), this.el.setAttribute("role", "status"), this.el.setAttribute("aria-label", `Severity: ${n[this.currentLevel]}`), this.showIcon && (this.iconEl = document.createElement("span"), this.iconEl.className = "cmm-severity__icon", this.iconEl.setAttribute("aria-hidden", "true"), this.el.appendChild(this.iconEl)), this.showLabel && (this.labelEl = document.createElement("span"), this.labelEl.className = "cmm-severity__label", this.labelEl.textContent = n[this.currentLevel], this.el.appendChild(this.labelEl)), r.container !== void 0 && t(r.container).appendChild(this.el);
+	}
+	setLevel(e) {
+		this.el.classList.remove(`cmm-severity--${this.currentLevel}`), this.currentLevel = e, this.el.classList.add(`cmm-severity--${this.currentLevel}`), this.el.setAttribute("aria-label", `Severity: ${n[this.currentLevel]}`), this.labelEl !== null && (this.labelEl.textContent = n[this.currentLevel]);
+	}
+	destroy() {
+		this.el.remove();
+	}
+	buildClassName(e) {
+		let t = ["cmm-severity", `cmm-severity--${this.currentLevel}`];
+		return this.compact && t.push("cmm-severity--compact"), e && t.push(e), t.join(" ");
+	}
+};
+//#endregion
+export { r as SeverityIndicator };
+
+//# sourceMappingURL=index.js.map

package/dist/display/severity-indicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/display/severity-indicator/index.ts"],"sourcesContent":["/**\n * SeverityIndicator - Visual severity level display for CVEs, alerts, etc.\n * @countermeasure/web-components/display/severity-indicator\n */\n\nimport { type SeverityIndicatorConfig, type SeverityLevel } from './types'\nimport { resolveContainer, uniqueId } from '../../primitives/utils'\n\nexport type { SeverityIndicatorConfig, SeverityLevel } from './types'\n\n/** Capitalized labels for each severity level */\nconst LEVEL_LABELS: Record<SeverityLevel, string> = {\n  critical: 'Critical',\n  high: 'High',\n  medium: 'Medium',\n  low: 'Low',\n  info: 'Info',\n  none: 'None',\n}\n\nexport class SeverityIndicator {\n  public readonly el: HTMLDivElement\n\n  private readonly indicatorId: string\n  private currentLevel: SeverityLevel\n  private iconEl: HTMLSpanElement | null = null\n  private labelEl: HTMLSpanElement | null = null\n  private readonly showLabel: boolean\n  private readonly showIcon: boolean\n  private readonly compact: boolean\n\n  constructor(config: SeverityIndicatorConfig) {\n    this.indicatorId = uniqueId('cmm-severity')\n    this.currentLevel = config.level\n    this.showLabel = config.showLabel !== false\n    this.showIcon = config.showIcon !== false\n    this.compact = config.compact === true\n\n    // Create root element\n    this.el = document.createElement('div')\n    this.el.id = this.indicatorId\n    this.el.className = this.buildClassName(config.className)\n    this.el.setAttribute('role', 'status')\n    this.el.setAttribute('aria-label', `Severity: ${LEVEL_LABELS[this.currentLevel]}`)\n\n    // Create icon (colored dot)\n    if (this.showIcon) {\n      this.iconEl = document.createElement('span')\n      this.iconEl.className = 'cmm-severity__icon'\n      this.iconEl.setAttribute('aria-hidden', 'true')\n      this.el.appendChild(this.iconEl)\n    }\n\n    // Create label\n    if (this.showLabel) {\n      this.labelEl = document.createElement('span')\n      this.labelEl.className = 'cmm-severity__label'\n      this.labelEl.textContent = LEVEL_LABELS[this.currentLevel]\n      this.el.appendChild(this.labelEl)\n    }\n\n    // Mount if container provided\n    if (config.container !== undefined) {\n      const parent = resolveContainer(config.container)\n      parent.appendChild(this.el)\n    }\n  }\n\n  /** Update the displayed severity level */\n  setLevel(level: SeverityLevel): void {\n    this.el.classList.remove(`cmm-severity--${this.currentLevel}`)\n    this.currentLevel = level\n    this.el.classList.add(`cmm-severity--${this.currentLevel}`)\n    this.el.setAttribute('aria-label', `Severity: ${LEVEL_LABELS[this.currentLevel]}`)\n\n    if (this.labelEl !== null) {\n      this.labelEl.textContent = LEVEL_LABELS[this.currentLevel]\n    }\n  }\n\n  /** Remove the element from the DOM and clean up */\n  destroy(): void {\n    this.el.remove()\n  }\n\n  private buildClassName(extra?: string): string {\n    const classes = ['cmm-severity', `cmm-severity--${this.currentLevel}`]\n    if (this.compact) {\n      classes.push('cmm-severity--compact')\n    }\n    if (extra) {\n      classes.push(extra)\n    }\n    return classes.join(' ')\n  }\n}\n"],"mappings":";;AAWA,IAAM,IAA8C;CAClD,UAAU;CACV,MAAM;CACN,QAAQ;CACR,KAAK;CACL,MAAM;CACN,MAAM;CACP,EAEY,IAAb,MAA+B;CAC7B;CAEA;CACA;CACA,SAAyC;CACzC,UAA0C;CAC1C;CACA;CACA;CAEA,YAAY,GAAiC;AA+B3C,EA9BA,KAAK,cAAc,EAAS,eAAe,EAC3C,KAAK,eAAe,EAAO,OAC3B,KAAK,YAAY,EAAO,cAAc,IACtC,KAAK,WAAW,EAAO,aAAa,IACpC,KAAK,UAAU,EAAO,YAAY,IAGlC,KAAK,KAAK,SAAS,cAAc,MAAM,EACvC,KAAK,GAAG,KAAK,KAAK,aAClB,KAAK,GAAG,YAAY,KAAK,eAAe,EAAO,UAAU,EACzD,KAAK,GAAG,aAAa,QAAQ,SAAS,EACtC,KAAK,GAAG,aAAa,cAAc,aAAa,EAAa,KAAK,gBAAgB,EAG9E,KAAK,aACP,KAAK,SAAS,SAAS,cAAc,OAAO,EAC5C,KAAK,OAAO,YAAY,sBACxB,KAAK,OAAO,aAAa,eAAe,OAAO,EAC/C,KAAK,GAAG,YAAY,KAAK,OAAO,GAI9B,KAAK,cACP,KAAK,UAAU,SAAS,cAAc,OAAO,EAC7C,KAAK,QAAQ,YAAY,uBACzB,KAAK,QAAQ,cAAc,EAAa,KAAK,eAC7C,KAAK,GAAG,YAAY,KAAK,QAAQ,GAI/B,EAAO,cAAc,KAAA,KACR,EAAiB,EAAO,UAAU,CAC1C,YAAY,KAAK,GAAG;;CAK/B,SAAS,GAA4B;AAMnC,EALA,KAAK,GAAG,UAAU,OAAO,iBAAiB,KAAK,eAAe,EAC9D,KAAK,eAAe,GACpB,KAAK,GAAG,UAAU,IAAI,iBAAiB,KAAK,eAAe,EAC3D,KAAK,GAAG,aAAa,cAAc,aAAa,EAAa,KAAK,gBAAgB,EAE9E,KAAK,YAAY,SACnB,KAAK,QAAQ,cAAc,EAAa,KAAK;;CAKjD,UAAgB;AACd,OAAK,GAAG,QAAQ;;CAGlB,eAAuB,GAAwB;EAC7C,IAAM,IAAU,CAAC,gBAAgB,iBAAiB,KAAK,eAAe;AAOtE,SANI,KAAK,WACP,EAAQ,KAAK,wBAAwB,EAEnC,KACF,EAAQ,KAAK,EAAM,EAEd,EAAQ,KAAK,IAAI"}

package/dist/display/severity-indicator/types.d.ts

@@ -0,0 +1,14 @@
+/**
+ * SeverityIndicator type definitions
+ * @countermeasure/web-components/display/severity-indicator
+ */
+export type SeverityLevel = 'critical' | 'high' | 'medium' | 'low' | 'info' | 'none';
+export interface SeverityIndicatorConfig {
+    container?: HTMLElement | string;
+    level: SeverityLevel;
+    showLabel?: boolean;
+    showIcon?: boolean;
+    compact?: boolean;
+    className?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/display/severity-indicator/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/display/severity-indicator/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAA;AAEpF,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAChC,KAAK,EAAE,aAAa,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB"}

package/dist/display/stat-card/index.d.ts

@@ -0,0 +1,23 @@
+import { StatCardConfig, TrendConfig } from './types';
+export type { StatCardConfig, TrendConfig, TrendDirection } from './types';
+export declare class StatCard {
+    readonly el: HTMLDivElement;
+    private readonly statCardId;
+    private labelEl;
+    private valueEl;
+    private trendEl;
+    private iconEl;
+    constructor(config: StatCardConfig);
+    /** Update the displayed value */
+    setValue(value: string | number): void;
+    /** Update or set the trend indicator */
+    setTrend(trend: TrendConfig): void;
+    /** Update the label text */
+    setLabel(label: string): void;
+    /** Remove the stat card from the DOM and clean up */
+    destroy(): void;
+    private buildClassName;
+    private formatValue;
+    private createTrendEl;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/display/stat-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/display/stat-card/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAuB,MAAM,SAAS,CAAA;AAGpF,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAU1E,qBAAa,QAAQ;IACnB,SAAgB,EAAE,EAAE,cAAc,CAAA;IAElC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAQ;IACnC,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,OAAO,CAA8B;IAC7C,OAAO,CAAC,MAAM,CAA8B;gBAEhC,MAAM,EAAE,cAAc;IA8ClC,iCAAiC;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAItC,wCAAwC;IACxC,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAQlC,4BAA4B;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B,qDAAqD;IACrD,OAAO,IAAI,IAAI;IAIf,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,aAAa;CA2BtB"}

package/dist/display/stat-card/index.js

@@ -0,0 +1,54 @@
+import { n as e, t } from "../../utils-Cn_W3h3f.js";
+//#region src/display/stat-card/index.ts
+var n = {
+	up: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m18 15-6-6-6 6\"/></svg>",
+	down: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>",
+	neutral: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"/><path d=\"m12 5 7 7-7 7\"/></svg>"
+}, r = class {
+	el;
+	statCardId;
+	labelEl;
+	valueEl;
+	trendEl = null;
+	iconEl = null;
+	constructor(n) {
+		this.statCardId = e("cmm-stat-card"), this.el = document.createElement("div"), this.el.id = this.statCardId, this.el.className = this.buildClassName(n.className);
+		let r = document.createElement("div");
+		r.className = "cmm-stat-card__header", this.labelEl = document.createElement("span"), this.labelEl.className = "cmm-stat-card__label", this.labelEl.textContent = n.label, r.appendChild(this.labelEl), n.icon !== void 0 && (this.iconEl = document.createElement("div"), this.iconEl.className = "cmm-stat-card__icon", this.iconEl.setAttribute("aria-hidden", "true"), this.iconEl.innerHTML = n.icon, r.appendChild(this.iconEl)), this.el.appendChild(r), this.valueEl = document.createElement("div"), this.valueEl.className = "cmm-stat-card__value", this.valueEl.textContent = this.formatValue(n.value), this.el.appendChild(this.valueEl), n.trend !== void 0 && (this.trendEl = this.createTrendEl(n.trend), this.el.appendChild(this.trendEl)), n.container !== void 0 && t(n.container).appendChild(this.el);
+	}
+	setValue(e) {
+		this.valueEl.textContent = this.formatValue(e);
+	}
+	setTrend(e) {
+		this.trendEl !== null && this.trendEl.remove(), this.trendEl = this.createTrendEl(e), this.el.appendChild(this.trendEl);
+	}
+	setLabel(e) {
+		this.labelEl.textContent = e;
+	}
+	destroy() {
+		this.el.remove();
+	}
+	buildClassName(e) {
+		let t = ["cmm-stat-card"];
+		return e && t.push(e), t.join(" ");
+	}
+	formatValue(e) {
+		return typeof e == "number" ? String(e) : e;
+	}
+	createTrendEl(e) {
+		let t = document.createElement("div");
+		t.className = `cmm-stat-card__trend cmm-stat-card__trend--${e.direction}`;
+		let r = document.createElement("span");
+		r.className = "cmm-stat-card__trend-arrow", r.setAttribute("aria-hidden", "true"), r.innerHTML = n[e.direction], t.appendChild(r);
+		let i = document.createElement("span");
+		if (i.className = "cmm-stat-card__trend-value", i.textContent = e.value, t.appendChild(i), e.label !== void 0) {
+			let n = document.createElement("span");
+			n.className = "cmm-stat-card__trend-label", n.textContent = e.label, t.appendChild(n);
+		}
+		return t;
+	}
+};
+//#endregion
+export { r as StatCard };
+
+//# sourceMappingURL=index.js.map

package/dist/display/stat-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/display/stat-card/index.ts"],"sourcesContent":["/**\n * StatCard - Metric display card with trend indicator\n * @countermeasure/web-components/display/stat-card\n */\n\nimport { type StatCardConfig, type TrendConfig, type TrendDirection } from './types'\nimport { resolveContainer, uniqueId } from '../../primitives/utils'\n\nexport type { StatCardConfig, TrendConfig, TrendDirection } from './types'\n\n/** SVG arrow icons for trend directions */\nconst TREND_ARROWS: Record<TrendDirection, string> = {\n  up: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m18 15-6-6-6 6\"/></svg>',\n  down: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>',\n  neutral:\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"/><path d=\"m12 5 7 7-7 7\"/></svg>',\n}\n\nexport class StatCard {\n  public readonly el: HTMLDivElement\n\n  private readonly statCardId: string\n  private labelEl: HTMLSpanElement\n  private valueEl: HTMLDivElement\n  private trendEl: HTMLDivElement | null = null\n  private iconEl: HTMLDivElement | null = null\n\n  constructor(config: StatCardConfig) {\n    this.statCardId = uniqueId('cmm-stat-card')\n\n    // Create root element\n    this.el = document.createElement('div')\n    this.el.id = this.statCardId\n    this.el.className = this.buildClassName(config.className)\n\n    // Create header (label + icon)\n    const headerEl = document.createElement('div')\n    headerEl.className = 'cmm-stat-card__header'\n\n    this.labelEl = document.createElement('span')\n    this.labelEl.className = 'cmm-stat-card__label'\n    this.labelEl.textContent = config.label\n    headerEl.appendChild(this.labelEl)\n\n    if (config.icon !== undefined) {\n      this.iconEl = document.createElement('div')\n      this.iconEl.className = 'cmm-stat-card__icon'\n      this.iconEl.setAttribute('aria-hidden', 'true')\n      this.iconEl.innerHTML = config.icon\n      headerEl.appendChild(this.iconEl)\n    }\n\n    this.el.appendChild(headerEl)\n\n    // Create value\n    this.valueEl = document.createElement('div')\n    this.valueEl.className = 'cmm-stat-card__value'\n    this.valueEl.textContent = this.formatValue(config.value)\n    this.el.appendChild(this.valueEl)\n\n    // Create trend\n    if (config.trend !== undefined) {\n      this.trendEl = this.createTrendEl(config.trend)\n      this.el.appendChild(this.trendEl)\n    }\n\n    // Mount if container provided\n    if (config.container !== undefined) {\n      const parent = resolveContainer(config.container)\n      parent.appendChild(this.el)\n    }\n  }\n\n  /** Update the displayed value */\n  setValue(value: string | number): void {\n    this.valueEl.textContent = this.formatValue(value)\n  }\n\n  /** Update or set the trend indicator */\n  setTrend(trend: TrendConfig): void {\n    if (this.trendEl !== null) {\n      this.trendEl.remove()\n    }\n    this.trendEl = this.createTrendEl(trend)\n    this.el.appendChild(this.trendEl)\n  }\n\n  /** Update the label text */\n  setLabel(label: string): void {\n    this.labelEl.textContent = label\n  }\n\n  /** Remove the stat card from the DOM and clean up */\n  destroy(): void {\n    this.el.remove()\n  }\n\n  private buildClassName(extra?: string): string {\n    const classes = ['cmm-stat-card']\n    if (extra) {\n      classes.push(extra)\n    }\n    return classes.join(' ')\n  }\n\n  private formatValue(value: string | number): string {\n    if (typeof value === 'number') {\n      return String(value)\n    }\n    return value\n  }\n\n  private createTrendEl(trend: TrendConfig): HTMLDivElement {\n    const trendEl = document.createElement('div')\n    trendEl.className = `cmm-stat-card__trend cmm-stat-card__trend--${trend.direction}`\n\n    // Arrow icon\n    const arrowEl = document.createElement('span')\n    arrowEl.className = 'cmm-stat-card__trend-arrow'\n    arrowEl.setAttribute('aria-hidden', 'true')\n    arrowEl.innerHTML = TREND_ARROWS[trend.direction]\n    trendEl.appendChild(arrowEl)\n\n    // Trend value\n    const valueSpan = document.createElement('span')\n    valueSpan.className = 'cmm-stat-card__trend-value'\n    valueSpan.textContent = trend.value\n    trendEl.appendChild(valueSpan)\n\n    // Trend label\n    if (trend.label !== undefined) {\n      const labelSpan = document.createElement('span')\n      labelSpan.className = 'cmm-stat-card__trend-label'\n      labelSpan.textContent = trend.label\n      trendEl.appendChild(labelSpan)\n    }\n\n    return trendEl\n  }\n}\n"],"mappings":";;AAWA,IAAM,IAA+C;CACnD,IAAI;CACJ,MAAM;CACN,SACE;CACH,EAEY,IAAb,MAAsB;CACpB;CAEA;CACA;CACA;CACA,UAAyC;CACzC,SAAwC;CAExC,YAAY,GAAwB;AAMlC,EALA,KAAK,aAAa,EAAS,gBAAgB,EAG3C,KAAK,KAAK,SAAS,cAAc,MAAM,EACvC,KAAK,GAAG,KAAK,KAAK,YAClB,KAAK,GAAG,YAAY,KAAK,eAAe,EAAO,UAAU;EAGzD,IAAM,IAAW,SAAS,cAAc,MAAM;AA+B9C,EA9BA,EAAS,YAAY,yBAErB,KAAK,UAAU,SAAS,cAAc,OAAO,EAC7C,KAAK,QAAQ,YAAY,wBACzB,KAAK,QAAQ,cAAc,EAAO,OAClC,EAAS,YAAY,KAAK,QAAQ,EAE9B,EAAO,SAAS,KAAA,MAClB,KAAK,SAAS,SAAS,cAAc,MAAM,EAC3C,KAAK,OAAO,YAAY,uBACxB,KAAK,OAAO,aAAa,eAAe,OAAO,EAC/C,KAAK,OAAO,YAAY,EAAO,MAC/B,EAAS,YAAY,KAAK,OAAO,GAGnC,KAAK,GAAG,YAAY,EAAS,EAG7B,KAAK,UAAU,SAAS,cAAc,MAAM,EAC5C,KAAK,QAAQ,YAAY,wBACzB,KAAK,QAAQ,cAAc,KAAK,YAAY,EAAO,MAAM,EACzD,KAAK,GAAG,YAAY,KAAK,QAAQ,EAG7B,EAAO,UAAU,KAAA,MACnB,KAAK,UAAU,KAAK,cAAc,EAAO,MAAM,EAC/C,KAAK,GAAG,YAAY,KAAK,QAAQ,GAI/B,EAAO,cAAc,KAAA,KACR,EAAiB,EAAO,UAAU,CAC1C,YAAY,KAAK,GAAG;;CAK/B,SAAS,GAA8B;AACrC,OAAK,QAAQ,cAAc,KAAK,YAAY,EAAM;;CAIpD,SAAS,GAA0B;AAKjC,EAJI,KAAK,YAAY,QACnB,KAAK,QAAQ,QAAQ,EAEvB,KAAK,UAAU,KAAK,cAAc,EAAM,EACxC,KAAK,GAAG,YAAY,KAAK,QAAQ;;CAInC,SAAS,GAAqB;AAC5B,OAAK,QAAQ,cAAc;;CAI7B,UAAgB;AACd,OAAK,GAAG,QAAQ;;CAGlB,eAAuB,GAAwB;EAC7C,IAAM,IAAU,CAAC,gBAAgB;AAIjC,SAHI,KACF,EAAQ,KAAK,EAAM,EAEd,EAAQ,KAAK,IAAI;;CAG1B,YAAoB,GAAgC;AAIlD,SAHI,OAAO,KAAU,WACZ,OAAO,EAAM,GAEf;;CAGT,cAAsB,GAAoC;EACxD,IAAM,IAAU,SAAS,cAAc,MAAM;AAC7C,IAAQ,YAAY,8CAA8C,EAAM;EAGxE,IAAM,IAAU,SAAS,cAAc,OAAO;AAI9C,EAHA,EAAQ,YAAY,8BACpB,EAAQ,aAAa,eAAe,OAAO,EAC3C,EAAQ,YAAY,EAAa,EAAM,YACvC,EAAQ,YAAY,EAAQ;EAG5B,IAAM,IAAY,SAAS,cAAc,OAAO;AAMhD,MALA,EAAU,YAAY,8BACtB,EAAU,cAAc,EAAM,OAC9B,EAAQ,YAAY,EAAU,EAG1B,EAAM,UAAU,KAAA,GAAW;GAC7B,IAAM,IAAY,SAAS,cAAc,OAAO;AAGhD,GAFA,EAAU,YAAY,8BACtB,EAAU,cAAc,EAAM,OAC9B,EAAQ,YAAY,EAAU;;AAGhC,SAAO"}